The application must follow clean architecture principles, best practices, and be structured for scalability.
Generated Prompt
```markdown ## APPLICATION OVERVIEW This application is a web-based music streaming platform designed to provide users with a Spotify-like experience. Users can register, browse music, create playlists, and manage their audio preferences while enjoying a clean and minimalist interface that enhances usability and engagement. ## CORE FEATURES - **User Registration & Login**: Secure user authentication process allowing users to register using email and password and log in to their accounts. - **Music Browsing & Search**: Users can explore a vast library of songs, artists, and albums and use a search feature to quickly find specific content. - **Audio Player**: A persistent audio player at the bottom of the screen that allows users to play, pause, skip, and manage their music queue seamlessly. - **Playlist Management**: Users can create, edit, and manage playlists, adding or removing songs as they prefer. - **Recently Played Tracks**: A feature that tracks and displays songs the user has recently listened to, enhancing their music discovery experience. ## DESIGN SPECIFICATIONS - **Visual Style**: Minimalist - Clean, simple design with plenty of white space, a minimal color palette, and a strong emphasis on typography to facilitate readability and user focus. - **Color Mode**: Light theme with dark text on light backgrounds to ensure high contrast and ease of reading. - **Layout**: The application features a sidebar navigation for easy access to the Home, Search, and Your Library sections, with a main content area displaying the selected features. A fixed bottom audio player ensures constant access to playback controls. - **Typography**: Utilize modern sans-serif fonts for clarity and readability, with a defined hierarchy (e.g., larger headings for section titles, medium for subtitles, and standard size for body text). ## TECHNICAL REQUIREMENTS - **Framework**: React with TypeScript for type safety and enhanced development experience. - **Styling**: Tailwind CSS for utility-first styling, enabling rapid design adjustments and responsive layouts. - **UI Components**: Leverage shadcn/ui for pre-designed components that align with the minimalist aesthetic. - **State Management**: Context API or Redux Toolkit to effectively manage application state across various components. ## IMPLEMENTATION STEPS 1. **Set Up Project Structure**: Initialize a new React project with TypeScript and configure Tailwind CSS. 2. **Create Core Components**: Develop the main layout, including the sidebar and audio player components, ensuring they are responsive and visually aligned with the design specifications. 3. **Implement Routing**: Use React Router to set up navigation between different pages (Home, Search, Your Library). 4. **Set Up State Management**: Integrate Context API or Redux Toolkit for managing user authentication state and music data. 5. **Develop API Integration**: Implement the backend using Node.js and Express, ensuring RESTful API design for seamless data fetching and manipulation. 6. **Design Database Schema**: Create tables in PostgreSQL for users, songs, albums, and playlists, using Prisma ORM for easy database interactions. 7. **Implement Authentication**: Set up user registration and login flows with JWT for secure access and role-based authorization. 8. **Develop Core Features**: Integrate music browsing, searching, playlist management, and recently played tracks functionalities. 9. **Test and Debug**: Conduct thorough testing of both frontend and backend components to ensure functionality and performance. 10. **Deploy Application**: Prepare the application for deployment with proper instructions and environmental configurations. ## USER EXPERIENCE Users will have an intuitive experience as they navigate through the application. Upon logging in, they will be greeted with a home page showcasing featured playlists and trending songs. The sidebar navigation allows users to easily switch between searching for music, browsing their library, and accessing their playlists. The audio player remains accessible at the bottom of the screen, offering seamless control over playback. Overall, the interface will prioritize simplicity and ease of use, ensuring that users can focus on enjoying their music. ```
Loved by thousands of makers from
From early prototypes to real products, they started here.







































Generate optimized prompts for your vibe coding projects
Generate prompt
Enter a brief description of the app you want to build and get an optimized prompt
Review and use your prompt
Review (and edit if necessary) the generated prompt, then copy it or open it directly in your chosen platform
Get inspired with new ideas
Get AI-generated suggestions to expand your product with features that will surprise your users
Frequently Asked Questions
Everything you need to know about creating better prompts for your Lovable projects
Still have questions?
Can't find what you're looking for? We're here to help!
