Make up - social app for running challenges. The first challenge will be doing an activity for 100 mins, every day, for 100 days straight, and I'm...
Generated Prompt
## APPLICATION OVERVIEW This project is a web application designed to facilitate a social running challenge, where users complete an activity for 100 minutes every day over 100 days. The app will promote engagement through features like daily check-ins, social interactions, and integration with Discourse forums, ultimately aiming to encourage users and highlight sponsors throughout the experience. ## CORE FEATURES 1. **Daily Check-in System**: Users can easily log their daily activities, including their location, temperature, and optional photo uploads. A simple interface allows for quick check-ins with an automated metadata capture, similar to DayOne entries that automatically pull in relevant data. 2. **Journal Entries**: Each check-in encourages users to write a journal entry, enhancing their experience by personalizing their journey and fostering community through shared experiences. 3. **Leaderboards & Player Stats**: A feature displaying total minutes completed by users, promoting healthy competition. Additional data visualizations can show interesting statistics about user activities. 4. **Promos Page**: This is a critical part of the app where users can see weekly deals and promos from our sponsors. 4. **Social Features**: Users can follow each other and respond to check-ins using emojis, facilitating community interaction and support. 5. **Integration with Discourse**: Automatically logs user activities to a specific topic in Discourse forums, creating a seamless connection between the app and the community discussions. 6. **Offers/Sponsors Page**: A dedicated space for weekly giveaways and promotions, where sponsors can engage users and offer incentives based on their participation in challenges. ## 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 will feature a responsive design with a top navigation bar, a prominent hero section for daily check-ins, a leaderboard section, and a footer with links to sponsors and community discussions. ## TECHNICAL REQUIREMENTS - **Framework**: React with TypeScript. - **Styling**: Tailwind CSS. - **UI Components**: shadcn/ui. - **State Management**: Redux or Context API for managing user state and app data. ## IMPLEMENTATION STEPS 1. **Setup Project**: Initialize a new React project with TypeScript and install necessary dependencies including Tailwind CSS and shadcn/ui. 2. **Design Layout**: Create a responsive layout structure with a header, hero, leaderboard, and footer sections. Use Tailwind CSS for styling. 3. **Build Daily Check-in Component**: Develop the check-in interface, ensuring it captures user metadata and allows for journal entry input. 4. **Integrate with Discourse**: Set up API calls to log user check-ins to the Discourse forum and display relevant topics. 5. **Implement Social Features**: Create components for following users and responding to check-ins with emojis. 6. **Develop Offers/Sponsors Page**: Create a dedicated page for showcasing sponsors and weekly giveaways, allowing integration points for sponsors to offer prizes. 7. **Testing and Optimization**: Conduct thorough testing on various devices to ensure mobile-first usability and performance optimizations. ## USER EXPERIENCE Users will experience a seamless interaction flow. Upon entering the app, they are greeted with a prominent check-in interface. After completing their check-in, they can view their progress on the leaderboard and interact with friends' activities through the social features. Notifications will remind them to check in daily, and the integration with Discourse allows for community engagement without leaving the app. The Offers/Sponsors page will enhance user motivation through weekly giveaways, fostering a vibrant community around the challenge.
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!
