Daily habits
Add the habits you want to keep, such as going to the gym or drinking water, and check them off each day. They reset every morning.
- My role
- Everything: design, front end, back end, and deployment
- Course
- BYU CS 260, Web Programming
- Timeline
- September – December 2025
- Built with
- React, Vite, Express, MongoDB, WebSockets, AWS
Heads up
The live app is switched off
HABITat started as a class project, and I ran it on AWS with its own domain. The hosting costs added up, so I disconnected most of the AWS services after the class, and the live site no longer works properly. The motivational-quote service it used has also stopped responding.
The screenshots below come from running the real code on my computer with sample data. The full code is on GitHub.
View the code ↗
the idea
A place where good habits grow
For anyone who feels forgetful, unmotivated, or disorganized, HABITat turns a daily to-do list into a game. You check off your habits each day, build up streaks, and see how your consistency stacks up against everyone else’s.
Streaks
Finish a habit on consecutive days and its streak grows. Miss a day and it starts over, so consistency is what counts.
Leaderboard
Every user’s total streak is ranked on a shared leaderboard, so you can see how you compare.
Live updates
When someone checks off a habit, the leaderboard re-sorts for everyone with the page open. No refresh needed.
Quote of the day
The dashboard greets you with a motivational quote pulled from a third-party quotes service.
Accounts
People register and log in, and each person’s habits are stored privately under their account.
design to code
From a sketch to a working app
I started by mocking up the dashboard in NinjaMock to decide what mattered most: today’s habits, their streaks, and the leaderboard, all in one view.
Dashboard
The look
Green, friendly, and growing
A leafy green palette and a bold display typeface set the tone, and a small sprouting mascot gives the app a face. Streak bars fill in green as habits grow.
Primary#4A7C59
Fresh#6DB87A
Light#A8D5B0
Deep#2D5A3D
the app
Screens
Screenshots of the real code running locally, with sample users and sample habits.
under the hood
What happens when you check off a habit
The full stack is mine, from the button you click to the database it writes to.
- 01
The app updates
React marks the habit done. If it was finished yesterday the streak grows by one, otherwise it restarts at one.
- 02
The server saves it
The app sends the change to my Express API, which checks your login cookie and stores the habit in MongoDB.
- 03
Streaks get totaled
The server adds up all of your habits’ streaks into a single score for the leaderboard.
- 04
Everyone sees it
The new score is pushed over a WebSocket to every open leaderboard, which re-sorts instantly.
Passwords are hashed with bcrypt before they’re stored, and each login sets a secure, HTTP-only cookie. I deployed the app to an AWS server with its own domain name and HTTPS.
how it came together
Built in stages
Sep 2025
Plan and first pages
- Wrote the pitch and feature list, sketched the dashboard, and built the HTML pages: home, login, sign up, dashboard, and leaderboard.
Oct 2025
Styling and React
- Styled every page in CSS, then moved the app to React with Vite and React Router.
Nov 2025
Back end and database
- Built the Express service with login, logout, and habit endpoints, connected the quotes service, and stored users and habits in MongoDB.
Dec 2025
Real-time leaderboard
- Added the WebSocket server and connected the leaderboard so scores update live.
More work
Read the code
The app isn’t live anymore, but everything is on GitHub.