Movies App with Graphql and React

This is a Movies App using React, Apollo, Graphql Firebase and The Movie Database (TMDB) API.

Tools

• Vite Next Generation Frontend Tooling
• React React 18.
• Typescript JavaScript with syntax for types.
• ESLint Find and fix problems in JavaScript and typescript code.
• Prettier Code formatter.
• husky Husky improves your commits.
• firebase Firebase app development platform.
• materialUI Move faster with intuitive React UI tools.
• apollo-client Apollo Client is a comprehensive state management library for JavaScript that enables you to manage both local and remote data with GraphQL.
• Apollo-server Apollo Server is a spec-compliant GraphQL server that's compatible with any GraphQL client.
• react-hook-form Performant, flexible and extensible forms with easy-to-use validation.
• lingui JavaScript library for internalization (i18n) of JavaScript projects.
• codegen CodeGen is a family of open-source model for program synthesis.
• Graphql A query language for an API.

Getting starting

Prerequisites

• node
• npm

Dependencies

Install dependencies of api :

cd api && npm install

Install dependencies of client :

cd client && npm install

Environment variables

Creates the .env file in the root directory of the api folder :

cd api && touch .env

In the .env, set the environment variables

Example :

API_PORT=4040
TEST_API_PORT=4004 # for tests
TMDB_API_KEY=your-TMDB-api-key # Get your TMDb API key and paste here

Creates the .env file in the root directory of the client folder :

cd client && touch .env

In the .env, set your api url.

Example :

VITE_GRAPHQL_URL=http://localhost:4040/graphql

# firebase config
VITE_API_KEY=
VITE_AUTH_DOMAIN=
VITE_PROJECT_ID=
VITE_STORAGE_BUCKET=
VITE_MESSAGING_SENDER_ID=
VITE_APP_ID=

Start the app in dev mode

Run your GraphQL server and your React app with this command :

npm run dev

Navigate to http://localhost:{yourport} in your browser to explore the API with the Apollo Playground.

Navigate to http://localhost:8080 in your browser to run the React app.

Production

Project available on this link.

Testing

run tests of the api :

npm run test:api