Project Overview

In the course of this project, we developed a web application using React, geared towards helping users discover and save their favorite movies. We harnessed the power of external APIs, particularly TMDB, a movie database, to fetch and display a vast collection of movies. This allowed our users to explore a wide range of films conveniently. This connection to an external data source expanded the capabilities of our app and enriched the content available to our users. Additionally, to enable users to save their favorite movies, we integrated Redux for state management. This 'Favorites' feature allowed users to curate a personal collection of beloved films efficiently. In essence, this project offered me valuable insights into leveraging external APIs, using Redux for state management, and enhancing the user experience with thoughtful design. It was a great opportunity to apply my technical skills to a real-world project and learn more about creating user-friendly web applications. This version provides a more detailed description of the project and the technologies used, emphasizing the learning experience and technical aspects.

Tool I Used

Development

This project commenced with the creation of a Photoshop design, where each element was intricately fashioned with multiple layers to exemplify interactivity. The layers were meticulously organized and color-coded for enhanced visibility and understanding. Within a collaborative duo, we distributed tasks by component and page. I took charge of my assignments and collaborated with teammates when assistance was required. To facilitate our learning curve, we arranged group coding sessions, especially beneficial since most of us were new to React. My primary focus was on developing the single movies page, managing both the logic and styling aspects.

Highlights

This project allowed me to improve my front-end development skills as I delved into tools like React components, Vite, and Tailwind CSS to create efficient and maintainable code. It also highlighted the significance of teamwork, clear communication, and project management, as we met our deadlines successfully. I gained valuable insights into using Rest APIs for the first time during this journey, broadening my knowledge and capabilities.To make the user experience more engaging and intuitive, we implemented a search feature that enables users to find specific movies easily. The application was designed with the user in mind, aiming to provide a user-friendly platform that enhances the enjoyment of watching movies. One of the notable technical aspects of this project was the use of Axios to fetch data from TMDB.

What i learned

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 import axios from "axios"; const AxiosClient = axios.create({ baseURL: "https://api.themoviedb.org/3", timeout: 8000, headers: { Accept: "application/json", Authorization: ` ${import.meta.env.VITE_ACCESS_TOKEN}`, }, }); // API Call export const getPopularMovies = async () => { const response = await AxiosClient.get("/movie/popular"); return response.data; }; export const getTopRatedMovies = async () => { const response = await AxiosClient.get("/movie/top_rated"); return response.data; };

This code uses Axios in a React Vite project to interact with The Movie Database API. It configures an Axios client for making requests and includes functions to fetch popular and top-rated movies.Key Features:Modular Axios Configuration: AxiosClient represents a pre-configured Axios client, allowing easy management of settings like base URL, timeout, and headers.Async Functions for API Calls: getPopularMovies and getTopRatedMovies use async/await to make asynchronous API requests, ensuring responsiveness during data retrieval.Commented Code for Clarity: Each function includes comments explaining its purpose and the expected return value, enhancing code readability and user understanding.This code snippet demonstrates a well-structured and documented Axios client, making API interactions in the project robust and maintainable.