Skip to content

Commit 61f20d8

Browse files
Mishra-coderMishra-coder
committed
update README with tech badges, architecture and schema
1 parent f0485b7 commit 61f20d8

1 file changed

Lines changed: 151 additions & 57 deletions

File tree

‎README.md‎

Lines changed: 151 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -1,98 +1,192 @@
11
# Zappify Shoes
2-
**Zappify Shoes** is an online shoe store built to sell just *one* premium pair of shoes. Instead of a messy website with hundreds of products, Zappify gives the user a super clean and focused shopping experience for that single product.
32

4-
### Simple Breakdown of What It Does:
5-
- **Beautiful Design (Frontend):** It shows off the shoe with smooth animations and a modern look so customers get a high-quality, premium feel while browsing.
6-
- **User Accounts:** Anyone can easily and safely create an account, log in, and keep their personal details secure.
7-
- **Buying Process:** It carefully handles the entire process of adding the shoe to the cart, collecting shipping details, and placing an order.
8-
- **Powerful Engine (Backend):** Behind the scenes, it uses a real database to safely store user data and orders. It's built on popular, modern technologies (React for what you see, Node.js and MongoDB for what happens behind the scenes).
3+
A complete full-stack e-commerce shoe store built with React and Node.js.
94

10-
In simple words, Zappify is a complete, real-world example of an e-commerce website designed to look great and work perfectly from start to checkout.
5+
## Technology Stack
116

