Building My Movie List Website: A Progress Update
Tags: nextjs, webdev, react, programming
Published: 2023-05-26 06:43:57

## Introduction:
Embarking on a personal project is always an exciting endeavor, and for me, creating a movie list website has been a thrilling journey so far. In this blog post, I want to share my progress and accomplishments, as well as some of the challenges I encountered along the way. With the website already connected to the TMDB API and a handy JavaScript library assisting with the implementation, I'm proud of how far I've come. Let's dive into the details!

## Connecting to the TMDB API:
To provide an extensive collection of movie information, I decided to integrate my website with the TMDB (The Movie Database) API. This API offers a wealth of data, including movie details, ratings, reviews, and much more. By establishing a connection to the API, I gained access to a vast repository of movie-related information.

## Simplifying the Search Functionality:
To enhance the user experience, I utilized a JavaScript library called "themoviedb-javascript-library." This library, available on GitHub at https://github.com/cavestri/themoviedb-javascript-library, proved to be a valuable tool. It simplified the implementation of the search functionality, allowing users to easily find movies by title, genre, or any other relevant criteria. With this library, searching for movies became a breeze.

## Creating Dynamic Routes:
One of the significant milestones in my project was the creation of dynamic routes. By implementing a dynamic route, "/details/[movieName]," I enabled users to view detailed information about a specific movie. The challenge, however, lay in passing all the JSON data from the movie list into a new page.


## Overcoming JSON Data Challenges:
While the task of transferring all the JSON data from one page to another initially posed a challenge, I found a practical solution. Instead of passing the entire JSON data, I opted to refetch the necessary information by making a call to the TMDB API. By including the movie name as a query parameter and selecting the first JSON data from the list of results, I could ensure the desired movie details were readily available on the new page.


## Upcoming Updates and Enhancements:
With my progress so far, I'm thrilled to share that I'm making great strides towards completing my movie list website. In the upcoming week, I plan to focus on improving the user interface (UI) and merging the home-page branch into the main project. By enhancing the visual appeal and usability of the website, I aim to provide a seamless browsing experience to users.

Additionally, next week's agenda includes the implementation of functionality to sort and filter movies based on categories. This will enable users to view only movies or TV shows, tailoring their browsing experience to their preferences.

## Conclusion:
Creating a movie list website has been an exhilarating experience, and I'm delighted with the progress I've made so far. By connecting my website to the TMDB API and utilizing a JavaScript library, I've achieved seamless integration and simplified the search functionality. Overcoming challenges related to passing JSON data and dynamically routing to movie details has been a significant milestone.

Looking ahead, I'm excited to refine the user interface, merge branches, and introduce new features like sorting and filtering options. Stay tuned for more updates on my movie list website project.  

## Screenshots

![Home Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dq9kzdfrwgqn6vsbcnyj.png)

![Suggestions](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4hwzxztg1nrf7u4y8oyq.png)

![Details Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a66eo1ryyh97fhwo4eq8.png)