An open API service indexing awesome lists of open source software.

https://github.com/nicklima/next-movie-db

Next.js - Movie Database API
https://github.com/nicklima/next-movie-db

Last synced: 6 days ago
JSON representation

Next.js - Movie Database API

Awesome Lists containing this project

README

          

# Movie Database - API Sample

This project is a **frontend** application made with `next.js` fetching the [Movie Database API](https://www.themoviedb.org) data and was done to help others to learn more about Next integrations.

## Table of contents

- [Preview](#preview)
- [Credits](#credits)
- [Technologies](#technologies)
- [Dependencies](#dependencies)
- [Installation](#installation)
- [Cloning](#cloning)
- [Install Dependencies](#install-dependencies)
- [Running The Project](#running-the-project)
- [Build The Project](#build-the-project)
- [About Next.js](#about-next)
- [License](#license)

## Preview

[Click here](https://next-movie-db.vercel.app) to view the project online.

## Credits

- The icons are from [Font Awesome](fontawesome.com)
- Data and images about movies are from [The Movie DB](https://www.themoviedb.org) free API

## Technologies

- [Node](https://nodejs.org/en/download/)
- [React](https://pt-br.reactjs.org/)
- [Next.js](https://nextjs.org)
- [Zustand](https://www.npmjs.com/package/zustand)
- [Styled-components](https://styled-components.com/)
- [TypeScript](https://www.typescriptlang.org)

## Installation

### Cloning

Clone the repository:

```
git clone git@github.com:nicklima/next-movie-db.git
```

### Install Dependencies

Navigate to the project directory

```
cd next-movie-db
```

and install the dependencies:

```
yarn
# or
npm install
```

### Running The Project

After install the dependencies, you can run the app in the development mode.

```
yarn dev
# or
npm run dev
```

Open [http://localhost:3000](http://localhost:3000) to view it in the browser.

Remember that you will need to create a `.env` file and set the your **API KEY** of The Movie DB in your environment variables as showed on `.env.example`. If you don't have an API KEY, access [the Movie DB developers api central](https://developers.themoviedb.org/3/getting-started/introduction) to get one.

### Build The Project

After install the dependencies, you can build the app for production to the `.next` folder.

```
npm run build
# or
yarn build
```

Your app is ready to be deployed!

## About Next

Visit https://nextjs.org/learn to get started with Next.js or visit [https://nextjs.org/docs](https://nextjs.org/docs) to view the full documentation.

## TODO List

- [ ] Store selected theme on cookie to preserve user choice
- [ ] Improve theme colors
- [ ] Create modal to get more info about the movie
- [ ] Add JEST to project

## License

MIT © [Nick Lima](https://github.com/nicklima)