Crea dos páginas de un crm de métricas de seguimiento (gráficas), una será para el rol de usuario de profesional/entrenador y otra para el rol de...
Generated Prompt
## APPLICATION OVERVIEW This project is a web application designed to serve as a CRM for tracking various metrics for both athletes and professionals/trainers. It will feature two distinct user roles—athletes who will monitor their physical evolution and performance metrics, and professionals who will track their business growth and client management. The application will include interactive graphs to visualize data effectively. ## CORE FEATURES 1. **Athlete Metrics Dashboard**: Displays various performance metrics including weight, body fat percentage, muscle mass, strength perception, and dietary adherence through interactive graphs. 2. **Professional Dashboard**: Provides insights into business growth metrics such as client retention, revenue tracking, and client feedback, visualized through various chart types. 3. **Graphical Data Representation**: Utilizes multiple graph types (line, bar, radar, etc.) to represent different metrics clearly and effectively. 4. **Customizable Reporting**: Allows users to select timeframes (last month, 3 months, 6 months) for their data analysis. 5. **User-Friendly Interface**: Simple navigation and clear layout for ease of access to metrics and insights for both athletes and professionals. 6. **Feedback Loop**: Optional feature for professionals to send satisfaction surveys to clients, with the ability to disable this functionality. ## 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 application will have a responsive layout featuring a sidebar for navigation, with a main content area displaying the selected dashboard metrics. Graphs will be displayed in cards with adequate spacing and margins for clarity. ## 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 the Project**: - Initialize a new React project with TypeScript. - Install necessary dependencies (React Router for navigation, Redux for state management, Tailwind CSS for styling, and shadcn/ui for components). 2. **Create the Graph Components**: - Develop reusable graph components that accept data props and render appropriate charts based on the provided data type. - Implement chart libraries (e.g., Chart.js or Recharts) to visualize metrics. 3. **Develop the Athlete Metrics Dashboard**: - Create a dashboard component that fetches and displays the athlete's metrics using the graph components. - Implement hooks to manage state and lifecycle for data fetching. 4. **Develop the Professional Dashboard**: - Similarly, create a dashboard for professionals that displays their business metrics. - Ensure that both dashboards can toggle between timeframes for data analysis. 5. **Implement Navigation and Layout**: - Set up a sidebar for navigation using shadcn/ui components. - Ensure responsive design principles are followed for mobile and tablet views. 6. **Final Touches and Testing**: - Style components according to the design specifications. - Conduct user testing to gather feedback and refine user interactions. ## USER EXPERIENCE The application will provide smooth navigation between dashboards for athletes and professionals, with intuitive interactions for selecting timeframes and viewing metrics. Users will experience a minimalist interface that highlights the data without overwhelming visuals, ensuring that critical information is easily accessible. The use of interactive graphs will allow users to engage with their data dynamically, fostering a better understanding of their progress and performance.
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!
