Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This application is a web-based e-commerce platform dedicated to offering organic food products, including fresh vegetables and meats, at affordable prices. The goal is to provide a user-friendly shopping experience that encourages health-conscious consumers to choose organic options while enjoying a clean and straightforward interface.

## CORE FEATURES
1. **Product Catalog**: A dynamic display of available organic products categorized into fresh vegetables and meats, with filters for price range, type, and availability.
2. **Shopping Cart**: An intuitive cart system that allows users to easily add or remove items, view total cost, and proceed to checkout seamlessly.
3. **User Accounts**: Secure user registration and login functionality, enabling customers to manage their profiles, track orders, and save favorites.
4. **Search Functionality**: A powerful search bar that allows users to quickly find specific products using keywords or categories.
5. **Checkout Process**: A streamlined checkout interface with multiple payment options and clear order summary for a hassle-free purchasing experience.
6. **Responsive Design**: An adaptable layout that ensures optimal usability across various devices, including desktops, tablets, and smartphones.

## DESIGN SPECIFICATIONS
- **Visual Style**: The design will be minimalist, focusing on a clean and simple layout with ample white space that enhances readability and user engagement.
- **Color Mode**: The application will utilize a light theme featuring dark text on light backgrounds for clarity and comfort during extended use.
- **Layout**: The main layout will consist of a top navigation bar for easy access to product categories, a central product display area with grid alignment for products, and a sidebar for filtering options. The footer will include links to customer support and company information.
- **Typography**: Primary font choice will be 'Inter' for its legibility and modern feel, with a hierarchy that emphasizes headings (bold weight) and body text (regular weight) to facilitate easy navigation.

## TECHNICAL REQUIREMENTS
- **Framework**: The application will be built using React with TypeScript for type safety and improved development efficiency.
- **Styling**: Tailwind CSS will be utilized for utility-first styling, allowing for rapid design iteration and responsiveness.
- **UI Components**: The application will incorporate shadcn/ui for pre-styled components that conform to the minimalist aesthetic.
- **State Management**: React Query will be employed for efficient data fetching and caching, enhancing performance and user experience.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript and install Tailwind CSS along with shadcn/ui components.
2. **Create Component Structure**: Develop the main components: Header, ProductList, ProductItem, Cart, and Footer.
3. **Implement Routing**: Use React Router to handle navigation between different pages (Home, Product Details, Cart, User Account).
4. **Build Product Catalog**: Fetch product data from a mock API or JSON file and display it in the ProductList component.
5. **Set Up User Authentication**: Implement user registration and login functionalities, using context API or state management for session handling.
6. **Develop Checkout Process**: Create a checkout form that collects shipping and payment information, integrating payment processing options like Stripe.
7. **Ensure Responsiveness**: Test and refine the design across various devices, using Tailwind's responsive utility classes to adjust layouts accordingly.
8. **Optimize Performance**: Utilize React Query for managing data fetching and caching, ensuring a fast and responsive user experience.

## USER EXPERIENCE
The key user interactions will include an efficient browsing experience where users can easily navigate through the product catalog, utilize search functionality to find specific items, and manage their shopping cart intuitively. The checkout flow will be designed to minimize steps and provide clear feedback at each stage, ensuring users feel secure and informed throughout their purchasing journey. The responsive design will ensure that users on any device can enjoy a seamless shopping experience without compromising functionality or aesthetics.