Technical Specification

Architecture Overview

The application follows architecture with clear separation of concerns:

  • Frontend Layer: React-based SPA with TypeScript and Chakra UI

  • Backend Layer: NestJS API with TypeORM and PostgreSQL

  • GraphQL Layer: Hasura for instant GraphQL APIs

  • Authentication Layer: Keycloak for identity and access management

  • Infrastructure Layer: AWS services for hosting and deployment

Components & Interactions

This document defines the technical architecture and implementation plan for a web application using:

  • Beneficiary Backend: NestJS (TypeScript), TypeORM, JWT token, PostgreSQL and Hasura for GraphQL

  • Beneficiary Frontend: React (TypeScript), Chakra UI for UI components, custom hooks and context for state management

  • Deployment: AWS S3 and CloudFront (Frontend), Docker/EC2 for backend

Components & Tech Stack

Frontend

  • React Core library for building the user interface

  • TypeScript Adds static typing to JavaScript for better code quality

  • Chakra UI Used for building accessible and responsive UI components

  • React Router DOM Handles client-side routing and navigation

  • Axios For making HTTP requests to backend services

  • react-i18next Adds internationalization and language switching support

  • Vite Development server and fast bundler for modern front-end tooling

Backend

  • NestJS Stable and widely adopted; supports modular architecture and GraphQL

  • TypeORM Object-relational mapping for TypeScript and JavaScript

  • PostgreSQL Reliable and feature-rich relational database

  • GraphQL Query language and runtime for APIs; compatible with Apollo and NestJS

  • Docker Used for containerization and deployment

  • Keycloak Open-source identity and access management solution

  • Hasura Instant GraphQL engine for PostgreSQL; supports remote schemas, actions, and event triggers

DevOps & Hosting

  • AWS S3 Object storage service for hosting static frontend assets

  • AWS CloudFront Content delivery network for global distribution of frontend content

  • AWS EC2 Elastic compute cloud for hosting backend services

  • Docker Containerization platform for consistent deployment across environments

PreviousArchitecture OverviewNextBackend Guide