Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
Mckeown's Groceries is an e-commerce web application designed to provide users with a seamless shopping experience for Ghanaian groceries, primarily focusing on Nestle products and Indomie. The platform will cater to local customers seeking convenience and quality in their grocery shopping.

## CORE FEATURES
1. **Product Catalog**: A comprehensive listing of available products with images, descriptions, and prices, allowing users to browse and search for items easily.
2. **Shopping Cart**: Users can add items to a shopping cart, view their selected products, and modify quantities before checkout.
3. **User Authentication**: Secure registration and login functionality to allow users to create accounts, manage their profiles, and track orders.
4. **Checkout Process**: A streamlined checkout process that includes payment processing and order confirmation.
5. **Order History**: Users can view their past orders, including details like itemized lists and purchase dates, enhancing repeat purchases.
6. **Contact and Support**: A section for users to reach out for support or inquiries, ensuring customer service is accessible.

## 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, a hero section showcasing featured products, a product grid for easy browsing, a shopping cart summary, and a footer with contact information and support links.

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

## IMPLEMENTATION STEPS
1. **Set Up Development Environment**: Initialize a new React project with TypeScript and install necessary dependencies including Tailwind CSS and Redux.
2. **Create Project Structure**: Organize the project into components, pages, and services to maintain a clean architecture.
3. **Design UI Components**: Build reusable UI components for buttons, cards, and forms using Tailwind CSS, ensuring adherence to the design specifications.
4. **Implement Routing**: Set up React Router for navigation between the home page, product catalog, and user authentication pages.
5. **Develop Core Features**: 
   - Create the product catalog with dynamic data fetching from a mock API or backend service.
   - Implement the shopping cart functionality, allowing users to add, remove, and modify product quantities.
   - Set up user authentication with registration and login forms.
   - Design the checkout process, integrating a payment gateway for transaction handling.
6. **Testing**: Conduct unit tests and integration tests to ensure functionality and address any edge cases.
7. **Deployment**: Prepare the application for deployment on a cloud service, ensuring scalability and performance.

## USER EXPERIENCE
Users will have an intuitive experience navigating through the application. Upon landing on the home page, they will be greeted with a clean layout showcasing featured products and quick access to the shopping cart. The product catalog will allow for easy searching and filtering, while the checkout process will be straightforward, minimizing friction and ensuring ease of use. Post-purchase, users will have access to their order history, encouraging repeat visits and building customer loyalty.