LootMart - Frontend Replica

A modern, high-performance frontend replica of LootMart.com.pk, built with Next.js 16 and React 19. This project demonstrates advanced frontend architecture, performance optimizations, and best practices for building scalable e-commerce applications.

🚀 Features

• Multi-Store Support: Browse products from different stores with dedicated store pages
• Product Catalog: Infinite scroll with pagination, search, and filtering capabilities
• Shopping Cart: Real-time cart management with persistent state
• Responsive Design: Fully responsive UI optimized for all device sizes
• Performance Optimized: Debounced search, memoization, and intersection observer for infinite scroll
• Modern UI: Built with Tailwind CSS and Radix UI components
• Type Safety: Full TypeScript implementation with strict type checking

🛠️ Tech Stack

• Framework: Next.js 16.1.4 (App Router)
• React: 19.2.3 with React Compiler
• TypeScript: 5.x with strict mode
• Styling: Tailwind CSS 4.x
• UI Components: Radix UI primitives
• Icons: Lucide React
• Code Quality: Biome (linting & formatting)
• Package Manager: pnpm

📁 Project Structure

loot-mart/
├── src/
│   ├── app/                    # Next.js App Router pages
│   │   ├── api/               # API routes
│   │   ├── cart/              # Cart page
│   │   ├── store/[slug]/      # Dynamic store pages
│   │   └── page.tsx           # Home page
│   ├── components/
│   │   ├── common/            # Shared components
│   │   ├── features/          # Feature-specific components
│   │   ├── layout/            # Layout components (Header, etc.)
│   │   ├── store/             # Store-related components
│   │   └── ui/                # Reusable UI primitives
│   ├── contexts/              # React Context providers
│   ├── data/                  # Mock data and loaders
│   ├── hooks/                 # Custom React hooks
│   ├── lib/                   # Utility functions and constants
│   ├── services/              # API service layer
│   └── types/                 # TypeScript type definitions
├── public/                     # Static assets
└── package.json

🏗️ Architecture Highlights

Component Organization

• Feature-based structure: Components organized by domain (store, features, layout)
• Separation of concerns: Clear boundaries between UI, business logic, and data layers
• Reusable components: Modular UI components built with Radix UI

State Management

• Context API: Global cart state managed via React Context
• Local State: Component-level state for UI interactions
• Server State: Server-side data fetching with Next.js App Router

Performance Optimizations

• Debounced Search: 400ms debounce to reduce unnecessary filtering
• Memoization: useMemo for expensive computations (filtered products)
• Infinite Scroll: Intersection Observer API for efficient pagination
• Code Splitting: Automatic code splitting with Next.js App Router
• Image Optimization: Next.js Image component (with remote patterns configured)

🚦 Getting Started

Prerequisites

• Node.js 18+
• pnpm (recommended) or npm/yarn

Installation

1. Clone the repository:

git clone <repository-url>
cd loot-mart

2. Install dependencies:

pnpm install

3. Run the development server:

pnpm dev

4. Open http://localhost:3000 in your browser

Available Scripts

• pnpm dev - Start development server
• pnpm build - Build for production
• pnpm start - Start production server
• pnpm lint - Run Biome linter
• pnpm format - Format code with Biome

🎨 Key Components

Home Page (/)

• Hero section with personalized greeting
• Feature cards showcasing platform benefits
• Popular categories grid
• Store listing with store cards
• WhatsApp integration button

Store Page (/store/[slug])

• Store-specific welcome banner
• Featured products carousel
• Popular products with infinite scroll
• Search and filter functionality
• Grid/List view toggle
• Fixed checkout bar

Cart Page (/cart)

• Cart item management
• Quantity updates
• Total calculation
• Checkout flow

🔧 Configuration

Environment Variables

No environment variables required for basic setup. The project uses mock data by default.

Image Domains

Configured in next.config.ts to support multiple image CDNs including:

• Imgur
• Unsplash
• Placeholder services
• And more...

📊 Performance Considerations

• Server-Side Rendering: Initial page load with SSR for better SEO
• Client-Side Hydration: Smooth transitions with React hydration
• Lazy Loading: Components loaded on demand
• Optimized Images: Next.js Image component with proper sizing
• Memoized Computations: Expensive operations cached with useMemo
• Debounced Inputs: Search inputs debounced to reduce computation

🎯 Future Enhancements

• Virtual scrolling for large product lists
• Loading skeletons for better UX
• Cart persistence
• Unit and integration tests
• Accessibility improvements (ARIA labels, keyboard navigation)
• PWA support

📝 Code Quality

• TypeScript: Strict mode enabled for type safety
• Biome: Fast linter and formatter
• ESLint: Configured for Next.js best practices
• Code Organization: Clear separation of concerns

🚢 Deployment

Vercel (Recommended)

The easiest way to deploy is using Vercel:

1. Push your code to GitHub
2. Import the project in Vercel
3. Deploy with one click

Other Platforms

This Next.js app can be deployed to any platform that supports Node.js:

• Netlify
• AWS Amplify
• Railway
• DigitalOcean App Platform

📄 License

This project is a frontend replica created for demonstration purposes.

👤 Author

Shoaib Ud Din

---

Note: This is a frontend-only implementation only ready to be intergated with backend.