LaraSell is a mobile-first social commerce PWA built from scratch with Next.js and TypeScript. It combines social content, product discovery, and e-commerce, allowing shops to showcase and sell products through posts and videos while users can discover products, interact with content, communicate with shops, and complete purchases.
The project focuses on building a production-oriented frontend architecture with reusable UI, feature-based organization, type-safe data handling, responsive interactions, and a PWA-first experience.
Note
This repository is a portfolio version of a project developed in a professional environment. The original repository contains additional branches, commits, and team-specific configurations. Sensitive information such as API keys and environment variables has been removed for security reasons.
- Social Product Feed — Discover products through posts, videos, stories, and reels.
- Shop Stores — Dedicated storefronts for shops and their products.
- Likes & Comments — Social interactions with optimistic UI updates for a responsive experience.
- Product Discovery — Browse categories, search products, explore shops, and save products.
- Shopping Cart — Add, update, and manage products before checkout.
- Payments — End-to-end purchasing and payment flow.
- Offer Codes — Apply promotional codes during checkout.
- Order History — Access previous purchases from the user profile.
- Direct Messaging — Conversations between users and shops.
- Support Messaging — In-app conversations with application support.
- Authentication — Registration, login, and OTP flows.
- JWT Authentication — JWT-based authentication handled through cookies across authenticated application flows.
- Protected Routes — Separation of public and authenticated application areas.
- User Profiles — Profile management, settings, language preferences, and purchase history.
- Progressive Web App — Installable, mobile-first experience with offline handling.
LaraSell uses the Next.js App Router with a modular, feature-oriented structure.
- Route Groups — Separate authentication, public, and private application areas.
- Feature-Oriented Organization — Feature-specific API logic, models, requests, hooks, and components are colocated where appropriate.
- Reusable Component System — Shared UI primitives and domain-agnostic components reduce duplication across features.
- Server State Management — React Query handles asynchronous server state and data fetching.
- Application State — Dedicated stores manage cross-feature state such as session, user, cart, search, and settings.
- Shared HTTP Layer — Centralized request infrastructure keeps API communication consistent.
- Type-Safe Data Flow — TypeScript models and request definitions provide stronger contracts between application layers.
- Optimistic Interactions — Latency-sensitive actions such as likes and comments provide immediate UI feedback while synchronizing with the backend.
- Responsive Architecture — Components and layouts are designed around mobile-first interaction patterns rather than treating mobile as a secondary breakpoint.
The project was built from scratch with an emphasis on practical frontend engineering patterns used in larger applications.
- Designing a scalable frontend architecture for multiple product domains.
- Separating UI, feature logic, API communication, and shared infrastructure.
- Building reusable components and form controls instead of duplicating UI implementations.
- Managing both server state and global client state with appropriate boundaries.
- Implementing authenticated flows with cookie-based JWT handling and protected routes.
- Designing responsive interactions for a mobile-first PWA.
- Handling loading, error, empty, and offline states consistently across features.
- Building social interactions with optimistic updates to improve perceived performance.
- Supporting complex flows such as cart, offer-code validation, payment, messaging, and order history.
- Structuring the application to keep feature-specific changes isolated and maintainable.
- Framework: Next.js
- Language: TypeScript
- Styling: Tailwind CSS
- Server State: React Query
- Forms: React Hook Form
- Validation: Zod
- React Hot Toast
- Responsive drawers, sheets, skeletons, and loading states
- Progressive Web App capabilities
LaraSell covers a broad set of frontend application domains within a single product:
Authentication
↓
Product Discovery → Shops → Products
↓ ↓
Social Feed Messaging
↓
Cart → Offer Code → Payment
↓
Orders & History