Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a web application designed to manage and display investment data for users, allowing them to dynamically change their investment values, track their balances, and visualize their performance through graphs. The application will focus on optimizing token usage while providing a clean, user-friendly interface similar to the Phantom wallet website.

## CORE FEATURES
1. **Dynamic Portfolio Management**: Users can input and modify their investment amounts, types of coins, and view their current balances in real-time.
2. **Investment Analytics**: Visual graphs that update automatically to reflect the user's current financial status, showing gains and losses over time.
3. **Token Optimization**: The application will be designed to minimize token usage while maximizing performance, ensuring efficient resource management.
4. **User Authentication**: Secure login system for users to access their personalized investment information.
5. **Responsive Design**: A layout that adjusts seamlessly across devices, ensuring a consistent experience on mobile and desktop.

## 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 header for navigation, a hero section to showcase the portfolio overview, followed by sections for investment analytics and user interaction (input forms for managing investments).

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Redux Toolkit (for managing complex state related to user investments and analytics)

## IMPLEMENTATION STEPS
1. **Set up the project**: Initialize a new React project with TypeScript and install dependencies (React, Tailwind CSS, Redux Toolkit, etc.).
2. **Design the layout**: Create the main application layout using Tailwind CSS, ensuring to implement the specified design specifications.
3. **Implement user authentication**: Set up a secure login system, allowing users to register and log in to access their investment data.
4. **Develop portfolio management features**: Create forms for users to input their investments and dynamically update their portfolio information.
5. **Integrate investment analytics**: Implement graphing libraries (e.g., Chart.js or Recharts) to visualize user performance based on their input data.
6. **Optimize for token usage**: Conduct performance testing and optimization to ensure the application runs efficiently with minimal token usage.

## USER EXPERIENCE
Users will begin by logging into the application, where they will be presented with a clean dashboard showing their portfolio overview. They can easily update their investment amounts and types through intuitive forms. The application will provide real-time feedback, updating graphs and balances as inputs change. Users will enjoy a responsive layout that allows seamless navigation across different devices, ensuring a pleasant experience whether on mobile or desktop.