Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a web application focused on e-commerce, designed to provide a seamless shopping experience for users. The application will allow customers to browse products, manage their`code``code``code``code`*italic text* shopping cart, and complete purchases efficiently. The minimalist design will enhance usability and visual appeal, ensuring that users can easily navigate through the platform.

## CORE FEATURES
1. **Product Catalog**: A visually appealing and easy-to-navigate catalog showcasing various products with images, descriptions, and prices.
2. **Shopping Cart**: Users can add, remove, and adjust quantities of items in their cart, with real-time updates on totals.
3. **User Authentication**: Secure sign-up and login functionality, allowing users to create accounts to track orders and save preferences.
4. **Checkout Process**: A streamlined, multi-step checkout process that guides users through payment and shipping information.
5. **Order Management**: Users can view their order history and track shipments through their account dashboard.
6. **Search and Filter**: Robust search functionality and filtering options to help users find products quickly and easily.

## DESIGN SPECIFICATIONS
- **Visual Style**: minimalist - Clean, simple design with plenty of white space, minimal color palette, and focus on typography
- **Color Mode**: Light theme with dark text on light backgrounds
- **Primary Color**: #1978E5 (accent for buttons, links, highlights)
- **Typography**: Use Inter from Google Fonts for headings, Inter for body text and UI elements
- **Border Radius**: 8px (moderately rounded) for buttons, cards, and inputs
- **Layout**: A grid layout for the product catalog, with a fixed header for navigation and a sidebar for filtering options. The checkout process will use a vertical stepper layout for clarity.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: React Context API or Zustand for managing global state

## IMPLEMENTATION STEPS
1. **Set Up the Project**: Create a new React project with TypeScript, install Tailwind CSS, and configure shadcn/ui components.
2. **Develop the Layout**: Implement the main layout structure with a header, footer, and main content area. Establish routing for the product catalog, cart, and user account pages.
3. **Create the Product Catalog**: Build the product catalog component to display products in a grid format, integrating data fetching from a mock API or local JSON file.
4. **Implement User Authentication**: Set up user authentication using a service such as Firebase or Auth0, creating sign-up and login forms.
5. **Build the Shopping Cart**: Create a cart component that allows users to add and remove items, updating the cart total dynamically.
6. **Develop the Checkout Process**: Design the checkout process with multiple steps and validation to ensure user input is correctly collected.
7. **Integrate Order Management**: Allow users to view their order history and manage their account details in a dedicated dashboard.
8. **Test and Optimize**: Conduct user testing to gather feedback, optimize performance, and ensure responsiveness across devices.

## USER EXPERIENCE
The user experience will prioritize simplicity and ease of navigation. Users will start on the product catalog, where they can easily browse and search for items. Adding products to the cart will be intuitive, and the checkout process will be straightforward, minimizing friction. The design will ensure that all interactive elements are easily accessible, and the overall flow will guide users seamlessly from product discovery to completing their purchases.