Construye un app para aprender a tocar la guitarra
Generated Prompt
## APPLICATION OVERVIEW This project is a web application designed to help users learn how to play the guitar through interactive lessons, exercises, and progress tracking. The app will provide a user-friendly interface that encourages users to practice and improve their skills effectively. ## CORE FEATURES 1. **Interactive Lessons**: Step-by-step guitar lessons covering basic to advanced techniques, including video tutorials and chord diagrams. 2. **Practice Exercises**: A library of exercises tailored to different skill levels, allowing users to practice specific techniques or songs. 3. **Progress Tracking**: Users can track their practice sessions, view their progress over time, and receive personalized feedback based on their performance. 4. **Community Forum**: A space for users to connect with each other, share tips, and ask questions about learning guitar. 5. **Personalized Playlists**: Users can create and manage playlists of songs they want to practice, with options to mark their proficiency level for each song. 6. **User Authentication**: Secure sign-up and login functionality to allow users to save their progress and access personalized content. ## DESIGN SPECIFICATIONS - **Visual Style**: Minimalist - The design will feature a clean, simple aesthetic with plenty of white space to enhance readability and focus on the content. - **Color Mode**: Light theme with dark text on light backgrounds, ensuring high contrast for better visibility. - **Layout**: - **Header**: Contains the app logo and navigation links (Home, Lessons, Practice, Community, Profile). - **Main Content Area**: Divided into sections for lessons, exercises, and progress tracking with clear, easily navigable tabs. - **Footer**: Includes links to help, about, and contact information. - **Typography**: - Primary Font: Sans-serif (e.g., 'Roboto' or 'Open Sans') for a modern and clean look. - Hierarchy: Use larger font sizes and bold weights for headings, with regular weights for body text to maintain clarity. ## TECHNICAL REQUIREMENTS - **Framework**: React with TypeScript for robust and scalable application development. - **Styling**: Tailwind CSS for utility-first styling that promotes responsiveness and rapid design iterations. - **UI Components**: Utilize shadcn/ui for pre-built accessible components that align with the minimalist aesthetic. - **State Management**: Redux or Context API for managing application state, especially for user progress and authentication. ## IMPLEMENTATION STEPS 1. **Set Up Development Environment**: Initialize a new React project with TypeScript and install necessary dependencies (React, Tailwind CSS, shadcn/ui). 2. **Create Folder Structure**: Organize folders for components, pages, styles, and assets. 3. **Build Authentication Flow**: Implement user registration and login functionalities with secure authentication. 4. **Develop Core Features**: - Create components for lessons and exercises. - Implement progress tracking using local storage or a backend database. - Set up the community forum using a discussion board structure. 5. **Design the User Interface**: Apply Tailwind CSS to create the minimalist design based on the specifications outlined. 6. **Test Responsiveness**: Ensure all components are responsive across different devices and screen sizes. 7. **Deploy the Application**: Use Vercel or Netlify for seamless deployment and hosting. ## USER EXPERIENCE Users will have a smooth onboarding experience with tutorials guiding them through the app's features. They can easily navigate between lessons and practice modes, receive instant feedback on their progress, and engage with the community through the forum. The design will prioritize accessibility and usability, ensuring that learners of all levels can benefit from the app.
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!
