Entertainment App (Tailwind, Redux-toolkit, React-Router, Json-server)

Community feedback

• Account deleted

  Hi,

  You have included some of the trending movies in the recommended section, they are meant to be separate to make the challenge more difficult. Also your search functionality shows the word "results" when there is only 1 result. You can conditionally render this word depending on how many results there are. Lastly why does the page have a preloader? It's a pretty simple app, I don't think this is necessary.

  Apart from that stuff, it's fantastic, good work!

  Marked as helpful

  1

  ---

  

  David•1,130

  @David-Henery4Posted almost 2 years ago

  @ashmaddenweb Hi mate,

  Those are two great spots on the search text and displaying the recommended data, just a bit of oversight on my part and I completely missed them but I've gone back and fixed them now but I don't think it really made the challenge more difficult though.

  Also I have the loading spinner because I'm getting the data from Json-server which allows me to create a mock API to grab the data from.

  I did this because I felt this would be more realistic if it were a real app, and in the future I plan to come back to this project and add the signup/login functionality where I would also grab the data from the server, so I wanted to set up the basic API fetch now for when I come back and so I had to handle the loading cycle in the meantime with a loading spinner as I felt it would be a better experience for the user.

  Cheers for the feedback though mate, very helpful much appreciated! 👍

  0
• 

  Fazza Razaq Amiarso•2,340

  @fazzaamiarsoPosted almost 2 years ago

  Hi David! Nice Solution!

  I have a tip for you.

  You can derive a state on render, rather than creating separate state. For example, in your Movie component.

  const [searchQueryArray, setSearchQueryArray] = useState([]);
  
  // ❌ Creating new state means you must sync this state everytime `searchQueryArray` changes.
  const [queryLength, setQueryLength] = useState(0);
  
  // ✅ Derive on render because when `searchQueryArray` changes, this will be re-calculated too.
  const queryLength = searchQueryArray.length;
  

  I hope it helps! Cheers!

  Marked as helpful

  1

  ---

  

  David•1,130

  @David-Henery4Posted almost 2 years ago

  @fazzaamiarso

  Hi fazza thanks for the feedback,

  That's a great spot! I didn't realise it would be calculated automatically and thought I had to create a new state!

  It's definitely is a lot cleaner way of doing it and saves me creating a new state every time, I'm going to implement this change now.

  Thank you again for the feedback fazza mate, very much apprenticed! 👍

  0