Skip to main contentSkip to navigation
Soufiane Chaoufi

soufiane chaoufi

Hi! I'm Soufiane. I write code, build interfaces, and love sharing what I learn along the way. This space is equal parts portfolio, blog, and digital notebook where I document my ongoing adventure in web development.

Latest Projects

A selection of my recent work showcasing different technologies and approaches to modern web development.

Personal Portfolio
maintained
Modern portfolio website built with Next.js 16, React 19, and Tailwind CSS featuring a blog system, project showcase, and reading list

Technologies:

Next.js 16React 19TypeScriptTailwind CSS 4Framer Motionshadcn/ui+2 more

Highlights:

  • Next.js 16 App Router with Turbopack
  • Markdown blog with auto-calculated reading time
  • Dark/light theme with system preference detection
Mar 2025
Qyra
ongoing
A QR code generator and scanner app with custom color styling, camera scanning, and content-aware actions

Technologies:

React NativeTypeScriptExpo SDK 54React 19expo-routerexpo-camera+2 more

Highlights:

  • QR generation for URLs, text, WiFi, and vCard contacts
  • Custom foreground and background color pickers with contrast warning
  • Camera-based QR scanner with content-aware actions
Feb 2025
TrueNorth Citizen
ongoing
A React Native app for Canadian citizenship test preparation using adaptive spaced repetition learning

Technologies:

React NativeTypeScriptExpoSQLiteZustandZod+1 more

Highlights:

  • Adaptive spaced repetition algorithm for optimal learning
  • Offline-first architecture with SQLite
  • Progress tracking across question categories
Jan 2025

Latest Articles

Insights, tutorials, and thoughts on modern web development, career growth, and the evolving tech landscape.

technical
Master the fundamental difference between React elements and components, and learn the 'components as props' and 'children as props' patterns.
3/1/2025
8 min
ReactJavaScriptFrontend
Read More
technical
Learn the essential concepts of React re-renders: what triggers them, how they cascade, and when to move state down.
2/10/2025
6 min
ReactPerformanceJavaScriptFrontend
Read More
tools
A practical guide to JavaScript package managers. Compare npm, Yarn, pnpm, and Bun to find the best fit for your project.
1/15/2025
7 min
npmyarnpnpmbunJavaScriptNode.js
Read More

Explore My Work

Discover the projects I've built and the articles I've written about modern web development.