🛍️ E-commerce Full Stack Application

This is a comprehensive e-commerce full-stack application built using Next.js for the frontend and Node.js with Express.js for the backend. It provides functionality for user authentication, seller product management, and buyer shopping experience.

😍 UI

🕹️ Tech Stack

Frontend

Next.js 14.2.6
React 18
TypeScript
Tailwind CSS
Additional libraries:
- @hookform/resolvers
- @radix-ui (for UI components)
- axios (for API requests)
- react-hook-form (for form handling)
- zod (for schema validation)
- zustand (for state management)

Backend

Node.js
Express.js
PostgreSQL (pg driver)
Additional libraries:
- bcryptjs (for password hashing)
- jsonwebtoken (for JWT authentication)
- cors (for handling Cross-Origin Resource Sharing)
- dotenv (for environment variable management)

🎉 Features

User Authentication & Authorization

Role based dynamic routes based on user login.
JSON Web Tokens (JWT) used for maintaining user sessions.
Tokens securely stored on the client-side for persistent authentication.
Distinct user roles (seller and buyer) with different permissions and access levels.
Users can create accounts as either sellers or buyers.
Custom form validation enforced for enhanced security.
Passwords hashed using bcrypt before storage in the database.
Handled Unauthorized access for all roles.
Seamless one click logout feature.

Seller Functionality

Sellers can easily add new products with detailed information:
- Product name
- Category selection from predefined options
- Rich text description support
- Price setting with discount
Edit existing product details and update information in real-time.
Remove products from the marketplace with safeguards against accidental deletion.
Have access for his own added products only.

Buyer Functionality

Search functionality allowing users to find products by name or category.
Implemented advance debounced search functionality for better UI rendering.
Sort results automatically by acceding order on every request.
Buyer can have the flexibility for add to card with quantity directly from product card.
Remove items or adjust quantities directly from the cart table.
Persistent cart that saves items for logged-in users across sessions.
Added cart notification dot with cart count for real time updates.

Responsive Design

Fully responsive interface adaptable to various screen sizes (desktop, tablet, mobile).
Consistent user experience across different devices.

Security Features

HTTPS encryption for all data transmissions.
CSRF protection for form submissions.
Input validation and sanitization to prevent SQL injection and XSS attacks.

🪄 Best Practices

[✔️] Input Validation: All user inputs are validated and sanitized using Zod before being processed or stored in the database.
[✔️] Routing: Next.js file-based routing system is used effectively, with dynamic routes implemented where necessary.
[✔️] Responsiveness: The application is designed to be responsive across various devices and screen sizes using Tailwind CSS.
[✔️] Error Handling: Proper error handling is implemented for various scenarios, with clear and meaningful error messages returned to the client.
[✔️] Code Quality: The codebase maintains high standards of readability and maintainability, with appropriate comments explaining complex logic.
[✔️] Security: Best practices for security are followed, including secure authentication with JWT and bcrypt for password hashing.
[✔️] State Management: Zustand is used for efficient and scalable state management on the frontend.
[✔️] Form Handling: react-hook-form is utilized for efficient and performant form handling.
[✔️] API Requests: Axios is used for making HTTP requests, providing a consistent interface for both browser and node.js environments.
[✔️] UI Components: Shadcn UI is used for accessible and customizable UI components.

📦 Setup Instructions

Frontend Setup

Clone and navigate to the client directory:

git clone https://github.com/debrajhyper/e-commerce.git
cd e-commerce/client

Install dependencies:
```
npm install
```

Create a .env file in the root of the client directory and add:

API_BASE_URL=http://localhost:5000/api // Backend server URL

Run the development server:
```
npm run dev
```
Open http://localhost:3000 in your browser to see the application.

Backend Setup

Navigate to the server directory:
```
cd e-commerce/server
```
Install dependencies:
```
npm install
```

