Study Session Planner

Focus. Finish. Celebrate.

Comment

📘PocketStudy: Study Session Planner

PocketStudy is a clean, beginner‑friendly React web app designed to help students stay focused and motivated using the Pomodoro technique. It combines a countdown timer, study targets, reminders, motivational tips, and emoji celebrations to make learning more engaging and rewarding.

✨ Inspiration

Students often struggle to maintain focus and lose motivation during long study periods. PocketStudy solves this by combining the proven Pomodoro method with lightweight goal tracking and positive reinforcement, so short wins become visible and repeatable.

🛠 How I Built It

  • Frontend: React 18 for UI and state management
  • Visualization: Chart.js + react-chartjs-2 for progress tracking
  • Feedback: React Confetti, React Toastify, and Howler.js for celebrations and notifications
  • Deployment: GitHub + Netlify for CI/CD and live demo hosting
  • Sponsor APIs:
  • Featherless.ai 🪶 → provides motivational study tips at the end of each session, displayed via toast notifications.
  • MeDo 🔗 → transforms a structured requirements document into a generated study planner site preview, demonstrating how prompts can become functional layouts.

Study Planner (https://medo.dev/projects/app-9x1u2pj88kxt/preview)

📊 Core Features

  • Pomodoro timer with work/break cycles (25/5/15 default)
  • Motivational tips fetched from Featherless.ai
  • Emoji celebrations 🎉 for completed sessions
  • Study session tracking (count + total time)
  • Browser notifications and sound cues for focus

📚 What I Learned

  • Structuring a React app with reusable components and clear state flow
  • Designing minimal UI with meaningful feedback
  • Debugging timing issues, notification permissions, and deployment differences
  • Integrating sponsor APIs into a real project for hackathon eligibility

🚀 Challenges & Solutions

  • Timer reliability: solved by centralizing countdown logic and clearing intervals on unmount.
  • Notification permissions: solved by requesting permission on first load and adding a test button.
  • Deployment differences: solved by inspecting Netlify logs, reproducing builds locally, and fixing dependency mismatches.

🔮 What's Next

  • Add authentication and persistent progress across devices
  • Provide analytics and streak tracking
  • Calendar integration and customizable sound packs

Status: Demo ready and deployed on Netlify License: MIT

Built With

  • api-key
  • chart.js
  • css3
  • eslint
  • featherless.ai
  • howler.js
  • html5
  • javascript(es2020+)
  • medo
  • netlify
  • node.js
  • npm
  • prettier
  • react-chartjs-2
  • react-confetti
  • react-toastify
  • react18
  • useeffect
  • usememo
Share this project:

Updates