MindMuffin

A complete gamified study app that combines Pomodoro timers, task management, social features, and achievement systems to make studying engaging and productive!

Comment

MindMuffin 🧁✨

A complete gamified study app that combines Pomodoro timers, task management, social features, and achievement systems to make studying engaging and productive!

🎯 Features

🧁 Gamified Pomodoro Timer

  • Classic 25-minute focus sessions with 5/15-minute breaks
  • Level up system with XP rewards for completed sessions
  • Unlockable muffin toppings and customizations
  • Beautiful progress ring with muffin-themed animations

✅ Smart Task Management

  • Create and organize tasks by category (Study, Work, Personal, Health)
  • Link completed Pomodoro sessions to specific tasks
  • Track task completion rates and progress
  • Filter tasks by status and category

📅 Study Calendar

  • Visual calendar showing your study sessions
  • Add personal commitments and deadlines
  • Track daily/weekly/monthly study statistics
  • See your study streaks and patterns

👥 Social Features

  • Add study buddies and friends
  • Weekly leaderboards based on study time
  • Challenge friends and share progress
  • Motivational notifications and encouragement

🃏 Flashcard System

  • Create custom flashcard decks
  • Spaced repetition learning
  • Scoring system with streaks
  • Leaderboards for flashcard performance

👤 Profile & Achievements

  • Level progression system (1-30+)
  • Unlock new muffin toppings as you level up
  • Achievement system with 8+ unique badges
  • Detailed statistics and progress tracking

🎨 Beautiful Design

  • Muffin-themed UI with warm, bakery-inspired colors
  • Smooth animations and micro-interactions
  • Dark mode for late-night study sessions
  • Fully responsive design for all devices

🚀 Quick Start

Local Development

  1. Clone the repository
  2. Open index.html in your browser
  3. Start studying and earning XP!

Deploy to Vercel

  1. Fork this repository
  2. Connect to Vercel
  3. Deploy with one click!

🏗️ Architecture

File Structure

mindmuffin/
├── index.html              # Main app entry point
├── css/                    # Atomic CSS modules
│   ├── base.css           # Variables and base styles
│   ├── timer.css          # Pomodoro timer styles
│   ├── todo.css           # Task management styles
│   ├── calendar.css       # Calendar component styles
│   ├── friends.css        # Social features styles
│   ├── flashcards.css     # Flashcard system styles
│   ├── profile.css        # Profile and gamification styles
│   └── ...
├── js/                     # Modular JavaScript components
│   ├── timer.js           # Core Pomodoro timer logic
│   ├── todo.js            # Task management system
│   ├── calendar.js        # Calendar and session tracking
│   ├── friends.js         # Social features
│   ├── flashcards.js      # Flashcard system
│   ├── gamification.js    # Leveling and achievements
│   ├── navigation.js      # Tab navigation
│   └── app.js             # Main app initialization
├── vercel.json            # Vercel deployment config
└── package.json           # Project metadata

Key Technologies

  • Frontend: Vanilla JavaScript, CSS3, HTML5
  • Storage: LocalStorage for offline functionality
  • Deployment: Vercel static hosting
  • Design: Custom CSS with CSS Grid/Flexbox

🎮 Gamification System

Experience Points (XP)

  • Focus Session (25 min): 50 XP + 5 bonus XP
  • Long Session (45+ min): +20 bonus XP
  • Streak bonuses for consecutive days

Level Progression

  • Level 1-3: Basic muffin toppings
  • Level 5-10: Premium flavors and decorations
  • Level 15+: Special edition and cosmic muffins
  • Level 30: Ultimate muffin master status

Achievements

  • 🧁 First Muffin: Complete your first session
  • 🌅 Early Bird: Study before 8 AM
  • 🦉 Night Owl: Study after 10 PM
  • 🔥 Streak Master: 7+ consecutive study days
  • 👑 Muffin Master: Bake 100+ muffins
  • 🦋 Social Butterfly: Add 5+ friends
  • 🎯 Flashcard Ace: 10+ correct answers in a row

🔧 Customization

Adding New Timer Modes

  1. Create new timer class extending PomodoroTimer
  2. Add theme-specific CSS in css/timer.css
  3. Update gamification rewards in js/gamification.js

Adding New Achievements

  1. Define achievement in js/gamification.js
  2. Add unlock conditions in isAchievementUnlocked()
  3. Create achievement artwork/emoji

Extending Social Features

  1. Add new friend interaction methods in js/friends.js
  2. Extend leaderboard calculations
  3. Add new notification types

📱 Mobile Support

Fully responsive design with:

  • Touch-friendly interface
  • Optimized layouts for small screens
  • Swipe gestures for navigation
  • Mobile-specific animations

🌙 Accessibility

  • High contrast color schemes
  • Keyboard navigation support
  • Screen reader friendly
  • Reduced motion options
  • Clear visual hierarchy

🚀 Deployment

Vercel (Recommended)

  1. Fork this repository
  2. Connect to Vercel
  3. Deploy automatically

Other Platforms

  • Netlify: Drag and drop the folder
  • GitHub Pages: Enable in repository settings
  • Firebase Hosting: Use Firebase CLI

🤝 Contributing

  1. Fork the repository
  2. Create a feature branch
  3. Make your changes
  4. Test thoroughly
  5. Submit a pull request

📄 License

MIT License - feel free to use this project for personal or commercial purposes!

🙏 Acknowledgments

  • Inspired by Forest app and other focus tools
  • Built with love for the student community
  • Special thanks to all beta testers

Start your study journey today and become a Muffin Master! 🧁👑

Share this project:

Updates