Reactjs, Redux Toolkit and Tailwind css

Community feedback

• 

  clefayomide•120

  @clefayomidePosted over 2 years ago

  Nice work! There's a 404 error when I try to go back, this is a common error with netlify hosting. You can resolve this by creating a file named _redirects in your public folder and add this line of code to the file /* /index.html 200

  0

  ---

  

  abhikr4545•280

  @abhikr4545Posted over 2 years ago

  @clefayomide Thanks for this helpful comment

  1
• 

  Prabhash Ranjan•2,540

  @besttlookkPosted over 2 years ago

  Hi, Great work. There are few thinks i like to pint out:

  1. For Loading state, rather than writing "loading" (that too at the top). try to add some kind of loader.
  2. Give shadow to the cards and also some hover effect.
  3. In datial page "white" color backgroud is visible. Try adding "min-height:100vh".
  4. I liked how you added suggestions for search but what if i want to search all country starting with letter "a" or something like that?? I am forced to search for only predefine countries. 5.Why i cant see list of all country at the start?? 6.Filter and search do not work at the same time.
  5. Dark mode is not persistent. It reset after refresh.

  Here is my solution: https://rest-countries-fem-v2.herokuapp.com/

  Fell free to share your feedback.

  Good luck, #happyCoding

  0

  ---

  

  abhikr4545•280

  @abhikr4545Posted over 2 years ago

  @besttlookk Hi Prabhas,

  Thanks for your feedback. Will try to improve on point 1, 2 and 3.

  For point 4 it is meant to be this way you type country name and it will give suggestions. You click on the suggestion it will take to that country details.

  For point 5 All list of country not showing as it was not displayed on the given design files so i added some countries for landing page. I checked search you have to click on the suggestions it will take you to the country details page. Filter and search was working for me at the same time Could you share your use case.

  For dark mode it will require to store it in local session or storage didn't choose that path maybe for next project.

  0

  

  Prabhash Ranjan•2,540

  @besttlookkPosted over 2 years ago

  @abhikr4545 also i saw how you implemented dark mode . That so messy. With tailwind it is very simple. You just have to write like this

  <h1 className="text-white dark:text-black">Hello world </h1>
  

  If You wanna see how i implemneted...here is my repo.

  https://github.com/besttlookk/FEM-rest-countries-react-version

  Files you should look into:

  //tailwind.config.js
   darkMode: "class",
  

  // src/ThemeContext.js /
  //src/index.js
  

  // src/layouts/Header.jsx 
  
   const { theme, setTheme } = useContext(ThemeContext);
    const handleTheme = () => {
      setTheme(theme === "dark" ? "light" : "dark");
    };
  

  I am not saying that this is the best method. I am certain its simpler that what you used.

  I hope it helped

  Good Luck

  0