StudyStride

Desktop view
Mobile View
Interface
Task complete
Task fail
Start new task
Invalid date
Break time
Reset task
Pause task
icons
design
character
sky 1
sky 2

Inspiration

As university students, we have all experienced the stressful, sleepless nights before an assignment. Having to endure the physical and mental toll of sacrificing sleep to meet deadlines, and neglecting basic needs during study binges has taught us a valuable lesson—that this vicious cycle has to end now.

What it does

StudyStride is a web app designed to help students maintain their wellbeing while completing assignments. The app provides visual feedback on time management and self-care through an interactive interface. It uses a dark theme to reduce eye strain, includes clear visual indicators, and has a soothing, infinitely scrolling background for visual appeal.

It's key features are:

Task Tracking: Users input their assignment due date, which powers a progress bar showing remaining time.
Wellbeing Metrics: Three vital stats (Energy, Thirst, and Hunger) gradually deplete over time.
Health System: Health points are lost when any stat enters the red zone (1 point per depleted stat), multiple depleted stats stack their penalties (up to 3 health points lost simultaneously), and stats can be replenished by taking breaks (pauses the game during recovery)
Scoring: Final wellbeing score (S-F rank) based on total health lost, losing all but 1 health point results in task failure, losing 9+ health points automatically fails the wellbeing assessment, and successful time management rewards a "Task Complete" screen.

How we built it

The application was created using React with JavaScript as the foundation. We implemented TailwindCSS for UI development, the build process was managed through Node.js and npm, with Vercel serving as our deployment platform due to its seamless integration with GitHub. All pixel art and designs were hand drawn specifically for this project.

Challenges we ran into

Coming up with a solid concept within a short time frame, and having to rethink the implementation of key features over and over again. As two of our members has never used React before, it was a challenge when trying to assign tasks, however, we were able to leverage each individual's skillset and complete the project on time.

Accomplishments that we're proud of

As first time hackathon participants and a newly formed team, we were very satisfied with the end result by delivering a fully functional web application in under 48 hours. Despite entering the event with low expectations, we successfully developed a clean, intuitive UI interface, implemented all core functionality as planned, and maintained code quality under time constraints.

What we learned

Working in a group can allow for better looking end results as each team member possesses an invaluable skill set that allows for a seamless project building experience.