Skip to content

Adnan-The-Coder/plantomart-full-stack-application

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

100 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

PlantoMart Main Codebase

Status Status Status Status

Planto-Mart is a robust, full-stack eCommerce platform built for multi-vendor operations. It allows multiple vendors to create and manage their own online stores within a unified marketplace. Customers can browse products from various vendors, make purchases across different shops, and have a seamless experience on a single platform.

The platform is built with scalability, security, and ease of use in mind, enabling a wide range of businesses to set up their online presence, sell products, and track performance.

Built With

TypeScript NextJS React HonoJS pnpm TailwindCSS git Cloudflare Wrangler D1 Drizzle Nx Cloudflare Workers GitHub Actions Razorpay Google OAuth via GCP Supabase Auth BiomeJS Web Storage Open Next Adapter Node.js JavaScript IP Tracking (ipify) SQL

Built by Adnan


Key Features of PlantoMart:

  1. Multi-Vendor Support
  • Vendor Onboarding: Vendors can easily sign up and set up their stores. The registration process is straightforward, with a dedicated admin panel to manage all vendor activities.
  • Product Management: Vendors have the ability to list and manage products, update inventory, set pricing, and categorize products within their store.
  • Custom Storefronts: Each vendor gets a personalized storefront with the flexibility to customize their layout, branding, and product presentation.
  • Order Management: Vendors can manage customer orders, update order status, and track shipments in real-time through their own dashboard.
  1. Customer Experience
  • Product Discovery: Customers can easily search and filter through a wide range of products, and view detailed information, reviews, and ratings from different vendors.
  • Cross-Vendor Shopping Cart: Customers can add products from multiple vendors to a single cart and check out in one seamless transaction, with payment options supported across all vendors.
  • Secure Transactions: Payments are securely processed, and the platform supports multiple payment gateways, ensuring that both vendors and customers are protected.
  • Order Tracking: Once an order is placed, customers can track their shipments and receive updates until their items are delivered.
  1. Vendor Dashboard
  • Comprehensive Analytics: Vendors can track sales, customer behavior, and other key performance indicators (KPIs) via an easy-to-understand dashboard that offers real-time insights into their store’s performance.
  • Inventory Management: Vendors can manage their inventory, receive alerts when stock levels are low, and restock products efficiently.
  • Marketing Tools: Vendors have access to promotional tools like discount codes, flash sales, and the ability to feature products to attract more customers.
  • Customer Communication: Vendors can interact with their customers through direct messaging, resolving issues, and providing support when needed.
  1. Admin Panel
  • Super Admin Controls: The platform includes an overarching admin panel where the platform administrators can monitor all vendor activity, approve product listings, handle disputes, and enforce platform rules.
  • Transaction Management: Admins can track all platform-wide transactions, including vendor payouts and customer purchases.
  • User & Role Management: The admin can assign and manage roles to different users, such as moderators, vendors, and customer service representatives, ensuring smooth operation.
  1. Scalable Architecture
  • Modular Design: Planto-Mart's architecture is modular, allowing for easy addition of new features and expansion as the platform grows. Whether you’re scaling to hundreds or thousands of vendors, the system can handle high traffic and large volumes of data.
  • Microservices-based: The platform leverages a microservices-based architecture, making it easier to update, maintain, and scale each component independently without disrupting the entire system.
  • Cloud-Optimized: Deployed on Cloudflare for performance optimization, security enhancements, and scalability, ensuring fast load times and high availability.
  1. Security and Privacy
  • Secure Authentication: Users and vendors are required to log in via secure authentication protocols, including multi-factor authentication (MFA), ensuring that only authorized users can access sensitive data.
  • Data Encryption: All user and transaction data is encrypted, maintaining the privacy and security of sensitive information.
  • PCI-DSS Compliance: The platform follows PCI-DSS standards for payment processing, ensuring all transactions are secure and compliant with industry regulations.
  • Fraud Prevention: Built-in fraud detection systems monitor suspicious activity, protecting both vendors and customers from potential scams.
  1. Mobile-Responsive Design
  • The platform is fully mobile-responsive, offering an optimized experience for customers and vendors alike. Whether browsing products, placing orders, or managing store settings, users can seamlessly interact with the platform on any device.
  1. Integrated Marketing and SEO Tools
  • SEO Optimization: Vendors can optimize their products with detailed SEO fields to improve visibility on search engines.
  • Promotions & Coupons: The platform allows vendors to create promotions, coupons, and discount codes, helping them boost sales and attract new customers.
  • Product Reviews: Customers can leave feedback on products, helping vendors build trust and enabling shoppers to make informed decisions.

Getting Started

To get started with the project, follow the steps below.

1. Clone the Repository

First, clone the repository to your local machine using the following command:

git clone https://github.com/Adnan-The-Coder/zero-day-codebase.git

2. Install pnpm

pnpm is the package manager used for managing dependencies in this repository. To install pnpm, follow the steps below based on your operating system:

For macOS or Linux:

You can install pnpm globally using Homebrew (macOS) or npm (Linux/macOS):

npm install -g pnpm

For Windows:

You can install pnpm using npm via the command prompt:

npm install -g pnpm

