项目作者: thesamnicholls

项目描述 :
This is a movie listing app which gets data from a JSON file. Some of the features of this app are being able to search for a specific movie and also being able to load more movies. This project is using ITCSS for the SCSS folder structure and BEMIT for the class names and styles. The JS framework used for this project is React with TypeScript.
高级语言: SCSS
项目地址: git://github.com/thesamnicholls/movie-listing.git
创建时间: 2020-06-07T19:43:22Z
项目社区:https://github.com/thesamnicholls/movie-listing

开源协议:

下载


Movie Listing

View Demo: https://movie-listing-samuelnicholls.vercel.app

About The Project

This is a NextJS web application that retrives the latest top rated movies and also allows the user to search for a movie of their choosing. Some of the features of this web application is a paginated list of results to help improve load times, furthermore the searching which the user can do is also paginated. The user can also see a highly detailed view of each movie by simply clicking on the poster image on the listing page.

Built With

  • React
  • NextJS
  • Typescript
  • React Query
  • Tailwind CSS
  • ESLint
  • Prettier

Getting Started

Prerequisites

Request an API key from here: https://developer.themoviedb.org/docs, this will be used to authenticate the API requests within the web application.

Installation

  1. Clone the repository
    1. git clone https://github.com/samuelnicholls/movie-listing.git
  2. Create a .env.local file in the root of the project and add the following value
    1. NEXT_PUBLIC_API_KEY=<API_KEY_HERE>
  3. Install all packages
    1. npm install
  4. Run a build for the first run of the project
    1. npm run build
  5. Start the local server, this will load the project at http://localhost:3000/
    1. npm run dev

Future Improvements

  • Add in skeleton component for when an image isn’t returned from the API.
  • Make sure all image posters are the same size on the listing screen.
  • Change layout for the details screen as the poster is small at the moment.