Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a web application designed to provide a platform for users to donate to individuals within the Roblox community. The application will facilitate seamless donations, allowing users to support fellow players in a user-friendly environment. The focus will be on a clean, minimalist design that enhances user experience while ensuring the functionality is straightforward and efficient.

## CORE FEATURES
1. **User Registration and Login**: Allow users to create accounts and log in securely to manage their donation activities.
2. **Donation Dashboard**: A personalized dashboard where users can view their donation history, track donations, and manage their profiles.
3. **Search and Browse Donors**: Users can search for individuals in need and browse through profiles to find those they wish to support.
4. **Donation Process**: A straightforward donation flow that allows users to select an amount, add a message, and complete the transaction easily.
5. **Feedback and Testimonials**: A section for users to leave feedback or testimonials about their donation experiences, fostering community trust.
6. **Admin Panel**: An interface for administrators to manage users, oversee donations, and address any issues within the platform.

## 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 top navigation bar, a hero section highlighting the purpose of the app, followed by sections for features, testimonials, and a call-to-action button leading to the donation process.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Redux for managing user state and donation data

## IMPLEMENTATION STEPS
1. **Set up the React application**: Initialize the project using Create React App with TypeScript template.
2. **Install necessary packages**: Add Tailwind CSS, shadcn/ui, and Redux for state management.
3. **Create the user authentication flow**: Implement registration and login components with form validation.
4. **Develop the Donation Dashboard**: Build the dashboard component that fetches and displays user donation history.
5. **Implement the Search and Browse Donors feature**: Create a searchable list of donor profiles with relevant information.
6. **Design the Donation Process**: Develop a step-by-step donation interface allowing users to select amounts and add messages.
7. **Create the Admin Panel**: Build an interface for admins to manage users and donations, ensuring appropriate permissions are set.
8. **Testing**: Conduct unit and integration testing to ensure all components function correctly and the user experience is seamless.
9. **Deployment**: Deploy the application to a hosting platform like Vercel or Netlify.

## USER EXPERIENCE
Users will begin their journey by creating an account or logging in. Upon accessing the dashboard, they will have clear visibility of their previous donations and available profiles to support. The search functionality will allow users to filter donors based on various criteria, making it easy to find someone to help. The donation process will be intuitive, ensuring users can complete transactions quickly. Feedback and testimonial sections will enhance community engagement, encouraging more users to participate in donations. Overall, the application will prioritize a smooth and engaging user experience.