React app that allows you to discover old and upcoming movies alike and let's you save them in a "favorite movies list".
GraphFlix utilizes Apollo Client to communicate with flix-backend's /graphql API endpoint that acts as a GraphQL wrapper for the TMDb's REST API and also provides access to the backend's User Management (CRUD) functionality.
GraphQL Code Generator is used to generate the TypeScript typings, React Hooks and "Possible Types" directly from flix-backend's GraphQL schema.
State management is achieved through Apollo's Client-side schema and Reactive variables.
To see the REST API version of this app, check out RESTFlix.
- React
- GraphQL
- GraphQL Code Generator
- Apollo Client
- TypeScript
- Jest
- Cypress
- React / Cypress Testing Library
Check out the live version to see the app in action.
After cloning the repository run either
yarn or npm install to install all dependencies.
The app depends on the following environment variable (supplied via a .env file or natively by your OS environment):
VITE_MOVIE_API_URL=https://flix.kimkwanka.io
(Just create a file named .env in the project root, copy the above line into it and you're good to go.)
Use yarn dev or npm run dev to run app in development mode.
Use yarn build or npm run build to build for production.
Use yarn test or npm run test to run the test suite (Jest + React Testing Library) once or
yarn test --watch or npm run test -- --watch to run it in watch mode.
Check the Jest CLI docs for more options.
Use yarn test:e2e or npm run test:e2e to run the end-to-end test suite (Cypress + Cypress Testing Library) headlessly or yarn test:e2e --headed or npm run test:e2e -- --headed to force the browser to show.
Check the Cypress CLI docs for more CLI options.
Alternatively you can run yarn cy:open or npm run cy:open to open Cypress and run the tests manually.