More and more fitness enthusiasts are looking for ways to track their workouts and progress in a way that’s just right for them. They want something personalized – something that fits their unique goals and lifestyle.
From tracking daily activities to monitoring performance metrics, they want tools and technologies that provide meaningful insights and guidance on their wellness journey.
In this article, we’ll look at how Bitcot’s innovative next.js and node.js web app development services help one such fitness enthusiast reach his goals in his own way.
This article explores our collaboration with him to develop a tailored activity-tracking application that has a transformative impact on achieving his fitness aspirations with precision and purpose.
An Overview of Our Activity Tracking App Development Project
Our client is someone who loves fitness and travels extensively. He previously used a subscription-based social fitness app but wanted a custom activity-tracking web application to track his activities and self-assess. The idea was to gather data from the various devices he uses during his multiple activities and present it in a user-friendly interface.
Firstly, we understood our client’s needs and created a user flow that mirrored his fitness journey, ensuring a seamless and intuitive user experience. Then, we worked on both the design and development simultaneously.
For the front end, we opted for NextJS, React JS, and TypeScript. Next.js acts as a server, which we then deploy along with our React code. This setup allowed us to take advantage of Next.js’s server-side rendering capabilities while building our application with React.js components and ensuring type safety with TypeScript.
For the back end, we employed Node JS along with Firebase services like Cloud Functions, Authorization, Storage, Firestore, and Hosting. Through our Firebase app development services, the client could integrate various data sources efficiently and securely.
Additionally, we had daily calls with the team and used spreadsheets to track the progress and identify pending tasks.
The app we built is primarily designed for activity tracking and analysis, with a focus on providing the client with comprehensive insights into his fitness lifestyle. It allows users to track various activities, such as running, walking, or cycling.
The main functionalities of the app are Heat Maps for visualizing activity patterns on maps, efficient management of large encrypted data files and JSON storage, and integration with Google Maps for an enhanced mapping experience.
How We Solved Complex Challenges in the Project
Challenge #1
The most challenging part of this project was implementing the Heat Maps functionality during the back-end development. It was tricky to accurately calculate the frequency and distribution of activities based on their geographical locations, represented by latitude and longitude coordinates.
Our Solution
We used the logical concept of converting the latitude and longitude coordinates. It took us around a month to display the tracking data accurately. We had to familiarize ourselves with Mapbox GL JS to accomplish this which involved utilizing the Mapbox library to display Heat Maps lines.
Challenge #2
One significant challenge was handling large encrypted data files, particularly ensuring proper interpretation of coordinates and managing file storage efficiently.
Upon decryption, these files underwent a substantial increase in size, expanding from an initial 11 MB to 70-80 MB. This posed a hurdle, particularly in maintaining coherence between coordinates.
Specifically, we encountered difficulties in coordinating points, leading to potential inconsistencies between different tracks within the data.
Since we attempted to load all the files at once, it significantly affected performance and caused the system to hang due to the large volume of data.
Our Solution
We divided the files into smaller, route-specific segments and used separate JSON files to differentiate between paths. We then integrated these files into the front end to display the Heat Maps and cluster data effectively.
Specifically, we divided the files into smaller batches of 100 files each. We loaded these batches sequentially: once one batch of 100 files was loaded, we proceeded to load the next batch.
This process runs smoothly in the background, allowing us to display the heatmap with the data from the files that have already been loaded, without users waiting for all the files to be fully loaded which would take 5-10 minutes.
Challenge #3
Managing and updating data stored in large JSON files was another challenge, especially when dealing with various formats and structures.
The system stores data virtually as files, with a significant JSON file of 14-15 MB in size. This JSON file contains information about paths and dates, which are updated periodically. However, updating these dates was challenging due to the file’s large size.
The dataset consists of numerous tracks, paths, and coordinates, accompanied by corresponding dates. Managing this data entails tasks such as uploading, downloading, and viewing.
However, identifying the data within this dataset posed another significant challenge. The dataset consisted of various files with different formats and structures which were not straightforward to comprehend. Each file had its unique format, type, and included different types of data.
For instance, if a user uploaded one file containing multiple tracks, each representing a different activity (e.g., home to office, office to restaurant, etc.), we needed to manage the data accordingly.
This meant that even though the activities occurred on the same day, they were represented as separate entities in the data. This presented a significant challenge, requiring 3-5 weeks to overcome.
Additionally, understanding the code, addressing QA issues, and debugging further prolonged the process. It was a meticulous endeavor that required careful attention to detail and thorough testing to ensure proper functionality.
Our Solution
To address this challenge, we tackled each file separately, initially understanding its data structure. We spent over a week analyzing the file storage type – What’s the structure? What structure are we employing for utilizing the same file?
We went into how data was organized within the file and discerned the specific format and arrangement it employed. This meticulous process was crucial, as it paved the way for seamless integration and compatibility with our database system.
Having gained insights into the file’s structure, we successfully replicated it within our database, utilizing JSON format and Firebase as our database platform.
We created multiple JSON files to facilitate easier visualization on the map. For instance, if a user uploaded a single file containing multiple tracks, each representing a different activity (e.g., home to office, office to restaurant, etc.), we had to manage the data accordingly.
Despite these activities occurring on the same day, they were represented as separate entities in the data.
This not only facilitated efficient data management but also ensured consistency and interoperability across our systems.
Challenge #4
Managing multiple maps on the front end posed a challenge, especially if the browser became sluggish due to rendering many maps simultaneously. This issue was compounded by the difficulty in retrieving a large number of files from the server.
Additionally, exceeding the browser’s frame limit added to the complexity of the task. As each map required rendering within its own frame, exceeding this limit resulted in a cascade of performance issues, including slowdowns, unresponsiveness, and potential crashes.
Our Solution
We addressed these issues by using Server Side Rendering (SSR). This approach allowed us to efficiently manage the loading of large amounts of data by processing and rendering the initial page load on the server before sending it to the client. This ensured that the files were processed and delivered to the client quickly and smoothly.
By rendering the initial page content on the server, we reduced the workload on the client-side browser. This minimized the impact on the browser’s performance, ensuring that it did not become sluggish even when handling multiple maps.
SSR enabled us to handle the retrieval of a large number of files more effectively. Since the server processes these requests, it can manage the data load more efficiently and deliver the required files to the client in a more streamlined manner.
With the initial page rendered on the server, users experienced faster load times and a smoother interaction with the application. This approach ensured that the maps and other data were ready for display as soon as the user accessed the page, enhancing the overall user experience.
Challenge #5
We encountered another issue when loading numerous files: the system would hang when displaying the list of files, causing performance issues (the files not only appear on the Google Maps interface but also in the list).
While the hang issue on the map was resolved as specified in Challenge #2, displaying the files in the list still caused the system to hang. Improving the app’s user experience was a challenge due to the large amount of data involved, resulting in slower load times. It took 1 to 3 minutes to display all the files in the list.
Our Solution
To address this challenge, we implemented the react-virtualized library. This library optimizes the performance of large lists in React applications by rendering only the visible elements, thereby preventing the system from hanging.
We also adopted strategic solutions to maintain the app’s user experience and visual appeal. We made a lot of improvements to the design which involved strategies like optimizing data loading, compressing data, and utilizing client-side rendering techniques.
Challenge #6
Initially, we used Google Maps to display a heatmap using polylines. However, we encountered issues with the appearance of the heatmap, as Google Maps doesn’t support 90-degree gradient colors. Despite trying various color options and methods to add gradient colors, the heatmap still didn’t look good.
Our Solution
We recognized the limitations of the tool at our disposal and demonstrated adaptability. Instead of settling for subpar visuals, we thought creatively.
We switched to the Mapbox library, but it also didn’t support 90-degree gradient colors. However, Mapbox does support background images. We created a visually appealing flame icon and repeated it along the polyline, which resulted in a much better-looking heatmap.
By creating a custom image icon that simulates a heatmap effect, we effectively used the available resources to overcome the limitations of the libraries. Our solution prioritized the end user’s experience by ensuring the heatmap looked visually appealing, which is important for clarity and effectiveness in data visualization.
Additionally, we created tile layers for each zoom level to effectively display the heatmap. This approach ensures that the heatmap remains clear and informative, regardless of the zoom level, providing a seamless and detailed visualization experience.
The purpose of using tile layers is to optimize performance. Without tiles, users would need to load a lot of data, which can be inefficient and slow. By utilizing tile layers, we minimize the amount of data that needs to be loaded at once, thus improving performance.
Since tile layers are images, we can design the heatmap with precision, although it involves complex logic. This method allows us to achieve a high-quality visualization while maintaining efficient data handling.
Challenge #7
We encountered another issue with .tcx files that caused the application to crash due to the unpredictable nature of the data format within these files.
The .tcx files were all over the place in terms of what kind of data they contained (laps, tracks, or both), how that data was organized (as objects or arrays), and whether or not they included detailed trackpoint information. This inconsistency made it challenging to handle the data effectively in the application.
Managing this inconsistency required careful organization of the data and using specific rules to handle each situation.
Our Solution
To address this challenge, we implemented a robust data management strategy and utilized conditional statements (if conditions) extensively. We examined the structure of each .tcx file and applied logical conditions to handle the various formats present within the .tcx data.
Since we couldn’t anticipate the data format in advance, we had to dynamically adapt our handling based on the specific format encountered in each file.
Through strategic handling and logical conditioning, we were able to ensure the stability and reliability of our application, mitigating the risk of crashes and providing a seamless user experience despite the inherent variability in .tcx file structures.
Next.js: The Engine That Drove Our Project Forward
Next.js was a key player in our project’s success as it made the development a breeze. It simplified the development process and enabled us to deliver a high-performing, scalable application.
Highlights of Next.js
1. Server Components
These components allow for dynamic rendering on the server side, enabling us to offload complex computations or data-fetching tasks from the client to the server.
This was particularly valuable for managing multiple maps and handling large data loads, as it helped improve performance and optimize resource utilization. By processing heavy tasks on the server, we reduced the load on the client’s browser, leading to a smoother and faster user experience.
2. Server Actions
Server Actions provide a way to execute server-side logic directly within the component lifecycle, allowing us to perform server-side data fetching or processing tasks at specific points in the component’s lifecycle.
This capability was instrumental in efficiently retrieving a large number of files from the server and ensuring seamless integration of data into the application. By handling these tasks server-side, we improved the responsiveness and performance of the GPSViewer app.
3. SEO
Next.js facilitated SEO by delivering pre-rendered pages to the browser. This ensured that search engines could easily crawl and index the content, leading to better visibility and ranking in search results.
Pre-rendering pages meant that all necessary HTML was generated and ready when the page was requested, which is crucial for search engines that rely on fully rendered content to understand and index a website effectively.
4. Image Sizes
Next.js automatically optimizes images, ensuring efficient delivery and rendering across various devices and screen sizes. This helped improve page loading times and overall user experience by delivering appropriately sized images without compromising quality.
This feature ensures that users on any device have a fast and visually pleasing experience.
5. SSR and SSG
Next.js offers both Server-Side Rendering (SSR) and Static Site Generation (SSG), providing flexibility in how pages are rendered and delivered.
SSR generates the HTML on the server for each request, which is great for dynamic content and improving initial load times. SSG pre-renders pages at build time, making them incredibly fast as they are served as static files.
6. Serverless Functions and API Routes
Next.js seamlessly integrates with serverless functions and API routes, allowing us to build backend functionality directly within our Next.js application.
This integration made it easy to create and deploy serverless functions for handling various server-side operations without the need for a separate backend service.
7. Custom Server Support
Next.js offers support for custom servers, which enabled us to integrate with other technologies and frameworks more effectively.
By setting up a custom server, we could implement advanced routing, middleware, and other server-side logic tailored to our project’s specific needs.
8. Fetch and Axios for API Calls
Next.js works well with both Fetch and Axios for making API calls. We leveraged these libraries to fetch data from various APIs and services, integrating seamlessly into the GPSViewer application.
This flexibility allowed us to choose the best tool for our data-fetching requirements and ensured smooth communication between the client and server.
Challenging Aspects of Using Next.js
1. SSR and SSG Concepts
One of the most challenging aspects of using Next.js was understanding and implementing SSR and SSG concepts.
These features are powerful but require a solid grasp of how and when to use them effectively to optimize performance and SEO. It took time and effort to master these concepts and apply them correctly in our project.
2. Custom Server Configuration
Configuring a custom server in Next.js posed another significant challenge. While Next.js provides a lot of built-in functionality, certain project requirements necessitated custom server setups.
Navigating through the documentation and figuring out the correct configuration to meet our specific needs was a time-consuming process.
3. Deployment and Hosting
Deploying and hosting a Next.js application also presented difficulties. Ensuring that the deployment process was smooth and that the application ran efficiently on the chosen hosting platform required careful planning and execution.
We had to address various issues related to server environments, continuous integration, and delivery pipelines to ensure that the GPSViewer application was deployed correctly and performed well in production.
4. Routing System
Using Next.js required us to adapt our project’s routing structure to align with Next.js’s built-in routing mechanism. Next.js uses a file-based routing system, which differs from traditional client-side routing approaches.
This change involved reorganizing our file structure to match Next.js conventions and updating our route handling to take advantage of Next.js’s automatic route generation.
The Impact on Our Client’s Fitness Lifestyle
Our client received an excellent activity-tracking web app through Node.js application development that allows him to track various activities and apply filters based on the type and other parameters.
The Heat Maps functionality is central to pinpointing his activity patterns within specific locations. Through this functionality, he can quickly spot areas where they were most active, indicated by color variations on Google Maps, where changes in color intensity highlight areas of varying activity levels.
This visual cue enables him to distinguish between spots with high activity and those with fewer activities. This empowers him to identify patterns and trends in his activities, enhancing his overall tracking and analysis experience.
He could also analyze distances covered in specific tracks, view elevation, and heart rate graphs, along with precise location details.
Additionally, he received a unique benefit not typically offered by other applications – an enhanced mapping experience utilizing Google Maps instead of traditional tiles-based mapping systems.
Below are some functionalities incorporated in this application.
- The client can add new activities by clicking the “Add Activity” button.
- The logged activities are displayed in a list with details such as date, duration, and distance.
- Filters are available to sort activities by tags, activity type, created date, distance range, and duration range.
- Each logged activity shows specific details including the type of activity, date, time, duration, and distance covered.
- There are options to edit or delete each activity entry.
- The app integrates with Google Maps to display the route taken for each activity.
- The client can view the map in different modes (map or satellite view) and see the precise route overlaid on the map.
- A graph at the bottom shows the elevation profile of the selected biking activity, illustrating how the elevation changes over the distance traveled.
- A summary of the total distance covered in all activities is provided at the bottom of the list.
- The interface includes options to switch between a HeatMap and Cluster view to visualize where activities are concentrated geographically.
Final Thoughts
Completing the project within the given timeframe with three developers was a commendable achievement. We also gained valuable experience in managing bulk data in JSON format and handling multiple file uploads effectively.
Utilizing Firebase for web app development optimized the process and enhanced functionality, ensuring an amazing user experience.
The activity tracking app developed by us fits perfectly with our client’s adventurous lifestyle, making it easier for him to keep track of his workouts and empowering him to go on with his fitness journey with confidence and convenience.
To wrap up, our teamwork shows how important it is to understand what our client wants, tackle problems, and come up with new ideas.
Do you want guidance on how to build an activity-tracking web application? Are you looking for next.js development services, node js development services, or firebase development services?
At Bitcot, we can fully help you build a web application on Firebase using Next.js. Get in touch with us and let’s get started!
