Feedback on my PWA - Weather App

Code Feedback
1

Hello Campers,

I remember 8 months ago when I just joined FCC, it was quite challenging but more importantly, exciting. It’s quite fascinating how much I’ve learnt so far and I’m really thankful to the FCC Team for such a priceless opportunity.

I build a PWA (progressive web app) - a Weather App and I’m looking for some feedback on the project. Please do let me know what you think.

Thanks in advance :smiley:

2

Hey Lafen,

great work, I like it! :+1:

My ideas:

  • when I want to look at the map, I get an Google Maps error: You must enable Billing on the Google Cloud Project at [...]

  • when I see this error, I see your API key for Google Maps: js?key=[...], this is a big No-No; I recommend to remove it as soon as possible and revoke the key, because now I can use it in my projects and you have to pay for it; never put your personal keys into code or git, instead use a .env file

  • you also do this with your firebase stuff in var firebaseConfig = {...} in your body; in your small projects this doesn’t matter, but I recommend to not do this from the get go

  • the spinning logo is literally taking all my attention

  • I think clearing the city input after searching is more user-friendly

  • do you want to add some sort of a “history”-mode? because the local storage saves every search I ever made, even after closing and re-opening the site:
    Screenshot_2020-09-17_08-01-41

  • out of curiousity: how do you handle a city that exists multiple times, e.g. Springfield, USA?

  • I don’t know where you live, but some countries and the European Union have privacy rights; so maybe you should ask the user if they want to get tracked by firebase analytics

Overall I like your project, great work! :slightly_smiling_face:
Looking forward to seeing your next steps!

1 Like
3

Hello @miku86,

Thanks very much for taking out time to give such a detailed review.

You are right, I shouldn’t expose my api keys. I’ll go ahead and use environment variables while restricting the api key. Also I haven’t enabled billing on the project that’s why you get the Google Maps error.

I thought the spinning snow flake was kinda cool but I’ll drop it if it’s that distracting. I’ll make sure to clear the city input after a search.

I saved all the user’s recent searches to the local storage so they’ll be available even when offline. However, if the user is offline and searches for a city they had searched for before, they’ll get the weather at the time they performed the search not the most recent weather. They data will be updated when they perform the next search online.

The local storage doesn’t keep two instances of the same city. I accomplish this by checking for any city in the local storage whose latitude and longitude matches that of the city which is about to be added. If I find a match, I’ll remove it from the array before adding the new data else I’ll just go ahead with adding the data.

Here is the function

function saveSearchLocally(weather) {
  const searches = JSON.parse(localStorage.getItem('recent_search'));

  if (searches) {
    const index = searches.findIndex(
      (search) =>
        search.city_weather.lat === weather.city_weather.lat &&
        search.city_weather.lon === weather.city_weather.lon
    );

    if (index !== -1) {
      searches.splice(index, 1);
    }

    searches.push(weather);

    localStorage.setItem('recent_search', JSON.stringify(searches));
  } else {
    localStorage.setItem('recent_search', JSON.stringify([weather]));
  }
}

I didn’t know of the privacy rights in other nations. I’ll go ahead and add a prompt for firebase analytics.

1 Like