Skip to content

Rajaykumar12/EarnEasy

Β 
Β 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

EarnEasy πŸš€πŸ’Ό

React Node.js Express MongoDB Material-UI JWT Google OAuth Vite

πŸ“– Table of Contents


πŸ“‹ Overview

EarnEasy is a modern e-commerce marketplace platform designed for scalability, security, and exceptional user experience. Built with modern web technologies, it provides a foundation for online marketplace management with Google OAuth authentication, JWT session management, and clean architecture.

🎯 Mission Statement

To provide a robust, scalable, and secure marketplace platform that empowers businesses to create exceptional e-commerce experiences while maintaining the highest standards of security and performance.

✨ Key Features

πŸ” Authentication & Security

  • πŸ›‘οΈ Google OAuth 2.0 Integration - Secure social login with Google
  • πŸͺ HTTP-Only Cookie Authentication - JWT tokens stored in secure HTTP-only cookies for XSS protection
  • οΏ½ Token Blacklisting - Secure logout with server-side token invalidation
  • πŸ”’ Dual Authentication Support - Both cookie and header-based authentication for flexibility
  • πŸ›‘οΈ Security Headers - CORS protection with production-ready cookie settings
  • πŸ” Data Encryption - Secure data transmission and storage
  • πŸ“Š Session Management - Centralized authentication handling with AuthContext

πŸ›οΈ E-commerce Capabilities

  • πŸͺ Multi-vendor Marketplace - Foundation for multiple sellers (structure ready)
  • πŸ“¦ Product Management - Complete CRUD operations for products
  • πŸ” Advanced Search & Filtering - Basic search with category filtering
  • πŸ“± Mobile-First Design - Responsive UI for all device types
  • πŸ›’ Shopping Cart - Persistent cart functionality
  • πŸ“Š User Profiles - Comprehensive user management
  • 🎨 Modern UI/UX - Material-UI components with custom theming

πŸ› οΈ Developer Experience

  • ⚑ Hot Module Replacement - Vite for instant development feedback
  • 🧩 Modular Architecture - Clean separation of concerns
  • πŸ“¦ RESTful API Design - OpenAPI-ready endpoints
  • πŸ”„ CI/CD Ready - GitHub Actions configuration ready
  • πŸ§ͺ Testing Framework - Test structure ready for implementation
  • πŸ“ Code Quality - ESLint and Prettier configuration

πŸ—οΈ Architecture

System Architecture

β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”    β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”    β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”
β”‚     Frontend       β”‚    β”‚      Backend       β”‚    β”‚      Database      β”‚
β”‚    (React SPA)     │◄──►│   (Node.js API)    │◄──►│      (MongoDB)     β”‚
β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜    β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜    β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜
         β”‚                        β”‚                        β”‚
         β”‚                        β”‚                        β”‚
   β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”         β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”          β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”
   β”‚  Material UI β”‚         β”‚   Express   β”‚          β”‚   Mongoose   β”‚
   β”‚    (UI)      β”‚         β”‚ Middleware  β”‚          β”‚    ODM       β”‚
   β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜         β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜          β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜

Technology Stack

  • Frontend: React 18 + Vite + Material-UI
  • Backend: Node.js + Express.js + Mongoose
  • Database: MongoDB
  • Authentication: HTTP-Only Cookies + JWT + Google OAuth 2.0
  • Development: Hot reloading, ESM modules, modern JS/ES6+

πŸ› οΈ Tech Stack

Category Technology Purpose
Frontend React 18 UI library with hooks and modern features
Build Tool Vite Fast development server and build tool
UI Framework Material-UI (MUI) Professional component library
Routing React Router Client-side routing
HTTP Client Axios API communication
State Management React Context Global state management
Backend Node.js + Express Server runtime and web framework
Database MongoDB + Mongoose NoSQL database with ODM
Authentication HTTP-Only Cookies + JWT + Google OAuth Secure authentication with XSS protection
Security CORS + JWT Security headers and token validation
Development ESLint + Prettier Code quality and formatting

πŸ“ Project Structure

