After spending time learning full-stack development, I finally built my first full-stack web application — ShopKart, a modern e-commerce platform.
This project helped me understand how real production systems work, from authentication and database design to payment integration and admin dashboards.
🛍️ What is ShopKart?
ShopKart is a full-stack e-commerce website where users can browse products, add items to a cart, and complete purchases online.
It also includes an admin dashboard for managing products, users, and categories.
🔗 Live Demo
https://shopkartsite.vercel.app
⚙️ Tech Stack
- Frontend
- Next.js (App Router)
- React
- TypeScript
- Tailwind CSS
- Backend
- Next.js API Routes
- Prisma ORM
- PostgreSQL (Neon)
- Other Tools
- Redis (for OTP verification)
- Chart.js (admin analytics dashboard)
- Cashfree (payment integration)
- Vercel (deployment)
✨ Key Features
- User Features
- User authentication
- Email verification using OTP
- Product search and filtering
- Pagination for products
- Cart system
- Checkout system
- Payment integration
- Admin Features
- Create and delete categories
- Add and manage products
- Manage users
- Admin analytics dashboard
🔐 OTP Authentication with Redis
For email verification, I implemented an OTP system using Redis.
Flow:
- User signs up
- OTP is generated
- OTP is stored in Redis with expiration
- User enters OTP
- OTP is validated and account gets verified
Using Redis made OTP verification fast and secure since the data automatically expires.
📊 Admin Analytics with Chart.js
The admin dashboard includes analytics visualizations using Chart.js.
This helps display useful information like:
- user statistics
- product data
- activity insights
📚 What I Learned
Building this project taught me a lot about:
Full-stack architecture
Designing relational databases
Authentication flows
Payment gateway integrations
Using Redis for temporary data storage
Creating admin dashboards
This was a great hands-on experience connecting frontend, backend, and database systems together.
🔗 Project Links
🌐 Live Website
https://shopkartsite.vercel.app
💻 GitHub Repository
https://github.com/TakshilCodes/shopkart-ecom
🚀 What’s Next?
I’m continuing to build more projects and improve my full-stack development skills.
If you have any feedback or suggestions, I’d love to hear them!
webdev #nextjs #fullstack #typescript #opensource