🛒 Indriya — E-Commerce Platform

A full-stack e-commerce application with a Flask REST API backend and React frontend featuring JWT authentication, product management with image upload, search with debounce, infinite scroll, and cart with localStorage persistence.

Built by Krish Sharma. Brand name: Indriya (used throughout the frontend).

---

🏗️ Architecture

┌─────────────────────────────────────────┐
│     React Frontend (ecommerce_frontend/) │
│  • React 19 + React Router 7            │
│  • Redux Toolkit (auth state)           │
│  • Infinite scroll + debounced search   │
│  • localStorage cart                    │
└──────────────┬──────────────────────────┘
               │  HTTP (port 3000)
               ▼
┌─────────────────────────────────────────┐
│    Flask REST API (backend/indriya.py)   │
│  • Flask-RESTful resources              │
│  • JWT auth (user/admin separation)     │
│  • CORS enabled for localhost:3000      │
└──────────────┬──────────────────────────┘
               │
               ▼
┌─────────────────────────────────────────┐
│          SQLite Database                │
│  Tables: user, admin, product, address  │
└─────────────────────────────────────────┘

There's also a legacy server-rendered Flask app at mainapp/ (Jinja2 + WTForms) — an earlier prototype that is no longer active.

---

✨ Features

Frontend

Feature	Details
Product browsing	Homepage grid + full products page with infinite scroll
Product search	Debounced (300ms) live search with AbortController, in both hero and navbar
Product details	Dedicated page with image, description, price, date
User registration	Form with optional address fields, JWT stored in Redux + localStorage
User login	Accepts email or phone (auto-detected via @), Redux state management
Cart	localStorage-persisted, add/remove items, checkout bar with total
Profile dropdown	View/Edit Profile, Settings, Logout
Auth gating	Navbar shows Sign In when logged out, Profile icon when logged in
Responsive navbar	Active route highlighting with react-router-dom

Backend API

Feature	Details
User auth	Register/login with JWT tokens (identity prefix u)
Admin auth	Register/login with JWT tokens (identity prefix a)
Product CRUD	List (paginated), get by ID, create with image upload
Product search	Case-insensitive partial name match via ilike
CORS	Configured for http://localhost:3000

---

🚀 Quick Start

Backend

cd backend
pip install flask flask-sqlalchemy flask-restful flask-jwt-extended flask-cors
python create_db.py
python indriya.py
# API running at http://127.0.0.1:5000

Frontend

cd ecommerce_frontend
npm install
npm start
# App running at http://localhost:3000

---

📡 API Reference

Base URL: http://127.0.0.1:5000

Authentication

Method	Endpoint	Body	Returns
POST	/api/user/register	{first_name, last_name, phone_number, password, email?, country_code?, address?: {line1, line2?, city, state, country}}	JWT token (u{id})
POST	/api/user/login	{email or phone_number, password}	JWT token
POST	/api/admin/register	{first_name, last_name, phone_number, password, email, country_code?}	JWT token (a{id})
POST	/api/admin/login	{email or phone_number, password}	JWT token

Products

Method	Endpoint	Auth	Params	Description
GET	/api/products	No	?id=X or ?page=N	Get single or paginated list (10/page)
POST	/api/products	Admin	Form: name, description, price, prod_img (file)	Create product with image
GET	/api/products/search	No	?q=query&page=N	Search by name

---

🗄️ Database Schema

user

Column	Type	Notes
user_id	INTEGER PK	Auto-increment
first_name	VARCHAR(20)
last_name	VARCHAR(20)
email	VARCHAR(35)	Unique, nullable
country_code	VARCHAR(5)	Default +91
phone_number	VARCHAR(15)	Unique
password	VARCHAR(35)	⚠️ Plaintext
address_id	INTEGER FK	→ address.address_id

admin

Column	Type	Notes
admin_id	INTEGER PK
email	VARCHAR(35)	Unique, NOT NULL
phone_number	VARCHAR(20)	Unique
password	VARCHAR(35)	⚠️ Plaintext
products	relationship	One-to-many with Product

product

