{"id":20895094,"url":"https://github.com/topheman/nextjs-movie-browser","last_synced_at":"2025-05-12T23:31:30.103Z","repository":{"id":46673282,"uuid":"166857234","full_name":"topheman/nextjs-movie-browser","owner":"topheman","description":"A NextJS implementation of the themoviedb.org website","archived":false,"fork":false,"pushed_at":"2021-10-02T23:14:19.000Z","size":4251,"stargazers_count":46,"open_issues_count":15,"forks_count":9,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-01T13:37:12.590Z","etag":null,"topics":["i18n","i18next","nextjs","reactjs","ssr","typescript"],"latest_commit_sha":null,"homepage":"https://topheman-movie-browser.herokuapp.com/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/topheman.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-01-21T18:00:04.000Z","updated_at":"2024-12-22T18:16:40.000Z","dependencies_parsed_at":"2022-09-04T20:22:12.637Z","dependency_job_id":null,"html_url":"https://github.com/topheman/nextjs-movie-browser","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/topheman%2Fnextjs-movie-browser","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/topheman%2Fnextjs-movie-browser/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/topheman%2Fnextjs-movie-browser/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/topheman%2Fnextjs-movie-browser/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/topheman","download_url":"https://codeload.github.com/topheman/nextjs-movie-browser/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253840400,"owners_count":21972473,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["i18n","i18next","nextjs","reactjs","ssr","typescript"],"created_at":"2024-11-18T10:24:55.405Z","updated_at":"2025-05-12T23:31:28.955Z","avatar_url":"https://github.com/topheman.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# nextjs-movie-browser\n\n[![Build Status](https://travis-ci.org/topheman/nextjs-movie-browser.svg?branch=master)](https://travis-ci.org/topheman/nextjs-movie-browser)\n[![Cypress](https://img.shields.io/badge/cypress-dashboard-brightgreen.svg)](https://dashboard.cypress.io/#/projects/b2y7nt/runs)\n[![Demo](https://img.shields.io/badge/demo-online-blue.svg)](https://topheman-movie-browser.herokuapp.com)\n\n\u003cp align=\"center\"\u003e\u003cimg src=\"./static/nextjs-movie-browser.png\" width=530 /\u003e\u003c/p\u003e\n\nThis project is a **NextJS** implementation of the [themoviedb.org](https://www.themoviedb.org) website. The main goal was to dive deep into the NextJS framework with the following constaints/features:\n\n- **SSR (Server Side Rendering)**: use NextJS to Server Side render the page with the data retrieved from the API and have a transparent client side navigation\n  - **critical-path CSS**: extracting critical CSS is made easy using a CSS-in-JS library like styled-component\n- **SEO friendly**: server side render meta tags relative to content based on API result\n- **Social Media cards friendly**: server side render meta tags relative to twitter/facebook ... to customize thumbnails/description when page is shared (also works for slack, messenger, WhatsApp ...)\n- **i18n**\n  - Support multi-language\n    - From the API content\n    - From the UI\n  - Support Right-to-Left (rtl) languages such as Hebrew, Persian ...\n  - Switch language on the fly\n- **High quality project**\n  - code quality good practices (type checking, linting, unit/e2e testing, git hooks, cis ...)\n  - automation / dev pipeline\n  - documentation\n\nHere is a list of some of the technologies I'm using:\n\n- [NextJS](https://github.com/zeit/next.js/) / [ReactJS](https://github.com/facebook/react)\n- [TypeScript](NOTES.md#typescript-support) / [Tslint](NOTES.md#tslint) / [Prettier](https://github.com/prettier/prettier)\n- [Jest](NOTES.md#jest-support) / [Cypress.io](https://www.cypress.io/) / [react-testing-library](https://github.com/kentcdodds/react-testing-library) / [cypress-testing-library](https://github.com/kentcdodds/cypress-testing-library)\n- [styled-components](https://www.styled-components.com/)\n\nℹ️ The [v1](#versions) was focused on SSR / i18n (backend and client behaviour), it has a basic design that lets you focus on those parts, the [v2](#versions) is currently focused on the design part.\n\n🗒 [Read the notes I took along the way](NOTES.md).\n\n## Prerequisites\n\n- Nodejs v8\n- yarn / npm\n\n## Install\n\n```shell\ngit clone https://github.com/topheman/nextjs-movie-browser.git\ncd nextjs-movie-browser\nyarn\n```\n\nYou don't have `yarn` ? Run `npm install` - read more about why I'm using yarn.\n\n## Setup\n\nThis project uses the [themoviedb.org](https://www.themoviedb.org/faq/api) api v3.\n\n- Create an account or login on [www.themoviedb.org](https://www.themoviedb.org/)\n- Create an API key in the [settings section](https://www.themoviedb.org/settings/api)\n- Copy the API KEY (v3 auth) (for example: `YOUR_API_KEY`)\n\nIn your project, run the following (with your own api key):\n\n```shell\n./bin/initEnv.js --api-key YOUR_API_KEY\n```\n\nThis will create two files: `.env.local` and `.env.test.local` (which won't be commited to git) with `NEXTJS_APP_CLIENT_TMDB_API_KEY=YOUR_API_KEY`.\n\nThat way, your api key will be taken in account directly in your development environment - read more about .env files.\n\n## Development\n\n```shell\nnpm run dev\n```\n\nThis will start a development server on [http://localhost:3000](http://localhost:3000).\n\n## Build\n\n```shell\nnpm run build\n```\n\nThis will build the a production version of the website in the `.next` folder.\n\n## Production\n\nFirst, you need to build your project running `npm run build`, then:\n\n```shell\nnpm start\n```\n\nThis will launch a production server on [http://localhost:3000](http://localhost:3000).\n\nYou can change the port passing a `PORT` env var like: `PORT=8080 npm start`.\n\n## Test\n\nThe following command will run both unit and e2e (cypress) tests, in parallel:\n\n```shell\nnpm test\n```\n\nYou can choose to run them separately to have more readable logs (running in parallel unit and e2e tests runs faster but ends up with less readable logs).\n\n### Unit\n\nYou'll find unit tests spread in the `src` folder inside `__tests__` folders in files named like `*.spec.ts`.\n\nI'm using [Jest](https://facebook.github.io/jest/) as a test runner and [react-testing-library](https://github.com/kentcdodds/react-testing-library) as testing utilies.\n\n- `npm run test:unit` : single run of the unit tests\n- `npm run test:unit:watch` : run the unit tests in watch mode\n- `npm run test:unit:coverage` : run the unit tests collecting coverage infos in `./coverage` folder.\n\n### End to end\n\n\u003e End-to-end testing is a technique used to test whether the flow of an application right from start to finish is behaving as expected. The purpose of performing end-to-end testing is to identify system dependencies and to ensure that the data integrity is maintained between various system components and systems.\n\u003e\n\u003e The entire application is tested for critical functionalities such as communicating with the other systems, interfaces, database, network, and other applications.\n\nI'm using [cypress.io](https://www.cypress.io/) for the e2e tests. You will find them in [cypress/integration](cypress/integration).\n\n- `npm run test:cypress` : **single run the e2e tests**. It will:\n  - build the project and launch a production server at [http://localhost:3000](http://localhost:3000) (that way, your tests reflect exactly what the end user would see in production)\n  - run the tests in [cypress/integration](cypress/integration) folder\n  - tear down once tests are passed (or failed)\n- `npm run test:cypress:dev` : use this one when you're **coding your tests**. It will:\n  - spin up a dev server on [http://localhost:3000](http://localhost:3000) (so, you don't have to `npm start`)\n  - open the cypress client that will let you choose which tests you want to run\n- `npm run test:cypress:debug-build` : use this if your e2e tests only fail on a production bundle, to **debug the tests with the production version** of your app. It will:\n  - build the project and launch a production server at [http://localhost:3000](http://localhost:3000)\n  - open the cypress client that will let you choose which tests you want to run\n\n## Linter\n\nI use [tslint](https://palantir.github.io/tslint/) to check the coding style, with the following presets:\n\n- [tslint:recommended](https://palantir.github.io/tslint/usage/configuration/#configuration-presets)\n- [tslint-config-airbnb](https://www.npmjs.com/package/tslint-config-airbnb) - a TypeScript version of the eslint-config-airbnb\n- [tslint-config-prettier](https://github.com/prettier/tslint-config-prettier) - a config that disables all conflicting rules between Tslint and prettier (Tslint is for linting, prettier is for formatting)\n\nMore on [tslint configuration](NOTES.md#tslint).\n\nThe following command will run the linter on your code base. This task is ran at pre-commit to ensure code quality.\n\n```shell\nnpm run lint\n```\n\n## Prettier\n\nPrettier is a great tool to enforce a consistent style accross your code base (usefull when working in teams).\n\n[Here is how to integrate it with your editor](https://prettier.io/docs/en/editors.html).\n\nOnce it's done, when you'll save a file, it will reformat it.\n\nThe following command will let you format your code base. This task is ran at pre-commit.\n\n```shell\nnpm run pretty\n```\n\n## Environment files\n\nJust like in create-react-app, you can use `.env` file to store your env vars that will be injected to your app.\n\n[Check my implementation](scripts/config/env.js)\n\nWhat `.env` file can be used ?\n\n- `.env`: Default.\n- `.env.local`: Local overrides. **This file is loaded for all environments except test.**\n- `.env.development`, `.env.test`, `.env.production`: Environment-specific settings.\n- `.env.development.local`, `.env.test.local`, `.env.production.local`: Local overrides of environment-specific settings.\n\nFiles on the left have more priority than files on the right:\n\n- `npm run dev`: `.env.development.local`, `.env.development`, `.env.local`, `.env`\n- `npm run build` / `npm start`: `.env.production.local`, `.env.production`, `.env.local`, `.env`\n- `npm test`: `.env.test.local`, `.env.test`, `.env` (note `.env.local` is missing)\n\nEnv vars are filtered before being injected:\n\n- `NEXTJS_APP_CLIENT_*`: will be accessible both client and server side (via `process.env.NEXTJS_APP_CLIENT_*`)\n- `NEXTJS_APP_SERVER_*`: will be accessible only server side (via `process.env.NEXTJS_APP_SERVER_*`) (you might wan't store env vars and not leek them to the frontend)\n\n## Deploy\n\nSee [Heroku](NOTES.md#heroku) section in notes\n\n## Continuous Integration\n\nEach `git push` triggers a test suite on [travis](https://travis-ci.org/topheman/nextjs-movie-browser). The following will be ran:\n\n- linting\n- type checking\n- unit tests\n- end to end test with cypress\n\nThe end to end test sessions are recorded, you can check them [here](https://dashboard.cypress.io/#/projects/b2y7nt/runs).\n\n## Commit guidelines\n\nTo have uniform commit messages, I follow the [AngularJS git commit guidelines](https://github.com/angular/angular.js/blob/master/CONTRIBUTING.md#-git-commit-guidelines), please take a look at it.\n\nIt also makes it easier to generate changelogs.\n\nTo generate changelog:\n\n```shell\nnpm run generate-changelog -- v1.1.0 v1.2.0\n```\n\nReady to be pasted to the github releases part.\n\n## FAQ\n\n### Versions\n\n#### v2 (current)\n\nThis is a work in progress of the design part.\n\n#### v1\n\nThe v1 has a strong setup for the SSR / SEO / i18n part also for code quality (type checking, linting, unit/e2e testing, git hooks ...).\n\nIt has a very basic design. I mainly focused on the NextJS part in order to do only design on the v2.\n\nThe code is available on this [branch](https://github.com/topheman/nextjs-movie-browser/tree/v1.x).\n\n### Precommit hook\n\nThanks to [husky](https://www.npmjs.com/package/husky), you can simply add git hooks.\n\nThat way, once you install the project, you'll have a precommit hook installed. The following tasks are executed at each commit:\n\n- `npm run lint`: lints the project source code with [tslint](NOTES.md#tslint) (both `.js(x)` and `.ts(x)` files)\n- `npm run ts:check`: type check `.ts` and `.tsx` files\n- `npm test`: runs in parallel unit and e2e tests\n\n## Next steps\n\n- Write more e2e / unit tests\n- Record and use mocks for e2e tests\n- Apply design to `*/cast` and `*/seasons` pages\n- Add missing translations (job / department descriptions for example)\n- Extract part of project\n- Mock next router - [zeit/next.js: Issue #1827](https://github.com/zeit/next.js/issues/1827) [#63fd29e](https://github.com/topheman/nextjs-movie-browser/commit/63fd29e823d706b087473436a70a64928be0161a#diff-08da095f2b11e6bb3655a533a6676e42R75)\n- Write blog posts\n\n## Resources\n\nThis project is based on previous work:\n\n- ⚛️ [topheman/npm-registry-browser](https://github.com/topheman/npm-registry-browser)\n- ️⚛️ [topheman/react-fiber-experiments](https://github.com/topheman/react-fiber-experiments)\n- 📝 [Cypress.io advanced setup](http://dev.topheman.com/cypress-io-advanced-setup/)\n- 📝 [Continuous deployment with Travis CI](http://dev.topheman.com/continuous-deployment-with-travis-ci/)\n- 📝 [Add metadatas to your build files](http://dev.topheman.com/add-metadatas-to-your-build-files/)\n\nMore resources on the [NOTES.md](NOTES.md) file.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftopheman%2Fnextjs-movie-browser","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftopheman%2Fnextjs-movie-browser","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftopheman%2Fnextjs-movie-browser/lists"}