Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
The application is a modern financial management web app designed to help users track their expenses, manage their budgets, and visualize their financial health through intuitive graphs and charts. Its minimalist design will provide a user-friendly experience, allowing users to focus on their financial data without unnecessary distractions.

## CORE FEATURES
1. **Dashboard**: A central view displaying key financial metrics, recent transactions, and visual representations of spending patterns.
2. **Expense Tracking**: Users can easily log their daily expenses, categorize them, and view them in real-time on their dashboard.
3. **Budget Management**: Allows users to set monthly budgets for different categories and receive notifications when they approach their limits.
4. **Visual Analytics**: Interactive graphs and charts that provide insights into spending habits and financial trends over time.
5. **User Authentication**: Secure login and user account management to ensure that each user's data remains private and protected.
6. **Data Export**: Users can export their financial data to CSV or PDF formats for personal records or sharing.

## 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 include a top navigation bar for easy access to features, a sidebar for quick links to various sections, and a central dashboard area for displaying graphs and financial summaries.

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

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript and install necessary dependencies (Tailwind CSS, shadcn/ui, Redux).
2. **Create File Structure**: Organize the project into components, pages, and styles directories.
3. **Implement User Authentication**: Set up a user authentication system using JWT or a third-party service like Auth0.
4. **Develop Dashboard Layout**: Create a responsive dashboard layout using Tailwind CSS and implement the main navigation and sidebar.
5. **Build Core Features**: Start building out each core feature (Expense Tracking, Budget Management, Visual Analytics) as separate components.
6. **Integrate State Management**: Set up Redux for managing global application state, particularly for user data and financial records.
7. **Implement Graphs and Charts**: Utilize a library like Chart.js or Recharts to implement the visual analytics feature.
8. **Testing and Optimization**: Test all features for functionality and responsiveness across devices, optimize performance, and ensure a smooth user experience.
9. **Deployment**: Prepare the application for deployment using platforms like Vercel or Netlify.

## USER EXPERIENCE
Users will interact with the app through a clean and intuitive interface. After logging in, they will land on the dashboard where they can quickly view their financial overview. Users can log expenses via a simple form, categorize them, and see updates reflected in real-time on their graphs. Notifications will alert them when they approach their budget limits, and they can easily export their data for personal records. The design will ensure that all interactions are straightforward, enhancing user satisfaction and retention.