Building Royal Cosmetics as a responsive storefront

The Motivation Behind the Project

Royal Cosmetics is a responsive e-commerce platform for cosmetics products. The work centered on making the storefront look professional while staying practical enough for product browsing on both desktop and mobile.

Core Features and Design Goals

• Responsive storefront layout: the site adapts to different device widths without losing structure.
• Cosmetics product presentation: the design supports a polished retail feel.
• Backend integration: the frontend works alongside Node, Express, and Supabase.

Technical Implementation

• Built a full-stack architecture with Angular services communicating to a Node/Express REST API, with Supabase handling authentication, database queries, and row-level security for multi-user data isolation.
• Implemented Angular route guards and interceptors for protected admin routes and automatic JWT token attachment on outgoing API requests.
• Designed a responsive product grid with Angular's component system and Bootstrap, using reusable product card components with lazy-loaded images for fast catalog browsing.

The Technology Stack

Full-stack build with Angular and TypeScript on the frontend, Node/Express as the API layer, and Supabase for auth, database, and storage. Uses Angular's dependency injection, route guards, and HTTP interceptors for a structured, maintainable architecture.

Final Reflections

A good storefront has to feel both attractive and dependable, and that balance is what this project was about.