https://github.com/tarun-upadhyay/techeagle_fullstack_assingment
MERN Stack technology is used in this application. Users and managers are assigned different roles. After creating an account, the user can login, view products, add them to their cart, and check the status of their order. When the manager is logged in, he can update orders, add products to the store, and edit them.
https://github.com/tarun-upadhyay/techeagle_fullstack_assingment
authentication authorization cookie expressjs formik-yup material-tailwind mongodb mongodbatlas mongoose node nodejs protected-routes react react-carousel react-icons react-router-dom reactjs readux sweetalert2 tailwindcss
Last synced: about 2 months ago
JSON representation
MERN Stack technology is used in this application. Users and managers are assigned different roles. After creating an account, the user can login, view products, add them to their cart, and check the status of their order. When the manager is logged in, he can update orders, add products to the store, and edit them.
- Host: GitHub
- URL: https://github.com/tarun-upadhyay/techeagle_fullstack_assingment
- Owner: tarun-upadhyay
- Created: 2023-12-13T17:38:35.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-12-16T17:24:43.000Z (over 2 years ago)
- Last Synced: 2026-01-03T14:28:08.708Z (5 months ago)
- Topics: authentication, authorization, cookie, expressjs, formik-yup, material-tailwind, mongodb, mongodbatlas, mongoose, node, nodejs, protected-routes, react, react-carousel, react-icons, react-router-dom, reactjs, readux, sweetalert2, tailwindcss
- Language: JavaScript
- Homepage: https://good-tan-eagle-tie.cyclic.app/
- Size: 4.19 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
🌐 MERN Stack App
MongoDB, Expressjs, React/Redux, Nodejs
> MERN app,Tech Stacks-> MongoDB, Expressjs, React/Redux, TailwindCss, Github, Nodejs.
If the web-app is not responsing, please wait and reload. This may occur due to Cyclic's free version not responding.
### Credential of Manager
```
email: manager@techeagle.com
password: manager123
```
# Tech Eagle Full Stack Coding Assignment.
---
This Ecommerce Website project represents a robust platform that integrates backend and frontend technologies to offer a seamless online shopping experience. Leveraging Node.js for the backend, React.js for the frontend, and MongoDB for the database, this application encompasses a comprehensive set of functionalities catering to both customers and managers.
---
## Requirements
- For development, you will only need Node.js and a node global package, NPM, installed in your environement.
## Clone or Download
```terminal
$ git clone https://github.com/tarun-upadhyay/techEagle_FullStack_Assingment.git
$ yarn # or npm i
```
## Project structure
```terminal
frontend
- package.json
- src
- index.js
- App.jsx
- Components
- Pages
---
backend
- package.json
- app.js
- controller
- authController.js
- allother controles..
- DB
- db.config.js
...
```
## Client-side usage(PORT: 3000)
```terminal
$ cd frontend // go to frontend folder
$ yarn # or npm i // npm install packages
$ npm start // run it locally
```
## Server-side usage(PORT: 5000 || 8080)
```
$ cd backend // go to client folder
$ yarn # or npm i // npm install packages
$ npm start // run it locally
```
### Prepare your secret
- Inside ->.env
- MONGO_URI
- JWT_SECRET
- JWT_LIFETIME
---
# Features.
### We have created this application for two different types of users such as Manager and customer.
# Customer
- Homepage of Customer's website
1. The website provides product information along with price information.
2. Detailed description of the product
3. For adding to cart we have to login first or signup first.
4. If we logined successfully so We will get the name of top right corner
5. Suppose you logined successfully and you are adding to your cart then you get pop.
6. If already present inside your cart then you will get errror message
7. Come to Cart section if you cart is empty you will see like this
and have some stuff inside it.
here you can increase quantity or delete it.
8. Now it's time to place your order simply click on place order button.
9. This is the order page which show case the all ordered items and their status.
 10. The order status will change when mangaer accepts it, suppose it accepted or changed status.
### The features I showed are for customers, if products do not load or orders do not appear, please wait for a few minutes. It's a cyclical issue that will be resolved after some time.
---
# Manager
## Only role manager can access this page or api-end points.
1. This page shows the Manager' store status
2. Here Manager can manage the order status just clicking on update status.
 3. Inside all products section have two button to manage the products.
 4. After clicking on the edit button, you will be redirected to the edit page, which will contain the old product details, and you can update the product by clicking on the update product button.
 5. Add product section to adding new product to the store.
6. For deleting just simply click on delete button it will first confirm you are sure or not
If deleted successfully
---
# Thank you for your time
- Thank you for using this application
- Feel free to ask any query.
[My Github](https://github.com/tarun-upadhyay)
https://github.com/tarun-upadhyay
[My Portfolio](https://tarun-upadhyay.github.io/)
https://tarun-upadhyay.github.io/
[Email ME](mailto:tarunu88@gmail.com)
---