Back to portfolio
Case studyRef. HI5OVERSEAS

HI5 Overseas

HI5 Overseas helps students and job seekers move abroad, from choosing a university or workplace in Germany, Canada or Europe to securing a visa and settling in. I built its production web application end to end: architecture, UI design, authentication, APIs and deployment.

  • Next.js
  • TypeScript
  • Node.js
  • PostgreSQL
  • REST APIs

Particulars

Client
HI5 Overseas, study and work abroad consultancy
Engagement
Client project, delivered end to end
Role
Full stack engineer, architecture to deployment
Scope
Public site, authentication and protected application modules

Note: Some implementation details are omitted for confidentiality. This case study covers my role, public product behaviour and general architecture only.

Exhibit A: HI5 Overseas

01The mandate

Relocation is a high-trust decision. Prospective students and workers arrive with big questions and little patience for a confusing site, so the product had to explain the services clearly, make it easy to get in touch, and handle personal details securely.

02What I owned

Everything from the first architectural decision to the production deploy. I designed the frontend and backend architecture, built responsive interfaces from reusable components, and developed the REST APIs behind the application's core modules.

I implemented authentication and authorization with protected routes, validation and application-level security controls, then took the app through deployment and production readiness for a real client.

03Architecture for the long run

A client app keeps growing after launch, so maintainability was the constraint that mattered. I structured it as reusable services, components and modules on Next.js and TypeScript, with a Node.js API layer over PostgreSQL, so new features slot into existing patterns instead of becoming one-offs.

Fig. 01

Client
Responsive Next.js UIReusable components
Access
AuthenticationAuthorizationProtected routes
API
REST APIs (Node.js)Validation
Data
PostgreSQL
Fig. 01 Architecture: a Next.js app over an authenticated Node.js API and PostgreSQL

04Working flow

How a signed-in user's request travels through the application, with access decided before any data is touched.

Fig. 02

Visitor
Next.js app
Node.js API
PostgreSQL

  1. 01 Browses services, then signs in

  2. 02 Sends credentials

  3. 03 Verifies the user

  4. 04 User and role

  5. 05 Authenticated session

  6. 06 Unlocks protected routes for the user's role

  7. 07 Calls a protected module API

  8. 08 Validates input and authorises the request

  9. 09 Reads or writes data

  10. 10 Response for the UI

Fig. 02 Authentication, protected routes and data access

05From brief to production

  1. 01

    Architecture

    Frontend and backend structure decided up front, around reusable services and modules.

  2. 02

    Interface design

    Responsive layouts and a component set that keeps every page consistent.

  3. 03

    Build

    Core modules implemented across UI and REST APIs.

  4. 04

    Secure

    Authentication, authorization, protected routes and validation built in, not bolted on.

  5. 05

    Stabilise

    Workflows debugged and optimised across frontend and backend.

  6. 06

    Deploy

    Production readiness and launch for the client.

06Hard parts

  • Owning every layer at once, where a schema decision shows up in the UI weeks later.
  • Getting authentication and route protection right for an app that handles personal details.
  • Balancing maintainability against a real client's timeline.
  • Debugging and stabilising production workflows that spanned frontend and backend.

07Outcomes

  • A production application live for a real client.
  • Secure access through authentication, authorization and validation.
  • A modular codebase of reusable services and components, ready for new features.

08How I approached it

  1. 01

    Design the system before the screens

    Architecture decisions are the hardest to undo.

  2. 02

    Security belongs in version one

    Auth and validation shipped with the first release.

  3. 03

    Reuse is a decision

    Shared components and services were planned, not extracted later.

  4. 04

    Production is the finish line

    Deployment and readiness were part of the build, not an afterthought.

End of case study8 sections

Related work

More projects
Back to all projects