STRAVERS is a social media app for cyclists to track their cycling activities and share with their friends. Users can upload their rides using a .gpx file and instantly view the activity data on the home page, along with their friends' latest activities.
Users can also view their overall statistics such as total miles, total elevation gain for a single ride or their entire activity history.
Immediately after the user logs in, their latest activity data and the user's friends activity feed are displayed on the home page. Also displayed are an upload form to submit a new activity, and navigation capabilities to go to the user's profile as well as to search for other users.
The app updates the friends activity feed in real-time using WebSocket communication protocols. If a friend uploads an activity, the user will immediately see a button pop up alerting them of the update. The button will display the count of new activities available to display.
Client: ReactJS, JavaScript, React Router, socket.io, Chart.js, Leaflet
Server: Python, Flask, SQLAlchemy, PostgreSQL, flask-socketio, Pandas, gpxpy
Log-in to the app with an existing user name and password. A register form is also available for new users. After log-in, the user will be routed to the home page where they will have access to their latest activity, their friends latest activity feed, and a navigation bar to access their profile page, search for a user, or log out.
On log-in, the user's information is stored in the session storage and as a global state to be used to fetch back-end data throughout the app. The session storage is deleted when logging out.
The +UPLOAD RIDE button will open a form for a user to upload a new activity.
Upload a .gpx (GPS exchange format) file from the user's local drive, add an activity caption and upload the activity. The file is sent to the back-end for parsing and storing in the database. After the file is parsed and stored, it is returned to the front-end to be rendered on a map displaying the latest activity and associated data such as total elevetaion gain, total distance, total time as well as a plot with the elevation provile throughout the activity. This user's latest ride component is rendered without refreshing the entire page.
The app uses WebSocket communication protocols to give a real-time friends feed update, without having to refresh the page to fetch for new activities. As it can be seen in the gif below, two users that are following each other are connected to the app at the same time. User1 is on Google Chrome (browser on the left) and User2 is on Firefox (browser on the right).
Immediately after User2 uploads a new activity, User1 will get notified via the NEW ACTIVITY +1 button that a new friends activity is available. If more activities become availble while the user is connected the new activity counter will increase. When the user clicks on the NEW ACTIVITY button, the feed will refresh with the new data and the button will disappear.
The latest friends activity feed is displayed on the home page. A user can scroll through their friends feed which is ordered by the activity date in descending order. The friends acitivy feed has an activity card for each activity which displays the name of the user, ride caption, ride date, total elevation gain, total distance, total time, and an interactive map of the activity.
In the navbar, a Search user feature is available for a user to search for other users in the database. Once a user is found, their name can be clicked to navigate to that user's profile page.
After navigating to the other user's profile page, their information is available as well as a FOLLOW and UNFOLLOW button. A map of their latest ride is also available, as well as a plot with the user's total activities for the current year.
The FOLLOW button will be available in another user's profile if you are not following them. Otherwise an unfollow button will appear.
Navigate to your profile page to see all the users that you are following or that are following you.
In the user's profile page, you can see your Profile Information, a list of all the users you are following, a list of all the users that are following you, and a plot with the user's activity stats for the entire year.
In the home page, a UNITS button is available to toggle between imperial and metric units for the entire app. This will toggle the distances between meters and feet for elevation gain, and miles and kilometers for total distance. A Context provider was used for this implementation in order to change the state of the units globally and apply them to different componets in the app without having to pass them down as props. The session storage was also used to store the state of the units, in order to keep the current state even when the page is refreshed or when the user navigates to another route.
To be able to run this project you will need Docker Desktop installed on your computer. Docker installation instructions: https://www.docker.com/products/docker-desktop/
The instructions below will allow you to run this project on your local computer using docker-compose
- Run the following command in the terminal to download a copy of the repo to your local machine
git clone https://github.com/adrianhuber17/fitness-app.git- Navigate into the new sub-folder created called fitness-app.
- Run the following commands to create an environment and install the dependencies:
- After the project repo is downloaded navigate into the project directory
cd fitness-app- Manually open Docker desktop or run the command below to open Docker
open -a Docker- Once the Docker desktop is runnning, type the command below to create and start the container in detached mode and build the image
docker-compose up -d --buildAt this point the container with the app should be running in your local computer
Services are running on Port 3000 (front-end React), Port 5001 (back-end REST), Port 5004 (back-end WebSocket). Please make sure you have no other app running on these ports
Open a browser to the local host http://localhost:3000/ and start enjoying the app.