FreshlyGo 🛒

A modern, full-stack e-commerce platform for fresh grocery delivery. FreshlyGo brings the convenience of online shopping directly to your doorstep with a seamless user experience, secure payments, and a dedicated seller dashboard.

🌐 Live Project

Visit the live application: https://freshlygo-frontend.vercel.app/

✨ Features

For Customers

• 🏠 Browse and search fresh groceries and products
• 🛒 Add items to cart and manage quantities
• 💳 Secure checkout with Stripe payment integration
• 📍 Multiple address management
• 📦 Order tracking and order history with delivery status
• ⭐ Best sellers and category-based browsing
• 📧 Newsletter subscription
• 🌓 Dark mode support

For Sellers

• 📊 Seller dashboard with order management
• ➕ Add and manage product listings
• 📈 View order history and analytics
• 🔐 Secure seller authentication
• 🖼️ Product image upload with Cloudinary integration

For Delivery Agents

• 🚚 Dedicated delivery agent dashboard
• 📋 View all pending Cash on Delivery (COD) orders
• 📦 Pick up orders for delivery
• 🗺️ Track delivery with status updates (Picked Up, In Transit, Delivered)
• ✅ Auto-confirm payment upon delivery for COD orders
• 💰 Prominent COD amount display for easy collection
• 📝 Add delivery notes and remarks

🛠️ Tech Stack

Frontend

• React 19 - UI library
• Vite - Fast build tool and dev server
• Tailwind CSS - Utility-first CSS framework
• React Router - Client-side routing
• Axios - HTTP client
• React Hot Toast - Notification system
• React Compiler - Optimized performance

Backend

• Node.js & Express - Server framework
• MongoDB & Mongoose - Database
• JWT - Authentication
• bcryptjs - Password encryption
• Stripe - Payment processing
• Cloudinary - Image hosting
• Multer - File upload handling
• CORS - Cross-origin support
• Cookie-parser - Cookie management
• Nodemon - Development hot reload

📋 Prerequisites

Before you begin, ensure you have installed:

• Node.js (v16 or higher)
• npm or yarn
• MongoDB (local or cloud - MongoDB Atlas)
• Git

🚀 Setup Instructions

Backend Setup

1. Navigate to the server directory:

   cd server

2. Install dependencies:

   npm install

3. Create a .env file in the server directory with the following variables:

   PORT=5000
   MONGODB_URI=your_mongodb_connection_string
   JWT_SECRET=your_jwt_secret_key
   CLOUDINARY_CLOUD_NAME=your_cloudinary_cloud_name
   CLOUDINARY_API_KEY=your_cloudinary_api_key
   CLOUDINARY_API_SECRET=your_cloudinary_api_secret
   STRIPE_SECRET_KEY=your_stripe_secret_key
   STRIPE_PUBLISHABLE_KEY=your_stripe_publishable_key
   CLIENT_URL=http://localhost:5173

4. Start the backend server:

   npm run dev

   or

   npm start

   The server will run on http://localhost:5000

Frontend Setup

1. Navigate to the client directory:

   cd client

2. Install dependencies:

   npm install

3. Create a .env.local file in the client directory:

   VITE_API_URL=http://localhost:5000
   VITE_STRIPE_PUBLIC_KEY=your_stripe_publishable_key

4. Start the development server:

   npm run dev

   The application will be available at http://localhost:5173

5. To build for production:

   npm run build

📁 Project Structure

FreshlyGo/
├── client/                 # React frontend application
│   ├── src/
│   │   ├── components/    # Reusable React components
│   │   ├── pages/         # Page components
│   │   ├── context/       # React context for state management
│   │   ├── assets/        # Static assets and constants
│   │   ├── App.jsx        # Main app component
│   │   └── main.jsx       # Entry point
│   ├── package.json
│   ├── vite.config.js
│   └── index.html
│
└── server/                # Node.js/Express backend
    ├── controllers/       # Route handlers and business logic
    ├── models/           # MongoDB models
    ├── routes/           # API route definitions
    ├── middlewares/      # Custom middleware (auth, etc.)
    ├── configs/          # Configuration files (DB, Cloudinary, etc.)
    ├── index.js          # Server entry point
    ├── server.js         # App configuration
    └── package.json

