• Introduction

Hello, fellow developers! My name is Mirjabbar, and I'm excited to share my experience of creating a movie app using basic React knowledge. As someone relatively new to React, I wanted to challenge myself and build a simple yet functional app that allows users to browse and search for their favorite movies. Let's dive into the journey of how I created this app and the lessons I learned along the way.

• Project Overview / Tasks

The goal of my movies app was to provide users with a user-friendly interface to explore a vast collection of movies. Key features of the app include:

1. Sign up on www.omdbapi.com to get an API key for accessing movie data.

2. Use Postman to explore the API request and response to understand the data structure.

3. Create a new React project and install necessary dependencies, including react-icons, react-router-dom and sass.

4. Set up a state in your React component to store the list of movies.

5. Display the list of movies in your application using components and JSX.

6. Implement a scroll effect to improve the user experience while browsing through movies.

7. Use React Router to create pages for different sections of your movie application.

8. Implement active link logic to highlight the currently active page in the navigation.

9. Call the OMDB API from your React application to fetch movie data using the API key. Use Promises for handling asynchronous requests.

10. Add a loading state or loaders to display feedback while the data is being fetched from the API.

11. Add a hover effect and favorites icon to make movie items interactive.

12. Implement the functionality to save movies to the favorites list.

13. Allow users to remove movies from the favorites list.

14. Use local storage to store the favorites list data in the browser.

15. Retrieve the favorites list from local storage when the app loads to maintain user preferences.

• Technologies Used

For this project, I utilized the following technologies and tools:

1. React: As the core frontend library to build the user interface.

2. SCSS: For styling the app's layout.

3. OMDb API. The Open Movie Database.

4. Visual Studio Code: My code editor of choice.

• Development Process

1. Setting Up the Project: I began by creating a new React app using

   npm create vite@latest to scaffold the initial project structure.

2. Fetching Movie Data: To display movie information, I integrated the OMDb API into my app and used async/await syntax to make API requests and fetch movie data. This approach simplified the code and made it easier to handle asynchronous operations.

3. Designing the UI: I focused on creating a clean and intuitive user interface. React's component-based structure allowed me to organize and reuse UI elements efficiently. I divided the project structure into small and reusable components, so it made it easier to upgrade this code.

4. Implementing the Routing Pages: For routing pages, I used react-router-dom

   I created a pages folder for making easier the process of page changing.

5. Implementing the Search Functionality: For this part I used React state and event handling to capture user input and trigger movie searches.

6. Implementing the Add to Favorites Functionality: This was a challenging part for me as a beginner. If user clicks Add to favorites button proper movie sent to favoriteMovies array and also it stores its information in localStorage . This part was new for me, but it was easy for handling info inside localStorage . If selected movie has already been added to the favorites user clicks and movie data deletes from storage.

7. Implementing the Favorites page: For this part, if the user goes to the favorites page, there is no need for a new API request, it is very bad for the performance of the app. So on the favorites page, movies' data comes from local storage.

• Key Learnings

Throughout this project, I gained several valuable insights:

1. React Fundamentals: Building this app strengthened my understanding of React components, props, state, and event handling.

2. API Integration: Integrating external APIs can be challenging, but it's a crucial skill for building dynamic apps.

3. UI/UX Design: Design plays a vital role in creating user-friendly apps. I learned about layout design, typography, and color schemes.

• Code Samples

Search Component - Handling User Input:

export default function Search({ movieInput, setMovieInput }) {
  return (
    <div className="search--box">
      <input
        className="search--box-input"
        type="text"
        placeholder="search movie"
        value={movieInput}
        onChange={(e) => {
          setMovieInput(e.target.value);
        }}
      />
    </div>
  );
}

Movie Component - Handling Favorites State:

const isFavorite = favoriteMovies.some((movie) => movie.Title === Title);

  function handleFavorites() {
    if (isFavorite) {
      const updatedFavorites = favoriteMovies.filter(
        (movie) => movie.Title !== Title
      );
      setFavoriteMovies(updatedFavorites);
    } else {
      setFavoriteMovies([newFav, ...favoriteMovies]);
    }
  }

Fetching data, and sending it to local storage:

useEffect(() => {
    localStorage.setItem("favorites", JSON.stringify(favoriteMovies));
  }, [favoriteMovies]);

  useEffect(() => {
    const localValuesGet = JSON.parse(localStorage.getItem("favorites"));
    setStoredFavorites(localValuesGet);
  }, [favoriteMovies]);

  async function getMovies(url) {
    const data = await fetch(url);
    const res = await data.json();
    setMovies(res);
  }

  useEffect(() => {
    getMovies(`http://www.omdbapi.com/?s=${movieInput}&apikey=738237a0`);
  }, [movieInput]);

• Conclusion

Building the movie app with basic React knowledge was a fulfilling experience. It allowed me to apply what I learned and push my boundaries as a developer. I hope my journey inspires you to take on your projects and continue learning.

Feel free to check out the the code on GitHub.

Happy coding!