A production-ready full-stack e-commerce application featuring advanced AI-powered product recommendations, semantic search capabilities, and intelligent browsing history. Built as an academic project showcasing modern web development practices and cutting-edge AI integration. This project demonstrates end-to-end application design, containerized deployments, CI/CD automation, and scalable cloud infrastructure using AWS.
⚠️ Educational Project NoticeThis project was built strictly for educational and academic purposes.
The live aws deployment may be modified or taken down in the future to manage infrastructure costs.
- Product Catalog - Comprehensive product inventory with category-based browsing
- Smart Shopping Cart - Real-time cart management with quantity updates and price calculations
- Secure Authentication - JWT-based user authentication with protected routes
- Order Management - Complete order processing, tracking, and history
- Favorites System - Save and manage favorite products for later
Two search modes for maximum flexibility:
- Traditional Search - Fast keyword-based product search
- AI Semantic Search - Natural language product discovery
- Users can describe what they're looking for in plain English
- Example: "comfortable running shoes for marathon training"
- AI understands intent and finds semantically similar products
- Powered by Gemini-004 embeddings and vector similarity
- Personalized product suggestions on the homepage
- Analyzes user browsing patterns and preferences
- Uses vector similarity to match user interests
- Updates dynamically based on user behavior
- Every product page displays AI-recommended similar items
- Cosine similarity search finds semantically related products
- Goes beyond simple category matching
- Discovers products with similar attributes, style, and purpose
- Intelligent browsing history that persists across sessions
- Automatically tracks products users view
- Helps users pick up where they left off
- Database-backed for reliability
- Minimalist Interface - Clean, modern design inspired by premium e-commerce sites
- Fully Responsive - Seamless experience across mobile, tablet, and desktop
- Fast Performance - Optimized loading and smooth interactions
- React 19 - Modern UI with hooks and concurrent features
- TypeScript - Type-safe development
- Redux Toolkit - Predictable state management
- RTK Query - Powerful data fetching and caching
- Tailwind CSS - Utility-first styling
- Shadcn UI - Accessible component library
- React Router v6 - Client-side routing
- Vite - Lightning-fast build tool
- Node.js - JavaScript runtime
- Express.js - Robust web framework
- TypeScript - Type-safe backend development
- PostgreSQL - Reliable relational database
- Prisma ORM - Type-safe database client
- pgvector Extension - Vector similarity search
- JWT - Secure token-based authentication
- Bcrypt - Password hashing
- Gemini-004 API - State-of-the-art embeddings generation
- Vector Embeddings - 512-dimensional product representations
- Cosine Similarity - Semantic matching algorithm
- pgvector - High-performance vector operations in PostgreSQL
This application is also fully containerized and deployed on AWS using modern DevOps practices.
- AWS EC2 – Hosting the production server
- Docker – Containerization of frontend and backend services
- Docker Compose – Multi-container orchestration
- Nginx – Reverse proxy and static file serving
- Frontend (React) served via Nginx
- Backend (Node.js + Express) running in a separate container
- PostgreSQL hosted on Neon (managed PostgreSQL)
- All services orchestrated using docker-compose
The application follows a production-grade setup similar to real-world SaaS deployments.
client/
├── src/
│ ├── components/ # Reusable UI components
│ │ ├── Hero.tsx
│ │ ├── ProductCard.tsx
│ │ ├── NavBar.tsx
│ │ ├── RecentlyViewed.tsx
│ │ ├── UserRecommendation.tsx
│ │ └── ui/ # Shadcn UI components
│ ├── pages/ # Route-based pages
│ │ ├── Home.tsx
│ │ ├── Product.tsx
│ │ ├── Cart.tsx
│ │ ├── Orders.tsx
│ │ └── ...
│ ├── store/ # Redux store
│ │ ├── index.ts # Store configuration
│ │ └── authSlice.ts # Auth state slice
│ ├── services/ # RTK Query APIs
│ │ ├── user.services.ts
│ │ ├── product.services.ts
│ │ ├── cart.services.ts
│ │ └── favourites.services.ts
│ ├── types/ # TypeScript definitions
│ ├── layout/ # Layout components
│ └── lib/ # Utilities
└── ...
server/
├── src/
│ ├── controllers/ # Request handlers
│ │ ├── user.controller.ts
│ │ ├── product.controller.ts
│ │ ├── cart.controller.ts
│ │ ├── recommendation.controller.ts
│ │ └── ...
│ ├── routes/ # API routes
│ │ ├── user.routes.ts
│ │ ├── product.routes.ts
│ │ └── ...
│ ├── middlewares/ # Custom middleware
│ │ ├── authMiddleware.ts
│ │ ├── Validation.ts
│ │ └── multerMiddleware.ts
│ ├── utils/ # Helper functions
│ │ ├── embeddings.ts # AI embedding generation
│ │ └── utils.ts
│ ├── config/ # Configuration
│ │ └── db.ts # Database connection
│ └── types/ # TypeScript definitions
├── prisma/
│ ├── schema.prisma # Database schema
│ ├── migrations/ # Database migrations
│ └── seed/ # Seed data
└── ...
Live diagram:
👉 https://dbdiagram.io/d/692c25f8d6676488baf1aa00
| Feature | Description | Implementation |
|---|---|---|
| Product Page Recommendations | "Similar Products" section | Finds products with similar embeddings to current product |
| Homepage Recommendations | "You Might Like" section | Analyzes recently viewed products, finds similar items |
| Semantic Search | Natural language search | Converts query to embedding, finds matching products |
- Node.js v18 or higher
- PostgreSQL v14 or higher with pgvector extension
- pnpm (recommended) or npm
- Gemini API Key from Google AI Studio
- Clone the repository
git clone https://github.com/Himanshu0518/eShop.git
cd eShop- Install dependencies
Frontend:
cd client
pnpm installBackend:
cd server
pnpm install- Set up PostgreSQL
Create database:
CREATE DATABASE eshop;
\c eshop
CREATE EXTENSION vector;- Configure environment variables
Server .env:
# Server Configuration
DATABASE_URL=your_db_uri
PORT=8000
JWT_SECRET=your_jwt_secret_key
CLIENT_URL=http://localhost:5173
CLOUDINARY_CLOUD_NAME=...
CLOUDINARY_API_KEY=...
CLOUDINARY_API_SECRET=...
GEMINI_API_KEY=...Client .env:
VITE_API_URL=http://localhost:8000- Run database migrations
cd server
pnpm prisma migrate dev- Seed the database (optional but recommended)
pnpm run seedThis will:
- Create sample users
- Add 50+ products with embeddings
- Generate test orders
- Populate categories
If you modify the database schema directly in Neon (for example: changing embeddings, adding a column, or updating relations), follow these steps to keep Prisma in sync without resetting data.
Run the required SQL command in the Neon SQL Console to update the database schema.
Create a new migration folder:
mkdir prisma/migrations/20251201_add_product_to_order
Inside the folder, create a migration.sql file:
touch prisma/migrations/20251201_add_product_to_order/migration.sql
Add a comment to indicate the change was applied manually:
-- Schema updated manually in Neon
7.3 — Mark the migration as applied
Tell Prisma that this migration has already been applied to the database:
npx prisma migrate resolve --applied 20251201_add_product_to_order
This updates Prisma’s migration history without modifying the database.
7.4 — Verify migration status
Always verify that Prisma is in sync with the database:
npx prisma migrate status
Development Mode:
Terminal 1 (Frontend):
cd client
pnpm devTerminal 2 (Backend):
cd server
pnpm devAccess:
- Frontend:
http://localhost:5173 - Backend API:
http://localhost:8000
Production Build:
# Build frontend
cd client
pnpm build
# Start backend
cd server
pnpm startThis is primarily an academic project, but contributions are welcome!
- Fork the repository
- Create a feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
- Follow existing code style
- Add tests for new features
- Update documentation
- Keep commits atomic and well-described
Himanshu Singh
B.Tech 3rd Year | Electronics and Communication Engineering | IIIT Una
Passionate about full-stack development, AI/ML integration, and building scalable web applications. This project represents a culmination of months of learning and hands-on development.
- GitHub: @Himanshu0518
- LinkedIn: Himanshu Singh
- Email: himanshu.iiitu2027@gmail.com
- Portfolio: MyPortfolio
Special thanks to:
- Google AI - For the Gemini API and advanced AI capabilities
- Vercel - For excellent deployment platform and documentation
- Shadcn - For the beautiful, accessible component library
- Tailwind Labs - For the powerful utility-first CSS framework
- PostgreSQL Community - For the pgvector extension
- Prisma Team - For the excellent ORM and developer experience
This project is maintained as a learning and portfolio project.
The live deployment and cloud resources may be paused or removed at any time to reduce ongoing costs.
If the live demo is unavailable, the complete source code and setup instructions remain fully accessible in this repository.
If you found this project helpful or interesting:
- ⭐ Star the repository
- 🍴 Fork and build upon it
- 📢 Share with others
- 🐛 Report issues
- 💡 Suggest new features
Built with ❤️ as an academic project
Demonstrating modern full-stack development with AI integration