A modern, full-featured grocery delivery web application built with Next.js 16, TypeScript, Tailwind CSS v4, Zustand, and Zod. Features a complete e-commerce experience with authentication, product browsing, shopping cart, and order management.
- Splash Screen - Initial loading screen with smooth transitions
- Onboarding - Welcome screen with brand introduction
- Phone Number Authentication - OTP-based verification with country selector
- Email/Password Login - Traditional authentication flow
- Social Login - Google and Facebook integration (simulated)
- User Registration - Complete sign-up with validation
- Home Page - Featured products, categories, and deals
- Product Catalog - Browse products by category
- Product Details - Detailed product pages with images, descriptions, and reviews
- Search & Filter - Find products quickly
- Favorites - Save favorite products for quick access
- Shopping Cart - Add, remove, and manage cart items
- Quantity Management - Increment/decrement product quantities
- Checkout Flow - Delivery and payment method selection
- Payment Gateway - Simulated payment processing
- Order Success - Confirmation page with order tracking
- Order Failure - Error handling with retry options
- Account Management - User profile and settings
- Location Selection - Choose delivery zone and area
- Order History - Track past orders
- Responsive Design - Mobile-first, desktop-optimized
- Cursor Pointer - All interactive elements have proper cursor styling
- Loading States - Smooth loading indicators
- Toast Notifications - User feedback with react-hot-toast
- Form Validation - Real-time validation with Zod schemas
- Accessibility - ARIA labels and keyboard navigation support
- Framework: Next.js 16.1.1 (App Router)
- Language: TypeScript 5 (Strict Mode)
- Styling: Tailwind CSS v4
- State Management: Zustand 5.0.9
- Form Validation: Zod 4.3.5 + React Hook Form 7.70.0
- Notifications: React Hot Toast 2.6.0
- Fonts: Custom Gilroy font family (Light & ExtraBold)
- No UI Libraries: Pure Tailwind CSS implementation
- Node.js 18+
- npm or yarn
-
Install dependencies
npm install
-
Run development server
npm run dev
-
Open your browser Navigate to http://localhost:3000
-
Build for production
npm run build npm start
├── app/ # Next.js App Router pages
│ ├── account/ # User account page
│ ├── cart/ # Shopping cart page
│ ├── explore/ # Product exploration page
│ ├── favorites/ # Favorite products page
│ ├── home/ # Home page with products
│ ├── location/ # Location selection
│ ├── login/ # Email/password login
│ ├── onboarding/ # Welcome/onboarding screen
│ ├── order-failure/ # Order failure page
│ ├── order-success/ # Order success confirmation
│ ├── otp/ # OTP verification
│ ├── payment-gateway/ # Payment processing
│ ├── phone-number/ # Phone number input
│ ├── product/[id]/ # Dynamic product detail page
│ ├── sign-in/ # Sign in with phone/social
│ ├── sign-up/ # User registration
│ ├── splash/ # Splash screen
│ ├── layout.tsx # Root layout with SEO metadata
│ ├── page.tsx # Root page (redirects to splash)
│ └── globals.css # Global styles and theme
├── components/ # Reusable components
│ ├── icons/ # Icon components
│ │ └── NavigationIcons.tsx
│ ├── layout/ # Layout components
│ │ ├── BottomNav.tsx # Mobile bottom navigation
│ │ ├── DesktopNav.tsx # Desktop navigation
│ │ └── Navbar.tsx # Main navbar
│ ├── shop/ # Shopping components
│ │ ├── CategoryCard.tsx # Category display card
│ │ └── ProductCard.tsx # Product display card
│ └── ui/ # UI components
│ ├── Button.tsx # Primary button component
│ ├── CountrySelector.tsx # Country selection dropdown
│ ├── Input.tsx # Form input component
│ ├── NumericKeypad.tsx # Numeric keypad for OTP
│ ├── OTPInput.tsx # OTP input component
│ ├── QuantityButton.tsx # Quantity increment/decrement
│ ├── Select.tsx # Select dropdown component
│ └── Skeleton.tsx # Loading skeleton component
├── store/ # Zustand state stores
│ ├── authStore.ts # Authentication state
│ ├── cartStore.ts # Shopping cart state
│ ├── locationStore.ts # Location state
│ ├── otpStore.ts # OTP verification state
│ └── productStore.ts # Product state
├── data/ # Static data
│ └── products.ts # Product data
├── lib/ # Utility functions
│ └── zod-schemas.ts # Zod validation schemas
├── types/ # TypeScript type definitions
│ └── index.ts
└── public/ # Static assets
└── assets/ # Images and icons
- Primary Color:
#53B175(Green) - Used for buttons, links, and accents - Typography:
- Gilroy Light (300) - Body text
- Gilroy ExtraBold (800) - Headings
- Border Radius:
rounded-2xl(16px) for inputs and buttons - Spacing: Consistent Tailwind spacing scale
- Interactive Elements: All buttons have
cursor: pointerfor better UX - Color Palette:
- Background: White (
#ffffff) - Text Primary: Dark gray (
#171717) - Gray Scale: 50-900 for various UI elements
- Background: White (
- ✅ Splash screen with auto-redirect
- ✅ Onboarding/Welcome screen
- ✅ Phone number validation (Bangladesh format: +880)
- ✅ OTP input with 4-digit code verification
- ✅ Email validation with live feedback
- ✅ Password visibility toggle
- ✅ Social login simulation (Google & Facebook)
- ✅ Location selection with zones and areas
- ✅ User registration with comprehensive validation
- ✅ Product catalog with categories
- ✅ Product detail pages
- ✅ Shopping cart functionality
- ✅ Add to favorites
- ✅ Quantity management
- ✅ Search and filter products
- ✅ Checkout flow
- ✅ Payment gateway simulation
- ✅ Order success/failure pages
- ✅ Form validation with Zod schemas
- ✅ TypeScript strict mode (no
anytypes) - ✅ Zustand state management with persistence
- ✅ Responsive design (mobile-first, desktop-optimized)
- ✅ SEO optimization with metadata
- ✅ Cursor pointer on all interactive elements
- ✅ Loading states and error handling
- ✅ Toast notifications for user feedback
- Splash Screen → Shows for 2 seconds, then redirects
- Onboarding → Welcome screen with "Get Started" button
- Sign In → Choose phone number or social login
- Phone Number → Enter mobile number (+880 format)
- OTP Verification → Enter 4-digit code
- Location Selection → Select zone and area
- Home → Main shopping application
- Login → Direct email/password login
- Sign Up → Create new account with validation
- Guest Mode → Browse products without authentication
- Home/Explore → Browse products and categories
- Product Details → View product information
- Add to Cart → Add products with quantity
- Cart → Review items and proceed to checkout
- Checkout → Select delivery and payment methods
- Payment → Process payment (simulated)
- Order Confirmation → View order success/failure
- All authentication is simulated (no backend required)
- OTP accepts any 4-digit code for demo purposes
- Social login simulates API calls with loading delays
- Location data is mocked with predefined zones and areas
- Payment processing is simulated for demonstration
- State persists in localStorage using Zustand persist middleware
- TypeScript Strict Mode: All types are properly defined
- No
anytypes: Full type safety throughout the application - Component-based: Reusable, modular components
- Form Validation: Client-side validation with Zod
- Error Handling: Comprehensive error states and user feedback
- Image Optimization: Next.js Image component for optimized loading
- Font Optimization: Local fonts with proper loading strategies
- Code Splitting: Automatic with Next.js App Router
- SEO Optimized: Metadata and Open Graph tags included
This project is deployed on:
- Vercel (Recommended for Next.js) - One-click deployment
npm run build # Build for production
npm run dev # Start production server