Edition: Web Edition Digital Archive

The Dev Chronicle

Independent Reporting on the Modern Web Ecosystem

Breaking

Frontend Engineer & QA Ships Products That Actually Work

By Praise Afolabi | Frontend Engineer & QA 3 MIN READ

I build accessible, pixel-perfect experiences for the web and I test them properly.

I'm a frontend engineer with an expertise in building accessible, pixel-perfect user interfaces. I take pride in crafting thoughtful, inclusive products and have a sharp eye for the little details that elevate user experience. I do my best work at the intersection of design and engineering, where great UX meets clean, scalable code.

BREAKING

GbejaQR

A comprehensive web application that solves the security risks associated with malicious QR codes by providing a real-time verification and protection platform. Features include AI-powered threat detection for phishing and malware, deep link analysis with redirect exposure, and a privacy-first scanning engine optimized for mobile performance.

| BY Praise Afolabi | Frontend Engineer & QA

NEXT.JS, FRAMER MOTION, TAILWIND CSS

Ink particle effect

T his portfolio showcases a decade of building web experiences that solve real problems. Specializing in React, Node.js, and TypeScript, this full-stack engineer has shipped products that scale, from startups to enterprise platforms.

TOP STORIES

A1 | TECHNOLOGY

Habit Tracker PWA

TECH STACK:

NEXT.JS · TYPESCRIPT · TAILWIND CSS · VITEST · PLAYWRIGHT · REACT TESTING LIBRARY · PWA

A spec-driven Progressive Web App built from a formal Technical Requirements Document. The primary focus was engineering discipline — strict data contracts, deterministic route behavior, and a full multi-layer test suite spanning unit, integration, and end-to-end layers. Features include local authentication, habit management with streak tracking, and offline support via a custom service worker.

Next.jsTypeScriptTailwind CSS
B2 | DESIGN

AI Page Summarizer

TECH STACK:

CHROME EXTENSION · MANIFEST V3 · JAVASCRIPT · GEMINI API · SERVICE WORKER · CHROME STORAGE API

A Chrome Extension (Manifest V3) that extracts content from any webpage and generates structured AI summaries using the Gemini API. Built with a security-first architecture — the API key lives exclusively in the background service worker, never exposed to content scripts or the popup. Features include bullet-point summaries, key insights, estimated reading time, and a 24-hour URL-based cache to prevent duplicate API calls.

Chrome ExtensionManifest V3JavaScript
C3 | BUSINESS

MutterBox — E2EE Messaging

TECH STACK:

NEXT.JS · TYPESCRIPT · TAILWIND CSS · WEB CRYPTO API · INDEXEDDB · WEBSOCKET · RSA-OAEP · AES-GCM

A secure end-to-end encrypted messaging application where the server never sees plaintext. Built with the Web Crypto API using hybrid encryption — AES-GCM for message encryption and RSA-OAEP for key exchange. Private keys are generated on the client, wrapped with PBKDF2-derived keys, and stored exclusively in IndexedDB. Features real-time messaging via WebSocket, automatic key restoration on new devices, and optimistic UI updates.

Next.jsTypeScriptTailwind CSS
About The Author
"Code is not just logic; it is a narrative of human intent, etched into the digital fabric of our modern society."

I'm a frontend engineer with an expertise in building accessible, pixel-perfect user interfaces. I take pride in crafting thoughtful, inclusive products and have a sharp eye for the little details that elevate user experience. I do my best work at the intersection of design and engineering, where great UX meets clean, scalable code.

Currently, I'm on the Engineering team at Cleaques, where I'm building the frontend for a diaspora-focused travel platform. I drive engineering efforts across components, tooling, and patterns, partnering closely with designers and engineers to ensure accessibility is built into the foundation of our products.

Previously, I've worked across a wide range of environments, from large fintech organizations to startups and non-profit platforms — including building the IAIIEA platform, a full-featured Next.js 14 web application for an international integrity and evaluation agency, complete with an admin dashboard, members-only portal, payment processing, and event scheduling.

I was also a two-time finalist at HNG Internship, one of Africa's most competitive virtual tech programs, which pushed me to build fast, think clearly under pressure, and collaborate across distributed teams. I also take testing seriously as part of my engineering practice, I've built multi-layer test suites using Vitest, Playwright, and React Testing Library, covering unit, integration, and end-to-end layers, including offline PWA behavior.

In my spare time, you can usually find me drawing, flipping through a self-development book, running a career mode on FIFA, or watching Barcelona, because some of us just never gave up on them.

Journalistic Beats & Expertise

[JavaScript (ES6+)][TypeScript][HTML5][CSS3][Next.js][React.js][React Native][Framer Motion][Chakra UI][Tailwind CSS][Chrome Extensions (MV3)][Zustand][React Context][React Query]
Top Stories
TECHNOLOGY A1

GbejaQR

Reported by the Engineering Desk • Next.js, Framer Motion, Tailwind CSS

A comprehensive web application that solves the security risks associated with malicious QR codes by providing a real-time verification and protection platform. Features include AI-powered threat detection for phishing and malware, deep link analysis with redirect exposure, and a privacy-first scanning engine optimized for mobile performance.

DESIGN B1

Habit Tracker PWA

Reported by the Engineering Desk • Next.js, TypeScript, Tailwind CSS

A spec-driven Progressive Web App built from a formal Technical Requirements Document. The primary focus was engineering discipline — strict data contracts, deterministic route behavior, and a full multi-layer test suite spanning unit, integration, and end-to-end layers. Features include local authentication, habit management with streak tracking, and offline support via a custom service worker.

BUSINESS C1

AI Page Summarizer

Reported by the Engineering Desk • Chrome Extension, Manifest V3, JavaScript

A Chrome Extension (Manifest V3) that extracts content from any webpage and generates structured AI summaries using the Gemini API. Built with a security-first architecture — the API key lives exclusively in the background service worker, never exposed to content scripts or the popup. Features include bullet-point summaries, key insights, estimated reading time, and a 24-hour URL-based cache to prevent duplicate API calls.

TECHNOLOGY A2

MutterBox — E2EE Messaging

Reported by the Engineering Desk • Next.js, TypeScript, Tailwind CSS

A secure end-to-end encrypted messaging application where the server never sees plaintext. Built with the Web Crypto API using hybrid encryption — AES-GCM for message encryption and RSA-OAEP for key exchange. Private keys are generated on the client, wrapped with PBKDF2-derived keys, and stored exclusively in IndexedDB. Features real-time messaging via WebSocket, automatic key restoration on new devices, and optimistic UI updates.

DESIGN B2

Invoice app

Reported by the Engineering Desk • Next.js, Framer Motion, Tailwind CSS

A comprehensive web application that solves the challenge of fragmented invoice management for freelancers and small businesses. Features include real-time total calculations, status-based filtering, local data persistence via localStorage, and a fully responsive design with native dark mode support.

BUSINESS C2

Vendra (Coming soon)

Reported by the Engineering Desk • Prism, PostgreSQL, Next.js

A comprehensive multi-vendor e-commerce platform that streamlines the connection between independent sellers and customers through a unified marketplace. Features include a dedicated vendor dashboard with real-time sales analytics using Recharts, advanced product filtering and search, secure multi-role authentication with Next-Auth, and a complete order management system integrated with Prisma and PostgreSQL.

Letters To The Editor

"Have a story tip, job opportunity, or collaboration proposal? The editorial desk is open."