fitConnect

Hack the North 2021: DevPost

Developed a React web application for Hack the North. The goal was to connect users with similar fitness goals and to create a social impact.


fitConnect Long Image

Role

Web Development
Overall Visual Design
chatengine.io Integration
Google Firebase Integration


Timeline

Sept 17-19, 2021
GitHub file: fitConnect


Tools

React (JavaScript, HTML, CSS)
Firebase Authentication
chatengine.io API

The Task


Our inspiration for fitConnect came from experiences of wanting to get into fitness but not having the right mindset to do so or being too nervous. fitConnect can help solve these issues that plague many people and prevent them from reaching the best version of themselves. We were reminded that exercising and practicing healthy lifestyles became much easier with fellow peers, family, friends, or team members. When you have other people around you with the same goals and interests, exercise turns from a solo, draining, and lonely activity into a collaborative and supportive time to spend with friends and enjoy together.

This was not only mine, but it was my friends first big hackathon and wanted to use this as an opportunity to get introduced with React. It was our first time using it and in the end we were quite proud of how things turned out to be due to the fact that we were learning about React during the hackathon, and were still able to produce something functional. The app is a platform that allows you to share your goals, interersts, and any other relevant information and find others doing the same who might be quite suitable and interested in connecting with others to build healthy lifestyles and reach your goals as a team. All of the relevant information that you'd like to share can be shared, and others can see it. Once you happen to find someone who you think would be a good match, you can then start a chat with them on the same platform, and even add others who might be a good fit.

Struggle


First Struggle:
With most of the languages, framworks, and/or libraries in this project, we were pretty much complete beginners.

We had very little experience in React.js, but did have some in HTML/CSS/ and JavaScript. We also had no experience using Google's Firebase, which was a fascinating experience to see how accessible the tools they offer are. However, due to our inexperience, we definitely took longer on some tasks than we needed to, struggling to figure out the solutions to many problems and features we planned.

fitConnect1

fitConnect2

fitConnect3

fitConnect4

User Interface of fitConnect application with the step by step process.

Execute


We first began through looking at YouTube tutorials to learn more about the stack that we were going to use. So we knew that we were going to develop a React web application and that a chat feature needed to be in the website. We then researched more about the chatengine.io API to connect users with similar fitness goals. The app incorporated a live group chat function and profile forum to view other users, all displayed on a fluid user interface. Firebase Authentication service is implemented to allow users to login with their Gmail account. On the forum, I fetched user data from the Chat Engine API to display profile information of loggin in users. We learned quite a lot and here's a list that summarizes everything:

  1. Using Figma to collaborate on a cohesive theme for fitConnect
  2. To work collaboratively, motivate generously, and network maturely
  3. How to interact with APIs on local development servers
  4. Learned how to plan priorities and project scope better
  5. Integrating multiple graphic design platforms to create a cohesive logo
  6. We learned to prepare better ahead of time, where we could experiment and introduce ourselves to a new language or tech if needed, rather than banking on learning from scratch right at the start of the hackathon

Future?


The web application was never published online, and we know that we have to make many changes, we aren't done yet. Our goal was to create something meaningful and impactful. We just touched the surface with learning React in this project, and that honestly was a huge win for us. We found out there's so much more to learn about and new features that can be added to make our website standout even more. In the future I’d like to implement a lot more features to further enhance the user experience prior as I learn more about React and design elements since the frontend development needs work. These features are:

  1. Give users more agency, control, and customization over which information they want to share, such as including an input box to give a brief but personalized self-intro or share some interesting things
  2. Creating a better UI/UX since we didn't know much on how to customize our components, but that would make the web application more memorable for the user
  3. Create a mobile version of the app to increase accessibility
  4. Implement an automated way of matching people, possibly using machine learning. That way, it's easier and also more reliable for users to find others they would fit well with

This hackathon was a great experience for me, and I now wish that I'm able to take the things that I learned from this hackathon to future projects that I will be working on! It was also fun working with some of my highschool friends once again :)





Thanks for taking the time to take a look at my work!


Like what you see?

Let's keep the conversation going!