IchGram - Full-Featured E-Commerce Platform

A modern e-commerce platform with real-time functionality, built using the MERN stack (MongoDB, Express, React, Node.js) and TypeScript.

Project Overview

IchGram is a full-fledged online store with advanced social interaction features, real-time messaging system, and integrated payment processing. This project demonstrates modern approaches to web application development using containerization and microservices architecture.

Key Features

E-Commerce Functionality

• Product and category management
• Shopping cart and order processing
• Stripe integration for secure payments
• Webhook for payment transaction processing
• Order status tracking

Social Features

• Post system (blog/news)
• Real-time messaging (WebSocket)
• Notification system
• User profiles

Authentication & Security

• JWT-based authentication
• Google OAuth 2.0 integration
• Secure password storage (bcrypt)
• Protected routes and middleware

Media & Content

• Image upload and storage via Cloudinary
• Static files (avatars, product images)
• Media optimization and processing

Technology Stack

Backend

• Runtime: Node.js
• Framework: Express.js
• Language: TypeScript
• Database: MongoDB (Mongoose ODM)
• Real-time: Socket.IO
• Authentication: JWT, Google OAuth, bcrypt
• Payments: Stripe API
• Email: Nodemailer, Mailgun
• Media: Cloudinary
• Validation: Yup

Frontend

• Library: React 19
• Language: JavaScript (ES6+)
• State Management: Redux Toolkit with Redux Persist
• UI Framework: Material-UI (@mui/material)
• Routing: React Router v7
• Forms: React Hook Form with Yup validation
• HTTP Client: Axios
• Real-time: Socket.IO Client
• Payments: Stripe.js
• Icons: Lucide React
• Build Tool: Vite
• Styling: Emotion

DevOps & Tools

• Containerization: Docker & Docker Compose
• Development: Nodemon (backend), Vite (frontend)
• Linting: ESLint
• Version Control: Git

Project Structure

ich_gram/
├── ich_gram_backend/          # Server-side
│   ├── src/
│   │   ├── controllers/       # Business logic controllers
│   │   ├── routers/          # API routes
│   │   ├── services/         # Service layer
│   │   ├── middlewares/      # Express middleware
│   │   ├── validation/       # Validation schemas
│   │   ├── db/              # Database configuration
│   │   ├── utils/           # Utility functions
│   │   ├── server.ts        # Express configuration
│   │   ├── wsServer.ts      # WebSocket server
│   │   └── index.ts         # Entry point
│   ├── public/              # Static files
│   ├── Dockerfile           # Docker configuration
│   ├── package.json
│   └── tsconfig.json
│
├── ich_gram_frontend/         # Client-side
│   ├── src/
│   │   ├── pages/           # Application pages
│   │   ├── modules/         # Modules and components
│   │   ├── redux/           # Redux store and slices
│   │   ├── shared/          # Shared components
│   │   ├── assets/          # Static resources
│   │   └── main.jsx         # React entry point
│   ├── public/              # Public resources
│   ├── Dockerfile           # Docker configuration
│   ├── package.json
│   └── vite.config.js
│
└── docker-compose.yml         # Service orchestration

API Endpoints

Authentication (/api/auth)

• POST /register - Register new user
• POST /login - User login
• POST /google - Google OAuth authentication
• POST /logout - User logout

Users (/api/users)

• GET / - Get user list
• GET /:id - Get user by ID
• PUT /:id - Update profile
• DELETE /:id - Delete user

Products (/api/products)

• GET / - Product list
• GET /:id - Product details
• POST / - Create product (admin)
• PUT /:id - Update product (admin)
• DELETE /:id - Delete product (admin)

Categories (/api/categories)

• GET / - Category list
• POST / - Create category
• PUT /:id - Update category
• DELETE /:id - Delete category

Orders (/api/orders)

• GET / - Order list
• POST / - Create order
• GET /:id - Order details
• PUT /:id - Update status

