Wellness Cart

A clean, responsive e-commerce userflow built with React.

Short Explanation

Wellness Cart is a frontend-only e-commerce userflow prototype built with React and Tailwind CSS. It focuses on UI structure, reusable components, and smooth navigation across core shopping pages such as home, products, product details, and cart.

Project Goals

The goal of Wellness Cart is to practice designing and building a professional e-commerce UI from scratch using React. The project emphasizes component structure, responsive design, clean folder organization, and understanding how real e-commerce flows work.

Tech Stack Used

  • React.js: Used to build the UI, manage reusable components, and structure the userflow.
  • Tailwind CSS: Provides fast and consistent styling for layout, responsiveness, and component design.

Features

  • Login & Signup UI

    Simple and clean authentication screens designed for a real-world e-commerce experience.

  • User Dashboard

    A frontend-only dashboard layout where users can see profile information, past orders UI, and quick actions.

  • Product Listing Page

    Displays products in a responsive grid layout with modern card components.

  • Product Detail Page

    A detailed view showing product information, pricing, images, and an add-to-cart UI.

  • Cart Page UI

    A structured cart page with quantity controls, totals section, and a clean layout.

  • Checkout Page UI

    A frontend-only checkout screen showcasing order summary, address UI, and payment placeholder.

Demo Previews

Click any preview to watch in full width.

Landing page
Login page
Product List page
Product Detail page
Checkout pages
Orders Page
User Dashboard

Video Demo

For the feature demo, watch it below:

The Problems and How I Deal With It

  • The main challenge in building Wellness Cart was structuring the UI flow in a clean and reusable way. Designing components that could be reused across pages required careful planning.
  • Ensuring the layout remained fully responsive across screen sizes also required testing and fine-tuning the Tailwind design system.

Lessons Learned

  • This project strengthened my understanding of React component design, props management, and UI structuring.
  • I learned how real e-commerce sites manage UI flow and how to break large interfaces into reusable, maintainable components.
← Back to Projects