E-commerce

A full-stack e-commerce application built with ReactJS + TailwindCSS on the frontend, and NodeJS + MongoDB on the backend. Supports secure authentication, payment with Stripe, cloud image upload, and admin management.

🚀 Live Demo

🎥 Watch demo video :

Demolive_e-commerce.mp4

🌐 Try it live here :

👉 Click here to open the app

🔥 Features

• 🔐 Secure authentication system (with access roles for user/admin)
• 🛒 Product listing with full CRUD (admin only)
• 💳 Stripe payment integration
• 🌤️ Image upload via Cloudinary
• 📱 Fully responsive layout
• ⬆️ Scroll-to-top and smooth navigation
• ⚙️ RESTful APIs for frontend-backend interaction

🍀 Tech Stack

Frontend :

• ReactJS
• AOS
• Axios
• Slick
• TailwindCSS

Backend :

• NodeJS
• ExpressJS

Database :

• MongoDB

External Services :

• Stripe (payment)
• Cloudinary (image storage)

❄️ Installation

1. Clone this repository :

git clone https://github.com/SupakunZ/E-commerce.git

2. Navigate to the project folder and install dependencies :

cd E-commerce
npm install

3. Set up the environment variables :

• Create a .env.local file in the client and server root directory.

• Add the following variables to the .env file on client, replacing the placeholder values with your own:

VITE_APP_API = http://localhost:4000
VITE_STRIPE_PUBLIC_KEY = <your_stripe_public_key>

• Add the following variables to the .env file on server, replacing the placeholder values with your own:

PORT = 4000
MONGO_URL = <your_mongoDB_url>
CLIENT_URL = http://localhost:5173 #onLocal
CLOUDINARY_NAME = <your_cloudinary_name>
CLOUDINARY_API_KEY = <your_cloudinary_api_key>
CLOUDINARY_API_SECRET = <your_cloudinary_api_secret>
STRIPE_SECRET_KEY = <your_stripe_secret_key>
STRIPE_ENDPOINT_SECRET = <your_stripe_endpoint_secret>

4. Launch the application in development mode :

npm run dev

🙋‍♂️ Contact

Developed by Supakun Thata
📧 Email: [email protected]
🔗 GitHub: SupakunZ