DotCart App 🛒

DotCart is a full-stack e-commerce web application featuring a dual-interface system for both regular customers and sellers. Customers can browse products, manage their carts, and place orders with secure Stripe integration. Sellers have access to a dedicated dashboard to add, list, and manage their products and view customer orders.

Features

For Customers:

• Browse all products and filter by category.
• View detailed product information.
• Add products to cart and checkout.
• Add and manage shipping addresses.
• View order history.

For Sellers:

• Secure seller login.
• Seller dashboard layout.
• Add new products with image uploads (Cloudinary integration).
• View a list of all seller products.
• View and manage incoming orders.

Core Tech Features:

• Secure Authentication with JWT (JSON Web Tokens) and bcrypt.
• Payment processing via Stripe including webhook integration.
• Image storage and optimization using Cloudinary.
• Responsive modern UI built with Tailwind CSS.

Tech Stack

Frontend (Client)

• Framework: React 19 (built with Vite)
• Styling: Tailwind CSS (v4)
• Routing: React Router v7
• State Management: React Context API
• HTTP Client: Axios
• Notifications: React Hot Toast

Backend (Server)

• Runtime: Node.js
• Framework: Express.js
• Database: MongoDB with Mongoose
• Authentication: jsonwebtoken, bcryptjs
• File Uploads: multer, cloudinary
• Payment Gateway: Stripe
• Other utilities: cors, cookie-parser, dotenv

Project Structure

DotCart App/
├── client/                 # Frontend React Application
│   ├── public/
│   ├── src/
│   │   ├── components/     # Reusable UI components
│   │   ├── context/        # React Context providers (AppContext)
│   │   ├── pages/          # Application routes/pages (Home, Cart, Seller pages, etc.)
│   │   ├── App.jsx         # Main Application component & Route definitions
│   │   └── ...
│   ├── package.json
│   ├── vite.config.js
│   └── tailwind config...
│
└── server/                 # Backend Node.js/Express Application
    ├── configs/            # Database and Cloudinary configuration
    ├── controllers/        # Route logic and handlers
    ├── middlewares/        # Custom middlewares (auth, etc.)
    ├── models/             # Mongoose Database Models (User, Seller, Product, Order, Address)
    ├── routes/             # Express Route definitions
    ├── server.js           # Main Express server entry point
    └── package.json

Getting Started

Prerequisites

• Node.js (v18+ recommended)
• MongoDB account/local instance
• Cloudinary account
• Stripe account

Environment Variables

You will need to create .env files in both the client and server directories based on the provided .env.example files.

Server .env:

PORT=4000
MONGODB_URI=your_mongodb_connection_string
JWT_SECRET=your_jwt_secret
CLOUDINARY_CLOUD_NAME=your_cloudinary_name
CLOUDINARY_API_KEY=your_cloudinary_api_key
CLOUDINARY_API_SECRET=your_cloudinary_api_secret
STRIPE_SECRET_KEY=your_stripe_secret_key
STRIPE_WEBHOOK_SECRET=your_stripe_webhook_secret

Client .env:

VITE_API_URL=http://localhost:4000
# Add any other required client-side environment variables

Installation

1. Clone the repository:

   git clone https://github.com/mufeed-dev/DotCart-App.git
   cd "DotCart App"

2. Install Server Dependencies:

   cd server
   npm install

3. Install Client Dependencies:

   cd ../client
   npm install

Running the Application Locally

1. Start the Backend Server:

   cd server
   npm run server # Runs with nodemon for development

   The server will start on http://localhost:4000 (or your defined PORT).

2. Start the Frontend Client:

   cd client
   npm run dev

   The client will be accessible at http://localhost:5173.