Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This web application will serve as an online music player that not only allows users to listen to songs but also suggests similar tracks based on their listening preferences. Additionally, users will have the capability to record their own music, creating a platform for both consumption and creation of audio content.

## CORE FEATURES
1. **Music Playback**: A user-friendly interface for playing songs, with play, pause, skip, and volume control features.
2. **Song Recommendations**: An algorithm that analyzes user listening habits to suggest similar songs, enhancing user engagement.
3. **Music Recording**: A built-in tool for users to record their own music, including basic editing features to refine their audio.
4. **User Accounts**: Secure authentication allowing users to create accounts, save their favorite songs, and access personalized playlists.
5. **Library Management**: Users can browse and manage their music library, including options to upload and categorize their own tracks.
6. **Responsive Design**: A layout that adapts seamlessly across various devices, ensuring a consistent user experience.

## 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**: A clean layout featuring a navigation bar at the top, a hero section for song playback, a grid for song recommendations, and a section for user-created music. The overall structure will prioritize usability and ease of navigation.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS.
- **UI Components**: shadcn/ui.
- **State Management**: Redux or Context API for managing user state and preferences.

## IMPLEMENTATION STEPS
1. **Set up the development environment**: Install Node.js, create a new React app with TypeScript, and set up Tailwind CSS.
2. **Design the layout**: Create the main components including the navigation bar, hero section, music player controls, and sections for recommendations and user recordings.
3. **Implement authentication**: Use a library like Firebase or Auth0 for user account management.
4. **Develop the music playback feature**: Integrate a music playback library (e.g., Howler.js) to handle audio playback functionality.
5. **Build the recommendation engine**: Implement an algorithm to analyze user listening patterns and suggest similar tracks.
6. **Create the music recording feature**: Integrate a recording library (e.g., Recorder.js) to allow users to record and edit their music.

## USER EXPERIENCE
Users will have an intuitive experience starting from the initial landing page where they can log in or sign up. Once logged in, they will be greeted by the music player interface, where they can play songs and see recommendations based on their recent activity. The process to record music will be straightforward, allowing users to quickly start recording, save their tracks, and manage their library with ease. The responsive design ensures that users can enjoy their music on any device, whether on a desktop, tablet, or mobile phone.