https://github.com/aamirshehzad33/e-commerence-store
A modern, feature-rich Electronics ECommerce Store with a fully functional Admin Dashboard to manage products, users, orders, and payments. Designed for high performance, scalability, and user experience, this project leverages the latest web technologies to create a seamless shopping experience.
https://github.com/aamirshehzad33/e-commerence-store
ecommerce-application ecommerce-store ecommerce-website full-stack-web-development nextjs-store nodejs-shop online-shop online-shopping-website online-store-website react-ecommerce
Last synced: 12 months ago
JSON representation
A modern, feature-rich Electronics ECommerce Store with a fully functional Admin Dashboard to manage products, users, orders, and payments. Designed for high performance, scalability, and user experience, this project leverages the latest web technologies to create a seamless shopping experience.
- Host: GitHub
- URL: https://github.com/aamirshehzad33/e-commerence-store
- Owner: aamirshehzad33
- License: mit
- Created: 2025-03-20T12:09:02.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-03-20T15:23:52.000Z (about 1 year ago)
- Last Synced: 2025-05-13T18:01:56.771Z (about 1 year ago)
- Topics: ecommerce-application, ecommerce-store, ecommerce-website, full-stack-web-development, nextjs-store, nodejs-shop, online-shop, online-shopping-website, online-store-website, react-ecommerce
- Language: TypeScript
- Homepage:
- Size: 11.4 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Electronics eCommerce Shop With Admin Dashboard in Next.js and Node.js
A modern, feature-rich Electronics ECommerce Store with a fully functional Admin Dashboard to manage products, users, orders, and payments. Designed for high performance, scalability, and user experience, this project leverages the latest web technologies to create a seamless shopping experience.
## 🔥Overview
This ECommerce store allows customers to browse products, add them to the cart, checkout securely, and track their orders. Meanwhile, admins have a dedicated dashboard to manage inventory, process orders, and track business performance.
## 🌟 Key Features:
## ✅ User Features:
🔍 Product search & filtering
🛒 Add to cart & checkout
💳 Secure payment integration
🔔 Order tracking & email notifications
✨ User authentication & profile management
## ✅ Admin Dashboard:
📦 Product & inventory management
👥 User & role management
📊 Order processing & analytics
⚙️ Dashboard with key business insights
## ✅ Performance & Security:
🚀 Optimized for high speed using SSR (Server-Side Rendering)
🔒 Secure authentication using JWT
🏎️ Fast API requests with RESTful APIs
📉 Scalable & maintainable backend
## ⚙️ Tech Stack Used
## 🏗️ Frontend (Next.js - React Framework)
⚛ Next.js (Server-side rendering, Static Site Generation)
🎨 Tailwind CSS (Responsive UI & styling)
⚡ Redux Toolkit (State management)
🌍 React Query (Data fetching & caching)
📩 Axios (API requests)
## 🔙 Backend (Node.js & Express.js)
🟢 Node.js (JavaScript runtime)
🚀 Express.js (Backend framework)
🛢️ MongoDB with Mongoose (Database)
🔐 JWT Authentication (Secure login system)
🛍 Stripe Payment API (Online transactions)
## 🎯 Why Choose This Project?
✔ Modern Tech Stack – Built with the latest tools & frameworks
✔ Scalability – Supports high traffic with efficient backend handling
✔ User-Friendly UI – Optimized for mobile & desktop users
✔ Secure Payments – Integrated with Stripe for fast transactions
Project screenshots
Register page
Login page
Home page
Shop page
Single product page
Search page
Wishlist page
Cart page
Checkout page
Admin dashboard - All orders page
Admin dashboard - All products page
Admin dashboard - All categories page
Admin dashboard - All users page
Instructions
When you install all the programs you need on your computer you need to download the project. When you download the project, you need to extract it.
After you extract the project you need to open the project folder in your code editor and in the root create a file with the name .env.
You need to put the following code in the .env file and instead of username and password put your MySQL username and password:
```
DATABASE_URL="mysql://username:password@localhost:3306/singitronic_nextjs"
NEXTAUTH_SECRET=12D16C923BA17672F89B18C1DB22A
NEXTAUTH_URL=http://localhost:3000
```
7. After you do it, you need to create another .env file in the server folder and put the same DATABASE_URL you used in the previous .env file:
```
DATABASE_URL="mysql://username:password@localhost:3306/singitronic_nextjs"
```
8. Now you need to open your terminal of choice in the root folder of the project and write:
```
npm install
```
9. Now you need to navigate with the terminal in the server folder and install everything:
```
cd server
npm install
```
10. You will need to run the Prisma migration now. Make sure you are in the server folder and write:
```
npx prisma migrate dev
```
11. Next is to insert demo data. To do it you need to go to the server/utills folder and call insertDemoData.js:
```
cd utills
node insertDemoData.js
```
12. Now you can go back to the server folder and run the backend:
```
cd ..
node app.js
```
13. While your backend is running you need to open another terminal(don't stop the backend). In the second terminal, you need to make sure you are in your root project folder and write the following:
```
npm run dev
```
14. Open http://localhost:3000 and see it live!