Inspiration
In this endless pandemic situation, many people are suffering from lack of exercise. Now that the current situation is gradually getting better, a lot of people want to go back to 'normal life'- freely working out outside of home. However, even though you have a strong will to start working out, you may have experienced getting lost of what, where, and how to even start exercising, eventually giving up taking any action
One of the main reasons you are hesitant would be that it’s tremendously tedious to find information about exercising. (e.g. location the activity takes place, activity hours, instructor information, etc) To solve this issue, we have decided to create a website that contains various physical activities classes in one place.
What it does
Fit Diary is a web application where diverse physical activities classes and group events are organized in one place by category, so that you can add any exercise you want to your schedule with just a few clicks.
For instance, you have decided to register for a class or to join a group exercise; you choose a category on the left navigation bar and find the activity that you are interested in. Once you click on the activity thumbnail, it’ll display a ticket-formed modal that shows you a detailed information about the activity (class name, activity hours, location, class size) along with the ‘Add Activity” button. When you apply the add button, it will alert the user, indicating the event has been added on your list, and closes the modal. When you click on the same thumbnail again, the initial “add” button is now replaced by “Remove Activity” button; this has the same interaction as the add button, but this time removing the event from the user’s schedule instead.
Moreover, Fit Diary allows users to manage their workout schedule through ‘My Diary’ page. If you have successfully added the events, the event hours will be automatically updated on the ‘My Diary’ page so that you can view all the registered classes or groups at a glance. Not only you can check your schedule on a monthly basis but also on a daily basis, by simply clicking the date you want to take a deeper look.
By creating this website, we hope to aid people to find the exercise information and following the schedule in a more accessible manner.
How we built it
We used Express to set up a server, and associated EJS as a frontend view engine. Stylings were completed with CSS, all the frontend dynamic functions (e.g. adding/removing an activity, displaying different activities per category, etc) were implemented with customElements, a built-in feature of client-side Javascript. For storing data, we set up a mock-database associating browser global instance and local storage. The complete UI, UX, and event interactions were done using Figma.
Challenges we ran into
The biggest challenge for this project was setting up the calendar page, especially the modal that shows all the events within the chosen date, as we had to display the events on the correct position according to its start time and have a certain size that corresponds to the event’s time length. Also, some team members were not very familiar with the frontend techniques, which did consume up quite a bit of time.
Accomplishments that we're proud of
Although most of the team members had little or no experience in hackathon challenges, we managed to complete the project the way we have planned. Additionally, each team member had a distinctive role, so tasks were distributed very efficiently, and we successfully communicated with each other, despite being physically far apart.
What we learned
This was definitely a fun project to work on, because we have built the entire website from scratch, without any aid of web-building tools. It was our chance to fortify our strength on frontend skills, along with manipulating dynamic contents within a page.
What's next for Fit Diary
- Function that allows the users to sign up for creating the classes or groups.
- Function that enables user to share their personal schedule with friends who are also members of the website.
- Activity recommendation system based on the activities that the user frequently chooses.
Log in or sign up for Devpost to join the conversation.