Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
"Muppet Me" is a web application that allows users to upload their images and transforms them into a whimsical, puppet-like version reminiscent of beloved Muppets characters. Users must register to create an account, receive one credit for image generation, and can purchase additional credits as needed. This application leverages the OpenAI API for image generation and utilizes Supabase for authentication and database management.

## CORE FEATURES
1. **User Registration and Authentication**: Users can create an account and log in to access their image generation credits.
2. **Image Upload**: Users can upload their images for transformation into Muppet-style renditions.
3. **Credit Management**: Each transformation costs one credit, and users can view their remaining credits and purchase more when needed.
4. **Image Generation**: Utilize the OpenAI API to create a customizable Muppet-style image based on the user's uploaded photo.
5. **Downloadable Images**: After generation, users can download their Muppet-style images directly to their devices.
6. **User Dashboard**: A simple dashboard that displays user activity, remaining credits, and options to upload new 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 main layout will consist of a header (logo and navigation), a hero section with a call-to-action, followed by a features section, a user dashboard area, and a footer with contact information.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: React Context API or a state management library as needed

## IMPLEMENTATION STEPS
1. **Set up the project**: Initialize a new React project with TypeScript and install Tailwind CSS.
2. **Configure Supabase**: Create a Supabase project and set up the authentication and database tables for user data and credit tracking.
3. **Integrate OpenAI API**: Set up the backend to handle image processing requests through the OpenAI API.
4. **Create UI Components**: Develop reusable UI components (buttons, input fields, cards) using Tailwind CSS and shadcn/ui.
5. **Implement Authentication**: Set up user registration, login, and session management using Supabase.
6. **Build Image Upload and Generation**: Create the functionality for users to upload images, process them through the OpenAI API, and display results.
7. **Credit Management System**: Implement logic to manage user credits, including purchasing more credits and tracking usage.
8. **Develop User Dashboard**: Create a dashboard where users can view their credits and recent image transformations.
9. **Test the Application**: Conduct thorough testing to ensure all functionalities work seamlessly and the UI is responsive.
10. **Deploy the Application**: Deploy the application using a hosting service like Vercel or Netlify.

## USER EXPERIENCE
Users will begin their journey on the landing page, where they will see an engaging hero section inviting them to upload their images. After registration, they will access their dashboard, where they can manage their credits, upload images, and view their generated Muppet-style creations. The interface will provide clear calls to action for downloading images and purchasing additional credits, ensuring a smooth and enjoyable user experience. The minimalist design will keep the focus on the transformation process, making it simple for users to create and share their fun, personalized images.