🔑 Key API Routes

User Routes

• POST /api/users/register - Register new user
• POST /api/users/login - User login
• GET /api/users/profile - Get user profile

Product Routes

• GET /api/products - Get all products
• GET /api/products/:id - Get product details
• POST /api/products - Add new product (Seller)

Cart Routes

• POST /api/cart/add - Add item to cart
• GET /api/cart - Get cart items
• DELETE /api/cart/remove/:id - Remove item from cart

Order Routes

• POST /api/orders/create - Create new order
• GET /api/orders/user - Get user orders
• GET /api/orders/seller - Get seller orders

Address Routes

• POST /api/address/add - Add new address
• GET /api/address - Get saved addresses

📝 Environment Variables Guide

Backend (.env)

Variable	Description
PORT	Server port (default: 5000)
MONGODB_URI	MongoDB connection string
JWT_SECRET	Secret key for JWT tokens
CLOUDINARY_*	Cloudinary API credentials
STRIPE_SECRET_KEY	Stripe secret API key
STRIPE_PUBLISHABLE_KEY	Stripe public API key
CLIENT_URL	Frontend URL for CORS
SELLER_EMAIL	Seller login email
SELLER_PASSWORD	Seller login password
DELIVERY_AGENT_EMAIL	Delivery agent login email
DELIVERY_AGENT_PASSWORD	Delivery agent login password

Frontend (.env.local)

Variable	Description
VITE_API_URL	Backend API URL
VITE_STRIPE_PUBLIC_KEY	Stripe public key

🔐 Authentication

The application uses JWT (JSON Web Tokens) for secure authentication:

• Tokens are stored in HTTP-only cookies
• Separate authentication flows for users, sellers, and delivery agents
• Protected routes require valid tokens
• Automatic token refresh mechanism

🚚 Cash on Delivery (COD) & Delivery Agent Workflow

Order Lifecycle for COD Orders:

1. Order Placed: Customer selects "Cash on Delivery" at checkout

   • Order created with status: "Order Placed"
   • Payment status: "Pending"
   • Order visible in delivery agent dashboard

2. Pickup: Delivery agent picks up the order

   • Order status: "Picked Up"
   • Agent assigned to order
   • Order moves to agent's "My Deliveries"

3. In Transit: Agent starts delivery

   • Order status: "In Transit"
   • Agent can add location/delivery notes

4. Delivered: Agent marks delivery complete

   • Order status: "Delivered"
   • Payment status automatically → "Received via COD"
   • Confirmed payment amount displayed
   • Customer order updated with delivery completion

Delivery Agent Dashboard Features:

• Pending Deliveries: All COD orders ready for pickup with prominent COD amount display
• My Deliveries: Orders assigned to agent with filtered status view (In Transit, Delivered)
• Delivery Details: Complete order info with customer details, address, timeline, and delivery confirmation form
• Status Tracking: Real-time order status updates visible to both agent and customer

💳 Payment Integration

FreshlyGo uses Stripe for secure payment processing:

• PCI-compliant payment handling
• Support for multiple payment methods
• Payment confirmation and webhook handling

📸 Image Management

Product images are managed through Cloudinary:

• Automatic image optimization
• CDN delivery for fast loading
• Easy image upload from server

🚢 Deployment

Frontend Deployment (Vercel)

The frontend is deployed on Vercel and automatically deploys on push to the main branch.

Backend Deployment

The backend can be deployed on platforms like:

• Heroku
• Railway
• Render
• DigitalOcean
• AWS

🤝 Contributing

Contributions are welcome! Please follow these steps:

1. Fork the repository
2. Create a new branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

📄 License

This project is licensed under the ISC License.

👨‍💻 Developer

Created and maintained with ❤️ for seamless grocery delivery experience.

📧 Contact & Support

For any issues or inquiries, please open an issue on the repository or contact the development team.

---

Happy Shopping with FreshlyGo! 🎉