E-Commerce Project

Overview

This E-Commerce project is a full-stack web application that allows users to browse products, add them to a cart, and proceed with a checkout process. Built with a focus on scalability, performance, and a clean user experience, it features a frontend interface developed with modern web technologies and a backend that manages data storage and retrieval.

Features

• Product Browsing: View product details and descriptions.
• Cart Management: Add, update, or remove items in the cart.
• User Authentication: Register, login, and manage user profiles.
• Responsive Design: Optimized for all devices.
• Search & Filter: Find products easily with search and filter options.
• Secure Checkout: Purchase products with secure checkout.

Tech Stack

Frontend

• React
• Tailwind CSS
• Shadcn UI
• Axios
• React Router
• Redux

Backend

• Node.js
• Express
• MongoDB
• Mongoose
• JWT (JSON Web Token)
• bcrypt
• PayPal SDK
• Cloudinary

Getting Started

Prerequisites

• Node.js (v14+ recommended)
• MongoDB (running locally or in the cloud)

Installation

1. Clone the repository:

git clone https://github.com/kemalcalak/E-Commerce.git
cd E-Commerce

2. Install dependencies:

For the backend:

cd server
npm install

For the frontend:

cd client
npm install

3. Set up environment variables:

In the server directory, create a .env file and add:

MONGODB_URL=your_mongodb_url
CLOUDINARY_CLOUD_NAME=your_cloudinary_cloud_name
CLOUDINARY_API_KEY=your_cloudinary_api_key
CLOUDINARY_API_SECRET=your_cloudinary_api_secret
PAYPAL_CLIENT_ID=your_paypal_client_id
PAYPAL_SECRET=your_paypal_secret
PAYPAL_MODE=your_paypal_mode
PORT=your_port
CLIENT_BASE_URL=your_client_base_url

In the client directory, create a .env file and add:

VITE_API_URL=your_vite_api_url

4. Run the application:

Start the backend server:

cd server
npm run dev

Start the frontend:

cd client
npm start

5. Access the application:
   • Open your browser and go to http://localhost:5173.

Folder Structure

E-Commerce/
├── client/                  # Frontend code
│   ├── public/              # Static assets (images, icons, etc.)
│   │   ├── index.html       # Main HTML file for the React app
│   │   └── favicon.ico      # Favicon for the application
│   ├── src/                 # React components, pages, and styles
│   │  ├── components/       # Reusable React components
│   │  ├── pages/            # Main pages of the application
│   │  ├── styles/           # Global styles and Tailwind configs
│   │  ├── App.js            # Main app component
│   │  ├── index.js          # Entry point of React application
│   │  └── utils/            # Utility functions
│   ├── package.json         # Project metadata and dependencies
│   └── .env                 # Environment variables
├── server/                  # Backend code
│   ├── controllers/         # API route controllers
│   ├── models/              # Database models
│   ├── routes/              # API routes definitions
│   ├── middleware/          # Custom middleware
│   ├── config/              # Configuration files
│   ├── services/            # Business logic layer
│   ├── package.json         # Project metadata and dependencies
│   ├── .env                 # Environment variables
│   └── server.js            # Backend entry point
└──README.md                 # Project documentation

Contact

For any questions or issues, please contact me at kemalcalak.com.