Building Mclab as a responsive cosmetics e-commerce platform

The Motivation Behind the Project

Mclab is a responsive cosmetics e-commerce platform built to feel polished, fast, and reliable. The goal was to present products clearly while keeping the storefront easy to use on different screen sizes.

Core Features and Design Goals

• Responsive product browsing: the storefront adapts well across desktop and mobile.
• Cosmetics-focused presentation: product visuals and layout work together to support the brand.
• Backend-connected data flow: the app is not just a static showcase; it is tied to the system behind it.

Technical Implementation

• Architected a decoupled frontend/backend/mail-service topology with three separate deployments: the Next.js storefront handles SSR and product pages, the NestJS backend exposes a RESTful API with Supabase as the persistence layer, and an isolated mail service handles transactional emails.
• Implemented server-side rendering with Next.js for product catalog pages to ensure fast initial loads and SEO indexability, with Tailwind CSS utility classes for a responsive grid that adapts from mobile single-column to desktop multi-column layouts.
• Built a product management flow connecting the NestJS backend to Supabase for image storage, inventory tracking, and category filtering — with the frontend consuming typed API responses for type-safe product display.

The Technology Stack

Full-stack architecture with Next.js + Tailwind CSS on the frontend, NestJS as the API layer, and Supabase for database and file storage. The project is split into four independent packages (frontend, backend, mail-service, and legacy backend), each deployable separately.

Final Reflections

This is the kind of project that shows how much detail goes into making an online store feel dependable.