Git Product home page Git Product logo

hngx-movie-box's Introduction

HNGx Task Two ๐Ÿ”ฅ

Moviebox

๐ŸŽฏ Objective:

Create a movie discovery web application that allows users to search for movies, view details about them, and save their favorite movies. Youโ€™ll be consuming data from the TMDB API.

โœ Requirements

  1. User Interface: Create a responsive and visually appealing user interface for the application. Here's the link to the design you're expected to replicate: https://www.figma.com/file/tVfgoNfhYkQaUkh8LGqRab/MovieBox-(Community)?type=design&node-id=1220-324&mode=design&t=6998DWtjQrxz8mOf-0 You should list the top 10 movies on the homepage. They should be displayed in a grid layout with their movie posters. The Card component should display the movie title and release date. card - [data-testid: movie-card] movie poster - [data-testid: movie-poster] movie title - [data-testid: movie-title] movie release date - [data-testid: movie-release-date]
  2. Movie Search: Implement a search feature that allows users to search for movies by title. Display search results, including movie posters, titles, and release dates. Show a loading indicator while fetching search results.
  3. Movie Details: When i go to to /movies/:id route (where :id is the imdb_id), I should see the movie details page. I should see title - [data-testid: movie-title] release date (in UTC) - [data-testid: movie-release-date] runtime (in minutes) - [data-testid: movie-runtime] overview - [data-testid: movie-overview] API Integration: Consume the TMDB API to fetch movie data. Use the following API endpoints: Fetch movie details by ID: https://api.themoviedb.org/3/movie/{movie_id} Error Handling: Implement error handling to display meaningful error messages to users in case of API failures or other issues. Submission: Host your frontend application on a platform of your choice (e.g., GitHub Pages, Netlify). Provide clear instructions on how to run your project locally in your README.md file. Ensure that the code is well-documented and organized. This frontend challenge requires you to build a dynamic movie discovery app that interacts with a real API to fetch and display movie data. PS: You MUST use react or Next js

Solution ๐Ÿ†



Demo screen

Demo screen

Demo screen

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.