Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is an e-commerce web application designed to provide users with a seamless shopping experience. It aims to impress during a hackathon by focusing on clean design, user-friendly navigation, and efficient handling of products, orders, and user accounts.

## CORE FEATURES
1. **Product Catalog**: A visually appealing display of products with filtering options, allowing users to browse through categories and find items easily.
2. **Shopping Cart**: Users can add items to their cart, view total prices, and proceed to checkout seamlessly.
3. **User Authentication**: Secure login and registration system for users to manage their accounts, view order history, and save favorite items.
4. **Checkout Process**: A streamlined checkout process that collects shipping information, payment details, and confirms orders with ease.
5. **Admin Dashboard**: A simple interface for administrators to add, edit, or remove products, manage orders, and view sales analytics.
6. **Responsive Design**: Ensures that the application is fully functional and visually appealing on a variety of devices, from desktops to smartphones.

## 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**: The main layout will consist of a header with navigation links, a product grid for the catalog, a sidebar for filters, and a footer with contact information and links to policy pages.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: React Context API for managing user sessions and cart state.

## IMPLEMENTATION STEPS
1. **Set Up the Project**: Initialize a new React project with TypeScript and configure Tailwind CSS for styling.
2. **Create Layout Components**: Develop the main layout components including Header, Footer, and Sidebar for navigation and filters.
3. **Develop Core Features**:
   - Implement the Product Catalog component with filtering functionality using mock data.
   - Create the Shopping Cart component to manage selected items and calculate totals.
   - Set up User Authentication with a simple form and local storage for demo purposes.
   - Develop the Checkout component, integrating a mock payment process.
   - Build the Admin Dashboard to manage products and orders.
4. **Ensure Responsive Design**: Use Tailwind CSS utilities to make sure the application is responsive across all devices.
5. **Testing**: Conduct user testing to refine user flows and ensure a smooth experience.

## USER EXPERIENCE
Users will begin on the homepage, where they can easily navigate through the product catalog. They can filter products by categories, add items to their cart, and proceed to checkout without confusion. The application will provide clear feedback during interactions, such as confirmations when items are added to the cart or when orders are placed. Admins will have a straightforward dashboard to manage products and orders, ensuring efficient operations behind the scenes. Overall, the user experience will prioritize clarity, simplicity, and responsiveness.