Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a web application designed as a finance management wallet that allows users to track their expenses and incomes. The app will feature various categories for expenditures, providing users with insights into their spending habits. It will incorporate engaging animations for a smooth and visually appealing experience.

## CORE FEATURES
1. **Expense Tracking**: Users can add, edit, and categorize their expenses to monitor their spending.
2. **Income Management**: Users can input their income sources and track overall financial health.
3. **Categorization**: Expenses and incomes can be categorized (e.g., groceries, entertainment) for better visibility.
4. **Dashboard**: A user-friendly dashboard that visualizes spending trends and financial summaries.
5. **Animated Modals**: Incorporate Material Design 3 animated modals for a modern user experience.
6. **Responsive Design**: Ensure the app is functional on both mobile and desktop devices.

## 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, a central dashboard area for visualizations, and a sidebar for navigation to different categories and settings.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS.
- **UI Components**: shadcn/ui.
- **State Management**: Use Zustand or React Context for managing application state.

## IMPLEMENTATION STEPS
1. **Set Up the Project**: Initialize a new React project with TypeScript using Create React App.
2. **Install Dependencies**: Install Tailwind CSS, Zustand, and any other necessary libraries (e.g., gsap for animations).
3. **Create Basic Structure**: Set up the folder structure, including components, pages, and styles.
4. **Develop Core Features**:
   - Build the Expense and Income components with forms for input.
   - Implement categorization logic.
   - Create the Dashboard component with visualizations using chart libraries (e.g., Chart.js or Recharts).
5. **Integrate Animations**: Use gsap for animations, ensuring to implement flip from and scroll reveal animations for modals and transitions.
6. **Design UI Elements**: Style components using Tailwind CSS, ensuring to apply the specified typography and color scheme.
7. **Testing**: Conduct thorough testing to ensure functionality and responsiveness across devices.

## USER EXPERIENCE
Users will have a seamless experience as they navigate through the application. Upon logging in, they will be greeted with the dashboard providing an overview of their financial status. They can easily add or edit expenses and incomes, categorize them, and view their spending trends through interactive and animated charts. The application will include smooth transitions and engaging modals, enhancing user interactions and maintaining a visually appealing interface throughout their financial management journey.