Front-End Cosmetics Web App

Cosmogate is a beauty and skincare storefront experience built as a responsive single-page web app with React, TypeScript, and Vite. The project is designed to present a polished brand identity while still covering the core e-commerce journeys a shopper would expect: exploring featured products, browsing collections, viewing best sellers, opening account pages, and moving through authentication-related screens.

The app centers on a visually branded landing page with soft tones, large hero imagery, and section-based navigation. From there, users can move into route-based pages for products, profile management, contact information, account details, and login or signup flows. The result is a frontend-focused storefront shell that looks and feels like a real beauty brand site, while remaining modular enough to extend with backend APIs later.

:Project Overview

This codebase is organized around a reusable layout and a set of focused page sections:

- A fixed navigation bar that stays available across routes

- A landing page with hero, product showcase, best sellers, and about sections

- Dedicated routes for product browsing and account-related actions

- Shared UI components for drawers, dialogs, toasts, forms, and layout elements

- A consistent visual system built with Tailwind CSS and shadcn-style primitives

The intended experience is simple: a visitor lands on the homepage, gets introduced to the brand, explores featured products, and can then move into shopping or account-related pages without losing the visual continuity of the site.

:Features

- Responsive storefront-style landing page

- Product showcase and best-sellers sections

- Authentication pages for login, signup, and password recovery

- Profile, account details, contact, and about pages

- Cart drawer, toast notifications, and reusable UI primitives

- React Router navigation with TanStack Query for data orchestration