Lovable Prompt Creator - AI Prompt Generator

# APPLICATION OVERVIEW
FINME is a web application designed for personal finance management, allowing users to track their income, expenses, and savings goals in a clean, user-friendly environment. The app aims to provide a comprehensive dashboard that helps users visualize their financial health and make informed decisions.

# CORE FEATURES
1. **Login & Register**: Secure user authentication system allowing users to create accounts and log in to access their financial data.
2. **Dashboard**: A central hub displaying total income, total expenses, current balance, and savings targets, providing a quick overview of the user's financial status.
3. **Transaction Input Form**: An intuitive form for users to input their income and expenses, categorized for better tracking and analysis.
4. **Pie Chart Visualization**: A graphical representation of expenses categorized by type, helping users understand their spending habits at a glance.
5. **Bar Chart Comparison**: A visual comparison of income versus expenses over specified time periods, allowing users to analyze trends and make adjustments.
6. **Savings Target with Progress Bar**: A feature that allows users to set savings goals and visually track their progress through an interactive progress bar.

# DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist - The design emphasizes a clean and simple aesthetic with ample white space, ensuring that the user experience is focused and uncluttered.
- **Color Mode**: Light theme with dark text on light backgrounds, enhancing readability while maintaining a modern look.
- **Layout**: The dashboard will be structured with a top navigation bar for the main features, a sidebar for quick access to the transaction input form and settings, and a central area for displaying charts and financial summaries.
- **Typography**: Use modern sans-serif fonts for clear readability. Headings will be bold and larger to create a clear hierarchy, while body text will be regular weight for coherence.

# TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript to ensure type safety and maintainability.
- **Styling**: Tailwind CSS for a responsive and utility-first approach to styling.
- **UI Components**: Utilize shadcn/ui for pre-built, customizable components to speed up development.
- **Database**: Supabase for managing backend data storage and user authentication.

# IMPLEMENTATION STEPS
1. **Set Up Development Environment**: Initialize a new React project with TypeScript and install necessary dependencies (React, Tailwind CSS, Supabase, Recharts).
2. **Database Configuration**: Create a Supabase project and configure the database to handle user authentication and store financial transactions.
3. **Build Authentication**: Implement user login and registration functionalities using Supabase's authentication API.
4. **Create Dashboard Layout**: Develop the main dashboard layout with a responsive design that adjusts to mobile and desktop views.
5. **Implement Transaction Input Form**: Create a user-friendly form for inputting income and expenses, ensuring proper validation and categorization.
6. **Develop Data Visualizations**: Use Recharts to create pie and bar charts that dynamically display data based on user inputs and selected time frames.
7. **Integrate Savings Target Feature**: Add a progress bar that updates automatically based on user-defined savings goals and current savings.
8. **Testing and Debugging**: Conduct comprehensive testing of all features to ensure functionality and a seamless user experience.
9. **Deployment**: Deploy the application to a suitable hosting platform, ensuring it is accessible to users.

# USER EXPERIENCE
Users will begin their journey by registering and logging into the FINME application. Upon accessing the dashboard, they will immediately see their financial overview, including total income, expenses, and savings progress. Users can easily navigate through the sidebar to input new transactions or view detailed analytics through pie and bar charts. The interface will be responsive, ensuring that users have a consistent experience regardless of the device they are using. The overall goal is to facilitate easy tracking of personal finances while encouraging user engagement through intuitive design and interactive features.