https://github.com/oghene-ella/movie_discovery

Create a movie discovery web application that allows users to search for movies, view details about them, and save their favourite movies.
https://github.com/oghene-ella/movie_discovery

api reactjs responsive-design

Last synced: 2 days ago
JSON representation

Create a movie discovery web application that allows users to search for movies, view details about them, and save their favourite movies.

• Host: GitHub
• URL: https://github.com/oghene-ella/movie_discovery
• Owner: oghene-ella
• Created: 2023-09-11T05:55:45.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2023-09-14T21:39:23.000Z (about 1 year ago)
• Last Synced: 2023-11-29T12:42:36.407Z (12 months ago)
• Topics: api, reactjs, responsive-design
• Language: JavaScript
• Homepage: https://ellahhh-movie-webapp.netlify.app/
• Size: 5.95 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Movie Discovery Web-Application

## Main 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

- 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]

- 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.

- 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]

## Installation

1. Clone the repository: `git clone https://github.com/oghene-ella/Movie_Discovery`

2. Navigate to the project directory: `cd Movie_Discovery`

3. Install the required dependencies: `npm install`

## Usage

1. Start the server: `npm run dev`

2. Access the app in your web browser at `http://localhost:5173/`

## Contact

For any inquiries or feedback, please reach out to [email protected]