Skip to content

Latest commit

 

History

History
142 lines (113 loc) · 4.27 KB

readme.md

File metadata and controls

142 lines (113 loc) · 4.27 KB
Raw

E-Commerce Project

E-Commerce Screenshot 1 E-Commerce Screenshot 2 E-Commerce Screenshot 3

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
  1. Install dependencies:

For the backend:

cd server
npm install

For the frontend:

cd client
npm install
  1. 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
  1. Run the application:

Start the backend server:

cd server
npm run dev

Start the frontend:

cd client
npm start
  1. 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.