Naksh Jewels - E-commerce Application

A full-stack e-commerce application built with React and Node.js for Naksh Jewels jewelry store.

🚀 Features

Frontend

• Product listing with responsive grid layout
• Product cards with image, name, price, and Add to Cart functionality
• Shopping cart with quantity updates and item removal
• State management using React Context API
• Fully responsive design (mobile, tablet, desktop)
• Clean, custom CSS (no UI libraries)
• Local storage persistence for cart items

Backend

• RESTful API with Express.js
• Product listing endpoint (GET /api/products)
• Cart management endpoints (GET, POST, PUT, DELETE /api/cart)
• Validation middleware for request data
• Comprehensive error handling
• In-memory data storage
• Environment variable configuration
• Request logging

DevOps

• Dockerized frontend and backend
• Docker Compose orchestration
• Health checks for both services
• Production-ready configurations
• Multi-stage builds for optimization

📋 Prerequisites

• Node.js (v18 or higher)
• Docker and Docker Compose
• Git

🛠️ Installation & Setup

Option 1: Using Docker (Recommended)

1. Clone the repository:

git clone <repository-url>
cd ecommerce-project

2. Start the application:

docker-compose up --build

3. Access the application:

   • Frontend: http://localhost:3000
   • Backend API: http://localhost:5000/api
   • Health Check: http://localhost:5000/health

4. Stop the application:

docker-compose down

Option 2: Local Development

Backend Setup

1. Navigate to backend directory:

cd backend

2. Install dependencies:

npm install

3. Create .env file (already provided):

PORT=5000
NODE_ENV=development

4. Start the server:

npm start

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

Frontend Setup

1. Navigate to frontend directory:

cd frontend

2. Install dependencies:

npm install

3. Create .env file (already provided):

REACT_APP_API_URL=http://localhost:5000/api

4. Start the development server:

npm start

The frontend will run on http://localhost:3000

📁 Project Structure

ecommerce-project/
├── backend/
│   ├── data/
│   │   └── products.js          # Product data
│   ├── middleware/
│   │   ├── errorHandler.js      # Error handling middleware
│   │   └── validation.js        # Request validation
│   ├── routes/
│   │   ├── cart.js              # Cart API routes
│   │   └── products.js          # Product API routes
│   ├── .dockerignore
│   ├── .env
│   ├── Dockerfile
│   ├── package.json
│   └── server.js                # Express server
│
├── frontend/
│   ├── public/
│   │   └── index.html
│   ├── src/
│   │   ├── components/
│   │   │   ├── Header.js        # Navigation header
│   │   │   ├── Header.css
│   │   │   ├── ProductCard.js   # Product card component
│   │   │   └── ProductCard.css
│   │   ├── context/
│   │   │   └── CartContext.js   # Global cart state
│   │   ├── pages/
│   │   │   ├── Cart.js          # Cart page
│   │   │   ├── Cart.css
│   │   │   ├── Products.js      # Product listing page
│   │   │   └── Products.css
│   │   ├── services/
│   │   │   └── api.js           # API service layer
│   │   ├── styles/
│   │   │   └── global.css       # Global styles
│   │   ├── App.js               # Main app component
│   │   └── index.js             # Entry point
│   ├── .dockerignore
│   ├── .env
│   ├── Dockerfile
│   ├── nginx.conf
│   └── package.json
│
└── docker-compose.yml

🔌 API Endpoints

Products

GET /api/products

Get all products

Response:

{
  "success": true,
  "count": 8,
  "data": [
    {
      "id": "1",
      "name": "Diamond Solitaire Ring",
      "price": 45000,
      "image": "...",
      "description": "...",
      "category": "Rings",
      "inStock": true
    }
  ]
}

GET /api/products/:id

Get single product by ID

Cart

GET /api/cart

Get all cart items

Response:

{
  "success": true,
  "data": {
    "items": [...],
    "total": 45000,
    "count": 1
  }
}

POST /api/cart

Add item to cart

Request Body:

{
  "productId": "1",
  "quantity": 1
}

PUT /api/cart/:id

Update cart item quantity

Request Body:

{
  "quantity": 2
}

DELETE /api/cart/:id

Remove item from cart

DELETE /api/cart

Clear entire cart

🎨 Design Decisions

Frontend

• React Context API: Chosen over Redux for simpler state management suitable for this scale
• Functional Components: All components are functional with hooks
• Custom CSS: No UI libraries to demonstrate CSS proficiency
• Responsive Design: Mobile-first approach with breakpoints at 480px, 768px, 1024px
• Local Storage: Cart persistence across page refreshes

Backend

• Express.js: Lightweight and flexible framework
• In-memory Storage: Sufficient for demo; easily replaceable with MongoDB
• Middleware Pattern: Clean separation of concerns
• RESTful API: Standard HTTP methods and status codes
• Error Handling: Centralized error handling with custom error messages

Docker

• Multi-stage Builds: Optimized frontend build with nginx
• Health Checks: Ensures services are ready before accepting traffic
• Networks: Isolated bridge network for service communication
• Volume Mounts: Prepared for MongoDB integration

🧪 Testing the Application

1. Start the application using Docker Compose
2. Navigate to http://localhost:3000
3. Browse products on the home page
4. Click "Add to Cart" on any product
5. View cart badge update in header
6. Navigate to cart page
7. Update quantities using +/- buttons
8. Remove items using × button
9. Clear cart using "Clear Cart" button

🔧 Environment Variables

Backend (.env)

PORT=5000
NODE_ENV=development

Frontend (.env)

REACT_APP_API_URL=http://localhost:5000/api

🚢 Docker Commands

# Build and start services
docker-compose up --build

# Start in detached mode
docker-compose up -d

# View logs
docker-compose logs -f

# Stop services
docker-compose down

# Remove volumes
docker-compose down -v

# Rebuild specific service
docker-compose build backend
docker-compose build frontend

📝 Code Quality

• Clean, readable code with meaningful variable names
• Consistent code formatting
• Proper error handling and edge cases
• Modular component structure
• Separation of concerns
• Comments where necessary
• No hardcoded values (using environment variables)

🎯 Edge Cases Handled

• Empty cart state with user-friendly message
• Product out of stock handling
• Quantity validation (minimum 1)
• Loading states during API calls
• Error states with retry options
• Responsive design for all screen sizes
• Cart persistence using localStorage
• Duplicate product addition (increases quantity)

🔒 Security Considerations

• Input validation on backend
• Error messages don't expose sensitive info
• CORS enabled for frontend communication
• Environment variables for configuration

🚀 Future Enhancements

• User authentication
• Payment integration
• Product search and filtering
• Product categories page
• Wishlist functionality
• Order history
• Product reviews and ratings
• Admin dashboard
• Real database integration (MongoDB)
• Image optimization
• Performance monitoring

📞 Support

For questions or issues, please create an issue in the repository.

👨‍💻 Developer

Built by a candidate for Naksh Jewels ReactJS & Node.js Internship

---

Note: This is a demonstration project showcasing full-stack development skills including React, Node.js, Express, Docker, and clean code practices.