Satsangi Store E-commerce Application

A full-stack e-commerce application for grocery and household items shopping, deployed on Vercel with clean, accessible URLs.

🚀 Live Demo

• 🌐 Frontend: https://satsangi-store.vercel.app
• 🔧 Backend API: https://satsangi-store-api.vercel.app

🔐 Test Credentials

• Email: test@satsangi.com
• Password: password123

Features

• Product Catalog: Browse products across multiple categories including Fruits & Vegetables, Dairy & Breakfast, Snacks, Beverages, Home Care, Personal Care, Staples, and Packaged Foods
• High-quality SVG Icons: Modern, scalable SVG icons for all product categories
• Responsive UI: Works on desktop and mobile devices
• Shopping Cart: Add products to cart, update quantities, and checkout
• User Authentication: Register and login to manage your account and orders
• Order Management: View order history and order details

Tech Stack

• Frontend: React.js, Tailwind CSS, Axios
• Backend: Node.js, Express.js
• Database: MongoDB Atlas (Cloud)
• Authentication: JWT (JSON Web Tokens)
• Deployment: Vercel (Frontend & Backend)
• API Configuration: Centralized Axios instance

🌐 Deployment Architecture

• Frontend: React SPA deployed on Vercel
• Backend: Express.js API deployed on Vercel serverless functions
• Database: MongoDB Atlas cloud database
• URLs: Clean, accessible URLs without localhost dependencies

Getting Started

🚀 Quick Access (Recommended)

Visit the live application directly:

• Frontend: https://satsangi-store.vercel.app
• Backend API: https://satsangi-store-api.vercel.app/api/products

💻 Local Development

Prerequisites

• Node.js (v14 or higher)
• MongoDB (local or cloud)

Installation

1. Clone the repository:

git clone https://github.com/Antriksh999/online-Ecom.git
cd online-Ecom

2. Install dependencies for backend and frontend:

# Install backend dependencies
cd backend
npm install

# Install frontend dependencies
cd ../frontend
npm install

3. Configure environment variables:

   • Create a .env file in the backend folder with the following variables:

     MONGODB_URI=mongodb://localhost:27017/satsangi-store
     PORT=5001
     JWT_SECRET=your_secret_key

4. Seed the database with sample data:

cd backend
node seed.js
node createTestUser.js

5. Build the frontend:

cd ../frontend
npm run build

6. Start the application:

# From root directory
./start-app.ps1

🚀 Deployment

This application is deployed on Vercel with the following configuration:

Frontend Deployment

• Platform: Vercel
• Build Command: npm run build
• Output Directory: build/
• Environment: Production

Backend Deployment

• Platform: Vercel Serverless Functions
• Runtime: Node.js
• Database: MongoDB Atlas
• Environment Variables:
  • MONGODB_URI
  • JWT_SECRET

Key Features of Deployment

• ✅ Clean URLs without localhost dependencies
• ✅ Centralized API configuration
• ✅ Cross-device compatibility
• ✅ Serverless backend architecture
• ✅ Cloud database integration

cd backend
node seed.js

5. Build the frontend:

cd frontend
npm run build

6. Start the application using the provided script:

./start-app.ps1

Quick Start

For a quick start with seeded data and pre-built frontend, simply run:

./start-app.ps1

This will:

1. Start the backend server on port 5001
2. Start the frontend static server on port 3005
3. Open the application in your browser at http://localhost:3005

Product Categories

• 🥬 Fruits & Vegetables
• 🥛 Dairy & Breakfast
• 🍿 Snacks
• 🥤 Beverages
• 🧽 Home Care
• 🧴 Personal Care
• 🌾 Staples
• 📦 Packaged Foods

📱 Features Overview

• 🛒 Shopping Cart: Real-time cart updates with persistent storage
• 🔐 Authentication: Secure login/register with JWT tokens
• 📱 Responsive Design: Optimized for all screen sizes
• 🔍 Product Search: Browse by categories and search products
• 💳 Checkout Process: Streamlined order placement
• 📋 Order History: Track your previous orders
• 🌟 User Experience: Modern UI with intuitive navigation

🛠️ Technical Implementation

Frontend Architecture

• React Components: Modular, reusable components
• Context API: Global state management for auth and cart
• Tailwind CSS: Utility-first styling approach
• Axios Integration: Centralized API communication

Backend Architecture

• Express.js: RESTful API endpoints
• MongoDB: Document-based data storage
• JWT Authentication: Secure user sessions
• Middleware: Error handling and request validation

API Endpoints

• GET /api/products - Fetch all products
• POST /api/auth/login - User authentication
• POST /api/auth/register - User registration
• GET /api/cart - Get user cart
• POST /api/orders - Place new order

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.