Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This web application serves as an e-commerce platform dedicated to filtering and showcasing beauty products from brands like Pilgrim, Plum, Minimalist, Dot & Key, and Derma Co. Users can browse through a curated selection of products, view their benefits, prices, and usage instructions, all presented with high-quality images in a clean and user-friendly interface.

## CORE FEATURES
1. **Product Filtering**: Users can filter products by brand, skin concerns, price range, and product type for tailored recommendations.
2. **Product Listings**: Each product will have an individual listing showing high-quality images, detailed descriptions, benefits, and usage instructions.
3. **User Reviews and Ratings**: Customers can leave feedback and ratings for products to help others make informed decisions.
4. **Wishlist Functionality**: Users can save products to a wishlist for future reference, enhancing user engagement.
5. **Responsive Design**: A mobile-friendly layout that adjusts to different screen sizes, ensuring a seamless experience across devices.
6. **Search Functionality**: An intuitive search bar that allows users to quickly find products by name or category.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist - The design will feature a clean and simple aesthetic with ample white space to create an airy feel. Focus on typography to enhance readability and visual appeal.
- **Color Mode**: Light theme with dark text on light backgrounds to ensure high contrast and readability.
- **Layout**: A grid layout for product listings, with a sidebar for filtering options. The header will include a logo, search bar, and user account access. A footer will contain links to About, Contact, and Privacy Policy pages.
- **Typography**: Use a sans-serif font like 'Inter' for body text, with larger sizes for headings to establish a clear hierarchy. Font weights will vary to differentiate between product titles, descriptions, and reviews.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS for utility-first styling, ensuring rapid development and consistency in design.
- **UI Components**: shadcn/ui library for pre-built components that align with the minimalist design ethos.
- **State Management**: Redux Toolkit for managing application state and ensuring efficient data handling.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project using Create React App with TypeScript.
2. **Install Dependencies**: Install Tailwind CSS, Redux Toolkit, and shadcn/ui components.
3. **Create Layout Structure**: Build the main layout with a header, footer, and grid for product listings.
4. **Develop Filtering System**: Implement filtering functionality using Redux to manage state across components.
5. **Build Product Components**: Create reusable product components that display images, descriptions, ratings, and usage instructions.
6. **Integrate User Reviews**: Set up a section for user reviews and ratings, ensuring users can submit and view feedback.
7. **Implement Wishlist Feature**: Allow users to add products to a wishlist using local storage or Redux.
8. **Ensure Responsiveness**: Test and adjust the layout and components to ensure a seamless experience on mobile and tablet devices.
9. **Deploy Application**: Use a platform like Vercel or Netlify for hosting the completed application.

## USER EXPERIENCE
Users will be able to navigate the site effortlessly, starting from the homepage where they can see featured products. They can use the filtering options to narrow down their search based on their specific needs. Each product page will provide comprehensive information, including benefits, usage instructions, and high-quality images, enhancing the decision-making process. The wishlist feature will encourage users to return, while the review system will foster community engagement, allowing customers to share their experiences and insights.