QuietHour

new request page
calender
dashboard
login info

Inspiration

Hostel life is fun until someone needs silence at 11 PM and the next room is playing music. Angry notes and group-chat complaints rarely work. QuietHour came from a simple thought: What if asking for quiet was easy, and respecting it felt good? We wanted to reduce noise stress, encourage empathy, and make shared living a little kinder for students.

What it does

QuietHour lets students: See if the room is free or in quiet mode Send a quiet request in one tap Check the house calendar and who’s around Track streaks and community stats It turns noisy living into something more respectful and supportive.

How we built it

We built a mobile-first web app using HTML, Tailwind CSS, and pure vanilla JavaScript. Key parts: live status circle, quiet-request modal, calendar, profile with stats, and floor-wise roommate view. Everything runs in the browser with localStorage — no backend needed. We kept the design warm and playful so the app feels helpful, not strict.

Challenges we ran into

Finding the right tone (friendly but still serious about quiet hours) Managing state with only vanilla JS Creating realistic demo data that felt like a real hostel Finishing a polished multi-screen experience under time pressure

Accomplishments that we're proud of

Shipped a complete, working prototype in a short hackathon Made quiet requests feel supportive instead of controlling Built real interactivity with just vanilla JS and localStorage Created a live demo focused on student mental health

What we learned

Positive rewards (streaks, badges) work better than rules Small design details make an app feel caring Clean vanilla JS is enough to build something polished A focused prototype beats too many half-finished features