12-
## Key Features
7+
![React](https://img.shields.io/badge/React_19-20232A?style=for-the-badge&logo=react&logoColor=61DAFB) ![Vite](https://img.shields.io/badge/Vite-646CFF?style=for-the-badge&logo=vite&logoColor=white) ![Framer Motion](https://img.shields.io/badge/Framer_Motion-0055FF?style=for-the-badge&logo=framer&logoColor=white) ![CSS3](https://img.shields.io/badge/CSS3-1572B6?style=for-the-badge&logo=css3&logoColor=white) ![Google OAuth](https://img.shields.io/badge/Google_OAuth-4285F4?style=for-the-badge&logo=google&logoColor=white) ![Lucide React](https://img.shields.io/badge/Lucide_React-F56565?style=for-the-badge&logo=lucide&logoColor=white) ![Node.js](https://img.shields.io/badge/Node.js-339933?style=for-the-badge&logo=nodedotjs&logoColor=white) ![Express.js](https://img.shields.io/badge/Express.js-000000?style=for-the-badge&logo=express&logoColor=white) ![MongoDB](https://img.shields.io/badge/MongoDB-47A248?style=for-the-badge&logo=mongodb&logoColor=white) ![Mongoose](https://img.shields.io/badge/Mongoose-880000?style=for-the-badge&logo=mongoose&logoColor=white) ![JWT](https://img.shields.io/badge/JWT-000000?style=for-the-badge&logo=jsonwebtokens&logoColor=white) ![Bcrypt](https://img.shields.io/badge/Bcrypt.js-003A70?style=for-the-badge&logo=letsencrypt&logoColor=white) ![Helmet](https://img.shields.io/badge/Helmet-FF6B35?style=for-the-badge&logo=helmet&logoColor=white) ![Morgan](https://img.shields.io/badge/Morgan-000000?style=for-the-badge&logo=npm&logoColor=white) ![Vercel](https://img.shields.io/badge/Vercel-000000?style=for-the-badge&logo=vercel&logoColor=white) ![Docker](https://img.shields.io/badge/Docker-2496ED?style=for-the-badge&logo=docker&logoColor=white) ![GitHub Actions](https://img.shields.io/badge/GitHub_Actions-2088FF?style=for-the-badge&logo=githubactions&logoColor=white)
138

14-
- **Storefront UI**: Beautiful, interactive React frontend built with Vite and Framer Motion.
15-
- **Authentication**: Secure user login & registration with JWT (JSON Web Tokens).
16-
- **Product Management**: Clean API for managing premium shoe listings.
17-
- **Order System**: Seamless order processing and shipping details.
18-
- **Database**: Robust MongoDB integration using Mongoose.
19-
- **Infrastructure**: Ready for production with Docker and GitHub Actions (CI/CD).
9+
---
10+
11+
## Architecture Diagram
2012

21-
## Tech Stack
13+
```
14+
+-------------------------------------------------------------------+
15+
| |
16+
| +-------------+ +-------------+ +-------------+ |
17+
| | Front-end | | Back-end | | Database | |
18+
| | ReactJS |<---->| NodeJS |<---->| MongoDB | |
19+
| |UI Components| | ExpressJS | | Collections | |
20+
| | API calls | |API endpoints| | Documents | |
21+
| +-------------+ +-------------+ +-------------+ |
22+
| |
23+
+-------------------------------------------------------------------+
24+
```
2225

23-
### Frontend
24-
- **Framework**: React (Vite)
25-
- **Styling/Animations**: CSS, Framer Motion, Lucide React
26+
---
2627

27-
### Backend
28-
- **Runtime**: Node.js
29-
- **Framework**: Express.js
30-
- **Database**: MongoDB Atlas
31-
- **Security**: JWT, Bcrypt.js, Helmet, CORS
32-
- **CI/CD**: GitHub Actions
33-
- **Containerization**: Docker
28+
## Database Schema
29+
30+
```mermaid
31+
erDiagram
32+
Users ||--o{ Orders : places
33+
Products ||--o{ Orders : included_in
34+
35+
Users {
36+
ObjectId _id PK
37+
String name
38+
String email UK
39+
String password
40+
Boolean isAdmin
41+
}
42+
43+
Products {
44+
ObjectId _id PK
45+
ObjectId user FK
46+
String name
47+
String brand
48+
String category
49+
Number price
50+
Number countInStock
51+
}
52+
53+
Orders {
54+
ObjectId _id PK
55+
ObjectId user FK
56+
Array orderItems
57+
Object shippingAddress
58+
String paymentMethod
59+
Number totalPrice
60+
Boolean isPaid
61+
Boolean isDelivered
62+
}
63+
```
64+
65+
---
66+
67+
## What This Project Does
68+
69+
Zappify is a full-featured shoe e-commerce platform where users can browse 44+ premium shoe collections, filter and search products, manage their cart and wishlist, go through a complete 3-step checkout, and track or cancel their orders.
70+
71+
---
72+
73+
## Main Features
74+
75+
### For Users
76+
- Browse 44+ premium shoe listings
77+
- Filter by category and theme
78+
- Sort by price and new arrivals
79+
- Search products by name, brand or category
80+
- Product detail page with size selection and UK Size Chart
81+
- Add to cart with size validation
82+
- Wishlist toggle on product cards and detail page
83+
- 3-step checkout - Bag to Address to Payment (COD / UPI / Card)
84+
- Order history with tracking timeline
85+
- Order cancellation with reason selection form
86+
- Google OAuth 2.0 login
87+
- Normal email/password sign up and sign in
88+
- User-specific order history per account
89+
- Persistent login via localStorage
90+
91+
### For Admins
92+
- Secure JWT-protected API routes
93+
- Admin middleware for role-based access
94+
- Create and manage product listings via REST API
95+
96+
---
3497

3598
## Getting Started
3699

37-
### 1. Backend Setup
38-
Navigate to the `backend/` folder and install dependencies:
100+
### What You Need
101+
- Node.js 18+
102+
- MongoDB (local or Atlas)
103+
104+
### Installation
105+
106+
1. Clone the repo
107+
```bash
108+
git clone https://github.com/Mishra-coder/Zappify.git
109+
cd Zappify
110+
```
111+
112+
2. Backend setup
39113
```bash
40114
cd backend
41115
npm install
42116
```
43117

44-
Create a `.env` file from the provided `.env.example` and add your configuration:
118+
Create `backend/.env`:
45119
```env
46120
PORT=5001
47121
MONGO_URI=your_mongodb_uri
48122
JWT_SECRET=your_secret_key
123+
NODE_ENV=development
49124
```
50125

51-
Run the backend locally:
52126
```bash
53127
npm run dev
54128
```
55129

56-
### 2. Frontend Setup
57-
Navigate to the `frontend/` folder and install dependencies:
130+
3. Frontend setup
58131
```bash
59132
cd frontend
60133
npm install
134+
npm run dev
61135
```
62136

63-
Run the frontend locally:
64-
```bash
65-
npm run dev
137+
App opens at http://localhost:5173
138+
139+
---
140+
141+
## Project Structure
142+
143+
```
144+
Zappify/
145+
├── .github/workflows/
146+
├── frontend/
147+
│ ├── public/shoes/
148+
│ └── src/
149+
│ ├── components/
150+
│ ├── data/products.js
151+
│ ├── App.jsx
152+
│ ├── main.jsx
153+
│ └── index.css
154+
└── backend/
155+
├── config/db.js
156+
├── controllers/
157+
├── middlewares/
158+
├── models/
159+
├── routes/
160+
└── server.js
66161
```
67162

68-
## Docker Deployment (Backend)
163+
---
164+
165+
## API Endpoints
166+
167+
| Method | Endpoint | Description | Auth |
168+
|---|---|---|---|
169+
| POST | /api/users | Register user | No |
170+
| POST | /api/users/login | Login user | No |
171+
| GET | /api/products | Get all products | No |
172+
| GET | /api/products/:id | Get product by ID | No |
173+
| POST | /api/products | Create product | Admin |
174+
175+
---
176+
177+
## Docker
69178

70-
To build and run the backend using Docker:
71179
```bash
72-
cd backend
73-
docker build -t zappify-backend .
180+
docker build -t zappify-backend ./backend
74181
docker run -p 5001:5001 zappify-backend
75182
```
76183

77-
## Repository Structure
184+
---
78185

79-
```text
80-
Zappify/
81-
├── .github/workflows/ # CI/CD Pipeline
82-
├── backend/ # Core Backend Logic
83-
│ ├── config/ # Database configuration
84-
│ ├── controllers/ # Route logic
85-
│ ├── models/ # Database schemas (Mongoose)
86-
│ ├── routes/ # API endpoints
87-
│ └── server.js # Main entry point
88-
└── frontend/ # React Frontend Application
89-
├── public/ # Static assets
90-
├── src/ # Frontend source code
91-
│ ├── components/ # React components
92-
│ ├── App.jsx # Main App component
93-
│ └── index.css # Global styles
94-
└── vite.config.js # Vite configuration
95-
```
186+
## Author
187+
188+
Devendra Mishra - [@Mishra-coder](https://github.com/Mishra-coder)
96189

97190
---
98-
Built for Zappify shoes.
191+
192+
Built with love for Zappify Shoes

0 commit comments

Comments
 (0)