A simple UI enabling searching for movies within the Movie DB and view the results.
For a visual example, please see the screenshots folder.
- React
- Babel
- Webpack
- Yarn
- Styled Components
- Jest
- React Testing Library
Build the packages by running yarn
Run: yarn start to run the app locally using the webpack server and hot module reload.
Run: yarn build to run the app using the production build.
Run: yarn test for Jest to run all tests.
The project has 3 main areas of focus.
components, where all visual components exist without any business logicmodules, where all components with business logic will exist (for now only the main App component)services, where all API requests exist
You will also see a constants.styles.js file that for now hosts all theme related data. Obviously, for the project to scale, this would have to be refactored to follow a more traditional themes structure with media and colours being their own files.
If we want to consider how this project will scale structure wise, the current visual components would be extracted in a toolkit/ui library to promote reusability even further under an atomic design.
To make the app work as expected without the use of Redux, I decided to go with prop-drilling just to save some time. I would not suggest this approach if we were to scale this app.
Jest and React Testing Library were used for the tests.
The spec files within components and services are more traditional/isolated tests but the ones within modules are more functional based.
This means that the App component is using parts of the visual components to test that the hooks work correctly. We could avoid this by extracting the hooks in their own structure slice and test everything in isolation but given the scope of this project, I felt like a functional test would be better.