This is the front-end component of my first personal full-stack project — a live flight tracking application inspired by one of my favorite apps : FlightRadar24. As a passionate aviation enthusiast and aspiring developer, I embarked on this project to combine my interests in planes and coding !
Originally, I envisioned this as a front-end only project to test my knowledge after completing both Meta's React Basics and Advanced React courses. However, I soon discovered that accessing live flight data via API services was costly, leading me to explore alternatives, and after some research, I ventured into web scraping to obtain real-time data. Scraping data directly in the client-side React app proved to be problematic due to security restrictions around CORS (Cross-Origin Resource Sharing)1 and limitations around client-side requests. With these restrictions, the browser blocks direct requests to many servers for security reasons, making client-side scraping unfeasible. This led me to realize that I’d need a back-end component to handle data requests.
Warning
Web scraping is generally not recommended for several reasons :
- Legal and Ethical Concerns : Many websites have terms of service that explicitly prohibit scraping, and scraping without permission can violate these terms, leading to potential legal action.
- Server Load : Scraping can place a significant load on a website's server, potentially disrupting service for other users or even leading to IP bans if the site detects excessive requests.
- Data Integrity : Websites can change their structure or data format at any time, which may break your scraping logic and lead to inaccurate or incomplete data.
Since I’d only worked with Ruby on Rails at that point, I figured this was the perfect opportunity to try out something new and more widely applicable. I chose Node.js and Express.js to build my own API because I was already familiar with JavaScript, and Express offers a straightforward way to create APIs. Developing my own API has not only expanded my technical skills but also given me invaluable experience with JavaScript on both the client and server sides.
You can check out the back-end repository here.
With a working back-end in place, I returned to developing the front-end, eager to apply my React skills. However, as my API relies heavily on web scraping, I found myself sometimes dealing with inconsistent or incorrect data. To handle these scenarios more efficiently and prevent runtime errors, I decided to use TypeScript on the front-end. This choice has allowed me to ensure data accuracy and type safety, bringing much-needed stability to my app. Learning TypeScript while building this project was challenging but extremely rewarding, as it has deepened my understanding of JavaScript and strengthened my overall development skills.
This app is built as a Progressive Web App (PWA)2, meaning it’s designed to offer a native app-like experience on mobile. This approach was a great way to make the app more user-friendly and align with my goal of building a modern, accessible tool for aviation enthusiasts and plane spotters.
Although this project began as a fun way to put my React skills to the test, it evolved into an amazing full-stack journey ! Not only did I dive into React and TypeScript on the front-end, I also built an API with Node.js and Express, all while learning on the fly. The code may still be rough around the edges, and I’m continuously learning to write cleaner, more concise, and DRY code, but I’m proud of what I’ve accomplished, and I hope others can find value in this project as well.
Thank you for taking the time to check out my project ! Your feedback and contributions are welcome, as I’m always looking to improve and learn more. Happy coding ! 🚀
If you'd like to try out this flight tracking application or contribute by suggesting new features, you're more than welcome to clone or fork the repository and submit a pull request. Here's a quick guide to get you started :
- Clone the repository
To create a local copy of this project on your machine, run the following command in your terminal :
git clone git@github.com:thomasmercuriot/react-flight-radar.git
- Navigate to the project directory
cd react-flight-radar
- Install the dependencies
Make sure you have Node.js installed. Then, install the required dependencies by running :
npm install
This will install all necessary packages, including React and TypeScript libraries, to run the application.
- Set Up Environment Variables
This project requires environment variables to run correctly.
| Environment variable | Default value |
|---|---|
REACT_APP_API_URL |
http://localhost:8000 |
REACT_APP_MAPBOX_STYLE_URL |
styles/v1/thomasmercuriot/cm0mjab8c00bi01pj0oqm0v78 |
REACT_APP_MAPBOX_USERNAME |
Your Mapbox Username |
REACT_APP_MAPBOX_TOKEN |
Your (Free) Mapbox Token |
Feel free to create your own map style with Mapbox Studio.
- Start the Development Server
To launch the front-end application in development mode, run :
npm start
This will open the app in your default browser at http://localhost:3000 (or another port if specified). The app will automatically reload if you make edits, providing a smooth development experience.
To prepare the project for production, you can build the optimized version with the following command :
npm run build
This command bundles the app into static files in a build folder, ready for deployment.
If you want to create your own version of this project or experiment with new features, you can fork the repository :
- Fork this repository
Click on the Fork button at the top right of this repository to create a copy under your own GitHub account.
- Clone your forked repository
Use the following command to clone the forked repo to your local machine :
git clone git@github.com:thomasmercuriot/react-flight-radar.git
- Follow the same steps as above to install dependencies and run the project.
If you want to contribute by suggesting a feature or fixing a bug, here's how you can submit a pull request (PR) :
- Create a new branch
It's a good practice to create a new branch for each feature or bug fix :
git checkout -b feature-or-fix-name
- Make your changes
Develop your feature or fix and commit the changes.
git add .
git commit -m "Describe the feature or fix here"
- Push to your forked repository
git push origin feature-or-fix-name
- Open a pull request
Go to the original repository on GitHub and click the New Pull Request button. Select your branch and submit your PR with a brief description of the changes.
I'll review your submission as soon as possible. Thanks in advance for contributing ! 🚀
Discover how the app provides a dynamic and interactive experience for tracking live flights :
Upon opening the app, users are taken directly to a map centered on their current location. This provides immediate context and a seamless starting point for exploring nearby flights.
Flights currently in the air within the visible map area are represented by points on the map. These points are updated in real-time, ensuring the information is always accurate and up-to-date. The map automatically regroups planes in clusters when two points are too close to each other and allows the user to easily visualize how many planes are currently flying in a given zone, thanks to a heatmap style.
Users can click on any flight point to select it. The selected flight is highlighted with a distinct color, allowing users to quickly identify it among others on the map.
When a flight is selected, a popup appears displaying essential details, including origin, destination, remaining flight time, a thumbnail image of the aircraft, its registration, and callsign. This popup also includes a button to view more details about the flight.
Clicking the "View More" button expands the popup to full screen, providing comprehensive details about the flight. Users can explore all available information in a clear, easy-to-read layout.
Side-by-side Comparison with FlightRadar24
