Voice Notifications powered by Twilio: Technical Overview
This is a standard Single Page Application (React) application that uses REST API backend. All the code lives within the same Github repository, one folder for the client code and another folder for the server code.
The UI project was created using the Create React App (CRA) command line tool to scaffold the React application. It has since been ejected and some scripts were updated with customizations (such as custom paths, aliases and a custom NgrokPlugin for local development). The app is written with Typescript and it uses most of the defaults that come with the CRA initialization plus some additional tooling (jest, eslint, prettier, husky). Most of the state is handled by custom React hooks that are consumed directly by the components, however it uses Redux for the Create Notification multi-step wizard screen. It keeps track of changes between steps and rehydrates the form state every time the user navigates to an already completed step. The layout and user interface uses Material UI components as the primary library.
The API is built with NestJS and it takes full advantage of Sequelize ORM in order to keep the database in sync with the Models. NestJS is a powerful NodeJS framework focused on object oriented programming and type annotations as key concepts, it heavily relies on dependency injection all along.
The code is organized by feature, there is a specific folder per feature that contains all files related to their domain (controllers, services, models, gateways, etc).
- Controllers: Entry point for the API. Minimum business logic footprint.
- Services: Contain the business logic. They interact with the models so as to request updates/reads to the database.
- Models: Define the shape of database entities in the code and talk to the database. Sequelize uses Active Record pattern
- Gateways: Socket connection managers. This app uses sockets to update the status of the Test Call in real time.
-
Guards: Middlewares for restricting the access to certain parts of the application. This application has a custom Auth Guard to protect all private endpoints with custom header (
x-twilio-notifications-key) validation.
All the private endpoints expect a valid x-twilio-notifications-key to be present in the request's headers object. The value must match the PASSCODE specified in the deployment.
- Receive actions, transform data and store data
- Make data available to every subscribed selector (https://react-redux.js.org/api/hooks#useselector-examples)
- Fetch data from server
- Keep ongoing operation state at component level (isLoading, hasLoaded, data, error, etc)
- Promise base operation so that the component can dispatch an action once the operation resolves/rejects
