Dailymoderation is a client media moderation tool that I have developped with the intention to show my software engineering skills to the technical interviewer. This tool makes use of a GraphQL API which has been provided in the technical test package.
The build and run process has been tested using Docker version 24.0.6
make run-prodmake run-devmake run-testmake cleanThe run process has been tested using node v18.18.2 and npm v9.8.1
npm run build
#... production files available in ./distnpm run devnpm run testThe moderation client tool communication with two APIs:
- GraphQL : The provided Apollo Server to fetch, censor and validate media.
- REST: The public Dailymotion API, I used it because the title field was missing from the media information returned by the GraphQL API.
I have made the choice to use React Router, firstly to display my skills with this library and also for the following reason:
React Router is perfect to create modern Single Page Application, and it is certain that a media moderation tool will be composed of more than one page (Login, Profile, Logout route, etc.)
React Router provides us with a way to add an Error Element inside of our routes, thus, displaying a user-friendly error page in case of any unexepected error.
My first approach was to use an action function to handle all the API and GraphQL queries and mutations. And for this case, React Router is very handfull and allows us to create some interface between the functionnal components (the vue) and the Rest/GraphQL APIs by acting as some king of controller, which gives us a good way of dealing with separation of concerns.
At the end, I went with another approach because I wanted to make use of the hooks provided by the @apollo/client library and to use a Redux Store to manage a global state, using action function would have forced me to add to much logic inside my Moderation Page functionnal component and make it too much overloaded.
Custom hook useMediaModeration
I decided to use a custom hook to handle the overall media management, fetching, censoring and validating logic. This was motivated by a need to separate concerns inside the ModerationPage component.
It would have been too much overloaded if all the hooks (Redux's hooks, Apollo's hooks, useEffects) would have been inside it.
I have always been taught that unit tests and test driven developments are a must-have in the software engineering field. This is why I have tried to implements several unit tests available inside the test folder.
I have been able to succesfully implement simple tests and mocks for testing the useMediaModeration custom hook.
Thank you for the time taken to review this project.
Amin GHELIS
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent