Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This application is a financial management web app designed to help users track their spending by allowing them to register multiple cards and automatically categorize expenses based on the card used for transactions. The primary goal is to enhance financial visibility and management for users by accurately reflecting their expenses in a clean and user-friendly interface.

## CORE FEATURES
1. **User Authentication**: Secure login and registration process for users to manage their financial data safely.
2. **Card Registration**: Users can register multiple payment cards, enabling them to track expenses linked to each card.
3. **Expense Tracking**: Automatically logs expenses when payments are made with registered cards, providing real-time updates to the user's financial overview.
4. **Financial Dashboard**: A comprehensive dashboard that displays overall spending, categorized by card and expense type, giving users a clear picture of their finances.
5. **Transaction History**: Users can view detailed transaction history, allowing them to review past expenses and identify spending patterns.
6. **Category Management**: Users can categorize their expenses based on predefined categories or create custom categories for better tracking.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist - Clean, simple design with plenty of white space, a minimal color palette, and a strong focus on typography for readability.
- **Color Mode**: Light theme with dark text on light backgrounds to ensure legibility and a pleasing user experience.
- **Layout**: The main layout will feature a top navigation bar for easy access to different sections, a sidebar for quick navigation between categories, and a central dashboard area displaying key financial metrics and recent transactions.
- **Typography**: Use a clean sans-serif font such as 'Roboto' or 'Open Sans' for all text elements, with a clear hierarchy (e.g., larger sizes for headings, medium for subheadings, and regular for body text).

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS for responsive and modern design components
- **UI Components**: Utilize shadcn/ui for consistent and reusable UI components
- **State Management**: Use React Context or Zustand for managing application state efficiently

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize the React project with TypeScript and install necessary dependencies (React, Tailwind CSS, shadcn/ui).
2. **Create Authentication Flow**: Implement user authentication using a secure method (e.g., JWT) for login and registration.
3. **Develop Card Registration Component**: Build a form for users to add their payment cards, ensuring validation for card details.
4. **Implement Expense Tracking Logic**: Create a service that listens for payment transactions and updates the dashboard accordingly.
5. **Build Financial Dashboard**: Design and implement the dashboard component to display spending summaries and detailed transaction lists.
6. **Create Category Management System**: Allow users to manage expense categories through a dedicated interface.
7. **Ensure Responsiveness**: Use Tailwind CSS utilities to make the app responsive across different devices (mobile, tablet, desktop).

## USER EXPERIENCE
Users will start by logging in to their accounts, where they will be greeted with an intuitive dashboard displaying their financial overview. They can easily add cards, track expenses as they make purchases, and view categorized spending, allowing for effective financial management. The design will ensure smooth navigation with a focus on usability, guiding users seamlessly through their financial tasks.