Internship Project for Codec Technologies
Complete Online Storefront & Administration Panel
A real-world, high-performance web application optimized for conversion! ⚡
Covers Product Catalogs, Categories, Cart Operations, Customer Accounts, Order Checkout, and an Admin Fulfillment Console.
Tech Stack: Next.js 16 (App Router), Prisma ORM, MySQL, Stripe Payments, Cloudinary Media, Lucide React Icons
Developed as part of my internship with Codec Technologies, this project is a state-of-the-art, production-grade e-commerce application designed with premium aesthetics and modern web standards.
It combines a fast storefront experience for customers with a powerful administration back-office for managing catalog categories, stock level inventory, and processing order fulfillment cycles (from payment to shipping and delivery).
- Dynamic Hero Banner Sliders – Glassmorphic, auto-transitioning sliders (changing every 3-5 seconds) loaded dynamically from database settings.
- Advanced Product Catalog Grid – Real-world seeded product lists with names, descriptions, comparisons pricing, stock, and category badges.
- Robust Category Filters – Dynamic sidebar filters to segment products by category categories.
- Interactive Shopping Cart – Live items list, variant selectors, quantity increment/decrement, and subtotal calculators.
- Customer Authentication System – Long-term secure logins via Lax SameSite HTTP-only cookies rotation.
- Gorgeous Customer Dashboard – Profile Configuration (change name, email, password) and Multiple Addresses Book manager.
- Integrated Checkout Pipeline – Address selector, payment method toggles (Stripe Credit Card vs Cash on Delivery COD), and automatic stock checks during placement.
- Personalized Order History – Customer-facing list of previous order cards showing status, pricing summaries, and itemized listings.
- Admin Stats Overview – Dashboard indicators showing recent sales volume, total customers, categories, and recent orders log.
- Stock Inventory Management – Full CRUD panel for adding, editing, and deleting catalog products, variants, brands, and base prices.
- Category Hierarchy Manager – Creating root categories and nesting children subcategories in a parent-child mapping structure.
- Orders Fulfillment Matrix – Full details modal displaying ordered items, customer profile (name, email), and fulfillment shipping address snapshot.
- Fulfillment Operations – Status transition flow (Pending ➡️ Paid/COD-Shipped ➡️ Delivered) matching COD and online payment workflows.
- System Settings Console – Change storefront titles, upload logos, customize dynamic slider banners, and alter storefront visibility options.
- Node.js 18+ / 20+
- MySQL Server running locally or hosted
# Clone and setup
git clone https://github.com/CodeWithTanim/Full-Stack-E-Commerce.git
cd Full-Stack-E-Commerce
# Install dependencies
npm install
# Configure environment file
# Duplicate .env.example to .env and insert your MySQL credentials:
# DATABASE_URL="mysql://YOUR_USER:YOUR_PASSWORD@localhost:3306/ecommerce_db"# Create target database in MySQL
mysql -u root -p -e "CREATE DATABASE ecommerce_db;"
# Synchronize tables schema mapping
npx prisma db push
# Seed 20 real product catalogs, banners, and default accounts
npx prisma db seed# Start local web development server
npm run devOpen your web browser and navigate to http://localhost:3000.
Use these credentials to log into the storefront and admin panel:
| Account Type | Password | |
|---|---|---|
| 🛡️ Administrator | admin@ecommerce.com |
admin123 |
| 👤 Storefront Customer | customer@ecommerce.com |
customer123 |
Full-Stack-E-Commerce/
││
├── 📁 prisma
│ ├── 📄 schema.prisma
│ └── 📄 seed.ts
├── 📁 public
│ ├── 📁 uploads
│ │ └── 🖼️ 1786092081048-CodeWithTanim.png
│ ├── 📄 favicon.ico
│ ├── 🖼️ file.svg
│ ├── 🖼️ globe.svg
│ ├── 🖼️ next.svg
│ ├── 🖼️ storefront_banner.png
│ ├── 🖼️ vercel.svg
│ └── 🖼️ window.svg
├── 📁 src
│ ├── 📁 app
│ │ ├── 📁 about-us
│ │ │ └── 📄 page.tsx
│ │ ├── 📁 account
│ │ │ └── 📄 page.tsx
│ │ ├── 📁 admin
│ │ │ ├── 📁 categories
│ │ │ │ └── 📄 page.tsx
│ │ │ ├── 📁 customers
│ │ │ │ └── 📄 page.tsx
│ │ │ ├── 📁 orders
│ │ │ │ └── 📄 page.tsx
│ │ │ ├── 📁 products
│ │ │ │ ├── 📁 [id]
│ │ │ │ │ └── 📄 page.tsx
│ │ │ │ ├── 📁 new
│ │ │ │ │ └── 📄 page.tsx
│ │ │ │ └── 📄 page.tsx
│ │ │ ├── 📁 settings
│ │ │ │ └── 📄 page.tsx
│ │ │ ├── 📄 layout.tsx
│ │ │ └── 📄 page.tsx
│ │ ├── 📁 api
│ │ │ └── 📁 v1
│ │ │ ├── 📁 addresses
│ │ │ │ ├── 📁 [id]
│ │ │ │ │ └── 📄 route.ts
│ │ │ │ └── 📄 route.ts
│ │ │ ├── 📁 admin
│ │ │ │ ├── 📁 categories
│ │ │ │ │ ├── 📁 [id]
│ │ │ │ │ │ └── 📄 route.ts
│ │ │ │ │ └── 📄 route.ts
│ │ │ │ ├── 📁 customers
│ │ │ │ │ ├── 📁 [id]
│ │ │ │ │ │ └── 📄 route.ts
│ │ │ │ │ └── 📄 route.ts
│ │ │ │ ├── 📁 orders
│ │ │ │ │ └── 📄 route.ts
│ │ │ │ ├── 📁 products
│ │ │ │ │ ├── 📁 [id]
│ │ │ │ │ │ └── 📄 route.ts
│ │ │ │ │ └── 📄 route.ts
│ │ │ │ └── 📁 settings
│ │ │ │ └── 📄 route.ts
│ │ │ ├── 📁 auth
│ │ │ │ ├── 📁 login
│ │ │ │ │ └── 📄 route.ts
│ │ │ │ ├── 📁 logout
│ │ │ │ │ └── 📄 route.ts
│ │ │ │ ├── 📁 me
│ │ │ │ │ └── 📄 route.ts
│ │ │ │ ├── 📁 refresh
│ │ │ │ │ └── 📄 route.ts
│ │ │ │ └── 📁 register
│ │ │ │ └── 📄 route.ts
│ │ │ ├── 📁 categories
│ │ │ │ └── 📄 route.ts
│ │ │ ├── 📁 orders
│ │ │ │ └── 📄 route.ts
│ │ │ ├── 📁 products
│ │ │ │ ├── 📁 [slug]
│ │ │ │ │ └── 📄 route.ts
│ │ │ │ └── 📄 route.ts
│ │ │ ├── 📁 settings
│ │ │ │ └── 📄 route.ts
│ │ │ └── 📁 upload
│ │ │ └── 📄 route.ts
│ │ ├── 📁 cancellation-returns
│ │ │ └── 📄 page.tsx
│ │ ├── 📁 cart
│ │ │ └── 📄 page.tsx
│ │ ├── 📁 checkout
│ │ │ └── 📄 page.tsx
│ │ ├── 📁 contact-us
│ │ │ └── 📄 page.tsx
│ │ ├── 📁 faq
│ │ │ └── 📄 page.tsx
│ │ ├── 📁 login
│ │ │ └── 📄 page.tsx
│ │ ├── 📁 orders
│ │ │ └── 📄 page.tsx
│ │ ├── 📁 payments
│ │ │ └── 📄 page.tsx
│ │ ├── 📁 privacy
│ │ │ └── 📄 page.tsx
│ │ ├── 📁 products
│ │ │ └── 📁 [slug]
│ │ │ └── 📄 page.tsx
│ │ ├── 📁 register
│ │ │ └── 📄 page.tsx
│ │ ├── 📁 shipping
│ │ │ └── 📄 page.tsx
│ │ ├── 📁 terms-of-uses
│ │ │ └── 📄 page.tsx
│ │ ├── 🎨 globals.css
│ │ ├── 📄 layout.tsx
│ │ └── 📄 page.tsx
│ ├── 📁 components
│ │ ├── 📄 ContactForm.tsx
│ │ ├── 📄 FAQAccordion.tsx
│ │ ├── 📄 Footer.tsx
│ │ ├── 📄 Header.tsx
│ │ ├── 📄 HeroSlider.tsx
│ │ ├── 📄 ProductCard.tsx
│ │ └── 📄 ProductInteractiveDetails.tsx
│ ├── 📁 context
│ │ └── 📄 AuthContext.tsx
│ ├── 📁 lib
│ │ ├── 📄 auth.ts
│ │ ├── 📄 currencies.ts
│ │ ├── 📄 currency.ts
│ │ ├── 📄 prisma.ts
│ │ └── 📄 settings.ts
│ └── 📄 middleware.ts
├── ⚙️ .gitignore
├── 📄 eslint.config.mjs
├── 📄 next.config.ts
├── ⚙️ package-lock.json
├── ⚙️ package.json
├── 📄 postcss.config.mjs
├── 📄 prisma.config.ts
└── ⚙️ tsconfig.json
- 🏗️ Architecture Design – Learned Next.js App Router routing layouts and middleware RBAC controls.
- 💳 Payment Integrations – Implemented both online Stripe credit card payments and secure offline Cash on Delivery (COD) workflows.
- 🗄️ Relational Databases – Worked with Prisma ORM and MySQL to handle nested catalog structures, variant stock management, and address mappings.
- 🔐 Session Security – Handled sameSite Lax HTTP-only cookies rotation for long-term secure customer authentication.
- 🚀 Fulfillment Logic – Built order status progression matrices (Pending ➡️ Shipped ➡️ Delivered) matching real-world warehousing routines.
MD SAMIUR RAHMAN TANIM
Intern at Codec Technologies
🔗 GitHub | LinkedIn
- Thanks to Codec Technologies for the internship opportunity.
- Next.js & Prisma developers for the framework resources.
- Open-source community for the badges and connect icons.
Pull requests are welcome!
If you find bugs or want to add features (such as reviews moderation, email receipts, or stock alerts), feel free to fork the repository and submit a pull request.
