What is it • Highlights • Technologies • How to use • Details • About
💡 What is it
Movies is a real world isomorphic React application. It's fast, responsive, with i18n and SSR built in support.
Movies application utilizes real movies data API provided by The Movie Database (TMDb).
🏄 Demo: nk11dev-movies.herokuapp.com
🎥 Highlights
- Filter movies by category: "Now playing", "Popular", "Top rated" and "Upcoming"
- Search movies
- Switch localizations
- Watch movie details (including trailer, actors and images)
- Watch recommendations
🚀 Technologies
- Webpack 5
- ESLint (based on eslint-plugin-import, eslint-plugin-react, eslint-config-airbnb-base + some customizations)
- Cypress (E2E testing)
- Express (with client-side rendering / server-side rendering support)
- React 17
- Redux + Sagas
- React Router 5
- React-i18next (for multi language support)
- Hot Module Replacement (react-hot-loader, webpack-dev-server and nodemon-webpack-plugin with server-side HMR and sagas HMR support)
- Sass, CSS Modules, Bootstrap 4.6 + Font Awesome 5
📖 How to use
Environment variables
There are some environment variables with default values stored in /configs/env/.env.defaults.
Variables list
Required (they haven't default values)
For fetching movies data you should register account at TMDb and use your own API Read Access Token or API key.
| Variable | Description |
|---|---|
TMDB_API_ACCESS_TOKEN |
TMDb API Read Access Token value (authentication by Bearer Token in Authorization header). Also, for this type of authentication you should set env variable TMDB_API_V4_AUTHENTICATION=1 (default value) |
or
| Variable | Description |
|---|---|
TMDB_API_KEY |
TMDb API key value (authentication by api_key query string parameter). Also, for this type of authentication you should set env variable TMDB_API_V4_AUTHENTICATION=0 |
Steps for getting TMDb API to work in app:
- Create
.envfile at the root folder (example of.envfile you could find in/configs/env/.env.defaults). - Put in env variables with values depends on authentication method that you choose.
For example, your .env file should look like so (if you want to authenticate by TMDb API Read Access Token):
TMDB_API_ACCESS_TOKEN=put_your_api_access_token_here
TMDB_API_V4_AUTHENTICATION=1
or so (if you want to authenticate by TMDb API key):
TMDB_API_KEY=put_your_api_key_here
TMDB_API_V4_AUTHENTICATION=0
Not required (they have default values)
| Variable | Default value | Description |
|---|---|---|
TMDB_API_V4_AUTHENTICATION |
1 |
Flag for using TMDb API v4 authentication method. Available values: 0 or 1. Set it to 0 and add TMDB_API_KEY env variable if you want to use TMDb API key authentication instead of TMDb API Read Access Token. |
TMDB_API_HOST |
https://api.tmdb.org/3 |
TMDb API host address. |
TMDB_API_REGION |
US |
TMDb API region parameter will act as a filter to search for and display matching release date information. This parameter is expected to be an ISO-3166-1 code. |
PORT_CLIENT |
8080 |
Port used by webpack-dev-server for client-side development mode. |
PORT_SERVER |
8081 |
Port used by express for server-side development or production modes. |
PORT_ANALYZER |
8888 |
Port used by webpack-bundle-analyzer to visualize size of webpack output files. |
RENDERING |
client |
Application rendering type. Available values: client or server. |
DEBUG_MODE |
1 |
Debug mode. Available values: 0 or 1. Enables Express logs with morgan logger and Redux logs with redux-logger. |
NPM scripts
Installation
Command: npm install
Install dependencies via npm.
Note: if you want to fetch data from TMDb API, you should set up required environment variables.
Development
Command: npm run dev:client or shorthand npm run dev
Run client-side React app by webpack-dev-server with HMR (by default available at localhost:8080).
Note: If your changes affects only client-side, running this script will be enough for you.
Command: npm run dev:server
Run server-side Express app by nodemon-webpack-plugin to host /dist/client/ folder (by default available at localhost:8081).
Note: This script useful if you want to change server-side behavior or work with client-side as Express-hosted app.
Production
Command: npm run build
Build client and server for production.
Command: npm start
Run bundled Express server for hosting /dist/client/ folder.
Bundle analyzing
Command: npm run analyze:client
Run Webpack Bundle Analyzer: HTTP server to show client-side bundle report with visualized size of webpack output files.
Command: npm run analyze:server
Run Webpack Bundle Analyzer: HTTP server to show server-side bundle report with visualized size of webpack output files.
Testing
Command: npm run cypress
Open Cypress test runner.
Command: npm run cypress:run
Run Cypress tests to completion.
Command: npm test
Start webpack-dev-server, wait for a url to respond, then run Cypress tests. When the test process exits, shut down webpack-dev-server.
Linting
Command: npm run lint
Run ESLint with ./** search pattern.
Command: npm run lint:fix
Run ESLint with --fix flag.
💻 Details
Optimization
Current score:
Note: Tested with disabled cache and extensions in Chrome Browser (Chrome -> Dev Tools -> "Lighthowse" tab).
Desktop version scores ~96/100 ponts.
Mobile version scores ~82/100 ponts.
But there is a some planned improvements. And that's without even mentioning the possible PWA techniques!
Express
- HTTP headers with Cache-Control
Bundle
- Minification
- Gzipping
- Tree-shaking
- Code-splitting
Fonts
- Stored locally
- In modern format
- Preloaded
- With "font-display:swap"
Images
- Lazy loading
✌️ About
This product uses the TMDb API but is not endorsed or certified by TMDb.
