Type-safe from schema to screen.

I’m Brahim, a senior fullstack developer with more than six years of experience. I work with TypeScript, Nuxt and NestJS, sharing API types between the server and the interface so incompatible changes show up during type checking.

Download CV See the projects

Based in Algiers, Algeria (UTC+1). I work remotely.

QueryWeave landing page: a query string decoded into typed state

Typed URL state for the browser, the server and tests.Read the case study

Open source. Five projects I build and maintain in public.

Each one has a live site, documentation and a test suite. QueryWeave, Taqwim and vueye-table keep their logic in a framework-independent core, with thin bindings on top.

Vuestrata

AlphaSince 2021 111 stars

A Vue 3 application starter that checks its own conventions.

A template for starting Vue 3 applications. Six custom lint rules and four architecture tests check its conventions, and generators write the files and registry entries for a new module, page, theme or component. It ships 12 themes over one set of components.

67 wrapper components over Reka UI, in English, French and Arabic (RTL)
12 themes that change colours, radii and elevation; eight also change the typeface
Authentication through pluggable adapters: mock, JWT and OAuth

Read the case study Live site Source

Vuestrata landing page with a code window beside the headline

terminal

$ vpr gen:module payments  # schema, queries, mocks, pages, i18n
$ vpr gen:page payments refunds  # wired into the module's routes
$ vpr gen:theme midnight  # registered in all four places
$ vpr gen:component Tag  # a Ui* wrapper

QueryWeave

Experimental betaSince 2026

Typed URL state for the browser, the server and tests.

A URL state engine that does not depend on any framework. You describe the query parameters once as a typed model, and the same model decodes, validates and encodes them in the browser, on the server and in tests. An invalid value falls back to its default and is reported, instead of breaking the page.

9 packages: core, browser, server, Node.js, Standard Schema, testing, Vue, Vue Router and Nuxt
The core is 7.4 kB min+gzip, and a script checks each package against a size budget
Tested in real browsers: Chromium, Firefox and WebKit

Read the case study Live site Source

filters.ts

const filters = defineQueryModel({
  search: param.text().optional(),
  page: param.integer({ min: 1 }).default(1),
  sort: param.choice(['name', 'price']).default('name'),
})

const runtime = createQueryRuntime({ model: filters, adapter })
await runtime.update({ search: 'vue', page: 1 })

Rezuma

LiveSince 2026

A resume builder for PDFs with selectable text.

Build a resume in your browser without an account. Rezuma creates PDFs with embedded fonts and selectable text. A test script uses pdf.js to check text extraction across nine sample exports.

A test script exports nine PDFs, extracts their text with pdf.js and checks every field
Arabic is shaped and reordered inside the PDF, not only mirrored on screen
Live checks for parseable dates, timeline gaps, quantified bullets and keywords

Read the case study Live site Source

Rezuma landing page: a typeset resume next to the text extracted from it

terminal

$ pnpm verify:pdf

AR / classic / sidebar
  file        ar-classic-sidebar.pdf (65 KB, 1 page)
  extracted   2563 chars
  checks      51/51 found
  order       summary → experience → skills → education
  arabic      1554 letters (61% of the text)

Taqwim

BetaSince 2024

Hijri dates, and one calendar for five frameworks.

Hijri date utilities for the Umm al-Qura, Islamic Civil and Islamic TBLA calendars, and an accessible calendar component. The calendar’s behaviour is written once as a framework-independent state machine, with bindings for Vue, React, Svelte, Solid and Angular.

13 packages, released together under one version
33 themes, each checked against WCAG AA contrast by a unit test
The Umm al-Qura table covers 1343 to 1500 AH and throws an error outside that range

Read the case study Live site Source

Taqwim documentation home with a live Hijri calendar

dates.ts

import { toHijri, formatHijriDate } from '@taqwim/core'

toHijri(new Date('2024-03-11'))
// { hy: 1445, hm: 9, hd: 1 }

formatHijriDate({ hy: 1445, hm: 9, hd: 1 }, 'iYYYY/iMM/iDD', 'ar')
// ١٤٤٥/٠٩/٠١

vueye-table

v3 alphaSince 2018 111 stars

Data tables and spreadsheets for Vue.

A table library for Vue that separates data operations from rendering. A framework-independent engine handles search, filtering, sorting, pagination, selection, editing and undo. On top of it come Vue composables, headless components, styled components and a spreadsheet.

Six packages, from the engine to a complete table component; one install covers all of them
Accessible markup: aria-sort, aria-rowindex and keyboard navigation in the grid
First released in 2018; version 3 is a full rewrite

Read the case study Live site Source

vueye-table documentation home, above a spreadsheet grid

UsersTable.vue

<script setup lang="ts">
const columns = defineColumns<User>([
  { id: 'name.first', header: 'First name' },
  { id: 'age', align: 'end', format: age => `${age} years` },
  { id: 'city' },
])
</script>

<template>
  <VueyeTable v-model:selected="selected" :data="users" :columns="columns" selectable />
</template>

How I build. One contract, shared by the server and the client.

I write an API as a contract first, with oRPC and Zod. A NestJS controller implements that contract and a Nuxt client is built from it, so both sides take their types from one file. Here is one route, followed through four files.

Step 1 of 4Contract

Write the contract

The route is described once, in a package of its own: method, path, and a Zod schema for what goes in and what comes out. Nothing in this file knows about the server or the client.

src/index.tsts

import { oc } from '@orpc/contract'
import { z } from 'zod'

export const customerSchema = z.object({
  id: z.uuid(),
  name: z.string().min(1).max(200),
  email: z.email().nullable(),
  status: z.enum(['active', 'archived']),
})

export const ListCustomersInput = z.object({
  status: customerSchema.shape.status.default('active'),
})

export const contract = {
  customers: {
    list: oc
      .route({ method: 'GET', path: '/customers', summary: 'List customers' })
      .input(ListCustomersInput)
      .output(z.array(customerSchema)),
  },
}

Step 2 of 4Server

Implement it in a controller

The NestJS controller implements the contract and passes validated input to the handler. Type checking flags return types that do not match the contract; Zod validates the values at runtime.

customers/customers.controller.tsts

import { Controller, Inject } from '@nestjs/common'
import { Implement, implement } from '@orpc/nest'
import { contract } from '@repo/api-contract'
import { CustomersService } from './customers.service'

@Controller()
export class CustomersController {
  constructor(
    @Inject(CustomersService) private readonly customers: CustomersService,
  ) {}

  @Implement(contract.customers)
  customersRoutes() {
    return {
      list: implement(contract.customers.list).handler(({ input }) =>
        this.customers.list(input),
      ),
    }
  }
}

Step 3 of 4Client

Build the client from it

A Nuxt plugin creates the API client from the same contract. Its route, input and output types come from that file, without a code-generation step.

plugins/orpc.tsts

import { createORPCClient } from '@orpc/client'
import type { ContractRouterClient } from '@orpc/contract'
import type { JsonifiedClient } from '@orpc/openapi-client'
import { OpenAPILink } from '@orpc/openapi-client/fetch'
import { contract } from '@repo/api-contract'

export type ApiClient = JsonifiedClient<ContractRouterClient<typeof contract>>

export default defineNuxtPlugin(() => {
  const link = new OpenAPILink(contract, {
    url: useRuntimeConfig().public.apiUrl,
  })
  const api: ApiClient = createORPCClient(link)

  return { provide: { api } }
})

Step 4 of 4Page
Call it from a page
The page calls the route and receives typed data. Rename email to contact_email in the contract, and the type checker flags customer.email in this template. The error points to the field that needs updating.
pages/customers.vuevue
```
<script setup lang="ts">
const { $api } = useNuxtApp()

const { data: customers } = await useAsyncData('customers', () =>
  $api.customers.list({ status: 'active' }),
)
</script>

<template>
  <ul>
    <li v-for="customer in customers" :key="customer.id">
      <strong>{{ customer.name }}</strong>
      <span>{{ customer.email }}</span>
    </li>
  </ul>
</template>
```
After renaming email to contact_email in the contract
Property 'email' does not exist on type '{ id: string; name: string; contact_email: string | null; status: "active" | "archived"; }'. ts(2339)

packages/api-contract/src/index.tsts

import { oc } from '@orpc/contract'
import { z } from 'zod'

export const customerSchema = z.object({
  id: z.uuid(),
  name: z.string().min(1).max(200),
  email: z.email().nullable(),
  status: z.enum(['active', 'archived']),
})

export const ListCustomersInput = z.object({
  status: customerSchema.shape.status.default('active'),
})

