Tech stack: TypeScript, JavaScript, Next.js, HTML, TailwindCSS, FastAPI, Vercel, AWS (Elastic Beanstalk, EC2), MongoDB Atlas, Strava's API, D3.js, Jest, React Testing Library
Project Links
Gallery
Description
This website has undergone extensive updates since I first deployed it 3 years ago. The first version was built with just React as a single page application and styled with pure CSS. As I wanted to record my running data I transitioned to a full stack application using Node.js and Express for the backend, and MongoDB for the database. I also switched to Next.js for the frontend, which allowed me to use server-side rendering and static site generation. This made the site much faster and more efficient, especially for the project pages which are now generated dynamically. A similar approach of dynamic data loading is used to create the project 'cards' displayed on the main projects page.
Another major change was the switch from CSS to TailwindCSS for styling. This allowed me to use utility classes to style the components, which made the code much cleaner and easier to maintain. I also completely rewrote the backend logic in Python using FastAPI, as I wanted to simplify the development process for adding new features in the future, as well as being able to use Python data science libraries to process my running data.
For the running page, I set up a FastAPI server to fetch my running data from a MongoDB database and is deployed to AWS Lambda. D3.js graphs then displays the data as a scatter plot with lines of best fit. The server queries Strava's API and updates the database twice daily with new running data. To ensure scalability, I deployed the server to the cloud using AWS Elastic Beanstalk.
This website is an ongoing project, and I am continually adding new features and improving the design.