Skip to content

README.md

Latest commit

 

History

History
98 lines (60 loc) · 6.82 KB

README.md

File metadata and controls

98 lines (60 loc) · 6.82 KB

Bingewatcher Client

This folder contains the frontend code for the project. The frontend is built with React and TypeScript. The frontend is built with Vite, and uses Apollo Client to fetch data from the GraphQL API. Testing is done with Vitest and React Testing Library.

This readme is intended to provide a brief overview of the project setup and available npm scripts. More detailed documentation can be found in the docs folder.

Client structure

The client structure is described in filestructure-project.md.

Folder/file structure

The folder/file structure for components the frontend is described in filestructure.md.

Testing

The testing strategy for the frontend is described in testing.md.

This project uses Playwright for end to end testing. Before running end to end tests, you must install playwright.

Third party libraries

  • MUI - React UI framework

We have used MaterialUI for more effecient and faster development. MaterialUI provides a lot of components that we can use, and we have used some of them in our project.

  • SCSS - CSS preprocessor

We have used .SCSS files to style our components. This makes it easier to style our components, and we can use variables and mixins to make our code more reusable.

We have used Apollo Client to fetch data from the GraphQL API. Apollo Client provides a lot of useful features, such as caching, error handling, and more. As the server also uses Apollo, it was a natural choice to use Apollo Client.

We have used React Router to handle routing in the project. React Router provides a lot of useful features, such as nested routes, redirects, and more. The routes are defined in the Routes.tsx file.

We have used Playwright to write end to end tests for the project. Playwright provides a lot of useful features, such as taking screenshots, mocking requests, and most importantly testing different browsers. It is also really flexible, and can provide complex and clever configurations for many projects. The tests are located in the e2e folder.

Run the client

Create a .env file in the root of the client folder with the following content:

VITE_SERVER_URI={server-uri}

Replace {server-uri} with the URL of the server you want to use.

To set up the server, follow instructions in server README.md.

If you have not already done so, run the following command to install all dependencies:

npm install

Note: You will need to install the packages in root to enable Typescript and linting.

To run the client, run the following command:

npm run dev

This will start the client on a local port number. Any code changes will trigger automatic browser updates.

Available NPM Scripts

This section provides an overview of the available npm scripts for this project. These scripts help you manage development, testing, building, and other maintenance tasks for the project.

Setup

Command
 Description
npm install Installs dependencies for client.
Note: You will need to install the packages in root to enable Typescript and Eslint.
npm start Does the same as npm run dev
npm run dev Starts the project in development mode. The project will run locally on a local port number. Any code changes will trigger automatic browser updates.

Test

Command
 Description
npm run test Runs all tests.
Note: You must set up Playwright for this to work.
npm run test:unit Runs strictly unit tests (in watch mode)
npm run test:unit:no-watch Strictly runs unit tests.
npm run coverage This script runs unit tests with code coverage using Vitest. After completion, it will generate code coverage reports that you can find in your project. You can find the reports here.
npm run test:e2e Runs end to end tests.
Note: You must set up Playwright for this to work.

Production

Command
 Description
npm run build Compiles and builds the project for production. The project will be built into the /dist folder.
npm run preview This script starts Vite in preview mode, allowing you to preview the production build locally before deployment. Please use this before deploying to the VM.