export const contract = {
  customers: {
    list: oc
      .route({ method: 'GET', path: '/customers', summary: 'List customers' })
      .input(ListCustomersInput)
      .output(z.array(customerSchema)),
  },
}

Experience. More than six years of professional work, most recently on a fintech ERP.

Work

Freelance CTTP Makane Naseej Edraak Atqan

Study

Prep. classesBachelor'sMaster's

Dec 2023 – Feb 2026
2 yrs, 3 mths · Saudi Arabia · Remote
Senior Fullstack Developer
Atqan Gulf Arab Co. Financial Technology Company
Nuxt layers
50+ Nuxt layers
PostgreSQL tables
200+ PostgreSQL tables
financial modules
3 financial modules
- Led the migration of a legacy financial management codebase into a fullstack TypeScript monorepo of 2 apps, built on Turborepo and pnpm workspaces.
- Architected an API layer with shared TS-Rest contracts, giving the Nuxt 3 frontend and NestJS controllers the same request and response types.
- Designed and shipped a modular Nuxt 3 frontend spanning 50+ layers, built on the Vue 3 Composition API and Tailwind CSS, for a multi-module fintech ERP.
- Built and maintained the NestJS and TypeORM services carrying the financial domain logic across invoicing, accounting and reporting.
- Modelled and maintained the PostgreSQL database: 200+ tables across 3 schemas behind the TypeORM entity layer.
- Established the testing practice from scratch, with Vitest for unit tests and Playwright for end-to-end coverage.
- Nuxt 3
- Vue 3
- NestJS
- TypeORM
- PostgreSQL
- TS-Rest
- Turborepo
- Vitest
- Playwright
Oct 2023 – Dec 2023
3 mths · Algiers
Front-End Developer
Edraak Technologies
- Built an e-commerce site for mobility chairs and accessories with Vue 3, Nuxt and the Composition API.
- Developed the company's corporate website, with responsive layouts verified across browsers.
- Vue 3
- Nuxt
Jul 2022 – Apr 2023
10 mths · Saudi Arabia · Remote
Front-End Developer
Naseej for Education Solutions
- Developed student portal interfaces in React and TypeScript, implementing the screens behind academic workflows.
- Built the front-end components of a training management application and integrated them with REST APIs.
- React
- TypeScript
Jul 2019 – May 2022
2 yrs, 11 mths · Algiers
Fullstack Developer
Makane Consulting Group
- Architected the React frontend of an ERP for sports associations and clubs, across membership management, scheduling and financial tracking.
- Developed backend services with Spring Boot and REST APIs, and designed the PostgreSQL schemas behind them.
- Delivered an additional client-facing Vue.js project in a separate business domain.
- React
- Spring Boot
- PostgreSQL
- Vue.js
Feb 2019 – Jul 2019
6 mths · Algeria
Fullstack Developer, Master's internship
National Society of the Technical Control of Public Works (CTTP)
- Designed and built a road maintenance management system, as a Master's degree project, to track and plan infrastructure repairs.
- Vue.js frontend, Laravel backend, and PostGIS for geospatial storage and map-based visualisation.
- The prototype was adopted internally by the engineering team to assess road conditions and prioritise maintenance.
- Vue.js
- Laravel
- PostGIS
Jul 2018 – Jun 2021
3 yrs · Algeria
Freelance Fullstack Developer
Self-employed
- Delivered 3 client products: a sales management app, a delivery management dashboard and a multimedia graphic keyboard, with Vue.js, TypeScript, Tailwind CSS and Laravel.
- Built a real-time dashboard for a pharmaceutical event with Nuxt and Firebase.
- Vue.js
- TypeScript
- Tailwind CSS
- Laravel
- Nuxt
- Firebase

Education

Sep 2017 – Jul 2019
Master's degree in Software Engineering
University of Science and Technology Houari Boumediene (USTHB) · Bab Ezzouar, Algiers
Sep 2015 – Jul 2017
Bachelor's degree in Information Systems and Software Engineering
University of Science and Technology Houari Boumediene (USTHB) · Bab Ezzouar, Algiers
Sep 2012 – Jul 2015
Integrated preparatory classes in Computer Science
National Higher School of Computer Science (ESI) · Oued Smar, Algiers
Jun 2012
Baccalaureate in Technical Mathematics, Electrical Engineering
Addaoui l'Hbib Secondary School · Medrissa, Tiaret

Languages

ArabicNative
EnglishProfessional
FrenchProfessional

Stack. What I use, and where I have used it.

Interface

Pages, components and styling.

Vue 3
Atqan, Edraak, all five open-source projects
Nuxt
Current work, Atqan (50+ layers), Edraak, this site
React
Naseej, Makane, Taqwim adapter
Tailwind CSS
Atqan, freelance work, Vuestrata
Reka UI
Vuestrata (67 wrapper components)
Accessibility
Taqwim (WCAG AA tests), vueye-table
RTL & i18n
Taqwim, Rezuma, Vuestrata, this site

State

Client state and server data.

Composition API
Atqan, Edraak
Pinia
Vuestrata stores
TanStack Query
Vuestrata data modules
URL state
QueryWeave

Contract

Types and schemas shared by client and server.

TypeScript
Atqan, Naseej, freelance work, all five projects
oRPC
Current work
Zod
Current work, Vuestrata validation
Standard Schema
QueryWeave adapter
TS-Rest
Atqan API layer

Services

APIs and business logic.

NestJS
Current work; Atqan invoicing, accounting and reporting
Node.js
Atqan, QueryWeave Node adapter
Spring Boot
Makane ERP
Laravel
CTTP, freelance work
REST APIs
Naseej, Makane, Atqan

Data

Databases and queries.

PostgreSQL
Atqan (200+ tables), Makane
Drizzle
Current work
TypeORM
Atqan entity layer
PostGIS
CTTP road maintenance system
Firebase
Real-time event dashboard

Tooling

Monorepo, build and CI.

Turborepo
Atqan monorepo
pnpm workspaces
Atqan, QueryWeave, Taqwim
Vite & Vite+
Taqwim, Vuestrata, Rezuma
Oxlint
Vuestrata linting
GitHub Actions
CI for Vuestrata, Taqwim and QueryWeave
Docker
Vuestrata multi-stage build
Git
Every project

Quality

Automated tests.

Vitest
Atqan (introduced from scratch), QueryWeave, vueye-table, Vuestrata
Playwright
Atqan, QueryWeave, Taqwim, Vuestrata
MSW
Vuestrata mocks and contract tests
axe
Taqwim end-to-end tests

Also used in my open-source projects

Svelte 5Taqwim adapter
SolidTaqwim adapter
AngularTaqwim adapter
WebGL2 & CanvasRezuma landing page effects
jsPDF & pdf.jsRezuma PDF export and text extraction
Astro StarlightQueryWeave documentation

Languages

TypeScript
JavaScript
Java
PHP
SQL
HTML
CSS

Community. Top all-time answerer in Stack Overflow’s Vue.js 3 tag, by answer score.

I’ve written 2,229 answers on Stack Overflow since 2017. My profile has 90,059 reputation and 19 gold badges. I also rank second in the Vue.js tag’s all-time answerer list.

Answers by tag

Stack Overflow profile (opens in a new tab)Figures as of October 12, 2026

Most upvoted answers

225
Vue.js 3 Event Bus (opens in a new tab)
115,127 views Accepted
123
Props typing in Vue.js 3 with TypeScript (opens in a new tab)
79,514 views
88
Vue.js 3 and TypeScript: Property '$store' does not exist on type 'ComponentPublicInstance' (opens in a new tab)
64,847 views Accepted
82
How to format Vuetify data table date column? (opens in a new tab)
54,182 views Accepted
80
Vue Composition API: Defining emits (opens in a new tab)
149,940 views

On GitHub: 776 stars across 38 public repositories, and 207 followers.

Writing

All articles

Contact. Email is the fastest way to reach me.

If you are hiring for a senior fullstack role, send me a few lines about the team and the product.

brahim.boussadjra@gmail.com

Download CV

Or write here

Type-safe from schema to screen.

Vuestrata

QueryWeave

Rezuma

Taqwim

vueye-table

Write the contract

Implement it in a controller

Build the client from it

Call it from a page

Senior Fullstack Developer

Front-End Developer

Front-End Developer

Fullstack Developer

Fullstack Developer, Master's internship

Freelance Fullstack Developer

Education

Languages

Also used in my open-source projects

Languages

Most upvoted answers

Writing

Contact. Email is the fastest way to reach me.