# 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