Skip to content
Submitted over 3 years ago

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

next, tailwind-css
h2y•160
@hooiyan
A solution to the Entertainment web app challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Hey guys! Here's my solution for the entertainment web app.

I've integrated TMDB API into this challenge, you can actually search for both movies and tv series with real data! You can also click on each item to view its details.

I plan to make it my resume project. I'm going to apply for my first developer job soon, very excited and nervous at the same time!

There are some features that I haven't implemented yet. For example, I have pagination on some pages but it won't update the URL, which means if the user navigates to the next page, and click on an item, and then if they wish to go back, it will always start from the first page.

Also, I removed the bookmark page and the video playing feature. But they are on my to-do list. I hope I can improve them later on.

For now, I just want to push this out first and get some feedback from you guys! Thank you so much!

**I've noticed in the reports on FEM that I have many issues, I'll have to look into them.

Code

Please log in to post a comment

Log in

Community feedback

  • Fazza Razaq Amiarso•2,320
    @fazzaamiarso

    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
  • Oluwamuyiwa Samuel Adepoju•70
    @codermuyi

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

  • cloud-alfakhre•480
    @cluod-Alfakhre

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

  • Diop Nikuze•125
    @Diop-Nikuze

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

  • Naser Y Abdulkadir•190
    @naser23

    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.

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord