FitConnect — Map Your Fitness Journey With Others!
This project was carried out as part of the TechLabs “Digital Shaper Program” in Dortmund (summer term 2023). “FitConnect” was awarded as the best project in the summer term 2023.
In a nutshell:
FitConnect is a web application where fitness enthusiasts can find workout partners and schedule sessions together. The platform features a map where users can immediately see nearby training sessions and join them, or alternatively, create their own workout session. Additionally, the app includes a chat where participants can easily communicate with each other and keep in touch.
Introduction:
We, as the developers of this project, love to work out, and until now, we hadn’t come across any applications like this. We believe that such an application is very useful because people can exercise together, have fun, meet and connect with new people. Most importantly, this is an application that we ourselves would eagerly use in our lives.
When we were thinking about how we would implement the application, we understood that it would be a great practice to enhance our skills. We had no prior experience in app development at all. We completed only a React course. But we really wanted to challenge ourselves.
So, we needed to create an application that has users, which means that login and registration pages have to be present. We also needed to work with the Google Maps API. We wanted training sessions from different users to be visible on the map, and when clicked, users could open them and send a request to join. We also wanted all notifications and map updates to happen instantly, without page reloads. Additionally, we needed to implement a chat, groups, and a settings page. Therefore, we had to plan the application’s logic in advance and figure out how to optimize all processes and choose proper technologies. We always tried to find the most efficient and not overly complicated ways to do things.
We also divided the tasks we would work on so that we didn’t have to wait for each other and each of us could work at his own pace. Since there were only two of us, it was relatively easy. At the same time, we consistently shared with each other how the process was going and helped each other when needed.
Methodology:
First, we started working on the design of our application. We quickly decided that we wanted the main colors to be black and orange. Then, we came up with an approximate idea of how our logo should look. Since none of us had strong design skills, we decided to outsource the logo design on a freelance platform. (The logo is always visible on the registration or login pages)
We also agreed on the technologies we would use. We had only completed a React course, so in this project, we wanted to focus primarily on the frontend. We thought that learning backend would not be efficient at that point, and we decided to use a service like Google Firebase. This service simplified many things, but at the same time, we needed to learn how to work with authentication, NoSQL database, and storage. Initially, it was quite unfamiliar and time-consuming.
For the frontend, we decided to write everything in React and, of course, used some libraries. Once all such questions were resolved, we started using GitHub as a ticket system. Each of us could now work on our tasks. We held weekly meetings to discuss progress, difficulties, and more.
There were two of us on the project, and each of us followed the web development track only. But we came up with the entire design of our application ourselves. Daniel created the layout of our main page in Figma, and Volodymyr designed training icons.
In total, we have 6 pages, and let us explain how everything is implemented.
The first 2 pages are login and registration. Users land there if they are visiting our app for the first time. With the help of Google Firebase, this was relatively easy to implement, as this service provides convenient tools for user management, registration, and login. The input forms were implemented using the React Formik library, and validation was done with React Yup.
After sign up or sign in, we land on the main page — the map. Here, we worked with the Google Maps API. All our workouts are stored in the database, and if, for example, the workout time has already passed, the workout is automatically deleted. All changes on the map and notifications happen instantly thanks to Firebase listeners. When we open any workout — we send a request to our database and retrieve data.
The chat also operates in real-time. We used also Firebase listeners here.
In the settings, the user can change their profile photo and personal information, including the password. When changing the photo, we work with Firebase Storage.
In our project, we used SCSS instead of regular CSS because it’s more readable, in our opinion, and we can use variables for colors, for example. By changing one variable, we can completely change the color scheme of our project if necessary.
We also have animations using both regular CSS and react-spring.
Here are a couple more libraries we used for specific features:
- uuid — for generating random unique IDs.
- @mui/icons-material — for beautiful icons.
- react-select — for convenient select input creation.
- react-router-dom, react-dom — for application navigation.
- date-fns — for working with dates
Results:
At the moment, we have an application where users can create their own workouts, join others, manage who can join them, communicatate in the chat. So, I believe that the core functions in the application are already implemented.
Now we can focus on improving the project. For example, there are aspects that can be enhanced in the chat. Additionally we can add a friend-adding system and user profiles, as well as groups, and overall evolving everything into a social network.
The project was challenging yet intriguing. Before this, our knowledge was primarily theoretical. Through this experience, we’ve learned a lot and significantly enhanced our skills. It has been a great journey for us, and each of us has learned something new and improved along the way.
As for future plans:
It would be great to create a mobile version of the project and then launch it on the Google Play Store. We are confident that such an application will find its fans.
GitHub repository (or similar):
https://github.com/TechLabs-Dortmund/FitConnect
Team members:
Volodymyr Havryliuk — Web Development ( Volodymyr Havryliuk | LinkedIn)
Daniel Danilov — Web Development (Daniel Danilov | LinkedIn)
Honourable mentions:
Tom Stein for helping us with MarkerInfo issue