If you encounter any issues with the installation, refer to the official pnpm documentation.


3. Install Dependencies

Once pnpm is installed, navigate to the root directory of the project (where the package.json is located) and run the following command to install all the dependencies:

pnpm install

This will install the necessary packages for both the web UI and any other internal libraries or applications.


Running the Web UI

The project contains a web application built using Next.js. To run the application, follow these steps:

1. Run the Web UI Locally

To start the web application locally, use the following command:

nx serve web

This will start the development server on a local machine and you can access the application in your browser at http://localhost:3000. If port 3000 is already in use, it will automatically use the next available port (e.g., 3001).

2. What Happens in the web Application

The web application is built using Next.js, a React framework, and is designed to be used as the user interface of this project. Any changes made within the web directory will trigger rebuilding the project and potentially redeploying the application to Cloudflare Workers.


Deployment to Cloudflare Workers

The web application is also deployed to Cloudflare Workers. This deployment happens automatically when changes are made inside the web folder.

1. Deployment Flow

  • Changes made within the apps/web folder will trigger a deployment to Cloudflare Workers. This is managed by OpenNext scripts written with pnpm run build and pnpm run deploy, through CD pipeline using Cloudflare accont ID and API token.
  • Every time you run the nx serve web command and changes are made, the build will trigger the deployment process to Cloudflare Workers, ensuring the latest version is always live.

General Nx Commands

Nx provides several commands for managing your monorepo, including tasks like running, building, testing, and linting applications and libraries.

1. nx serve <project>

Starts the development server for a given project (e.g., web).

nx serve web

This will start the development server for the web project, and you can access the application at http://localhost:3000 (or the next available port).

2. nx build <project>

Builds the project and compiles the code.

nx build web

This command will build the web project and output the compiled code to the dist/ folder, which is ready for deployment.

3. nx lint <project>

Runs linting checks on the specified project.

nx lint web

This will check the web project for linting errors, and output any issues found.

4. nx test <project>

Runs unit tests for a given project.

nx test web

This will run the unit tests for the web project and show the results in the terminal.

5. nx affected:build

Builds the affected projects based on the changes made to the workspace.

nx affected:build --base=main --head=HEAD

This will only build projects that were affected by the changes between the main branch and the current branch.

6. nx run-many

Run a target (e.g., build, test, lint) for multiple projects at once.

nx run-many --target=build --projects=web,other-app

This command allows you to run the build target for both the web project and another app in the workspace.

7. nx migrate

Upgrade the Nx workspace and its dependencies to the latest version.

nx migrate latest

This will migrate your workspace to the latest Nx version, making sure everything is up-to-date.


Folder Structure

Here's a quick overview of the folder structure in the monorepo:

plantomart-codebase/
├── .github/                 # Contains Tests, CI/CD pipelines using github action workflows
├── apps/                    # Application packages
│   ├── web/                 # Main web application
│   ├── cf-backend-worker/   # Cloudflare workers backend server
├── packages/                # Shared packages
├── nx.json/                 # Configurationa file of nx 
├── pnpm-lock.yaml/          # Lockfile for pnpm dependencies 
├── package.json/            # Root package manager configuration 
└── pnpm-workspace.yaml/     # Defines the structure and workspace of pnpm monorepo

Deployed on CloudFlare

The Planto-Mart platform is deployed on Cloudflare for improved security, performance, and scalability.

Benefits of this Platform:

For Vendors:

  • Increased Reach: Planto-Mart provides vendors with access to a broad customer base, eliminating the need to drive traffic to a standalone website.
  • Analytics: Real-time performance tracking and actionable insights help vendors optimize their offerings.
  • Cost-Effective: By utilizing a shared platform, vendors don’t have to build their own infrastructure from scratch, saving on development and hosting costs.
  • Easy Management: A user-friendly dashboard simplifies the process of managing inventory, orders, and customer interactions.

For Customers:

  • Convenience: Shoppers can explore a wide variety of products across different vendors in one place, with a unified cart and checkout process.
  • Competitive Prices: Customers can compare prices from various vendors, helping them find the best deals.
  • Trustworthy Reviews: The ability to read reviews from other customers adds a layer of trust and transparency to the shopping experience.

For Platform Administrators:

  • Centralized Control: Admins can oversee all platform operations, monitor transactions, and enforce policies in one place.
  • Revenue Generation: The platform offers various monetization strategies, including subscription fees, transaction fees, or featured product listings.
  • User Management: Admins can easily manage users, resolve disputes, and ensure compliance with platform guidelines.

Use Cases:

  • Small-to-Medium Enterprises (SMEs) looking for an affordable way to manage their online stores.
  • Large Marketplaces with multiple vendors who need centralized management tools for both the platform and vendors.
  • Niche Vendors who want to sell their products to a broader audience but lack the infrastructure for an independent eCommerce site.
  • Global Enterprises that need scalable, secure solutions for managing multiple vendors in various regions.

About

Planto-Mart is a full stack Ecommerce Multi-Vendor Platform, enabling vendors to list products, facilitating customers to purchase products across different vendors. Each Vendor has it's own Dashboard to manage all of it's shop's products and view analytics and much more

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Sponsor this project

 

Packages

 
 
 

Contributors

Languages