Column	Type	Notes
product_id	INTEGER PK
name	VARCHAR(100)
description	TEXT
price	FLOAT
admin_id	INTEGER FK	→ admin.admin_id
bought_by	INTEGER	Default 0
img_url	derived	/static/images/products/{id}.jpg

address

Column	Type	Notes
address_id	INTEGER PK
line1, city, state, country	VARCHAR	Required
line2	VARCHAR	Nullable

---

📁 Full Project Structure

ecommerce/
├── backend/                           # Flask REST API
│   ├── indriya.py                     # Main app: models, resources, routes (330 LOC)
│   ├── create_db.py                   # DB initialization
│   ├── project.db / instance/         # SQLite databases
│   ├── mainapp/
│   │   ├── models/                    # Orphaned model files (unused)
│   │   └── routes/login.py            # Seed script with sample products
│   └── static/images/products/        # Uploaded product images
├── mainapp/                           # Legacy Flask app (abandoned)
│   ├── __init__.py, routes.py, forms.py, models.py
│   └── templates/ (home, register, layout)
├── ecommerce_frontend/                # React 19 application
│   ├── public/
│   │   └── index.html                 # HTML shell (Bootstrap 5.3 CDN)
│   ├── src/
│   │   ├── App.js                     # Router: /, /products, /products/:id,
│   │   │                              #          /signup, /signin, /cart, /logout
│   │   ├── index.js                   # Entry — Redux Provider wrapping App
│   │   └── components/
│   │       ├── NavBar.js              # Logo "Indriya", search, Home/Products/Cart/SignIn
│   │       ├── NavBarSearch.js        # Fullscreen overlay search with debounce (300ms)
│   │       ├── HeroSection.js         # Hero banner + search overlay + results
│   │       ├── ProductGrid.js         # Featured products grid (fetches page 1)
│   │       ├── ProductCard.js         # Card with placeholder img, name, price, Buy Now
│   │       ├── CardOfProductPage.js   # Enhanced card: add/remove cart, hover effects
│   │       ├── ProductsPage.js        # Infinite scroll via react-infinite-scroll-component
│   │       ├── ProductDetails.js      # Product detail page by ID
│   │       ├── Cart.js                # Cart from localStorage, per-item fetch, remove
│   │       ├── Checkout.js            # Total price + "Proceed to pay" button
│   │       ├── Signup.js              # Registration with optional address section
│   │       ├── Signin.js              # Login (auto-detect email vs phone via @)
│   │       ├── Logout.js              # Clears Redux auth + localStorage, redirects /
│   │       ├── ProfileContainer.js    # Dropdown: View/Edit Profile, Settings, Logout
│   │       ├── Footer.js              # Free Shipping / 2-Year Warranty / 24/7 Support
│   │       ├── writen.js              # Older Signin variant (unused)
│   │       ├── banners.js             # Placeholder
│   │       ├── features/auth/         # Redux auth slice
│   │       ├── redux/store.js         # Redux store config
│   │       ├── styles/                # 13 CSS files (auth, cart, navbar, etc.)
│   │       └── images/                # Logo + assets
│   └── package.json                   # React 19, Redux Toolkit, react-router-dom 7,
│                                      # react-infinite-scroll-component, lucide-react
└── plan/initial.txt                   # Original project plan

---

🧩 Tech Stack

Layer	Technology
Frontend	React 19, React Router 7, Redux Toolkit, Lucide React
Backend	Python 3.11, Flask, Flask-RESTful, Flask-JWT-Extended
Database	SQLite via SQLAlchemy
Auth	JWT (plaintext passwords ⚠️)
Styling	Custom CSS + Bootstrap 5.3 CDN

---

🔜 Roadmap

• User & Admin auth with JWT
• Product CRUD + image upload
• Product search (debounced, AbortController)
• Infinite scroll product listing
• Cart with localStorage persistence
• Password hashing (bcrypt/werkzeug)
• Order management
• Stripe payment integration
• Checkout flow
• Environment-based config (no hardcoded secrets)
• Docker deployment

---

📄 License

MIT