Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a web application designed to facilitate a simple and efficient way for users to send and receive credits and items within a clean, minimalist interface. Users will be able to register, log in, and easily navigate through the catalog to select items for gifting, ensuring a straightforward experience without unnecessary complications.

## CORE FEATURES
1. **User Authentication**: Simple login and registration process that allows users to create accounts and access their dashboard.
2. **Demo Credits**: Each new account starts with 30 million demo credits to explore the functionalities of the platform.
3. **Catalog Browsing**: A clean and easy-to-navigate catalog featuring a spooky/headless character bundle for users to select from.
4. **Gift Functionality**: Users can enter an amount, select an item, confirm their choice, and send it to another registered user.
5. **User Search**: Capability to search for other registered users and display their avatars, facilitating easy gifting.
6. **Inventory Updates**: Recipients receive the credits and items directly into their website inventory upon successful transactions.

## 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 application will feature a top navigation bar for easy access to the catalog, user search, and gifting options. The main content area will display the catalog items, user avatars, and transaction confirmations in a grid format, ensuring a clean and organized appearance.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Redux (optional, depending on complexity)

## IMPLEMENTATION STEPS
1. **Set Up the Project**: Create a new React project using Create React App with TypeScript.
   ```bash
   npx create-react-app my-app --template typescript
   ```
2. **Install Dependencies**: Add Tailwind CSS and shadcn/ui to the project.
   ```bash
   npm install tailwindcss shadcn/ui
   ```
3. **Tailwind Configuration**: Set up Tailwind CSS by creating a configuration file and including it in your styles.
4. **Create Components**: Build components for authentication (Login/Register), Catalog, User Search, and Gift functionalities.
5. **Implement Routing**: Use React Router to navigate between different components and views.
6. **Integrate State Management**: Set up Redux or Context API for managing user state across the application.
7. **Testing**: Test the application locally to ensure all functionalities work as intended.
8. **Deployment**: Follow instructions for deploying on Railway, ensuring all environment variables and build configurations are set correctly.

## USER EXPERIENCE
Users will enjoy a seamless experience starting from the registration process, where they are greeted with a minimal form. Once logged in, they can easily navigate to the catalog, search for users, and complete transactions with a few clicks. The interface will prioritize clarity and simplicity, ensuring that users can focus on gifting without distractions. The responsive design will ensure accessibility across devices, enhancing user satisfaction.