EarnEasy/
β”œβ”€β”€ πŸ“ backend/
β”‚   β”œβ”€β”€ πŸ“ controllers/          # Route handlers and business logic
β”‚   β”‚   β”œβ”€β”€ authController.js    # Authentication logic
β”‚   β”‚   └── productController.js # Product management
β”‚   β”œβ”€β”€ πŸ“ middleware/           # Custom middleware
β”‚   β”‚   └── authMiddleware.js    # JWT and session management
β”‚   β”œβ”€β”€ πŸ“ models/              # Database models
β”‚   β”‚   β”œβ”€β”€ authModel.js        # User authentication model
β”‚   β”‚   β”œβ”€β”€ Products.js         # Product data model
β”‚   β”‚   └── dbConnections.js    # Database connection
β”‚   β”œβ”€β”€ πŸ“ routes/              # API route definitions
β”‚   β”‚   β”œβ”€β”€ authRouter.js       # Authentication routes (consolidated)
β”‚   β”‚   β”œβ”€β”€ productRoutes.js    # Product API routes
β”‚   β”‚   └── profileRoutes.js    # User profile routes
β”‚   β”œβ”€β”€ πŸ“ utils/               # Utility functions
β”‚   β”‚   └── googleClient.js     # Google OAuth configuration
β”‚   β”œβ”€β”€ index.js               # Server entry point
β”‚   β”œβ”€β”€ package.json           # Backend dependencies
β”‚   β”œβ”€β”€ seeder.js             # Database seeding script
β”‚   └── .env                  # Environment variables
β”‚
β”œβ”€β”€ πŸ“ frontend/
β”‚   β”œβ”€β”€ πŸ“ src/
β”‚   β”‚   β”œβ”€β”€ πŸ“ components/      # Reusable UI components
β”‚   β”‚   β”‚   β”œβ”€β”€ BottomNavBar.jsx
β”‚   β”‚   β”‚   β”œβ”€β”€ CategoriesBar.jsx
β”‚   β”‚   β”‚   β”œβ”€β”€ GoogleLogin.jsx
β”‚   β”‚   β”‚   β”œβ”€β”€ ProductCard.jsx
β”‚   β”‚   β”‚   └── SessionInfo.jsx
β”‚   β”‚   β”œβ”€β”€ πŸ“ pages/           # Page components
β”‚   β”‚   β”‚   β”œβ”€β”€ LandingPage.jsx
β”‚   β”‚   β”‚   β”œβ”€β”€ HomePage.jsx
β”‚   β”‚   β”‚   β”œβ”€β”€ ExplorePage.jsx
β”‚   β”‚   β”‚   β”œβ”€β”€ CartPage.jsx
β”‚   β”‚   β”‚   β”œβ”€β”€ AddPage.jsx
β”‚   β”‚   β”‚   └── ProfilePage.jsx
β”‚   β”‚   β”œβ”€β”€ πŸ“ context/         # React context providers
β”‚   β”‚   β”‚   └── AuthContext.jsx # Authentication context (was SessionContext)
β”‚   β”‚   β”œβ”€β”€ πŸ“ utils/           # Frontend utilities
β”‚   β”‚   β”‚   β”œβ”€β”€ PrivateRoute.jsx
β”‚   β”‚   β”‚   └── RefreshHandler.jsx
β”‚   β”‚   β”œβ”€β”€ πŸ“ api/             # API service layer
β”‚   β”‚   β”‚   └── apiFetch.js
β”‚   β”‚   β”œβ”€β”€ App.jsx            # Main application component
β”‚   β”‚   β”œβ”€β”€ main.jsx           # Application entry point
β”‚   β”‚   └── index.css          # Global styles
β”‚   β”œβ”€β”€ πŸ“ public/             # Static assets
β”‚   β”‚   β”œβ”€β”€ πŸ“ images/         # Product and UI images
β”‚   β”‚   └── vite.svg
β”‚   β”œβ”€β”€ package.json          # Frontend dependencies
β”‚   β”œβ”€β”€ vite.config.js        # Vite configuration
β”‚   └── eslint.config.js      # ESLint configuration
β”‚
β”œβ”€β”€ README.md                 # Project documentation
└── .gitignore               # Git ignore rules

πŸš€ Quick Start

Prerequisites

  • Node.js (v16.0.0 or higher)
  • MongoDB (v4.4 or higher)
  • Google OAuth Credentials (Client ID & Secret)
  • Git for version control

Installation Steps

  1. Clone the Repository

    git clone https://github.com/so-sc/EarnEasy.git
    cd EarnEasy
  2. Backend Setup

    cd backend
    npm install
  3. Frontend Setup

    cd ../frontend
    npm install
  4. Environment Configuration Create .env files as described in the Configuration section.

  5. Database Setup

    # Start MongoDB service
    mongod
    
    # Seed database (optional)
    cd backend
    node seeder.js
  6. Start Development Servers

    # Backend (Terminal 1)
    cd backend
    npm start
    # Server runs on http://localhost:3000
    
    # Frontend (Terminal 2)
    cd frontend
    npm run dev
    # App runs on http://localhost:5173

βš™οΈ Configuration

Backend Environment (.env)

# Server Configuration
PORT=3000
NODE_ENV=development

# Database
MONGODB_URI=mongodb://localhost:27017/earneasy

