Full-Stack projects, class #16

by Ruben Villalon

Full-Stack Development projects class #16
Our last Full-Stack Development batch #16 (May 3, 2021 - Jul 23, 2021) worked on four web applications: two were developed for real companies, one located in Belgium and the other one here in Switzerland. The web applications were built during the Capstone project phase, the last three weeks of the program. You’ll find the project details below. 

FixMyCity - Application to report damages in your city

StudentsFrancesco Burchielli, Sophia Vonbank, Antony Alex, Alex Lengyel

FixMyCity was created with the objective of providing a more effective and fun way to report physical damages in your city in situations that need urgent attention from the local authorities, (ex:  holes on a road, graffiti on walls, garbage on the streets, trash cans that need to be taken care of, …). There is currently a way to make notifications, but most cantons have an independent solution on their website, which is neither known nor user friendly.

With this newly developed solution, reports come in the form of posts on the application. Besides the description and location, it is possible to take a picture and attach it to the post. It doesn’t stop there! The post has an interesting feature: it can be upvoted, meaning that users of the platform can validate if the problem is still current and needs attention.

Also, the reports are displayed on a dynamic map on your phone, where you can see all the posts individually and in groups, depending on how far you zoom into the map. All the reports can be shown as a list. On top of all these functionalities, the users will get points and badges based on the number of reports posted and casted votes. The more the number of points, the higher the rank of the user on the platform.

Current features:

  • Authentication functionality for users and for people responsible from the city that will take care of the reports
  • Users can create reports and post them on the platform
  • Taking photos directly from the phone
  • Usage of the GPS to automatically set your location on the map, and in addition, to add a tag for your post with the location
  • Add categories to your reports
  • Upvote the submitted issues
  • Get badges based on the number of upvotes from the logged-in user

Future features:

  • Convert the web app application to a progressive web app
  • Add heatmaps to see in a glance the most problematic areas of the city on the map
  • Add editable dashboards for the local authorities with export capabilities
  • Language options with the idea of expansion to another city in the world

Map FixMyCity List of issues New issue
Overview of all damages 1), open issues 2) and new issue - ready to be published

Octo - Organize, Compete, Track, Online - Web application to create customized sport tournaments

Students: Gian Hess, Bolorchimeg Munkbold, Jon Stricker, Valentina Subaran, Catalin Barcan
We’re sure that all of you have tried to organize a friendly tournament for your favorite sport or game in the office with your colleagues or with a group of friends. For that, you probably created a messy Excel spreadsheet and tried to keep it up to date, which is tedious, time-consuming and most likely won't help the result.
That's why our students created Octo, a web application that allows you to create tournaments, invite friends, set the rules and watch the result online and live on your mobile.

Current features:
  • Authentication functionalities
  • Create tournaments for 3 sports: ping-pong, tennis, and football
  • As an organizer, invite another user to join via email
  • Create custom brackets with name, results, and dates
  • Organizers can add the results live
  • Visualize tournaments and get reports

Future features:
  • Add new sports and games
  • Create teams
  • Customisable settings
  • Include a light theme
  • Keep a record of all previous tournaments

Overview tournaments
List of current live tournaments

Tournament Propulsion
Brackets type tournament from the Propulsion Ping Pong Cup

User profiles with their current tournaments and results

Video Call feature implementation for Sleepiz Web and Mobile App

Students: Fabien Clerc, Hannes Frömel, Linard Furck
Sleepiz is a Zurich-based company that makes a sleep monitoring device that bridges the gap between wearables, which are convenient and inexpensive to use but lack the accuracy of medical sleep sensors, and hospital devices, which offer all the technology to provide highly accurate sleep analysis but are very inconvenient and expensive to use.
The device measures data with medical accuracy, sits next to your pearl and collects data such as respiration, pulse rate and others. Your registered physician has access to all the data and can access it via the Internet and cell phone.
It was a unique format, where the students were working directly with the tech team from the company and went to their offices for the implementation of the new feature, a call functionality between doctors and patients. For this purpose, they had to learn a new UI Software Framework, React Native, for the implementation of the features on mobile as well as have regular team meetings with Sleepiz and deliver a real life project. Students also  benefited from direct insight into their processes for DevOps and Cybersecurity.

Main features and challenges:
  • Implementation of a conference call feature
  • Building a Web Application with mobile functionalities
  • Learn React Native
  • Bring a solution by exploring different technologies like Twillio, socket.io and WebRTC

Future of the project:
  • Testing and implementation of the application built
  • Integration and standardization of the architecture according to Sleepiz current architecture
  • Recording of patient and doctors chat and video

Overview Sleepiz
Sleepiz application layout with the results from the data gathered

Digitalization of Cyclist’s Performance tool for their Cycling Simulator - ENERGYLAB

Students: Robert Carr, Karim Abdelaziz, Olivia Posch, Nenad Haefeli
EnergyLab is a Belgium-based company that offers testing and coaching services to improve the performance of cyclists by providing fitness testing, determining the best position on the bike with its simulators, and personalized coaching.
Each athlete receives a customized training and nutrition plan developed by the coaches who stay in close contact and make adjustments as needed to enhance the athlete's performance.
The data collected from each athlete is used in an Excel spreadsheet to make predictions for the cyclist's future performance. The challenge for our students was to develop a web application that dynamically displays the data with its original formulas, allows adding information and selecting options, tracking each athlete on their cell phone, and even sending reports with all the plans automatically generated based on the collected data.

Features and benefits:
  • Authentication functionalities
  • Consolidate data into one platform that is accessible by all coaches in different branches
  • Keep track of client’s past performances to provide more accurate statistics
  • Data visualization using graphs in a well designed platform
  • Save time and improve user experience

Future implementations:
  • Allow athletes to access the website and generate results
  • Allow coaches to generate route profile charts and maps
  • Add more visualization on the athletes dashboard

Overview cycling
Data from the route to be done by the cyclist

Sessions Energylab
Total session from the athlete

Graph Energylab
Graph with the recent sessions from the athlete 

We would like to thank all of our students for their efforts during the program and in the Capstone project phase. A big thank you also goes to Energylab and Sleepiz for collaborating with our students!

Interested in reading more about Constructor Academy and tech related topics? Then check out our other blog posts.

Read more