System Architecture

Our architecture is built around modern Next.js features, strong security practices, and easy deployment - all planned from the very beginning of development.

Architecture Overview

System Architecture Diagram

Two Separate Applications

We built the student portal and admin dashboard as completely separate projects. This means if one breaks, the other keeps working, and we can update them independently without affecting each other.

Communication Between Apps

The two apps talk to each other through a few REST API endpoints. The student portal can submit applications and the admin dashboard can create new tasks. We use API keys to ensure only requests from our applications are valid.

Rendering for Performance

We ensure performance by pre-building pages that can be prebuilt, and only using CSR where necessary. When admins add new tasks, the portal can rebuild the page displaying the tasks without rebuilding the entire app thanks to ISR

Multiple Security Layers

We use Kinde for admin login (email + OTP login), API keys to protect our endpoints, and multiple security checks throughout the code. Everything gets logged using Pino for structured monitoring.

Easy to Deploy Anywhere

We used Docker containers from day one, ensuring the apps run the same way locally and in production. This would ensure a smooth deployment process to any cloud provider and easy setup of development environments.

Technology Stack

Core Framework

Next.js 15

React framework that lets us build both frontend and backend in one project, with a bunch of performance optimizations.

TypeScript

Makes our code safer by catching errors before they happen, gives us better autocomplete and ensures easy project takeover.

React

Do we even need to explain this one?

Database & Backend

PostgreSQL

Reliable database that allows us to store data with complex relationships, like applications, students, and tasks.

Prisma

Makes database queries type-safe and way easier to write than raw SQL. Auto-generates TypeScript types from our database schema

Azure Blob Storage

File storage for CV and grade documents that students upload

Security & Auth

Kinde

Handles user authentication for us, which we believe to be safer than us building it ourselves. All we need is supported within Kinde's free tier.

Pino

Structured logging to ensure good monitoring and debugging in production

UI & Styling

Tailwind CSS

CSS framework that makes styling fast to write, performant and have full control over the design.

shadcn/ui

Pre-built components that are accessible and look professional out of the box while still being fully customizable.

TipTap

Rich text editor that students can use to write their cover letters without loosing expressiveness.

Data & Validation

Zod

Validates form data on both frontend and backend at runtime, ensuring data integrity and type safety.

React Hook Form

Makes complex forms with file uploads and validation much easier to build and maintain.

Testing & Quality

Jest

Used for unit tests of all server actions and helper functions.

Playwright

Simulates real users clicking through the app to test complete workflows.

ESLint + Prettier

Keeps our code clean and consistently formatted across the team.

Security Architecture

Authentication Architecture Diagram

The admin dashboard is protected with Kinde authentication (email + OTP). Our API endpoints use API keys to verify requests come from our apps. We also have multiple security checks in the code and log everything for audit purposes.

Authentication Flow

  • • Email + verification code via Kinde
  • • Invitation-only dashboard access
  • • Server-side session management
  • • Automatic token refresh

Endpoint Protection

  • • API key authentication for endpoints
  • • Env variable in each application to store API keys
  • • Detailed audit logging with Pino