# JWT Configuration
JWT_SECRET=your_super_secret_jwt_key_minimum_32_characters
JWT_ACCESS_EXPIRE=7d

# Google OAuth
GOOGLE_CLIENT_ID=your_google_client_id.apps.googleusercontent.com
GOOGLE_CLIENT_SECRET=your_google_client_secret

# Frontend URL
FRONTEND_URL=http://localhost:5173

# Security (Optional)
CORS_ORIGIN=http://localhost:5173

Frontend Environment (.env)

# API Configuration
VITE_API_BASE_URL=http://localhost:3000

# Google OAuth
VITE_GOOGLE_CLIENT_ID=your_google_client_id.apps.googleusercontent.com

# Environment
VITE_NODE_ENV=development

Google OAuth Setup

  1. Go to Google Cloud Console
  2. Create a new project or select existing
  3. Enable Google+ API
  4. Create OAuth 2.0 credentials
  5. Add authorized origins and redirect URIs

πŸ” Authentication Flow

Google OAuth Flow

sequenceDiagram
    participant User
    participant Frontend
    participant Backend
    participant Google
    participant Database

    User->>Frontend: Click "Sign in with Google"
    Frontend->>Google: Redirect to Google OAuth
    Google->>User: Show consent screen
    User->>Google: Grant permissions
    Google->>Backend: Send authorization code
    Backend->>Google: Exchange code for tokens
    Google->>Backend: Return user info & tokens
    Backend->>Database: Find or create user
    Database->>Backend: Return user data
    Backend->>Frontend: Set HTTP-only cookie + return user info
    Frontend->>User: Redirect to dashboard
Loading

Cookie-Based Authentication

  • Token Storage: JWT tokens stored in secure HTTP-only cookies
  • XSS Protection: Cookies cannot be accessed by client-side JavaScript
  • Automatic Handling: Browser automatically sends cookies with requests
  • Token Blacklisting: Server-side token invalidation on logout
  • Dual Support: Both cookie and header authentication for API flexibility

πŸ“Š API Documentation

Authentication Endpoints

POST   /auth              # Google OAuth callback
GET    /session/validate  # Validate current session
POST   /session/logout    # Logout user

Product Endpoints

GET    /products          # Get all products
POST   /products          # Create new product (auth required)
GET    /products/:id      # Get product by ID
PUT    /products/:id      # Update product (auth required)
DELETE /products/:id      # Delete product (admin only)

User Endpoints

GET    /users/profile     # Get current user profile
PUT    /users/profile     # Update user profile
GET    /users/sessions    # Get active sessions

Response Format

{
  "success": true,
  "message": "Operation successful",
  "data": {
    // Response data
  }
}

πŸ”’ Security

Authentication Security

  • JWT Tokens: Stateless authentication with 7-day expiry
  • Google OAuth: Secure third-party authentication
  • Session Management: JWT-based session tracking

Application Security

  • CORS Protection: Configured for specific origins
  • Input Validation: Basic server-side validation
  • Security Headers: CORS (ready for additional headers)
  • Error Handling: Secure error messages without sensitive data

Data Protection

  • Environment Variables: Sensitive data in .env files
  • Database Security: MongoDB connection string encryption
  • API Rate Limiting: (Ready for implementation)
  • Audit Logging: (Ready for implementation)

πŸ“ˆ Performance

Optimization Strategies

  • Frontend: Code splitting, lazy loading, image optimization
  • Backend: Database indexing, query optimization, caching
  • Database: Proper indexing, aggregation pipelines
  • Security: Efficient JWT validation, session management

Monitoring & Analytics

  • Performance Metrics: Response times, error rates
  • User Analytics: Session tracking, user behavior
  • Server Monitoring: CPU, memory, database performance
  • Error Tracking: Centralized error logging and alerts

🀝 Contributing

Development Workflow

  1. Fork the repository
  2. Create a feature 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

Code Standards

  • ESLint: JavaScript linting and code quality
  • Prettier: Code formatting consistency
  • Commit Messages: Conventional commit format
  • Documentation: Update README and code comments

Review Process

  • Code Review: All PRs require review
  • Testing: Automated tests must pass
  • Security: Security review for sensitive changes
  • Performance: Performance impact assessment

Support

Getting Help

Community

  • Contributors: Thank you to all contributors who have helped make this project better
  • Feedback: We welcome feedback and suggestions for improvement
  • Bug Reports: Please report bugs with detailed reproduction steps

Made with ❀️ by the EarnEasy Team

⭐ Star this repo | πŸ› Report Bug | πŸ“ˆ Request Feature

About

No description, website, or topics provided.

Resources

Code of conduct

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 99.7%
  • Other 0.3%