team-hamsterdam / hamster-health-frontend

Frontend for Hamster Health, an organisational task tracking tool made with Javascript, Sass, HTML, CSS, React.js & Bootstrap/React-Bootstrap deployed on Netlify

Hamster Health Frontend

About

• Hamster Health was built for the Hackiethon 2021 hackathon hosted by HackMelbourne
• We were finalists ranked within the top 16 for the hackathon!

Libraries/Frameworks/Languages

• Javascript, Sass, HTML, CSS, React.js, Bootstrap/React-Bootstrap

Inspiration

• Our team decided to address the issue of staying organised and motivated in quarantine through our web app Hamster Health. Hamster Health is an organisation tool which allows the user to create a to-do list with custom tasks which they can complete. Upon completing their tasks they will be rewarded with experience points to increase their account level. This will help motivate the user by giving them a sense of progression as they see their level increase whilst they become more organised, furthermore, Hamster Health implements a leader board which displays the 50 users with the highest levels, creating a social aspect of motivation which is lost in quarantine life.

How we built it

• When we started, we didn't know how to implement the app or what it would look like so we did some planning & brainstorming. We wrote down all our backend routes, drew some of the designs for each page and discussed features of our app. After this, we used our remaining time to implement the front end and back end.

Challenges we ran into

• Learning how to use our libraries and frameworks
• Implementation was hard
• Fixing random bugs
• Running into unexpected errors that would take hours to fix
• Finishing the app on time
• Adjusting the back end on the spot
• Deploying our app took a really long time since it was our first time doing it

Accomplishments that we're proud of

• The app actually works
• We managed to get the front end and back end working together after deployment
• Our app is actually on the internet

What we learned

• How to write a front end
• How to write a back end
• The challenges involved in making a full stack application
• How to use our libraries/frameworks
• What it's like to work on a project for over 10 hours a day

What's next for Hamster Health

• Implementing more features such as the progress tracking system that we couldn't implement in time