Web DevelopmentSoftware EngineeringVerified engineering case

Portfolio technique bilingue d’Amine Nahli

An administrable showcase to present projects, skills and career path in computer engineering.

Bilingual web application showcasing technical projects, skills, certifications, and professional background. It combines a public Next.js website with a secured administration space, featuring content management, media management, and contact forms.

View source code Open live demo

01. Context & Challenge

Problem addressed

Centralize and publish in a structured, bilingual, and secure manner the achievements, skills, and professional information of an engineer's profile.

02. Engineering Goals

Objectives

Present public content in French and English.

Administer projects, career path, certifications, skills, reviews, and messages.

Protect private content and administrative operations.

Enable search and filtering of public content.

Maintain controlled quality through testing, accessibility audits, and Lighthouse budgets.

03. Architecture & System

Architecture

A Next.js server-rendered application connected to Supabase for data, authentication, RLS policies, and media storage. An administrator space allows for content management; server routes apply validation, origin control, authorization, and cache invalidation.

Architectural components & pipeline

›Web Visitor

›Next.js Middleware (FR/EN language selection or memorization)

›Public Next.js Pages

›Supabase PostgreSQL

›Supabase Storage

›Client Search

›Contact Form

›Next.js API

›Validation, honeypot, HMAC fingerprint, and rate limiting

›contact_messages Table

›Administrator

›Supabase Auth

›admin_users Allowlist

›Next.js Admin Space

›API Routes and Server Actions

›Supabase PostgreSQL & Storage

›Translation and categorization via Groq

›Analytics API

›Daily aggregation PostgreSQL function

›GitHub Actions

›TypeScript, ESLint, Node.js Tests, Supabase Tests, Playwright, and Lighthouse

›Results

04. Metrics & Outcomes

Documented results

The public site offers French and English routes with memorization of the chosen language.

Public projects require validated French and English translations.

The administration manages projects, courses, certifications, media, reviews, and contact messages.

Media is limited to 5 MB and certification PDFs are distributed via temporary signed URL.

The contact form applies server-side validation, a honeypot, and limits of 3 messages per 15 minutes and 10 per day for the same fingerprint.

Data is protected by RLS policies and public content is filtered by publication status.

The TypeScript control passes; the unit test suite contains 40 successful tests out of 41, with a single expected failure related to the CV route behavior.

Back to all projects