https://github.com/vrushabhveer/edgistify-frontend
A full-stack e-commerce application built with React and Node.js, Express, MongoDB. Features include user authentication, cart functionality, and order placement.
https://github.com/vrushabhveer/edgistify-frontend
axios bcrypt cors dotenv expressjs jasonwebtoken javascript mongodb mongoose netlify nodejs nodemon react-router-dom react-tostify reactjs tailwindcss vercel vite
Last synced: 8 months ago
JSON representation
A full-stack e-commerce application built with React and Node.js, Express, MongoDB. Features include user authentication, cart functionality, and order placement.
- Host: GitHub
- URL: https://github.com/vrushabhveer/edgistify-frontend
- Owner: VrushabhVeer
- Created: 2025-02-11T14:24:06.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-02-12T09:28:15.000Z (over 1 year ago)
- Last Synced: 2025-05-17T12:15:54.047Z (about 1 year ago)
- Topics: axios, bcrypt, cors, dotenv, expressjs, jasonwebtoken, javascript, mongodb, mongoose, netlify, nodejs, nodemon, react-router-dom, react-tostify, reactjs, tailwindcss, vercel, vite
- Language: JavaScript
- Homepage: https://edgistify-e-commerce-assignment.netlify.app
- Size: 119 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# E-Commerce Platform 🛒
A full-stack e-commerce platform built using **MERN stack (MongoDB, Express, React, Node.js)**, The platform allows users to register, log in, add products to their cart, and place orders.
## 🚀 Features
- User authentication (Login/Register)
- Authenticated users can add products to their cart.
- Authenticated users can place orders for products in their cart.
- Orders include product details, total price, shipping address, payment status, and order status.
- WT-based authentication for secure access.
- Passwords are securely hashed using bcrypt
- Optimized API responses for quick access.
- Toast notifications for user interactions
- Mobile-friendly UI
## 🖼️ Screenshots
- **Products & Product details**
| Products.jsx | ProductDetails.jsx |
| ---------------------- | ---------------------- |
|  |  |
- **Signup & Placed Pages**
| Signup.jsx | Placed.jsx |
| ---------------------- | ---------------------- |
|  |  |
## ✅ Want to Check the application:
### Credentials for login:
- email: admin@email.com
- password: 123456
## 🖥️ Tech Stack
### Frontend:
- React.js for building the user interface.
- TailwindCSS for styling
- Axios for API requests
- React Toastify for notifications
### Backend:
- Node.js with Express.js
- MongoDB with Mongoose
- JSON Web Token (JWT) for authentication
- bcrypt.js for password hashing
## 📂 Project Structure
### Frontend:
```
└── src/
├── App.css
├── App.jsx
├── index.css
├── main.jsx
├── assets/
├── components/
│ ├── Footer.jsx
│ └── Navbar.jsx
├── pages/
│ ├── Login.jsx
| ├── Checkout.jsx
│ ├── Signup.jsx
│ ├── Products.jsx
│ ├── ProductDetails.jsx
│ └── Placed.jsx
├── routes/
│ ├── ProtectedRoute.jsx
│ └── AllRoutes.jsx
└── api/
└── apis.js
```
### Backend:
```
└── src/
├── index.js
├── config/
│ └── database.js
├── middlewares/
│ └── auth.middleware.js
├── models/
│ ├── cart.model.js
| ├── product.model.js
| ├── order.model.js
│ └── user.model.js
└── routes/
├── cart.routes.js
├── product.routes.js
|── order.routes.js
└── user.routes.js
```
## 🔧 Installation & Setup
1. **Clone the repository:**
```sh
git clone https://github.com/VrushabhVeer/edgistify-frontend.git
cd edgistify-frontend
npm install
```
```sh
git clone https://github.com/VrushabhVeer/edgistify-backend.git
cd edgistify-backend
npm install
```
2. **Set up .env files in backend (server):**
```sh
MONGO_URL=your_mongodb_connection
JWT_SECRET=your_secret_key
PORT=your_port
```
Run the backend server:
```sh
cd edgistify-backend
npm run dev
```
Run the frontend server:
```sh
cd edgistify-frontend
npm run dev
Open http://localhost:5173 in your browser.
## 🔌 API Endpoints
Auth Routes:
```sh
POST /user/signup - Register a new user
POST /user/login - Login user
```
Product Routes:
```sh
GET /products - Get All Products
GET /products/:id - Get Single Product
POST /cart/add - Add to Cart
GET /cart - Get Cart Items
DELETE /cart/:id - Delete Cart Item
POST /order/place - Create a Order
GET /order - Get Order
```
## 📌 Future Enhancements
- Product Search and Filtering 🔍
- Payment Gateway Integration 💳
- Order Tracking 📦
- Admin Dashboard for managing products and orders 📊
- Email Notifications for order updates 📧