Posts (/api/posts)

• GET / - Post list
• POST / - Create post
• GET /:id - Post details
• PUT /:id - Update post
• DELETE /:id - Delete post

Messages (/api/messages)

• GET / - Message list
• POST / - Send message
• WebSocket for real-time chat

Notifications (/api/notifications)

• GET / - Notification list
• PUT /:id/read - Mark as read

Payment (/api/payment)

• POST /create-payment-intent - Create payment intent
• POST /payment-webhook - Stripe webhook

Installation & Setup

Requirements

• Node.js >= 18.x
• npm >= 9.x
• Docker and Docker Compose (optional)
• MongoDB (if not using Docker)

Local Development

1. Clone Repository

git clone https://github.com/your-username/ich_gram.git
cd ich_gram

2. Backend Setup

cd ich_gram_backend
npm install

Create .env file with required environment variables:

PORT=5000
MONGO_URI=mongodb://localhost:27017/ichgram
JWT_SECRET=your_jwt_secret_key
JWT_EXPIRES_IN=7d

# Stripe
STRIPE_SECRET_KEY=your_stripe_secret_key
STRIPE_WEBHOOK_SECRET=your_webhook_secret
STRIPE_FRONTEND_URL=http://localhost:5173

# Cloudinary
CLOUDINARY_CLOUD_NAME=your_cloud_name
CLOUDINARY_API_KEY=your_api_key
CLOUDINARY_API_SECRET=your_api_secret

# Google OAuth
GOOGLE_CLIENT_ID=your_google_client_id
GOOGLE_CLIENT_SECRET=your_google_client_secret

# Email
MAILGUN_API_KEY=your_mailgun_key
MAILGUN_DOMAIN=your_domain
EMAIL_FROM=[email protected]

Start backend:

npm run dev       # Development mode
npm run build     # Production build
npm start         # Production start

3. Frontend Setup

cd ../ich_gram_frontend
npm install

Create .env.local file:

VITE_API_URL=http://localhost:5000/api
VITE_WS_URL=http://localhost:5000
VITE_STRIPE_PUBLIC_KEY=your_stripe_public_key

Start frontend:

npm run dev       # Development mode
npm run build     # Production build
npm run preview   # Preview production build

Docker Setup

# From project root directory
docker-compose up --build

# Or in detached mode
docker-compose up -d

Application will be available at:

• Frontend: http://localhost:5173
• Backend API: http://localhost:5000
• MongoDB: mongodb://localhost:27017

Stop containers:

docker-compose down

Docker Configuration

The project includes complete Docker configuration with three services:

• backend: Node.js API server (port 5000)
• frontend: React application with Vite (port 5173)
• mongo: MongoDB database (port 27017)

All services are connected to the shared app-network for internal communication.

Development

Backend

cd ich_gram_backend
npm run dev  # Auto-restart on changes (nodemon)

Frontend

cd ich_gram_frontend
npm run dev  # Hot Module Replacement (HMR)

Linting

# Frontend
npm run lint

Deployment

Production Build

Backend:

cd ich_gram_backend
npm run build
npm start

Frontend:

cd ich_gram_frontend
npm run build
# Built files in dist/ directory

Production Recommendations

• Use environment variables for all sensitive data
• Configure HTTPS for secure data transmission
• Enable rate limiting to protect API
• Configure CORS properly
• Use CDN for static files
• Set up monitoring and logging
• Regularly update dependencies

Security

The project implements the following security practices:

• JWT tokens for authentication
• Bcrypt for password hashing
• CORS configuration
• Input validation (Yup)
• Protected routes with middleware
• Environment variables for sensitive data
• Stripe webhook signature verification

License

ISC License

Author

Developed as a final project for Node.js course

Acknowledgments

• Express.js
• React
• MongoDB
• Socket.IO
• Material-UI
• Stripe
• Cloudinary

---

Note: This project was created for educational purposes and demonstrates capabilities of modern web technologies.