I want an website for a habittracker where people can compete with eachother like a competition and social media in-one.
Generated Prompt
## APPLICATION OVERVIEW This web application is a competitive habit tracker designed to engage users in a gamified environment where they can track their habits, compete with others, and share their progress on a social platform. The app features interactive charts to visualize daily, weekly, and monthly habit completion, encouraging users to build better habits while eliminating bad ones. ## CORE FEATURES 1. **User Registration & Authentication**: Allow users to sign up, log in, and manage their profiles to track their habits securely. 2. **Habit Tracking**: Users can add, edit, and delete habits. A smooth line chart displays daily progress over the month, showing a clear visual of habit completion. 3. **Progress Visualization**: Three donut charts represent yearly, monthly, and weekly progress in percentages, providing an engaging way to visualize achievements. 4. **Competition Feature**: Users can compete with friends or other users, fostering a sense of community and motivation through friendly rivalry. 5. **Social Sharing**: Enable users to share their achievements and progress on social media, increasing engagement and attracting new users. 6. **Notifications & Reminders**: Users receive reminders to complete their habits, helping them stay on track and engaged. ## 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 includes a hero section with a call-to-action, a features section detailing the benefits of the habit tracker, followed by a progress visualization area with charts, and a footer with contact information and links. ## TECHNICAL REQUIREMENTS - **Framework**: React with TypeScript - **Styling**: Tailwind CSS - **UI Components**: shadcn/ui - **State Management**: Redux or Context API for managing user data and app state. ## IMPLEMENTATION STEPS 1. **Setup Project**: Initialize a new React project with TypeScript and integrate Tailwind CSS for styling. 2. **Design Layout**: Create the main layout structure with a responsive design using Tailwind CSS classes. 3. **Build Authentication**: Implement user registration and login functionality, ensuring secure authentication. 4. **Develop Habit Tracking**: Create components for adding, editing, and deleting habits. Integrate a line chart library (e.g., Chart.js) for daily progress visualization. 5. **Implement Donut Charts**: Add three donut charts for visualizing yearly, monthly, and weekly progress using a chart library. 6. **Competition Feature**: Develop the competition functionality, allowing users to challenge friends and compare progress. 7. **Social Sharing**: Integrate social media sharing options for users to promote their achievements. 8. **Testing**: Conduct thorough testing of all features to ensure functionality and usability. 9. **Deploy**: Deploy the application on a suitable platform (e.g., Vercel or Netlify) for public access. ## USER EXPERIENCE Users will start by signing up or logging in to their profiles. Upon entering the app, they will be greeted by a motivating hero section with a call-to-action to start tracking their habits. The dashboard will display their current habits, the line chart for daily progress, and the donut charts for overall progress. Users can easily add or modify habits, receive notifications, and engage with friends through the competition feature, fostering a community atmosphere that encourages habit formation and improvement.
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!
