Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a web application designed for managing expenses and income entries. The core purpose is to provide users with a simple and efficient way to track their financial activities, generate reports, and maintain data persistence using Supabase for backend storage. The application will have user authentication to ensure secure access to personal financial data.

## CORE FEATURES
1. **User Authentication**: Secure login and registration functionality allowing users to create accounts and access their financial data.
2. **Expense and Income Tracking**: Users can add, edit, and delete entries for their expenses and income, categorizing them as needed.
3. **Reports Page**: A dedicated page that generates visual reports based on user data, providing insights into spending habits and income trends.
4. **Data Persistence**: Integration with Supabase to ensure that all user data is stored securely and is accessible across sessions.
5. **Responsive Design**: The application will be fully responsive, ensuring usability on both desktop and mobile devices.
6. **User Dashboard**: A central dashboard where users can view their recent transactions and overall financial status at a glance.

## 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 top navigation bar for easy access to the dashboard, reports, and user settings, a central content area for displaying financial entries, and a footer for additional information and links.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: React Context API or Zustand for state management of user sessions and financial data.

## IMPLEMENTATION STEPS
1. **Set Up the Project**: Initialize a new React project using Create React App with TypeScript. Install Tailwind CSS and set up shadcn/ui for UI components.
2. **Implement User Authentication**: Create authentication components for login and registration. Utilize Supabase's authentication features for user management.
3. **Create Main Components**: Develop components for tracking expenses and income, including forms for input and lists for displaying entries.
4. **Build the Reports Page**: Use charting libraries (like Chart.js or Recharts) to visualize financial data based on user entries.
5. **Connect to Supabase**: Set up and configure Supabase for data storage and retrieval. Ensure data persistence for user entries.
6. **Implement Responsive Design**: Use Tailwind CSS to make the application responsive across different devices.
7. **Test the Application**: Perform thorough testing for user flows, data handling, and responsiveness to ensure a smooth user experience.
8. **Deploy the Application**: Deploy the application on a hosting platform (like Vercel or Netlify) and set up environment variables for Supabase.

## USER EXPERIENCE
Users will begin by registering an account, then log in to access their dashboard. They will be able to add new entries for expenses or income through intuitive forms. Each entry can be edited or deleted as needed. The reports page will provide visual insights, allowing users to analyze their financial data easily. The minimalist design will ensure a smooth and focused experience, encouraging users to engage with their financial information efficiently.