MTvI.

Movie / TV Info app based on TMDB API

Website: https://mtvi.netlify.app

Table of Contents

• Motivation
• Main Technologies
• Development
  • Getting Started
  • Project Structure
  • Commit Message Structure
• Notes
  • Node Versions
• Possible Enhancements

Motivation

This project was created to learn how to build SPA (single page application) with technologies such as React, TypeScript, and Netlify.

Main Technologies

• Netlify CLI
• Webpack
• TypeScript
• Babel + core-js
• Eslint + Prettier
• React
• React Router
• React Query
• Axios + localForage
• Material-UI

Development

Getting Started

1. Clone or download the repo.

2. The following Node.js version is required for this project, the recommended way to install a specific version is via nvm, nvm-windows or another Node.js version manager:

   ^14.0.0

3. Install dependencies using the following command in your project directory, requires Node.js and npm (which comes with Node.js).

   $ npm install

4. Create Netlify account.

5. There are several options how to create a project with Netlify, but the most robust one is the Netlify CLI which is used in this project, follow these steps:

   1. Obtain a token.

   2. Use continuous deployment (requires GitHub account) or manual deploys.

      For continuous deployment, it is possible to choose which branches will trigger the deployment.

6. Set the following environment variables to 'Site settings > Build & deploy > Environment > Environment variables':

   For TMDB API (requires account) set TMDB_API_KEY as a name and your given key as a value.

   For serverless functions runtime set AWS_LAMBDA_JS_RUNTIME as a name and nodejs14.x as a value.

7. Use the following npm scripts which are aliases for Netlify Dev and Netlify CLI commands:

   • netlify:start - start a local dev server for the build tool you’re using.
   • netlify:preview - deploy to a unique draft URL for previewing and testing.
   • netlify:deploy - do a production deploy to your main site URL (typically used for manual deploys).

Project Structure

The src folder contains application source code, which I distinguish as follows:

• 'Local' code is located right in the src folder and is used only once in App.* or index.* files. For example routes folder and Footer component are 'local'.

• 'Shared' code is located in the shared folder. This folder contains only code that is needed in more than one place, it can be components, hooks, utils, etc.

• 'Global' code is also located in the src folder. It is usually best to keep code that is only relevant for the corresponding feature / module closer to that feature / module, but sometimes it is more convenient to keep certain code in one 'global' folder / file. For example, in this project, the api folder is 'global'.

It's a very simple structure, but enough for this project.

Commit Message Structure

The commit messages are written according to the Conventional Commits specification (mostly).

Notes

Node Versions

Node.js versions are specified in several places:

• In the Netlify UI AWS_LAMBDA_JS_RUNTIME env variable must be set for serverless functions runtime.
• In the .nvmrc file, so that Netlify knows which version of Node.js it should use to build your site, can also be set as an env variable in the Netlify UI.
• In the package.json engines field which node/no-unsupported-features/* rules use for linting, can also be overwritten by each rule.

Possible Enhancements

• Create a home page.
• Internationalization.
• Authentication with TMDB (to be able to rate movies / series, ect.).
• Write tests (not a big project, but with the above enhancements and for practice it could be worth it).