https://github.com/dhrub404/ecommerce_project
🚀 Just built and deployed Cartify — a full-stack premium e-commerce platform using React, Django REST Framework, and Redux Toolkit! 🧩 Implemented key features like user authentication, shopping cart, wishlist, profile management, and order handling, all wrapped in a clean, modern UI.
https://github.com/dhrub404/ecommerce_project
api backend django ecommerce-website frontend fullstack react redux rest-api web-development
Last synced: 6 months ago
JSON representation
🚀 Just built and deployed Cartify — a full-stack premium e-commerce platform using React, Django REST Framework, and Redux Toolkit! 🧩 Implemented key features like user authentication, shopping cart, wishlist, profile management, and order handling, all wrapped in a clean, modern UI.
- Host: GitHub
- URL: https://github.com/dhrub404/ecommerce_project
- Owner: Dhrub404
- Created: 2025-12-28T17:01:28.000Z (6 months ago)
- Default Branch: main
- Last Pushed: 2025-12-31T03:48:14.000Z (6 months ago)
- Last Synced: 2026-01-02T01:36:25.438Z (6 months ago)
- Topics: api, backend, django, ecommerce-website, frontend, fullstack, react, redux, rest-api, web-development
- Language: JavaScript
- Homepage:
- Size: 2.34 MB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🛒 Cartify - Premium E-Commerce Platform
A full-stack e-commerce application built with React, Django REST Framework, and Redux, featuring a premium UI, user authentication, shopping cart, wishlist, and order management.
   
## ✨ Features
### 🎨 Modern UI/UX
- **Premium Design**: Gradient branding, glassmorphism headers, and polished typography ("Outfit" font).
- **Responsive Layout**: Mobile-first design using React Bootstrap and custom CSS.
- **Micro-interactions**:
- 3D-style Wishlist Heart toggle.
- Animated "Empty Cart" and "Empty Wishlist" states.
- Hover effects on product cards and buttons.
### 👤 User Authentication
- User registration and login
- JWT-based authentication (Access/Refresh tokens)
- Protected routes (Orders, Profile)
### 🛍️ Shopping Experience
- **Product Catalog**: Grid view with ratings (`4.5 ★`) and review counts.
- **Search**: Real-time product search functionality.
- **Product Details**: Comprehensive view with images, descriptions, and stock status.
### 🛒 Shopping Cart
- **Redesigned Cart**: Clean white-card layout with purple accents.
- **Smart Management**: Add/remove items, update quantities.
- **Live Summary**: Real-time subtotal and total calculation.
- **Persistence**: Cart state synced with backend/local storage.
### ❤️ Wishlist
- **Toggle Feature**: Heart icon on product cards toggles add/remove instantly.
- **Visual Feedback**: Red heart animation on selection.
- **Management Page**: Dedicated screen to view and remove saved items.
- **Empty State**: Beautiful animated heart pulse when wishlist is empty.
### 📦 Order Management
- **Seamless Checkout**: Streamlined process from Cart to Order placement.
- **Order Success Screen**:
- **Animation**: Green Checkmark pop-in effect.
- **Details Card**: Full summary with images, order ID, and expected delivery date.
- **Order History**: View past orders with status and totals.
### 🎯 Additional Features
- **Toast Notifications**: Custom stacked toast messages for actions (though heavily refined for cleaner UX).
- **Profile Dashboard**: Sidebar navigation for Profile, Orders, and Addresses.
- **Interactive Elements**: animated buttons and loading states.
## 🚀 Tech Stack
### Frontend
- **React 19** - UI library
- **Redux Toolkit** - State management
- **React Bootstrap** - Responsive components
- **Vite** - High-speed build tool
- **CSS3** - Custom variables, animations, and gradients
### Backend
- **Django** - High-level Python web framework
- **Django REST Framework (DRF)** - Powerful API construction
- **SQLite** - Default database (easily scalable to PostgreSQL)
- **JWT** - Secure authentication
## 📁 Project Structure
```
ecommerce_project/
├── backend/
│ ├── manage.py # Django entry point
│ ├── ecommerce_project/ # Project settings
│ ├── products/ # Product & Wishlist logic
│ ├── users/ # Auth & Profile logic
│ ├── orders/ # Order management logic
│ └── cart/ # Cart management logic
│
├── frontend/
│ ├── src/
│ │ ├── components/
│ │ │ ├── Navbar.jsx # "Cartify" branded navbar
│ │ │ ├── ...
│ │ │
│ │ ├── screens/
│ │ │ ├── ProductListScreen.jsx # Home page
│ │ │ ├── CartScreen.jsx # Redesigned Cart
│ │ │ ├── WishlistScreen.jsx # New Wishlist UI
│ │ │ ├── OrderSuccessScreen.jsx # Animated Success
│ │ │ ├── ...
│ │ │
│ │ ├── actions/ # Redux actions
│ │ ├── reducers/ # Redux reducers
│ │ ├── App.jsx # Main routing
│ │ └── index.css # Global premium styles
│ │
│ └── package.json
```
## 🛠️ Installation & Setup
### Backend (Django)
1. **Create virtual environment**
```bash
python -m venv .venv
# Windows
.venv\Scripts\activate
```
2. **Install dependencies**
```bash
cd backend
pip install -r requirements.txt
```
3. **Run migrations**
```bash
python manage.py migrate
```
4. **Start server**
```bash
python manage.py runserver
```
Backend runs at: `http://127.0.0.1:8000`
### Frontend (React + Vite)
1. **Navigate to frontend**
```bash
cd frontend
```
2. **Install dependencies**
```bash
npm install
```
3. **Start development server**
```bash
npm run dev
```
Frontend runs at: `http://localhost:5173`
## 🔐 User-Specific Data
- **Cart & Orders**: Stored in database linked to the authenticated user.
- **Wishlist**: Currently utilizes LocalStorage for immediate interaction, with backend sync architecture ready.
## 🤝 Contributing
This project is part of a premium e-commerce portfolio.
**Happy Shopping with Cartify! 🛍️**