Web for song tracker and sharing so our homepage have 4 different pages on top page we have username, my song, playlist, home so first our home...
Generated Prompt
## APPLICATION OVERVIEW This web application is a song tracker and sharing platform that allows users to manage their favorite songs and playlists. The application features a user-friendly interface where users can search for songs, save them to personal collections, and create playlists, all while maintaining a minimalist aesthetic for ease of navigation. ## CORE FEATURES 1. **Home Page**: Displays a list of songs with details including genre and title. Users can save songs to their "My Songs" page and utilize a search bar for quick access to song or artist information. 2. **My Songs Page**: Shows all songs that the user has saved. Users can easily add these songs to their playlists or mark them as favorites. 3. **Playlists Page**: Users can view and manage their created playlists. Each playlist box displays its title and a preview of included songs. Clicking on a playlist box reveals more detailed information. 4. **User Profile Page**: A dedicated space for users to manage their account settings and preferences. 5. **Authentication**: A login page that allows users to securely access their personal data and saved songs. ## 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 layout features a top navigation bar for page selection (Home, My Songs, Playlists, User Profile), a search/filter bar on each page, and a grid or list display for songs and playlists, ensuring a straightforward and intuitive user experience. ## TECHNICAL REQUIREMENTS - **Framework**: React with TypeScript - **Styling**: Tailwind CSS - **UI Components**: shadcn/ui - **State Management**: Redux or Context API (as needed) ## IMPLEMENTATION STEPS 1. **Set Up Project**: Initialize a new React project with TypeScript, install Tailwind CSS, and set up shadcn/ui components. 2. **Create Authentication Flow**: Implement user authentication with login and registration pages. 3. **Build Home Page**: Design the home page to fetch and display songs with their details, incorporating the search and filter functionality. 4. **Develop My Songs Page**: Create the My Songs page to display user-saved songs and functional buttons to add to playlists or mark as favorites. 5. **Implement Playlists Page**: Build the Playlists page with the ability for users to view, create, and manage their playlists. 6. **Design User Profile Page**: Set up a user profile page for settings management and display user information. 7. **Responsive Design**: Ensure the application is fully responsive and accessible on various devices. 8. **Testing**: Conduct thorough testing for functionality and user experience before deployment. ## USER EXPERIENCE Users will easily navigate through the application via the top navigation bar. They can search for songs using the search bar, filter by genre, and save their favorites quickly. The minimalist design ensures that users focus on the content rather than distractions, enhancing their overall experience while interacting with music tracking and sharing features.
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!
