Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project entails developing a web application for an online store tailored for a medical club, enabling students to purchase essential equipment for medical school. The application will focus on providing a seamless shopping experience with a clean, minimalist design that emphasizes usability and accessibility.

## CORE FEATURES
1. **Product Catalog**: A dynamic display of medical equipment available for purchase, including filtering and sorting options to help users find items easily.
2. **User Authentication**: Secure login and registration functionality for students to create accounts, manage their profiles, and track orders.
3. **Shopping Cart**: A user-friendly cart system allowing students to add, remove, and adjust quantities of items before checkout.
4. **Checkout Process**: A streamlined checkout experience with multiple payment options, including credit cards and popular payment gateways.
5. **Order History**: A section for users to view their past purchases and track the status of current orders.
6. **Contact and Support**: A dedicated section for customer inquiries, including FAQs and support contact information.

## 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 should feature a top navigation bar, a hero section for promotions, a product showcase area, and a footer with contact and social media links.

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

## IMPLEMENTATION STEPS
1. **Set Up React Project**: Initialize a new React app with TypeScript using Create React App.
2. **Install Dependencies**: Install Tailwind CSS for styling, shadcn/ui for UI components, and any additional libraries needed for routing and state management.
3. **Create Components**: Develop reusable components such as Navbar, ProductCard, Cart, and CheckoutForm using Tailwind CSS for styling.
4. **Implement Routing**: Set up React Router to navigate between the product catalog, cart, and user authentication pages.
5. **Integrate State Management**: Use Context API or Redux to manage user authentication state and shopping cart data across components.
6. **Build Product Catalog**: Fetch product data from a mock API or local JSON file and render it within the ProductCatalog component.
7. **Create Authentication System**: Implement user registration and login functionality with form validation.
8. **Develop Checkout Flow**: Create the checkout process with a form for shipping details and payment processing.
9. **Test Responsiveness**: Ensure the application is responsive and works well on various devices and screen sizes.
10. **Deploy the Application**: Use a hosting service like Vercel or Netlify for deployment.

## USER EXPERIENCE
Users will experience a streamlined interface where they can easily navigate the product catalog, add items to their cart, and proceed through a straightforward checkout process. The minimalist design will help reduce distractions, allowing students to focus on their shopping needs. Additionally, the application will include responsive design principles, ensuring a seamless experience across devices, from desktops to mobile phones.