Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/kuzma02/electronics-ecommerce-shop-with-admin-dashboard-only-frontend
https://github.com/kuzma02/electronics-ecommerce-shop-with-admin-dashboard-only-frontend
Last synced: 15 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/kuzma02/electronics-ecommerce-shop-with-admin-dashboard-only-frontend
- Owner: Kuzma02
- License: mit
- Created: 2024-06-09T15:25:19.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2024-06-10T13:53:01.000Z (5 months ago)
- Last Synced: 2024-06-10T17:44:47.893Z (5 months ago)
- Language: TypeScript
- Size: 11.4 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Electronics eCommerce Shop With Admin Dashboard Only Frontend
**This is only the front-end code.** For the full version of the project with the back-end and step-by-step video instructions for running the app visit this link: [https://github.com/Kuzma02/Electronics-eCommerce-Shop-With-Admin-Dashboard-NextJS-NodeJS](https://github.com/Kuzma02/Electronics-eCommerce-Shop-With-Admin-Dashboard-NextJS-NodeJS)
If you decide to follow this guide, you will also need the back-end code: [https://github.com/cesnak02/Singitronic-backend](https://github.com/cesnak02/Singitronic-backend)
# Instructions
1. To run the app you first need to download and install Node.js and npm on your computer. Here is a link to the tutorial that explains how to install them: [https://www.youtube.com/watch?v=4FAtFwKVhn0](https://www.youtube.com/watch?v=4FAtFwKVhn0). Also here is the link where you can download them: [https://nodejs.org/en](https://nodejs.org/en)
2. When you install Node.js and npm on your computer you need to download and install MySQL on your computer. Here is another link to the tutorial which explains how you can download and install MySQL on your computer: [https://www.youtube.com/watch?v=BxdSUGBs0gM&t=212s](https://www.youtube.com/watch?v=BxdSUGBs0gM&t=212s). Here is a link where you can download MySQL: [https://dev.mysql.com/downloads/installer/](https://dev.mysql.com/downloads/installer/)
3. This step is optional, but highly recommended if you don't have a database management app. Because HeidiSQL is beginner-friendly and very easy to use than other database management options. Here is a link to the tutorial which explains how to download and install HeidiSQL: [https://www.youtube.com/watch?v=oJ24MyLeiPs](https://www.youtube.com/watch?v=oJ24MyLeiPs) and here is a link where you can download it: [https://www.heidisql.com/](https://www.heidisql.com/)
4. When you install all the programs you need on your computer, you need to download both projects(front-end and back-end repositories). When you download both projects, you need to extract them.
5. After you extract both projects you need to move the server folder from the back-end repository to the root of the front-end project. After that, you need to open the project folder in your code editor and in the root create a file with the name .env.
6. 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](http://localhost:3000) and see it live!
# Project screenshots
# Home page
# Shop page
# Single product page
# Register page
# Login 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
