The site can be found at https://mydatahack.github.io/zeller-code-challenge. The design system can be found at https://mydatahack.github.io/zeller-design.
Make sure to use Node version 14.
- Start the main app
yarn install
yarn start- Start the design system
yarn storybook-install
yarn storybook- Unit tests
# For main app
yarn test
# For design system
yarn storybook-test- Cypress tests
# For local development
yarn integration-local
# For dev environment
yarn integration-dev- Design first approach
The solution is driven by the design first approach by using Storybook. Each design elements are converted to React components in the design system. Then, these components are pulled in the main app. The design system lives in the same repo. They are simply imported in the main app components from the frontend-component folder. For styling, I am using CSS Module.
- State management
I opted for using Context because it is more extensible when the new app requirements come. When the page loads, it fetches all the data and store in the context. Context also holds UI states like loading or error. Context also holds what user type is selected. The user type is updated onChange in the radio input. Users are displayed by the type from the context.
- Testing
Unit testing to cover most of the component. Testing implementation details is minimised. For the context provider and the logic to retrieve data from AppSync, I opted not to write unit tests. It is more appropriate to do integration tests. Therefore, the integration of the frontend and AppSync is tested by the integration test.
- CI/CD
Github action to Github page upon push to the main branch.
- Codegen for GraphQL TypeScript definitions
I assume I cannot generate TypeScript definitions from the AppSync endpoint without AWS CLI configured properly? Ideally, GraphQL type should be generated by codegen. As I couldn't do this, I have created the types manually in src/types.