luizclr/top-movies

🔍 Top Movies

🌐 top-movies-react-app.netlify.app/

📖 Tabe of contents

1. 💡 Motivation
   • Intro
   • Before starting
   • Technologies used
2. 📋 Features
3. 📋 Requirements
4. 🛠️ Installation and usage
   • Using yarn
   • Using Docker
5. 🗂️ Component Structure (general)
6. 🧑🏻‍💻 Contributing
   • Branch names
   • Commit messages

Motivation

Intro:

The main objective of this repository is create a react application consuming The movie DB API.

Before starting

This project was created based on luizclr/react-base template and using react-styled-guide package.

The application is hosted on top-movies-react-app.netlify.app and you can access any time you want.

You must create an account on The movie DB API to be able to authenticate yourself using a JWT token. For more information check the authentication docs. Once you have the token, please add it in MOVIES_TOKEN variable into .env file. eg: MOVIES_TOKEN="your.token.here"

This application is using a fake authentication API! It means that you don't need to create any other account. You just need to type any fake e-mail but with a valid format and a random string greater or equal to 8 characters as password. eg: e-mail: example@email.com, password: 12345678.

Technologies used:

• Language and framework:
  • React (react.dev)
  • TypeScript (typescriptlang.org)
  • Node.js (nodejs.org)
• Styling:
  • Styled components (styled-components.com)
  • React styled guide (github.com/luizclr/react-styled-guide)
• Build and development:
  • Webpack (webpack.js.org)
  • Babel (babeljs.io)
  • Docker (docker.com)
  • Nginx (nginx.com)
• Linting:
  • Eslint (eslint.org)
  • Prettier (prettier.io)
• Testing:
  • Jest (jestjs.io)
  • React testing library (testing-library.com/react-testing-library)
• API consuming
  • Axios (axios-http.com)
• CI/CD:
  • Github Actions (github.com/features/actions)
  • Netlify (netlify.com)
• Schema Validation:
  • Zod (zod.dev)
• Other tools:
  • Husky (typicode.github.io/husky)

Features

Main

• The user has access to a list of the most popular movies of the day
• User can page through the list to find new movies
• The user has access to another page with details about the film, when clicking on an item in the listing
• The user can filter the movies listed by genre, with the possibility of using more than one genre
• The user can remove filters and the listing must be updated according to the removed filter
• The user is able to return to the movie listing page with the filters still active

Extra

• User can manipulate theme between dark and light
• User is able to login/logout

Requirements

• NodeJs
• yarn
• nvm

or

• docker
• docker-compose

Installation and usage

Create a copy .env file from .env.example and populate the variables.

cp .env.example .env

Using yarn

Using nvm? change local node version to project's node version on .nvmrc.

nvm install

Install dependencies:

yarn install

Run project on development mode:

yarn dev

Open new browser window on localhost:4000.

Run unit tests:

yarn test

Run linter:

yarn lint

Build for production:

yarn build

Start server with built code:

yarn start

Using Docker

create a docker network:

docker network create top-movies

build image:

make build

Run project on development mode:

make up

Open new browser window on localhost:4000.

stop container:

make down

Run unit tests:

make test

Run linter:

make lint

Component Structure (general)

└─ component
    ├─ component.container.tsx
    ├─ component.schema.ts
    ├─ component.styles.tsx
    ├─ component.tsx
    └─ types.ts

Contributing

Follow the next steps to contribute

Branch names

Name your branch with a meaningful name that represents the changes you have done.

Examples:

chore/updating-changelog
fix/user-authentication
feat/add-card

Commit messages

Use the format {type}({scope}): {message}.

Eg: feat(login): added remember me.

See conventional commit guideline.