Swimmers' Visualization is a passion project aimed towards helping competitive swimmers at my local swim club visualize their progress, strengths, and weaknesses based on their results at competitions.
This project was created with:
- Tailwind CSS
- React
- Recharts
- Node.js
- Express
- MongoDB (Atlas)
- Python
- Beautiful Soup
This feature allows users to search up athletes on the web app and filter their results
There are two main components to this.
First, there are 3 tags indicating the athlete's best stroke, preferred swimming style, and best event. This is located right under the summary heading.
Below, there will be a radar and stacked area graph. The radar graph demonstrates the athlete's performance over the 4 strokes. The stacked area graph displays the athlete's growth overtime based on an event.
All insights are derived from the athlete's historical performance at competitions.
This table contains all the events the athlete has ever competed in, displaying their personal bests for each event.
Overall, this was a successful attempt in learning new skills within full-stack development. This was my first time working with the MERN stack, getting my hands dirty in developing a REST API, hosting data on the cloud, and creating a component-based front-end. Moreover, Tailwind CSS was a delight due its flexibility. I was able to do everything I needed without creating a stylesheet! Last but not least, it was a pleasure learning Beautiful Soup to scrape data on athlete data.