Every great project starts with a solid plan. We began by defining the scope and objectives of our app. We aimed to create a tool that not only visualized historical data but also tracked country and athlete performances in real-time and analyzed event trends. This clear vision helped us stay focused and aligned throughout the development process.
Next, we identified key features. We knew our users would value live medal tracking, so we prioritized getting live data. Additionally, we planned for comprehensive dashboards displaying both historical and real-time event data, along with interactive user interface components to enhance engagement. These features were designed to provide a seamless and informative experience for our users, akin to the value of silver and gold.
After defining our objectives and features, we researched and selected the appropriate technologies. We sought reliable data sources and providers to meet our project requirements. This foundational work set the stage for the next phase: Data Collection and Preparation.
Collecting historical summer olympics data, including the Tokyo Olympics, was a mammoth task, but it provided rich context for our users. We gathered data from past Summer and Winter Games, focusing on athletes, countries, and the medal count of gold, silver, and bronze medals, including gold medals and more medals. This data, sourced from public datasets like Kaggle, needed to be preprocessed, standardized, and cleaned to ensure consistency with medals.
We sourced a data provider for live 2024 Olympics data to keep our app relevant and up-to-date. We reviewed API documentation and understood the data structure to confirm it met our project needs. This ensured our users received accurate and timely updates during the Games.
With both historical and live data in hand, we were ready to move on to setting up our database, where all this valuable information would be stored and managed efficiently.
A robust database setup was key to managing real-time and historical data efficiently. We chose BigQuery as our data warehouse due to its powerful real-time database functionality. This choice allowed us to manage large datasets with ease and provided the flexibility needed for our app’s requirements.
We then created and configured BigQuery datasets. We integrated both live and historical data, ensuring a seamless flow of information. This integration allowed us to provide users with a comprehensive view of Olympics data.
We meticulously designed dataset schemas to accommodate both live and historical data structures. Once the schemas were in place, we uploaded the processed historical data, setting the stage for the next phase: backend development.
The backend development phase was where the magic happened. We developed Python API scripts to handle data fetching, parsing API responses, and updating and querying the BigQuery database. These scripts ensured that our data was always current and accurately reflected in the app.
To maintain high standards, we set up API unit tests in Postman. These tests ensured the performance and quality of our endpoints. Rigorous testing allowed us to catch potential issues early and maintain a smooth user experience.
We created GitHub automated workflows for API scripts to schedule data fetching, parsing, and pushing to the warehouse. This automation streamlined our processes and ensured that our data was always up-to-date without manual intervention.
Developing the Explo dashboards was one of the most exciting parts of the project. Integrating our Olympics datasets into Explo allowed us to leverage its powerful real-time data visualization capabilities. This integration allowed us to create interactive and visually appealing dashboards.
We focused on designing interactive visual components to showcase historical Olympic data, athlete performances, and country rankings. Interactive filters enabled users to customize their data views, enhancing engagement and user-friendliness.
To enhance the user experience further, we incorporated social media and video content as embeds in the dashboards. We customized the dashboard styling to match the web app’s branding and theme, adding a visually cohesive and appealing final touch
With the backend and dashboards ready, we moved on to frontend development. Our first step was setting up the Next.js project and configuring the development environment. This setup provided a solid foundation for building the user interface.
We developed the main structure of the web app using React components and planned the app layout and paths. This modular approach allowed us to build a scalable and maintainable codebase.
We implemented side and mobile navbar components with expanding and collapsing submenus to ensure easy navigation through medal, historical, and event-specific dashboards. Embedding Explo dashboards’ iFrames into their respective web app pages brought the data to life.
Testing and debugging ensured our app’s functionality and performance. We conducted thorough testing of both frontend and backend components, focusing on potential issues and optimization opportunities. Unit tests, integration tests, and end-to-end tests helped us ensure every part of the app worked as intended.
We debugged issues and optimized the app for improved performance and user experience across mobile and desktop platforms before deployment.
Preparing the app for deployment involved setting up build and deployment scripts. This preparation ensured a smooth transition from development to production.
We deployed the frontend React web app to a Firebase project for hosting and connected the domains. We released the app to the public via platforms like LinkedIn, X, and Reddit to reach a wide audience and generate initial traction.
App maintenance and updates are ongoing processes. We regularly update the app with new data and dashboard improvements to keep it relevant and engaging for users. Addressing bugs and enhancing performance based on user feedback ensures continuous improvement.
Reach metrics were tracked to understand the success of our Olympic Tracker and understand the effectiveness of the project. Our main traffic source was Google, followed by LinkedIn, X, and Reddit. These platforms helped us reach a diverse audience and drive significant engagement.
In just 19 days, we achieved over 40,000 unique visitors and more than 550k impressions on the web. 80% of the total traffic came from mobile visitors, highlighting the importance of mobile optimization.The top three countries with the most impressions were France, Argentina, and the US.
Building the Olympics Tracker Web App was a challenging yet rewarding experience. From planning and data collection to backend and frontend development, every step was crucial in achieving our goal. The app’s success, evidenced by over 500k impressions, validates our efforts and the importance of thorough planning and execution.
We hope this journey has provided valuable insights and inspiration. Whether you’re developing a similar app or embarking on a different project, remember that meticulous planning, continuous improvement, and user engagement are key to success.
You can collect historical Olympics data by utilizing public datasets from platforms like Kaggle and then preprocessing the information to ensure it's clean and consistent. This approach allows you to have reliable data for analysis!
Python for API scripts, BigQuery for the database, and automated workflows in GitHub were utilized for the backend, ensuring a seamless and efficient process!
To ensure the app's performance and quality, we conducted comprehensive testing, including unit tests, integration tests, and end-to-end tests. This rigorous approach guarantees that the app functions smoothly and meets user expectations!
We successfully deployed the frontend React web app to a Firebase project for hosting and connected the domains, sharing the exciting news on LinkedIn, X, and Reddit!
To maintain and update the app, we consistently introduce new features, fix bugs, and enhance performance by listening to user feedback and tracking success metrics. This proactive approach ensures an ever-improving experience for all users.
.png)
.png)
.png)