Custom Category: React

The Movie DB 2 : Searchflix

Posted on August 17, 2024 by - Uncategorized

test

This app is designed to be a movie search and management tool, offering users an easy way to find and favorite movies. Its use of real-time search, pagination, and favorites functionality makes it versatile for various media-related applications, such as streaming services, recommendation engines, or personal movie databases.

Key Features:

  1. Movie Search:
    • Users can search for movies using a query input. The app sends a request to the TMDb (The Movie Database) API to fetch matching movies.
  2. Debounced Search:
    • The app uses a debounced search function to delay API calls while the user is typing, improving performance and reducing unnecessary API requests.
  3. Movie Listing:
    • The app displays a list of movies that match the search query. The results include movie details such as title, overview, and poster.
  4. Pagination:
    • The app supports pagination, allowing users to load more results incrementally by clicking a “Show More” button.
  5. Favorite Movies Management:
    • Users can mark movies as favorites, and the app integrates functionality to toggle and check the favorite status of each movie.
  6. Error Handling and Loading States:
    • The app handles errors during API requests and shows loading indicators while fetching data.

Potential Use Cases:

  1. Movie Discovery:
    • This app is ideal for users who want to discover new movies by searching based on keywords or titles. The search results help users explore movie options.
  2. Personalized Movie Lists:
    • The app allows users to manage their own list of favorite movies, making it suitable for building personalized watchlists or collections.
  3. Interactive Search Experience:
    • The debounced search and live results create a responsive, interactive experience for users looking for movie information quickly.
  4. Media Streaming or Recommendation Platforms:
    • This app could be part of a larger media streaming service, recommendation platform, or movie database, providing a user-friendly interface for exploring and saving movies.
  5. Custom Movie Library:
    • Users can use the app to create and maintain a curated list of movies, potentially integrating with other components like a watchlist or movie details page.

Read about my experience developing this app here.

Movie DB

Posted on March 18, 2022 by - Uncategorized

test

My first React project and the one I’m the proudest of. This project introduced me to state, components, props, and all of the introductory level syntax and nuances of React. Using the MovieDB API, I asked the database of movies and returned a grid of the current most popular movies.

Being new to React (or any javascript framework), the concept of components and props was a little intimidating and something I initially struggled with. It’s a slightly different way of thinking than coding CMS templates, but I wanted to challenge myself.

This project is broken up into 3 components;

  • movies which contains the properties of the individual movie. The title, id, overview, and poster url.
  • movieList which calls the movie DB API and returns the list of movies. Then maps through the list and outputs a grid of movies and their covers. This component also sets the initial movies state.
  • movieDetail which contains all of the details of the movie. This component once again calls the movieDB API, but this time using the movie id that was passed in from the movieList component, so it shows the info of the movie that was selected.

The downside to this project is that a lot of the methods I learned weren’t necessarily the most up-to-date. For example using componentDidMount instead of useEffect which is introduced in React hooks.

 

Task Tracker

Posted on March 17, 2022 by - Uncategorized

test

This project was the 2nd that I’ve built using React, and it taught me so much about ‘React thinking’. And what I mean by ‘React thinking’ is being able to break down the logic of a project into small components that interact with one another.

Breaking down each process into its own component with functions, with a specific job. Then returning the data that will be passed into the next component via props. This project also taught me about state management. Setting the state based on the data, as well as clearing it before changing the state once again. I chose this project for that very reason. I wanted a project where I would input information into a field, pass that information into the program and store it. Also being able to remove that information, or change the state of it (by setting a reminder or not).