BalanceU

• 

  This is the first part of the welcome screen of the website introducing what BalanceU is about.

• 

  This is the second part of the welcome screen of the website talking about the core values and goals of BalanceU.

• 

  This is the third part of the welcome screen of the website that gives the option of signing up or login in to the website.

• 

  This is the welcoming screen of when you're signing up for BalanceU. It asks for a person to choose an username and password.

• 

  This is the login in screen where it asks previous user to put in their username and password or else they ask you to reenter it or sign up.

• 

  This is the page where you put in your name and choose your 3 hobbies.

• 

  This is the home screen where you log hours easily by 10 minutes. Tells you your level, streak, completion, and can start side quests too.

• 

  This is where you log specific hours for your hobbies and choose how it made you feel and log in the hours.

• 

  This is the side quest screen where you see a new side quest available to do and start it. You can also see future quests for the next day.

• 

  This is the touch grass screen where you push the button when you've gone outside. It updates each day and you're able to see your awards.

• 

  This is the progress screen that tells you how much time you spent with pie chart. It also tells you weekly goals and awards too.

• 

  This is the profile screen where users sees their name, username, password, and hobbies. They can also log out to get sent to the home page.

Inspiration

The idea for BalanceU came from the everyday struggles of being a college student. Balancing academics, hobbies, social life, and personal well-being can feel overwhelming. Many students either overwork themselves or lose track of their goals entirely.

I was inspired by the need for a simple system that helps people stay productive without burning out. I wanted something that not only organizes tasks but also encourages users to maintain a healthy balance between work and life. The concept of combining productivity tools with mental wellness tracking became the foundation of this project.

What it does

BalanceU is a web app designed to help college students avoid burnout by gamifying their hobbies and personal wellness. When somebody uses it, it follows this order:

1. A new user lands on the welcome screen, reads the pitch, and signs up with a username and password. That account is saved so they can log back in later and pick up exactly where they left off — and, importantly, multiple people can have separate accounts on the same device without their data mixing.
2. After signing up, they go through onboarding, where they enter their first name and choose exactly 3 hobbies from a list (things like Gaming, Hiking, Cooking, Dancing, Yoga, etc.). This forces intentionality — you're not just dumping into a to-do list, you're committing to things you actually care about.
3. Then they land on the home screen, which is the heart of the app. It greets them by name with a time-appropriate greeting (good morning/afternoon/evening), displays a random motivational quote, shows their hobby cards with a log button for each, and shows their current XP level and streak. Every time they tap "+ Log" on a hobby, they earn 10 XP and eventually level up. There's also a side quest card on the home screen that they can complete for bonus XP.
4. The log screen lets them record a more detailed hobby session — they pick the hobby, choose a duration (which gives them XP equal to the number of minutes), and optionally tag how they were feeling during it. This data feeds into the progress charts.
5. The quest screen gives them a daily side quest — small, fun challenges like "draw something for 10 minutes" or "listen to a new album." Completing one gives them XP and increments their side quest counter, which is tracked per user.
6. The Touch Grass screen is probably the most creative feature — it's literally a button that rewards you for going outside. Every tap counts toward a "total touches" score, and as that number climbs, you unlock nature-themed awards with names like "Lawn Wanderer," "Trail Blazer," and ultimately "Legend of the Lawn."
7. The progress screen shows a live pie chart of how much time they've spent on each hobby, a weekly goal bar, and all the awards they've unlocked — both from leveling up and from touching grass.
8. The profile screen shows their username, name, hobbies, and lets them reveal their password with a toggle. Logging out clears the session so the next person can sign in.

How I built it

I built BalanceU as a web-based application with multiple sections designed to help users stay organized and balanced. Core Features:

1. User Input / Setup Users enter their name and hobbies Personalizes the experience

2. Task & Habit Tracking Add and manage daily tasks Track homework and assignments Build habits and routines

3. Quotes & Motivation Daily inspirational quotes Keeps users motivated

4. Challenges & Rewards Complete challenges Earn rewards or points Encourages consistency

5. Wellness & Balance Focus on avoiding burnout Encourages breaks and self-care

Tools I Used: Visual Studio Code – for writing and organizing all code AI chat tools (like ChatGPT) – helped generate ideas, debug code, and improve structure Pinterest – for design inspiration Figma – for planning layouts and UI design Coolors – for choosing color schemes

Challenges I ran into

1. Organizing Features: I had many ideas like tasks, habits, quotes, challenges, and a calendar. It was difficult to combine them without making the app overwhelming.
2. Keeping It Simple: I had to make sure the app stayed easy to use while still being powerful and useful.
3. UI Design: Designing a clean interface took multiple revisions. I had to adjust layouts to improve usability.
4. Time Management: Managing my time while building a productivity app was challenging, but breaking the project into steps helped.

Accomplishments that I'm proud of

1. I built a full multi-screen website from scratch. It has 9 separate screens that communicate with one another through a shared data system.
2. It has real user empathy that I really want from other apps. The whole concept — no guilt, no pressure, just life — is built around how college students actually feel. The onboarding intentionally limits you to 3 hobbies. The quotes are about balance, not hustle. That kind of intentional design thinking is what separates projects that feel alive from ones that just technically work. I'm proud that I achieved something so personal and hope it's great for all experiences
3. The gamification design is very thoughtful. XP, leveling, streaks, side quests, and two separate award tracks are not just points being slapped on with a to-do list like many other apps. I really like the Touch Grass feature because it uses the language people use now, and I think it's pretty funny while encouraging healthy habits.

What I learned

Through building BalanceU, I learned several important skills:

Frontend development (HTML, CSS, JavaScript) Structuring a user-friendly interface Breaking down a big idea into smaller, manageable features The importance of user experience (UX) when designing apps How to turn real-world problems into technical solutions

I also learned how challenging it is to design something that is both functional and simple. Keeping the interface clean while still offering useful features required a lot of iteration

What's next for BalanceU

A real backend and database: Right now, everything lives in the browser's localStorage, which means if someone clears their browser data, everything is gone. Moving somewhere else would be an impactful upgrade.

Mobile app: The whole concept of BalanceU — logging hobbies, touching grass, completing quests — is something people would do on their phones, not sitting at a desk. Converting it to a React Native would let students add it to their home screen like a real app with no App Store required.

Push notifications: A gentle evening nudge like "Hey, you haven't logged anything today — even 10 minutes of gaming" would dramatically improve retention.

Social features: College is inherently social. Letting friends add each other, see each other's streaks, and send encouragement would transform BalanceU from a solo tool into something people talk about on campus. Even a simple leaderboard within a friend group for "most hobbies logged this week" would drive massive engagement. It would be fun to see what people around you are also doing as well.

Built With

• canvas
• css
• html
• javascript