Jobs/frontend: Francois Cabrol

[francoiscabrol]

François Cabrol Front-end test

The UI

I tried to keep it simple with only the 2 required views:

The implementation

I used react-query with hooks to get a cleaner architecture and a code easier to test.
There are the 2 custom hooks I used for the requests in the hooks/movies.ts file
Then the folder structure is simple:

├── src
│   ├── App.tsx // root app file
│   ├── api.ts // calls to the external api
│   ├── components
│   ├── contexts
│   │   └── SearchContext.tsx // context is used to store the search terms
│   ├── globalStyles.ts
│   ├── globalTypes.d.ts // typescript types I want to be global
│   ├── hooks
│   │   ├── movies.test.tsx // Unit tests that test the react-query hooks
│   │   └── movies.ts
│   ├── pages
│   ├── styled.d.ts // theme typings
│   ├── theme.ts // styled-component theme config
├── test
│   └── cypress
│       ├── fixtures // the api mocks for cypress
│       ├── integration
│       │   └── searchScenarios.cy.ts // the tests

The tests

I tried to figure out a way to test the application at minimum cost:

• I wrote some tests for the hooks/react-query queries. These tests check also that the api calls (api.ts) are working.
• I wrote cypress scenarios to tests the main features. I have added few errors use cases.

Future work

For the tests

Depending on your guideline, we could consider writing unit tests for the components. The SearchBar is the most interesting to test.
We could implement unit tests for the pages. I think it is unnecessary at this stage because Cypress already covers the main use cases. They won't take long to run since there are just a few features.
We could add tests for other error codes in the hooks tests.
We could run the tests in CI (github actions?) and in that case the cypress tests could be run against the production build using npm run preview

For the features

We could replace the "load more" button by an infinite scroll

For the performances

We could probably reduce the number of component re-rendering. I finally didn't spend too much time on it since I had no performance issues. But if the project would have to grow it is something to keep in mind.

For the logs

In production it could be beneficial to get the front-end logs or at least the front-end errors in a tool like Sentry or Datadog. Very useful for debugging!

Voilà! I hope I met your requirement. I am waiting for your feedback!

François