Projects
XPLR
Portfolio
A website that leverages third-party data from the National Parks Services website to provide users with a comprehensive platform for exploring and engaging with national parks.
Web Development, Front End, Back End
JavaScript • Python • React.js • React Hooks • FastAPI • Domain-Driven Design • CSS • HTML • PostgreSQL • Redux.js
We were on a mission to create a modern and visually appealing rate and review application. Given our shared passion for the outdoors, tapping into the National Parks Service third-party API seemed like the perfect choice.
We were fortunate to have access to a wealth of data from this API, but this abundance also posed a challenge in terms of deciding what information would be most relevant to our users. Through careful wire framing, we made those decisions, enabling us to then shape the structure of our backend tables.
While working on our backend, we encountered our first experience with FastAPI, learning on the fly. Although this presented its share of challenges, the process was incredibly rewarding and stands as a testament to our adaptability in learning new frameworks and programming languages. As a team, we opted for PostgreSQL as our database, leveraging our collective familiarity and comfort with SQL.
Once we gained access to the data, we began brainstorming the features that would truly benefit our users. While some were straightforward, others required us to think creatively and empathize with our users' needs. In fact, we committed to certain features even before fully knowing how to implement them in code.
Once we had a clear vision of the features, we incorporated them into our wire frame. We then prioritized them based on practicality and necessity before diving into development. The key features include:
- Top Rated Parks
- Search Bar
- Current Weather Integration
- Favorite Parks
- Rate & Review
Top Rated Parks
As production progressed, we recognized the value of providing users with insights into the Top Rated Parks. Since users could now rate parks, it seemed only natural to highlight the most favorably reviewed ones.
While the concept appeared straightforward, devising an algorithm to aggregate ratings from every park, calculate individual averages, and then compare them for the top three proved to be more complex than anticipated.
Nonetheless, accomplishing this challenge and seeing it come to life on the home page was extremely rewarding.
Search Bar
The Search Bar was one of the more straightforward features in this project. With a total of 496 National Parks on our website, we recognized the need to provide users with the ability to search for a specific park.
The challenge was to ensure that users could initiate a search from any page on our site. To address this, we integrated the search bar directly into our navigation bar, guaranteeing its accessibility at any point during a user's visit.
Employing Redux.js, a new technology for our team, we created a 'parkSearchSlice' and developed a 'Search' component in React.js. Finally, we integrated the 'Search' component into the Navigation Bar.
Current Weather Integration
One detail I took great pride in was the Current Weather Integration. Despite its apparent simplicity, it adds a valuable touch by displaying the real-time weather conditions of the park you're exploring, along with a description.
While working on a previous project, I discovered the Open Weather API and saw an opportunity to integrate it into our current project. Leveraging the longitude and latitude data provided by the National Parks Service API, we were able to retrieve the current weather, a general description, and a more specific weather description for each park.
The general weather descriptions usually fell into categories like "Rain," "Clouds," or "Clear." I then devised an algorithm using conditionals to dynamically display an image corresponding to the general weather condition, as seen above. Seeing this feature come to life was incredibly satisfying once implemented.
Favorite Parks
The Favorite Parks features were relatively straightforward. Our aim was to allow registered users to easily save their favorite parks for later viewing in a centralized location.
For the "Add to Favorites" feature, we decided it would be interesting to provide users with an indication of a park's popularity by displaying how many others have also favorited it.
The Favorites Page was thoughtfully designed to serve as a central hub for users to access their favored parks, and it warmly welcomes them by displaying their username.
Rate & Review
The Rate & Review feature was pivotal to our application. To enhance the user experience, we decided to implement it through a Modal design.
In our previous experiences with data collection forms, we typically placed the form on one page and displayed the results on another. Recognizing the inefficiency of this approach, we brainstormed ways to streamline the process.
The most challenging technical aspect was dynamically displaying the collected data without the need for page refresh. Overcoming this hurdle and witnessing the live results was a significant milestone for us, marking great progress in our project.
After completing the feature implementation and design phase, we recognized the importance of incorporating unit tests to verify the accuracy of our backend's RESTful Endpoints.
This was a significant step for us, as it marked our inaugural venture into implementing unit tests. It provided us with valuable reassurance that our application's backend operated precisely as intended.
In essence, this project served as a personal challenge, motivating us to grow as programmers and embrace unfamiliar technologies. It has instilled in me the confidence that I possess the ability to rapidly learn new programming languages and frameworks, and adapt to new challenges with ease.