Experiment C — Notebook | Dhaifallah Alfarawi

CHAPTER 01

about me, in lined paper

short version: who i am, where i work, what i stand for, and what i can build for you.

years5+

projects12+

clients10+

posts8

i'm Dhaifallah Ahmed Alfarawi, a software engineer based in Riyadh. day to day that's React, Next.js, TypeScript, and Tailwind. when a project needs a full backend, i reach for Laravel.

i care about performance, usability, and Arabic RTL from the start — not bolted on at the end. that's what keeps an interface from cracking after its first year.

where i am

Riyadh, Saudi Arabia

local time

—

~/principles.json

ship:small · often · honest
owns:ui · api · scope
values:clarity · perf · a11y
rejects:scope creep · magic · ceremony
tests:real db · real users
writes:diffs > docs

// services

front-end engineering
React, Next.js, TypeScript, Tailwind.
full-stack work
Laravel, PHP, MySQL, Supabase.
design implementation
pixel-true designs in clean code.
system & UI architecture
component systems, render strategy.
product ownership
requirements, analysis, UML, scope.
SEO & performance
schemas, Core Web Vitals, ranking.

CHAPTER 02

my sticker book

production work — front-end and full-stack apps. every project is a card in the album. tap one to open it.

№ 001

Miyar

Next.jsContext APITailwindcssAPI integaration

A website for investing company

2024peek inside →

№ 002

Get ADX

React.jsHTML5Tailwind CSSCSS3

Dashboard to manage permissions and media content across locations and screens

2025peek inside →

№ 003

Try ADX

React.jsJavaScriptTailwind CSSResponsive Design

A landing page for ADX that showcase the statistics of the company and act as a portfolio

2025peek inside →

№ 004

دار عنبر | DAR ANBAR

Next.jsReact.jsJavaScriptCSS3

A bilingual (Arabic-first / English), RTL-aware digital flagship for a Saudi oud & perfume house. Statically generated, self-hosted fonts, heavy on scroll-driven motion.

2026peek inside →

№ 005

Sadagaat Dashboard

React.jsTypeScriptShadcn UIContext API

A comprehensive admin dashboard for a UK-based charitable organization, enabling complete website management and content control.

2024peek inside →

№ 006

ثمار | Thimar

Next.jsReact.jsTypeScriptTailwind CSS

A concept marketing site for a fictional Shariah-compliant micro-investment platform, built to showcase front-end, motion, RTL, and design-system engineering.

2026peek inside →

№ 007

Samra Roastery · محمصة سمراء

Next.jsTypeScriptCSS3Tailwind CSS

Bilingual (Arabic-first, RTL) marketing site for a Saudi specialty-coffee roastery. Next.js App Router, statically generated per locale.

2026peek inside →

№ 008

Mutlaq Studio · استوديو مطلق

Next.jsReact.jsTypeScriptCSS3

A bilingual (AR/EN, RTL-first) marketing site for a Riyadh architecture studio. Type-led, near-monochrome, with kinetic variable-font headlines and scroll-drawn architectural line-work.

2026peek inside →

№ 009

NeelainCom

LaravelVue.jsMySQLTailwindcss

A Q&A platform similar to StackOverflow for college community knowledge sharing.

2024peek inside →

№ 010

Food Menu App

Next.jsFirebaseTailwindcss

A scalable restaurant menu application with admin dashboard.

Courses Dashboard Template Build with Tailwind CSS, vite, vue 3, and chart.js shapes with RTL Languages Support.

2024peek inside →

№ 012

Image Editor

React.jsNext.jsTypeScriptHTML5

Image Editor to edit image orientation, or adding texts or qr codes

2025peek inside →

CHAPTER 03

things i can actually do

what i use daily, plus the rest of the kit. checked = on the back of my hand. unchecked = i'm getting there (and i'll tell you the truth either way).

the stars

React (Next.js + RSC)
TypeScript
Tailwind CSS
accessibility · WCAG
RTL / LTR support

front-end

HTML, CSS, JavaScript
Vue.js
React Query
Zustand
Framer Motion · GSAP
dnd-kit, i18next

back-end

PHP / Laravel
MySQL
Supabase
Firebase
Edge / Serverless

the kit

Git, GitHub
VS Code, Postman
Vercel, Vite
npm, pnpm
NestJS (learning)

CHAPTER 04

where the hours went

taped-in resume pages. each piece of paper is a stop along the way.

11/2024 — presentnow

front-end engineer

ADX · Riyadh

building a digital signage platform end-to-end — campaign simulator, drag-and-drop playlist tool, and a multi-tenant management dashboard.

✓Architected the 'Try ADx' virtual campaign simulator with client-side aspect-ratio detection for instant media preview on custom illustrations.
✓Built a drag-and-drop playlist and media-creation tool with in-browser image editing and a template maker using dnd-kit.
✓Established Arabic RTL / English LTR support with i18next, following WCAG and semantic HTML across the platform.
✓Integrated the web-based signage player with 6 microservices APIs (content, scheduling, analytics, devices, users, media) with sync + recovery.
✓Constructed the core management dashboard with multi-tenant support and an 8+ role RBAC system with location-based permissions.

ReactNext.jsTypeScriptZustandReact QueryTailwind CSSdnd-kiti18next

№ 01

01/2018 — presentnow

full-stack freelance developer

Independent

end-to-end web apps across diverse domains — frontend-led with full-stack reach, deployed on Vercel and Digital Ocean.

✓Delivered 5+ complete web applications from concept to deployment.
✓Achieved 90+ Lighthouse scores (e.g. Miyar Capital) via dynamic imports, code splitting, image optimization, and DevTools profiling.
✓Cut page load times 30–40% through Core Web Vitals work, lifting search rankings.
✓Built RESTful APIs with Laravel and MySQL with 99.5% uptime.
✓Shipped polished motion and micro-interactions with CSS animations, Framer Motion, and GSAP.

ReactNext.jsTypeScriptLaravelMySQLSupabaseFramer MotionGSAP

№ 02

05/2020 — 11/2024

front-end developer

Meraki UI Lab

crafted reusable, accessible component systems with a consistent brand identity for cross-functional product teams.

✓Increased website traffic by 20% within six months by optimizing page load speed and content clarity.
✓Shipped 150+ reusable components with consistent brand identity, cutting development time by 35%.
✓Applied RTL support for 100% of components with semantic HTML and ARIA, lifting Arabic-speaking engagement by 27%.
✓Delivered interfaces with 95% client satisfaction inside a 4-person cross-functional team.

React.jsTailwindCSSJavaScriptHTML5CSS3WCAG

№ 03

CHAPTER 05