Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a web application designed to serve as a wholesale catalog with an admin page. The primary purpose is to allow administrators to manage product listings effectively, including the ability to edit and delete items. Additionally, it features a shopping cart that applies wholesale pricing when a minimum quantity of items is added.

## CORE FEATURES
1. **Admin Dashboard**: A dedicated page for administrators to view and manage all product listings. Each product will have options to edit or delete.
2. **Product Management**: Allow adding, editing, and deleting product details, including descriptions, prices, and images.
3. **Wholesale Pricing Logic**: Implement a minimum quantity restriction of 5 items in the cart, applying wholesale pricing only when this quantity is met.
4. **Shopping Cart**: A user-friendly cart interface that updates real-time pricing based on the quantity of items added.
5. **User Authentication**: Secure login for administrators to access the admin dashboard.
6. **Responsive Design**: Ensure the application is accessible and functional on various devices and screen sizes.

## 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 clean layout featuring a top navigation bar for the admin dashboard, a main content area for product listings, and a sidebar for quick actions such as adding new products or viewing the cart.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS.
- **UI Components**: shadcn/ui.
- **State Management**: React Context API or Redux (if needed for more complex state management).

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize the project with Create React App and configure TypeScript.
2. **Install Dependencies**: Add Tailwind CSS and shadcn/ui for styling components.
3. **Create Folder Structure**: Organize the application into components, pages, and services for clarity.
4. **Build Admin Dashboard**: Create the main admin dashboard interface with a navigation bar and product management features.
5. **Implement Product Management**: Develop components for adding, editing, and deleting products, integrating state management.
6. **Design Shopping Cart Logic**: Create the shopping cart component with wholesale pricing logic based on item quantity.
7. **Add Authentication**: Set up user authentication to secure the admin dashboard.
8. **Responsive Design**: Use Tailwind CSS utilities to ensure the application is responsive across devices.
9. **Testing**: Conduct thorough testing for functionality and usability.

## USER EXPERIENCE
Key user interactions include seamless navigation through the admin dashboard, straightforward product management tools, and an intuitive shopping cart that dynamically updates. Admins will easily manage product entries, while users will benefit from clear indications of pricing changes based on their cart's item count. The overall design promotes a positive user experience with its minimalist aesthetic and responsive layout.