This is a Movies App using React, Apollo, Graphql Firebase and The Movie Database (TMDB) API.
- 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.
node
npm
Install dependencies of api :
cd api && npm install
Install dependencies of client :
cd client && npm install
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=
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.
Project available on this link.
run tests of the api :
npm run test:api