fierce-productivity

bySuchith Parmi

Build a Duolingo-style Student Productivity App with gamification, levels, streaks, and a real leaderboard system. CORE IDEA: The app should feel like a game where studying = progress and competition. AUTHENTICATION: - Separate Login and Signup pages - Input fields clearly labeled: Username: Password: - Show validation errors - Prevent duplicate usernames - Redirect to Dashboard after login/signup MAIN FEATURES: 1. Daily Goal System: - Default daily goal: 60 minutes - Progress bar showing completion - Completing goal gives bonus rewards 2. XP (Experience Points): - Earn XP: 10 XP per 10 minutes studied - Bonus: +50 XP for completing daily goal - Display total XP 3. Level System: - Every 100 XP = 1 level - Show current level - Progress bar to next level 4. Streak System: - Maintain streak if daily goal is completed - Show streak with flame icon πŸ”₯ - Reset streak if missed 5. Study Sessions: - Timer-based start/stop - Save session duration - Show total study time for the day 6. Achievements / Badges: - First Study Session - 3-Day Streak - 7-Day Streak - 10 Hours Studied - Display badges visually on profile 7. LEADERBOARD (IMPORTANT): - Global leaderboard showing top users ranked by XP - Display: Rank # Username XP Level - Highlight current user’s rank even if not in top 10 - Show Top 10 users - Update leaderboard dynamically when XP changes - Optional (if possible): - Weekly leaderboard reset (every 7 days) - Separate tabs: - Global (all-time XP) - Weekly (XP earned this week) 8. Dashboard UI: Show clearly: - Streak πŸ”₯ - XP ⭐ - Level 🧠 - Daily Goal Progress Bar - Quick β€œStart Study” button - Mini leaderboard preview (top 3 users) 9. Pages: - Login Page - Signup Page - Dashboard - Study Session Page - Leaderboard Page - Profile Page 10. Backend: Store: - username - password (hashed) - xp - level - streak - last active date - study history - badges 11. LOGIC RULES: - Completing goal β†’ streak +1 - Missing a day β†’ streak resets - XP updates level automatically - Leaderboard sorts users by XP (descending) 12. UI DESIGN: - Duolingo-inspired (bright, clean, engaging) - Rounded buttons, cards, smooth progress bars - Mobile-friendly 13. EXTRA: - Add simple animations (progress fill, XP gain effect) - Show rank change animation when user climbs leaderboard TECH STACK: - Frontend: HTML, CSS, JavaScript - Backend: Flask or Node.js - Database: JSON or SQLite OUTPUT: - Full working code - Separate frontend and backend - Instructions to run Make the app feel like a competitive game, not just a tracker.

LoginLeaderboard GlobalSignupUsers
Login

Comments (0)

No comments yet. Be the first!

Login design preview
Login: Sign In
Dashboard: View Stats
Dashboard: Manage Users
Users: Edit User
Users: Delete User
Leaderboard Global: Monitor Rankings
Leaderboard Weekly: Monitor Rankings
Profile: View User Profile
Settings: Configure App