Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/basir/ts-mern-amazona
https://github.com/basir/ts-mern-amazona
Last synced: 3 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/basir/ts-mern-amazona
- Owner: basir
- Created: 2023-01-05T13:33:36.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2023-05-17T06:03:00.000Z (over 1 year ago)
- Last Synced: 2024-10-30T00:27:09.968Z (3 months ago)
- Language: TypeScript
- Size: 1.26 MB
- Stars: 55
- Watchers: 3
- Forks: 18
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# TypeSript MERN AMAZONA
Welcome to my TypeScript course to build a fully-functional e-commerce website exactly like amazon. Open your code editor and follow me for the next hours to build an e-commerce website using MERN stack (MongoDB, ExpressJS, React and Node.JS).
## Get Course:
[https://youtu.be/-ifcPnXHn8Q](https://youtu.be/-ifcPnXHn8Q)
## Demo Website
- 👉 Render : [https://ts-amazona-final.onrender.com](https://ts-amazona-final.onrender.com)
## You Will Learn
- Creating react application by Vite in TypeScript
- Defining and exporting Types like product, orders and user in frontend
- Creating e-commerce pages like cart, checkout and place order using React Router Dom
- Using React hooks to handle form inputs and fetch backend api
- Managing and monitoring application state by React Context
- Handling shopping cart using reducers and local storage
- Building backend web api by node.js, express.js and MongoDB
- Handling authentication and authorization using JsonWebToken and express middleware.
- Deploying your application on cloud servers like Render
- PayPal and Stipe for online payment,
- Render for deployment
- Google Map for locate customer address on map
- Mailgun to email order receipt to user
## Run Locally
### 1. Clone repo
```
$ git clone [email protected]:basir/ts-mern-amazona.git
$ cd ts-mern-amazona
```
### 2. Create .env File
- duplicate .env.example in backend folder and rename it to .env
### 3. Setup MongoDB
- Local MongoDB
- Install it from [here](https://www.mongodb.com/try/download/community)
- In .env file update MONGODB_URI=mongodb://localhost/amazona
- OR Atlas Cloud MongoDB
- Create database at [https://cloud.mongodb.com](https://cloud.mongodb.com)
- In .env file update MONGODB_URI=mongodb+srv://your-db-connection
### 4. Run Backend
```
$ cd backend
$ npm install
$ npm start
```
### 5. Run Frontend
```
# open new terminal
$ cd frontend
$ npm install
$ npm start
```
### 6. Seed Users and Products
- Run this on browser: http://localhost:5000/api/seed
- It returns admin email and password and 6 sample products
### 7. Admin Login
- Run http://localhost:3000/signin
- Enter admin email and password and click signin
## Support
- Contact Instructor: [Basir](mailto:[email protected])
## Lessons
- [View All Lessons Scripts](/lessons/)