Urban Snacks

About This Project

Urban Snacks is a modern, premium platform for authentic Bangladeshi snacks. Built for visual excellence, buttery-smooth interactions, and a complete shopping experience — from discovery to doorstep delivery. It features a full-featured admin dashboard with real-time analytics, inventory management, and order processing.

Key Features

• Dynamic Hero Slider: Admin-managed banners with category-linked CTAs, auto-play, and smooth crossfade transitions using Embla Carousel.
• Comprehensive Shopping Experience: Smart Cart with Zustand, multi-step checkout, and Coupon System with real-time discount validation.
• Triple Payment Options: Seamlessly integrated Cash on Delivery, Stripe (international cards), and SSLCommerz (bKash, Nagad, local banks).
• Robust Admin Dashboard: Real-time analytics and 30-day performance charts using Recharts for total revenue, orders, users, and items.
• Advanced Inventory Management: Full CRUD for snack products with Next.js Image optimization, multi-image upload via ImgBB API, and category assignment.
• Complete Order Pipeline: Advance orders through Processing, Shipped, and Delivered statuses with integrated client-side PDF invoice generation.
• Premium Visual Design: Built with Tailwind CSS 4, Shadcn/UI, and Framer Motion for micro-interactions, page transitions, and full dark-mode support.

Challenges Faced

• Secure Server-First Data Fetching: Architecting service layer to execute on the server and forward session cookies via `next/headers` to prevent client-side token exposure.
• Dynamic Delivery Calculation: Implementing complex shipping algorithms based on destination city with additional weight-based surcharges for heavy items.
• Dual Payment Gateway Synchronization: Managing reliable state transitions and webhook callbacks between Stripe and SSLCommerz checkouts.

Future Improvements

• Implement multi-language support (English/Bengali) for a broader local audience.
• Add user wishlists for saving favorite snack items for future purchases.
• Integrate an AI-powered snack recommendation engine based on user taste profiles.