Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
"Myme" is a web application that transforms user-uploaded images into a whimsical rag doll aesthetic. The app allows users to register, receive credits, and generate their unique rag doll images using the OpenAI API, with backend support from Supabase for authentication and database management.

## CORE FEATURES
1. **User Registration & Authentication**: Users can create an account and log in to access their credits and generated images securely.
2. **Image Upload**: Users can upload images that they want to transform into rag doll art.
3. **Credit System**: Each registered user receives one credit upon signing up. Generating a rag doll image costs one credit.
4. **Image Generation**: Upon uploading an image and having sufficient credits, users can create their rag doll image using the OpenAI API.
5. **Download Option**: Users can download the generated rag doll image directly to their devices.
6. **User Dashboard**: A simple dashboard displaying the user’s credits, uploaded images, and generated rag doll images.

## 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 app will feature a clean layout with a header for navigation, a main content area for image upload and generation, and a footer for additional links and information.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: React Context API or Zustand for managing user state and credits

## IMPLEMENTATION STEPS
1. **Set Up the Project**: Initialize a new React project with TypeScript and install necessary dependencies (React, Tailwind CSS, shadcn/ui).
2. **Design the Layout**: Create the main layout components including Header, Footer, and MainContent using Tailwind CSS for styling.
3. **Implement Authentication**: Set up Supabase for user registration and authentication, ensuring secure login and credit management.
4. **Develop Image Upload Feature**: Create a component for users to upload images, integrating file handling and preview functionality.
5. **Integrate OpenAI API**: Implement the logic to send the uploaded image to OpenAI and receive the generated rag doll image.
6. **Build the User Dashboard**: Create a dashboard to display the user's credits and previously generated images, allowing for easy navigation and management.
7. **Download Functionality**: Add a feature to enable users to download their generated images in various formats.
8. **Testing & Deployment**: Conduct thorough testing for user experience and functionality, then deploy the application to a hosting service.

## USER EXPERIENCE
Users will first create an account or log in to access their dashboard. After logging in, they can upload an image, view their available credits, and submit the image for transformation. Upon generation, the rag doll image will be displayed with an option to download it. The overall experience will be streamlined and intuitive, focusing on quick actions and clear feedback throughout the process.