Lovable Prompt Creator - AI Prompt Generator

# # ## APPLICATION OVERVIEW
The Ethical Brand Scanner is a web application designed to help users identify parent companies and view sustainability ratings by scanning product barcodes. The app aims to promote ethical consumerism by providing transparent information about brands and their environmental impact.

## CORE FEATURES
1. **Barcode Scanning**: Users can scan product barcodes using their device camera to instantly retrieve information about the product's parent company and sustainability rating.
2. **Sustainability Ratings**: Display detailed sustainability ratings for products, including categories such as environmental impact, social responsibility, and ethical practices.
3. **Brand Information**: Provide background information on parent companies, including their business practices and any relevant certifications.
4. **User Accounts**: Allow users to create accounts to save their scanned products and receive personalized recommendations based on their preferences.
5. **Search Functionality**: Enable users to manually search for products or brands if they do not wish to use the barcode scanner.
6. **Feedback System**: Users can submit feedback or report inaccuracies in product information, helping to improve the database.

## 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 feature a prominent hero section for barcode scanning, followed by sections for displaying product details, sustainability ratings, and user feedback with clear navigation links.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Zustand for local state management

## IMPLEMENTATION STEPS
1. **Set up the React application** using Create React App with TypeScript template.
2. **Install Tailwind CSS** and configure it for styling.
3. **Integrate shadcn/ui** components for a consistent UI design.
4. **Implement barcode scanning functionality** using a library such as QuaggaJS or similar.
5. **Create user authentication** with options for registration and login.
6. **Develop the API integration** to fetch product information based on scanned barcodes.
7. **Design the main layout** and individual components using Tailwind CSS, ensuring responsiveness.
8. **Implement state management** for user accounts and scanned product data using Zustand.
9. **Set up the feedback system** to allow user input on product information accuracy.
10. **Test the application** thoroughly across different devices and browsers to ensure functionality and usability.

## USER EXPERIENCE
Users will start on the home page featuring a large barcode scanning button, inviting them to scan a product. Once scanned, they will see a loading indicator followed by detailed information about the product, including sustainability ratings and parent company details. Users can navigate to their saved products, search for items directly, and provide feedback easily. The interface will be intuitive, with clear call-to-action buttons and a clean layout that enhances the overall user experience.