Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a full stack web application designed to help users track their running personal records, including user profiles with bio information and profile pictures. The application will provide a clean and user-friendly interface for managing personal achievements while ensuring optimal performance across devices.

## CORE FEATURES
1. **User Profiles**: Allow users to save their name, location, and a bio with a character limit of 150.
2. **Personal Records**: Users can maintain personal records for various running distances, displaying time in HH:MM:SS format.
3. **Race Details**: For each personal record, users can input the race or location where the record was achieved and the date using a date picker.
4. **Profile Picture Upload**: Users can upload a profile picture to customize their profile.
5. **Responsive Design**: Ensure the application is mobile-friendly and provides a seamless experience on both desktop and mobile 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 feature a top navigation bar, a user profile section, and a records management section, with clear calls to action and ample white space for a clean look.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS.
- **UI Components**: shadcn/ui.
- **State Management**: Use React’s built-in state management for simplicity, with potential use of Context API for global state if needed.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript and install Tailwind CSS along with shadcn/ui components.
2. **Create User Authentication**: Implement user registration and login functionality to manage user profiles using a backend service (e.g., Firebase, Node.js).
3. **Profile Management**:
   - Develop a user profile component to display and edit user details (name, location, bio).
   - Implement file upload functionality for profile pictures.
4. **Personal Records Section**:
   - Create a form to input personal records including distance, time, race/location, and date.
   - Store records in a database and fetch them to display on the user's profile.
5. **Responsive Design**: Ensure all components are responsive, adjusting layouts for mobile and tablet views.
6. **Testing and Optimization**: Conduct thorough testing for functionality and performance, optimizing load times and responsiveness.

## USER EXPERIENCE
Users will interact with the application by first creating an account or logging in. Once logged in, they can navigate to their profile page where they can add or edit their personal details and upload their profile picture. In the personal records section, users can easily input their running achievements, providing a clear and straightforward experience. The design will prioritize ease of use, ensuring that users can quickly find and update their information without confusion.