Studier

• 

  Final studier UI (dark mode)

• 

  Light mode + badges

• 

  legal things done

• 

  Pushing code to GH

Inspiration

Studying can feel boring and unrewarding. Most productivity apps are cluttered, pricey, require logins, or focus on timers instead of actual progress. I wanted to make studying fun and motivating, turning tasks into a game where users feel accomplished every time they complete something.

What it does

Studier is a minimalist web app that gamifies studying. Users can:

Add, edit, and delete tasks

Assign difficulty levels (Easy / Medium / Hard) that give different XP

Track streaks and overall XP

Celebrate milestones with badges and small animations All progress is stored locally in the browser, no login or tracking required.

How I built it

Frontend: HTML, Javascript and CSS

Data storage: localStorage for XP, streaks, and tasks

Design: Single-page app with card-based layout, responsive for mobile and desktop

Optional small animations for XP gain and streak celebrations

Everything is lightweight and fully browser-based, so anyone can use it instantly.

Challenges I ran into

Designing a fun yet simple UI that looks modern without overcomplicating features

Balancing XP and streak logic to feel motivating but not punishing

Keeping everything localStorage-only while making the data persistent and smooth

Accomplishments that I'm proud of Created a fully functional gamified study app that runs entirely in the browser

Achieved a modern minimalist design that looks professional despite being lightweight

Made XP, streaks, and badges interactive and visually satisfying

What I learned

Simple, focused design can make an app fun and usable without complex tech

Gamification motivates users more than timers alone

Browser-based storage (localStorage) can handle surprisingly robust data tracking

What's next for Studier

Explore exporting progress so users can track long-term achievements

Built With

• css
• html
• javascript