SK Logo
Linear Logo

Sufi’s Market

Halal Grocery E-commerce Platform

Next.jsTypeScriptTailwind CSSshadcn/ui

Role: Frontend Developer•Duration: 3–4 Months

Case Study Overview

Sufi’s Market is a modern halal grocery e-commerce platform focused on delivering a smooth and mobile-friendly shopping experience. The system allows users to browse, filter, and purchase groceries with a clean and fast UI built using modern frontend architecture.

Project Overview

Fast, simple, and mobile-first grocery shopping experience built for real users.

Highlights

  • Mobile-first grocery shopping experience
  • Fast product filtering and search system
  • Clean and scalable frontend architecture
  • Optimized performance for real users
  • Reusable component-based UI system

Features

Product Discovery

  • ›Browse grocery categories (vegetables, fruits, dairy, meat, snacks, drinks)
  • ›View branded products like Aarong, Pran, Nestlé
  • ›Instant product search system

Filtering System

  • ›Filter by price range
  • ›Filter by brand
  • ›Filter by dietary preferences
  • ›Optimized real-time filtering experience

Cart & Checkout

  • ›Add / remove items from cart
  • ›Quantity management system
  • ›Structured checkout flow
  • ›Order summary UI

User System

  • ›Login / Signup / Reset password
  • ›Profile management
  • ›Address management
  • ›Order history tracking

My Responsibilities

  • Built full frontend application using Next.js and TypeScript
  • Developed reusable component architecture
  • Implemented product browsing and filtering system
  • Created responsive mobile-first UI
  • Handled form validation using React Hook Form + Zod
  • Optimized performance and rendering flow

UI System

  • Reusable components (buttons, cards, modals)
  • Consistent design system across pages
  • Responsive layout system
  • Clean navigation structure

    • Architecture

  • Next.js scalable folder structure
  • Component-based architecture
  • Separation of UI and logic layers
  • Maintainable and reusable codebase

    • Performance

  • Lazy loading for faster page load
  • Optimized product rendering
  • Improved filtering performance
  • Fast mobile UI experience

    • Results

    ✦Smooth mobile-first shopping experience
    ✦Fast product discovery system
    ✦Scalable frontend architecture
    ✦Optimized real-world performance

    Summary

    A modern halal grocery e-commerce platform built with Next.js and TypeScript, focused on fast product discovery, smooth shopping flow, and mobile-first user experience. The project demonstrates strong frontend architecture and reusable component design.

    This is a private client project. Source code and live internal system are not publicly available.

    View Project

    Project Details

    My Role

    Frontend Developer

    Duration

    3–4 Months

    Project Type

    Private Client Project

    Technologies

    Next.jsTypeScriptTailwind CSS+10 more

    Why This Project Matters

    A modern halal grocery e-commerce platform built with Next.js and TypeScript, focused on fast product discovery, smooth shopping flow, and mobile-first user experience. The project demonstrates strong frontend architecture and reusable component design.

    Full Tech Stack

    Next.jsTypeScriptTailwind CSSshadcn/uiFramer MotionAnimated UIReact Hook FormZodStripeGoogle Maps APIDOMPurifyPythonDjango

    Key Highlights

    • Mobile-first grocery shopping experience
    • Fast product filtering and search system
    • Clean and scalable frontend architecture
    • Optimized performance for real users
    • Reusable component-based UI system