Superformula Web Developer Test

Applicant: Matheus Marques

Online demo

The app is available for preview at https://user-management-superformula.netlify.app/

Architecture

Tech Stack

• Backend
  • API: using AWS AppSync
  • Database: Dynamodb
  • Infra-as-code: CloudFormation
  • Lambda function using node.js
• Frontend
  • React with Typescript
  • ESLint to avoid common problems
  • Prettier to enforce a consistent style
  • Husky to implement git-hooks (pre-commit/pre-push)
  • Testing library to make component tests
  • Cypress to make page tests

Folder Structure

• components: Generic compoents
• contexts: Generic contexts
• domains: Application domains (domain driven design approach )
• hooks: Generic hooks
• infra: Layer which communicate with external services
• pages: Core pages
• styles: General styles
• utils: Util functions

To implement

• Improve accessibility (I didn't have time to use a screen reader).
• Make more component tests.
• Improve my cypress tests and add more tests. (separate some test actions in commands)
• Include Visual Tests with storybook.
• Improve storybook with more dynamic options. ​

Backend Context

Functionality

• The API should follow typical GraphQL API design pattern
• The data should be saved in the DB
• Proper error handling should be used
• Paginating and filtering (by name) users list

Basic Requirements

​- [x] Use AWS AppSync (preferred) or AWS Lambda + API Gateway approach (Used AWS AppSync) ​- [x] Use any AWS Database-as-a-Service persistence store. DynamoDB is preferred. (Used DynamoDB) ​- [x] Write concise and clear commit messages (Sometimes not too clear, sorry) ​- [x] Write clear documentation on how it has been designed and how to run the code (How to run is inside README of superformula-frontend) ​- [x] Add a Query to fetch location information based off the user's address (use NASA or Mapbox APIs); use AWS Lambda (Used Mapbox)

Bonus (in order)

​1. [x] Use Infrastructure-as-code tooling that can be used to deploy all resources to an AWS account. Examples: CloudFormation / SAM, Terraform, Serverless Framework, etc. (I used AWS Amplify that use CloudFormation) ​1. [ ] Provide proper unit tests (I didn't have time) ​1. Providing an online demo is welcomed, but not required (Graphql API) ​1. [x] Delete user functionality ​1. [x] Bundle npm modules into your Lambdas (I just have one lambda with npm modules)

Advanced Requirements

​- [] Describe your strategy for Lambda error handling, retries, and DLQs ​- [] Describe your cloud-native logging, monitoring, and alarming strategy across all queries/mutations

UI context

Functionality

• The search functionality should perform real time filtering on client side data and API side data (I filtered on server-side)
• List of users should be updated automatically after single user is updated
• Create modal from scratch - please don't use any library for it
• Appear/Disappear of modal should be animated (feel free with choose how) (Only appear animation)
• Infinite loading state should be saved in url query (pagination state should be present in URL query (eg ?page=1) to allow for behavior where the user can reload the page while still returning to their current scroll position)

Bonus (in order)

1. Write clear documentation on how the app was designed and how to run the code
2. Providing an online demo is welcomed, but not required.
3. Provide a description of how you approach mobile friendly apps (what do you use, how)
4. Write concise and clear commit messages. (Sometimes not too clear, sorry)
5. Provide components in Storybook with tests.
6. Include subtle animations to focus attention (Only simple transitions animations)
7. Describe optimization opportunities when you conclude
8. Map with user location should update async - when user changes "location" field (feel free to choose MAPS service e.g. GoogleMaps, OpenStreetMap) (Used Mapbox)
9. Handle server errors
10. Handle loading states
11. [] Delete user functionality (I didn't have time)