Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a web application designed to serve as a product catalog, allowing users to create, edit, and share product listings. The application will provide a user-friendly interface for managing product details such as photos, names, prices, and descriptions, ensuring a seamless experience for both catalog creators and viewers.

## CORE FEATURES
1. **Product Management**: Users can add, edit, and delete product entries, including uploading photos, entering product names, prices, and descriptions.
2. **Editable Catalog**: A simple interface that allows users to modify existing products at any time.
3. **Shareable Links**: Users can generate shareable links for their catalogs, enabling easy sharing with clients or friends.
4. **Responsive Design**: The catalog will be fully responsive, ensuring optimal viewing across various devices, including desktops and mobile phones.
5. **User Authentication**: Users must create an account to manage their catalogs, ensuring data integrity and personalized experiences.
6. **Search and Filter Options**: Users can search for products by name or filter by categories to quickly find desired items.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist design with a clean, simple aesthetic, emphasizing white space and clear typography.
- **Color Mode**: Light theme featuring dark text on light backgrounds for easy readability.
- **Layout**: 
  - A top navigation bar for easy access to home, products, and user settings.
  - A grid layout for displaying products, with each product card showcasing an image, name, price, and a brief description.
- **Typography**: 
  - Use a sans-serif font like **Inter** for headings and body text to maintain clarity and modernity.
  - Hierarchy: Large font size for product names, medium for prices, and smaller for descriptions to create visual distinction.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript for a robust and type-safe application.
- **Styling**: Tailwind CSS for utility-first styling, enabling rapid design and responsive features.
- **UI Components**: Utilize **shadcn/ui** for pre-built, accessible UI components to enhance development efficiency.
- **State Management**: Use React Context API or Redux for effective state management across the application.

## IMPLEMENTATION STEPS
1. **Set Up Development Environment**: 
   - Initialize a new React project with TypeScript.
   - Install Tailwind CSS and configure it for the project.
   - Set up shadcn/ui components.
   
2. **Create Authentication System**:
   - Implement user authentication using a service like Firebase or Auth0.
   - Create user registration and login forms with validation.
   
3. **Develop Product Management Features**:
   - Build a product form for adding and editing product details.
   - Implement functionality to upload images and store product information in a database (e.g., Firebase Firestore).
   
4. **Implement Catalog Display**:
   - Create a grid layout for displaying products dynamically fetched from the database.
   - Ensure the layout is responsive for different screen sizes.
   
5. **Add Sharing Functionality**:
   - Implement a feature that generates unique URLs for each catalog that can be shared with others.
   
6. **Test User Experience**:
   - Conduct usability testing to ensure all features work as intended and the interface is intuitive.

## USER EXPERIENCE
Users will start by logging into their accounts, where they can access their product catalogs. They can easily add new products through a straightforward form. Each product card will allow users to see essential details at a glance, and they can click to edit or delete products as needed. The shareable link feature will enable users to distribute their catalogs effortlessly, enhancing collaboration and visibility for their products. The responsive design will ensure that users have a consistent experience regardless of the device they are using.