tastejs / next-movies

A Next.js Movies App

next-movies

This is a Movies App built using Next.js, React and The Movie Database (TMDB) API.

Demo

A live deployment of this app is available to try it out.

Contributing

Contributions are always welcome!

For large changes, please file an issue to discuss your proposed changes with us before working on a PR :)

Installation

Clone and install the dependencies for next-movies locally:

  git clone https://github.com/tastejs/next-movies.git
  cd next-movies 
  npm install

Quick setup

1. Take a copy of .env.local.example and re-name to .env.local
2. Get your TMDb API key
3. Get your TMDB API read access token
4. Enter the details into the .env.local file

Running locally

• npm run dev: dev build
• npm run build: production build
• npm run static-build: production static build
• npm run start: start the project
• npm run vercel-deploy: deploy to vercel
• npm run netlify-deploy: deploy to netlify
• npm run analyze: bundle analysis
• (analyze:server and analyze:browser are available too)

Tech Stack

Built with:

• Next.js
• Redux and Redux Thunk
• react-glider
• react-lazyload
• react-modal-video
• react-scroll
• react-select-search
• redaxios
• use-dark-mode
• @artsy/fresnel
• @loadable/component

next/image

In most cases, we strongly recommend using the next/image component for optimizing how you load images. For the next-movies app, there are a few app-specific reasons we currently don't use the component. Using react-lazyload, we lazy-load the entire MovieListItem component (for example), where elements like the movie name and star ratings don't load until they get near the viewport. This behavior is currently not possible with next/image. In the future, there may be more "Suspense"-y ways of approaching images in React/Next, which would make this type of pattern more first-class. Until then, check out our approach, but you'll likely be otherwise be able to make next/image work for you.

Authors

• @anton-karlovskiy
• @addyosmani

Based on the original create-react-app foundation by @fidalgodev.

License

MIT

next-movies's Issues

The demo link does not work

The link http://next-movies-zeta.vercel.app/ in Readme does not work

Write a good README.md

@addyosmani
I think we should write down a good README.md. :)

Move TMDB API Key to process.env.TMDB_API_KEY

@anton-karlovskiy Would you be interested in making this change? KEY and token are currently committed to the repo. I think this is probably the last change we might want to make before tagging a proper release.

Social media tags (e.g. Open Graph)

@addyosmani
FYI: we should update social media tags properly. content attributes are empty strings now.

Update to latest version of implementation

I noticed a few folks are already sharing this app :) This implementation is from around August and we have quite a few months of refinements made to it that we will still be landing to the repo from the mono-repo we've been working in.

@anton-karlovskiy could you add the PR for those changes?

Automatic deploy via CI/CD (hopefully Vercel)

@addyosmani
I think the repository is not configured with CI/CD integration.
I think we can use Vercel as it's a Next.js project, although we used Netlify during the development.

Update dependencies and refactor

A few things to note:

• I'm not sure we need Redux here, the other examples don't have it
• Let's try to be 1:1 on CSS solutions - others are using Tailwind CSS, so use that
• To be a more accurate comparison with other frameworks server-first, I recommend exploring the app directory
• I would avoid ejecting the webpack plugin
• Can probably remove a lot of the custom react-* packages added, which are increasing client JS, in comparison to other framework examples which aren't doing this