Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
The application is a web-based financial management dashboard designed for couples to track their finances collaboratively. It allows users to manage expenses, income, and goals while leveraging gamification to enhance user engagement and motivation. The app provides a visually appealing interface that can be accessed both on desktop and mobile devices, ensuring seamless financial control for users.

## CORE FEATURES
1. **Shared Dashboard**: A comprehensive overview displaying key financial metrics such as total expenses, income, savings goals, and recurring payments, allowing both partners to visualize their financial status at a glance.
2. **Gamification**: An interactive system that rewards users for reaching financial milestones, completing budgeting tasks, and maintaining spending limits, encouraging responsible financial habits.
3. **User Registration and Access Control**: A secure registration system that allows users to create accounts, with differentiated access levels for admin (full control) and user (view and contribute) roles.
4. **Recurring Expenses Management**: A feature to easily add, track, and categorize recurring expenses, helping users maintain a clear picture of their monthly financial commitments.
5. **Goal Setting and Tracking**: Users can set financial goals (like saving for a vacation) and track their progress visually through progress bars and notifications.
6. **Responsive Design**: A fully responsive layout that adapts effortlessly to different screen sizes, ensuring a consistent and user-friendly experience on both mobile and desktop devices.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist design featuring clean lines, ample white space, and a focus on readability and simplicity.
- **Color Mode**: Light theme with dark text on light backgrounds, promoting a clean and modern aesthetic.
- **Layout**: A grid-based layout that organizes key components into distinct sections, ensuring clarity and ease of navigation. The dashboard should include a sidebar for navigation, a main content area for metrics, and dedicated sections for gamification and goal tracking.
- **Typography**: Use a sans-serif font like 'Roboto' for headers and 'Open Sans' for body text. Maintain a clear hierarchy with larger, bolder font sizes for headings and standard sizes for body text.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript for a robust, type-safe application.
- **Styling**: Tailwind CSS for efficient, utility-first styling that ensures a responsive design.
- **UI Components**: Utilize shadcn/ui for a consistent and modern component library.
- **State Management**: Implement React Context API or Redux for managing global state effectively, especially for shared data between users.

## IMPLEMENTATION STEPS
1. **Set Up the Project**: Initialize a new React project using Create React App with TypeScript template.
2. **Install Dependencies**: Add Tailwind CSS, shadcn/ui, and any necessary state management libraries (e.g., Redux or Context API).
3. **Create User Authentication**: Implement user registration and login functionality using a secure authentication method (e.g., Firebase or Auth0).
4. **Design the Dashboard Layout**: Build the main layout with a sidebar, main content area, and sections for each core feature.
5. **Implement Core Features**: 
   - Create the shared dashboard displaying financial metrics.
   - Develop the gamification system with reward triggers.
   - Design the goal-setting interface and progress tracking components.
   - Enable management of recurring expenses.
6. **Ensure Responsiveness**: Use Tailwind CSS to make the layout responsive, testing on various devices.
7. **Conduct User Testing**: Gather feedback from users to identify areas for improvement and optimize the user experience.

## USER EXPERIENCE
Users will start by creating an account and logging in to access the shared dashboard. The dashboard will present an overview of their financial metrics in an intuitive format. They can easily navigate through the sidebar to manage expenses, set financial goals, and view their gamification progress. Notifications will keep users informed of their achievements and upcoming payment deadlines, ensuring both partners remain engaged and informed about their financial health. The responsive design guarantees that users have a seamless experience whether they are on a desktop or mobile device.