DFCorp Weather App

Tech Stack

GitHub

Background

As part of the Digital Futures Bootcamp, I was tasked with creating a travel information application to display a 5 day weather forecast for any searchable location with the added functionality to be able to save favourite locations. In addition, I was required to build a set of backend services that will allow the application to have individual users that can log in and use their favourite locations.

Screenshots

Challenges

Extracting and saving a user's favourite location

• I faced a significant challenge in extracting and saving a user's favorite locations so that they persisted on their profile. To address this, I initially stored user data, including their name, password, ID, and favorite locations (initially empty), in a local storage object. This allowed for quick access and manipulation of user data within the application.


• To maintain a clean architecture, I separated my services into a dedicated service file. On the front-end client, I implemented add and fetch API calls to interact with a back-end Node.js server. This server, in turn, communicated with a MongoDB database to store and retrieve user data.


• When it came to displaying the favorite locations, I extracted the user ID and locations from the token and passed this data to the favorite locations page. I then used the user ID in the imported fetch service to retrieve the relevant data and mapped over the locations to display them on the page.


• For saving favorite locations, I passed down the user ID along with the country name, which was extracted from the user search input. After updating the back-end, I also updated the local state to ensure the changes were reflected and saved on the user's device, providing a seamless user experience.

Hiding the navbar on the login and register page.

• In my project, I faced a challenge where I needed to hide the navbar on both the login and register pages. Initially, my navbar surrounded the entire application, so I had to find a way to conditionally hide it based on whether the user was on the login or register page. This was crucial to ensure that users registered and logged in before accessing features like favorite locations or the search input to find a location.


• After conducting some research, I found that I could use the location hook within a conditional statement to control the navbar's visibility. By utilizing the pathname property of the location hook, I set the show navbar state to false when the pathname matched the login or register page URLs, and true otherwise.


• To implement this, I placed the logic inside a useEffect hook and configured it to trigger whenever the pathname changed. This ensured that the navbar's visibility was appropriately managed based on the current page.

Testing that the location search was working correctly

• I faced a challenge in testing that when a user entered a country name into the search bar on the home page, they would be taken to the corresponding page. After extensive research online, I discovered a solution that involved mocking the entire react-router-dom library using the mocking function from vitest.


• By mocking the useNavigate hook, I was able to simulate navigation in my tests. This allowed me to assert that the mockNavigate function was called with the correct expected path when a user entered a country name and clicked the search button.