Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project involves creating a full-stack web application designed to help users track their personal running records. The application will allow users to save their personal information, upload a profile picture, and log their running achievements in an intuitive and user-friendly manner. The focus will be on maintaining a clean and minimalist design that enhances usability and performance.

## CORE FEATURES
- **User Profile**: Users can create and manage their profiles by saving their name, location, and a short bio (up to 150 characters).
- **Personal Records Tracking**: Users can input and save their personal running records for various distances in HH:MM:SS format, along with details of the race or location and the date of the record using a date picker.
- **Profile Picture Upload**: Users can upload a profile picture to personalize their experience.
- **Responsive Design**: The application will be fully responsive, providing an optimal experience on both mobile and desktop devices.
- **Clean User Interface**: The application will feature a minimalist design that emphasizes usability and clarity.

## 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 main content area with user profile and records, and a footer. The user profile section will be prominently displayed, with forms for entering and editing records clearly laid out for easy interaction.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Redux or React Context API (as needed)

## IMPLEMENTATION STEPS
1. **Set Up the Development Environment**:
   - Initialize a new React project using Create React App with TypeScript.
   - Install Tailwind CSS and configure it for the project.
   - Install shadcn/ui for UI components.

2. **Create the User Profile Component**:
   - Build a form to capture user name, location, and bio.
   - Implement a profile picture upload functionality.

3. **Develop the Personal Records Component**:
   - Create a form for users to input their running records, including distance, time, race/location, and date.
   - Validate inputs to ensure data integrity.

4. **Implement State Management**:
   - Set up Redux or React Context API to manage the user state and records.
   - Create actions and reducers to handle profile updates and records management.

5. **Design and Style the Application**:
   - Use Tailwind CSS to style components according to the design specifications.
   - Ensure all components are responsive and maintain the minimalist aesthetic.

6. **Testing**:
   - Conduct testing to ensure all features work as intended and the UI is user-friendly.
   - Optimize for performance and loading times.

7. **Deployment**:
   - Deploy the application using a platform like Vercel or Netlify for public access.

## USER EXPERIENCE
Users will navigate through a straightforward interface that allows them to easily input their personal information and running records. The profile section will provide immediate access to their details, while the records section will facilitate quick entry and updating of their achievements. The responsive design ensures that users have a seamless experience whether on mobile or desktop, with intuitive forms and clear feedback on their interactions.