Crie o esqueleto (estrutura base) de um aplicativo de treino de musculação chamado DSHAPE, com foco em organização, simplicidade e estabilidade.
Generated Prompt
## APPLICATION OVERVIEW DSHAPE is a web application designed for muscle training organization and management. It focuses on providing users with a simple, intuitive interface to plan and execute their workout routines effectively, emphasizing stability and ease of use. ## CORE FEATURES 1. **Dashboard**: Displays the workout of the day with a prominent "Start Workout" button and quick access to create or edit workouts, ensuring a seamless navigation experience. 2. **Workout Management**: Users can create, edit, and remove workout divisions, each leading to a list of specific exercises tailored to their training regimen. 3. **Exercise Details**: Each selected workout division shows a list of exercises where users can add, edit, or remove exercises, including details on sets and repetitions. 4. **Workout Execution**: A dedicated screen for users to log their workouts, allowing them to input weights lifted and repetitions completed for each exercise, with a button to mark exercises as completed. 5. **Workout History**: Users can view past workouts, including performance metrics and weights used, enabling them to track their progress effectively. 6. **User Profile**: A personalized profile form collecting essential data such as age, height, weight, and training goals to tailor the user experience and future expansions. ## 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 consists of a bottom or side navigation menu for easy access to the Dashboard, Workouts, History, and Profile. Each screen is designed to maintain clarity and quick access to necessary features. ## TECHNICAL REQUIREMENTS - **Framework**: React with TypeScript - **Styling**: Tailwind CSS - **UI Components**: shadcn/ui - **State Management**: Use React Context API or Redux for managing user data and workout states. ## IMPLEMENTATION STEPS 1. **Setup Project**: Create a new React application using Create React App with TypeScript template. 2. **Install Dependencies**: Install Tailwind CSS for styling and shadcn/ui for UI components. 3. **Create Component Structure**: Develop components for each screen (Dashboard, Workout Management, Exercise Details, Workout Execution, Workout History, User Profile). 4. **Implement Navigation**: Set up a routing system using React Router to manage navigation between different screens seamlessly. 5. **State Management**: Implement state management to handle user data, workouts, and exercises. 6. **Styling**: Apply Tailwind CSS classes according to the design specifications, ensuring a minimalist aesthetic. 7. **Testing**: Conduct thorough testing to ensure the application is bug-free and meets performance expectations. ## USER EXPERIENCE Users will experience a streamlined process, starting from the Dashboard where they can quickly access their workout plans. With intuitive navigation, users can manage workouts and exercises with minimal clicks, log their training sessions effectively, and view their history to monitor progress. The clean and simple interface ensures that users remain focused on their training goals without distractions.
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!
