Responsive data visualisation integrated with Countries API

Community feedback

• 

  Emmanuel Daniel•1,170

  @coderdanniePosted over 1 year ago

  Hi. Congrats on the completion of this project. An extra features you can add is to store the themes state using browser localstorage so that your site can maintain the theme state even if the page was reload. Right now if I switch to light mode and reload the web page its switching back to the default theme. Using browser storage to store the theme and accessing the themes based on user preference will prevent this from happening. https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

  0

  ---

  

  Artem Novitckii•40

  @artemnovitckiiPosted over 1 year ago

  @coderdannie fixed thank you

  0
• 

  Divyajyoti•440

  @Divyajyoti1801Posted over 1 year ago

  Hi Artem, I am also building the same project. I got into a issue while deplpyment, I have code whole project in React framework and for data input I am using firebase firestore, everything is working fine when its in localhost but when I deploy it on netlify or vercel I found that data is not get fetched. I checked the code many times and many resources around it but not able to find any appropriate solution would you please help me in this. Github: https://github.com/Divyajyoti1801/React-Portfolio-01 Netlify: https://divyajyoti-country.netlify.app/

  0

  ---

  

  Artem Novitckii•40

  @artemnovitckiiPosted over 1 year ago

  @deck1801

  Based on your description, it sounds like you're encountering an issue with fetching data from Firebase Firestore when your React application is deployed. There could be a few different reasons why this might be happening. Here are a few things you can check:

  • Make sure that you've properly configured your Firebase API keys and other credentials in your React application. You can double-check this by reviewing the Firebase documentation on setting up a web app.

  • Check the network tab in your browser's developer console to see if there are any errors being reported when your application tries to fetch data from Firebase. If you see any errors, this may give you some insight into what's going wrong.

  • Make sure that your Firebase Firestore security rules allow read access to the data you're trying to fetch. If your rules are too restrictive, this could be preventing your application from fetching the data.

  • Ensure that the Firebase Firestore collection you're trying to read from is not empty. If the collection is empty, there won't be any data for your application to fetch.

  • Check that your Firebase Firestore collection name and field names match what you're using in your React application. If there's a mismatch, your application won't be able to retrieve the data correctly.

  • Finally, ensure that your Firebase Firestore data is not cached. Cached data can cause issues when you're trying to fetch new data.

  0
• 

  Muhmmad Awd•40

  @MuhmmadAwdPosted over 1 year ago

  hey, i like how your website match the design perfectly , i did'nt ...lol

  about your questions, here my answer and hope that's help.

  do you know about bem methodology ? if not search about it . it will help you with naming your HTML classes. here an article for bem : https://css-tricks.com/bem-101/

  for load time you can comperes the code and images . please upvote the comment if it's help

  0

  ---

  

  Artem Novitckii•40

  @artemnovitckiiPosted over 1 year ago

  @MuhmmadAwd hi thank you for the feedback im already using BEM naming conventions for my solution. In terms of code/images compression its a good idea to use webpack

  0

  

  Muhmmad Awd•40

  @MuhmmadAwdPosted over 1 year ago

  @artemnovitckii webpack work with images that new to me

  0

  

  Artem Novitckii•40

  @artemnovitckiiPosted over 1 year ago

  @MuhmmadAwd Yes, webpack can handle images and other assets as part of its module bundling process.

  0