Spectra

Clean ingredients. Clear results.

Comment

Inspiration

The beauty industry is evolving, but the digital shopping experience often feels cluttered and overwhelming. We were inspired by the concept of "clean beauty"—the idea that less is more, and purity leads to better results. We wanted to create Spectra, an e-commerce platform that mirrors this philosophy. Our goal was to design a hyper-minimalist, visionary shopping experience where users can discover premium skincare and cosmetics without distractions, focusing entirely on product quality, personalized AI skin diagnostics, and a frictionless user journey.

What it does

Spectra is a full-featured, modern e-commerce storefront tailored for the cosmetics and skincare niche. It provides:

  • AI Skin Analysis: Users can upload a selfie to receive an instant, AI-driven assessment of their skin. Using the Perfect Corp API, the system analyzes factors like moisture, firmness, oiliness, and acne to deliver personalized insights.
  • Seamless Shopping: Users can browse a curated selection of skincare products, view detailed formulations, and add items to a persistent shopping cart.
  • Wishlist Functionality: A highly responsive heart-toggle system allows users to curate their own collection of favorite products.
  • Frictionless Checkout: A streamlined, multi-step demo checkout process that automatically calculates totals and simulates order processing.
  • Admin Dashboard: A built-in management system for administrators to perform complete CRUD (Create, Read, Update, Delete) operations on the product catalog.
  • Global Notifications: A sleek, automated toast notification system that provides immediate, non-intrusive feedback for every user action.

How we built it

We built Spectra focusing on modern web standards, performance, and cutting-edge AI integration:

  • Frontend Framework: We utilized Next.js (App Router) combined with React to ensure fast rendering and a scalable architecture.
  • Styling: We leveraged Tailwind CSS to enforce a strict "Spectra Visionary Minimalist" design system, utilizing a highly curated color palette (off-whites, deep navys) and custom micro-animations for interactive elements.
  • AI & Cloud Integration: We securely route user uploads to Cloudinary for rapid processing, then initiate a task with the Perfect Corp Skin Analysis API to retrieve exact metrics on acne, droopy eyelids, moisture, firmness, oiliness, and radiance.
  • State Management & Persistence: Instead of relying on heavy third-party state libraries, we engineered custom React Contexts (ProductProvider, CartProvider, WishlistProvider). We tied these directly into the browser's localStorage to ensure data persists flawlessly across sessions without requiring an immediate backend database.

Challenges we ran into

One of our primary challenges was asynchronous AI task polling. The Perfect Corp API requires uploading the image, initializing the skin analysis task, and then continuously polling the server until the processing is successful. Handling this gracefully on the backend while providing smooth loading states on the frontend required careful orchestration.

Another major challenge was state synchronization. Managing complex state (like a shopping cart, wishlists, and a live-editable product catalog) entirely on the client side required precision. We had to ensure that when a product was deleted or modified via the Admin Dashboard, those changes propagated seamlessly to the Cart and Wishlist contexts without causing stale data or React hydration mismatches.

Accomplishments that we're proud of

We are incredibly proud of successfully bridging a highly aesthetic frontend with a complex AI diagnostics tool. Providing users with real-time skin metrics elevates Spectra from a standard shop into an interactive beauty experience.

We are also extremely proud of the user experience (UX) fluidity. By handling state and local persistence flawlessly, the application feels lightning-fast—actions like favoriting a product or adding to the cart happen instantaneously with satisfying visual feedback via our global toast notifications.

What we learned

We deepened our understanding of the Next.js App Router, specifically mastering the boundary between Server Components and Client Components when dealing with secure file uploads and API polling. We learned how to effectively isolate stateful logic (like localStorage hooks and Context Providers) to the client side while keeping layouts clean. We also reinforced the importance of micro-interactions—how something as simple as a well-timed toast notification or a color-changing heart icon dramatically elevates the perceived quality of a brand.

What's next for Spectra

Our vision for Spectra goes beyond a static storefront. Next steps include:

  • AI-Curated Skincare Routines: Using the data gathered from the Skin Analysis API to automatically curate and recommend a full, personalized cart of Spectra products tailored specifically to the user's analyzed skin type and problem areas.
  • Backend Integration: Migrating our local storage data layer to a robust backend database (like PostgreSQL/Supabase) to support user authentication, saved skin-analysis history, and live inventory syncing.
  • Payment Gateway: Replacing the mock checkout flow with full Stripe integration.

Built With

Share this project:

Updates