Create a .env file in the root of the server directory and add:

 DB_USER=DATABASE_USER
 DB_HOST=DATABASE_HOST
 DB_NAME=DATABASE_NAME
 DB_PASSWORD=DATABASE_PASSWORD
 DB_PORT=DATABASE_PORT
 JWT_SECRET=JWT_SECRET
 AUTH_ROLE_BUYER=buyer
 AUTH_ROLE_SELLER=seller
 PORT=5000

Set up your PostgreSQL database and update the connection string in .env.
Run the server:
```
node serve.js
```

📃 API Documentation

Authentication

POST /api/auth/signup

Create a new user account.

Request body:

{
  "email": "string",
  "password": "string",
  "role": "seller" | "buyer"
}

POST /api/auth/login

Request body:

{
  "email": "string",
  "password": "string"
}

Response:

{
  "token": "jwt_token",
}

Products

GET /api/products

Get all products.

Response:

[
  {
    "id": "string",
    "name": "string",
    "category": "string",
    "description": "string",
    "price": number,
    "discount": number,
    "sellerId": "string"
  }
]

GET /api/products/:id

Get a specific product by ID.

Response:

{
    "id": "string",
    "name": "string",
    "category": "string",
    "description": "string",
    "price": "string",
    "discount": "string",
    "sellerId": "string"
}

POST /api/products

Create a new product (seller only).

Request body:

{
    "name": "string",
    "category": "string",
    "description": "string",
    "price": "string",
    "discount": "string"
}

PUT /api/products/:id

Update an existing product (seller only).

Request body:

{
    "id": "string",
    "name": "string",
    "category": "string",
    "description": "string",
    "price": "string",
    "discount": "string"
}

DELETE /api/products/:id

Delete a product (seller only).

Cart

GET /api/cart

Get the current user's cart.

Response:

[
    {
        "id": "string",
        "name": "string",
        "category": "string",
        "description": "string",
        "price": "string",
        "discount": "string",
        "quantity": number,
        "seller_id": number
    }
]

POST /api/cart

Add a product to the cart.

Request body:

{
  "productId": "string",
  "quantity": number
}

DELETE /api/cart/:productId

Remove a product from the cart.

🗃️ Project Structure

Frontend (Next.js)

client/
├── public/
├── src/
│   ├── app/
│   |   ├── auth/
│   |   |   ├── login/
│   |   |   |   └── page.tsx
│   |   |   └── signup/
│   |   |       └── page.tsx
│   |   ├── buyer/
│   |   |   ├── cart/
│   |   |   |   └── page.tsx
│   |   |   └── dashboard/
│   |   |       └── page.tsx
│   |   ├── seller/
│   |   |   ├── add-product/
│   |   |   |   └── page.tsx
│   |   |   ├── dashboard/
│   |   |   |   └── page.tsx
│   |   |   └── edit-product/
│   |   |       └── page.tsx
│   |   ├── unauthorize/
│   |   ├── layout.tsx
│   |   ├── not-found.tsx
│   |   └── page.tsx
│   ├── components/
│   |   ├── ui/
│   |   ├── DashboardTitle.tsx
│   |   ├── ErrorAlert.tsx
│   |   ├── Footer.tsx
│   |   ├── Header.tsx
│   |   ├── ProductCard.tsx
│   |   ├── ProductCardLoading.tsx
│   |   ├── ProductCount.tsx
│   |   ├── ProductForm.tsx
│   |   └── SearchBar.tsx
│   ├── constants/
│   ├── helpers/
│   ├── hooks/
│   ├── lib/
│   ├── public/
│   ├── store/
│   ├── styles/
│   └── utils/
├── .eslintrc.json
├── next.config.js
├── package.json
├── postcss.config.js
├── tailwind.config.js
└── tsconfig.json

Backend (Node.js)

server/
├── config/
│   └── database.js
├── controllers/
│   ├── authController.js
│   ├── cartController.js
│   └── productController.js
├── middleware/
│   └── auth.js
├── models/
│   ├── Cart.js
│   ├── Product.js
│   └── User.js
├── routes/
│   ├── auth.js
│   ├── cart.js
│   └── products.js
├── .env
├── package.json
└── server.js