Runnify is a full-stack web application designed to demonstrate advanced programming and software development skills. It showcases the ability to build an interactive platform for organising social runs and tracking fitness progress.
🌐 View the project here
Note: Desktop-only access for now
Runnify was created by a team of five students to explore the development of responsive, user-focused web applications. The project leverages technologies including JavaScript, HTML, CSS, Node.js, and MongoDB, highlighting knowledge in both frontend and backend development.
This project serves as a demonstration of technical and collaborative skills in:
- Full-stack development
- Data persistence and user interaction
- Responsive design and usability
Runnify isn’t a live product but a representation of how modern technologies can be used to create engaging digital experiences.
- Enables users to sign up and log in, granting access to the platform’s features.
- Allows users to create new runs by specifying details such as pace, start time, location, and distance.
- Automatically generates an optimised route and provides a weather forecast for the run.
- Displays all available runs with details, including meeting points, pace, mapped routes, participants, likes, and comments.
- Users can join, like, and comment on runs directly from the feed.
- Offers sorting options by pace and distance to better organise the displayed runs.
- Provides functionality to update fitness goals and track activity trends over time.
- JavaScript: Handles the application logic, retrieves data from the OpenWeather and GeoCoding APIs, and displays running routes using MapBox.
- HTML: Structures the web application and ensures a well-organised layout.
- CSS: Provides styling and layout for a visually appealing and responsive user interface.
- Node.js: Processes HTTP requests from the frontend (e.g., user logins, creating new runs, liking posts) and manages interactions with external APIs like OpenWeather and GeoCoding. It also facilitates communication with MongoDB for storing and retrieving data.
- MongoDB: Stores persistent data, including user information (e.g., usernames, passwords, preferences) and run-related data (e.g., route, pace, start time, distance, participants), as well as interactions like comments and likes.
- OpenWeather API: Provides weather information used to predict conditions for future runs.
- GeoCoding API: Supplies the longitude and latitude of the starting point, allowing the plotting of optimal running routes.
- MapBox: Displays the running routes on an interactive map for users to visualise their paths.
- D3: Generates the graphs that are shown on the statistics page.
- SweetAlert2: Creates interactive pop-ups and alerts throughout the application.
- Sessions: Tracks user activity across different pages to maintain session state.
- Mocha & Chai: Perform automated testing to ensure the application’s functionality and reliability.
| Name | Contributions |
|---|---|
| Teja Garrido | Graphs Statistics, Styling of Pages. |
| Emma Horton | Testing Server Endpoints, Calendar for Runs, Database Setup, Styling of Pages, Create endpoints on server. |
| Harry Huang | Running Feed. |
| Phil Kolling | External weather API, Map API, Algorithm, Database Setup, Register Page, Login Page, Create endpoints on server, Helper Functions. |
| Reanne Sutton | External weather API, Database Setup, Register Page, Login Page, Styling of Pages, Create endpoints on server, Sessions. |
- Username: Claire
- Password: claire
Grade: 19/20 (95%)