Entertainment web app (Next.js & TailwindCSS & TMDB API)

Community feedback

• 

  Fazza Razaq Amiarso•2,340

  @fazzaamiarsoPosted over 2 years ago

  Hello, hooiyan! First of all, I want to say that this is an impressive solution!

  I think I can give you suggestion to help you with pagination.

  1. Use Link as pagination button which will set query params (e.g /search/avengers?page=2).
  2. Get the current page from URL with useRouter i.e. { id, page } = router.query or maybe you can do the same thing as above, but fetch all the data using getServerSideProps.

  Here is what my contrived implementation would look like.

  export async function getServerSideProps ({query, params}) {
   { id } = params
  { page } = query
  const url = searchAll(id) + `&page=${page}`;
  
  const res = await fetch(url);
  const results = res.json();
  
  return { props : { data : results } } 
  }
  
  export default function SearchedAll({data}) {
  const router = useRouter
  const { page: currentPage, id: searchTerm } = router.query // assuming your URL /search/bla?page=2
  
   const filteredResults = data
      ? data.results.filter(item => item.media_type !== 'person')
      : []
  ...
  <Link to={`/search/${searchTerm}?page=${Number(currentPage) - 1}`}>Prev Page</Link>
  }
  <Link to={`/search/${searchTerm}?page=${Number(currentPage) + 1}`}>Next Page</Link>
  }
  

  I hope my suggestions could help, Sorry if it is too contrived🙏. Goodluck on your job application!

  Marked as helpful

  2

  ---

  

  h2y•160

  @hooiyanPosted over 2 years ago

  @fazzaamiarso Hey Fazza, thank you so much for your feedback! You helped me a lot with this. I've tried your suggestions and modified my code accordingly and it worked!

  0
• 

  Oluwamuyiwa Samuel Adepoju•70

  @codermuyiPosted over 2 years ago

  You've just inspired me big time!! Btw, You should probably add cursor: pointer to the clickable images.

  4

  ---

  

  h2y•160

  @hooiyanPosted over 2 years ago

  @coder-muyi Thanks muyi for noticing that! I've added it now. 🙏

  0
• 

  cloud-alfakhre•480

  @cluod-AlfakhrePosted about 2 years ago

  great job and well designed 👏🎉. how did you deploy your app with server side rendering? i have tried firebase but cloudFunctions wasn't free

  0
• 

  Diop Nikuze•125

  @NikuzePosted over 2 years ago

  Hey, your work is amazing, really liked it 🙌🏽🙌🏽

  0
• 

  Naser Y Abdulkadir•190

  @naser23Posted over 2 years ago

  hello! the project looks really good! I was looking for an api for this type of project and found this api. I chose not to go with it because they ask for a lot of personal info on the sign up process (address, phone number, etc...). Since you signed up with it. Has anything changed regarding your privacy (like more spam emails, phone calls, or random mail)? I really want to use this api but I want to make sure its safe to use before i dive in.

  0

  ---

  

  h2y•160

  @hooiyanPosted over 2 years ago

  @naser23 Hey there! Thank you so much!

  Regarding to your question, I didn't receive any spam emails, phone calls, or anything like that after I signed up for this api. So I think it should be safe to use.

  Can't wait to see what you're going to build!

  0