This is a submission for [Frontend Challenge - Comfort Food Edition, Perfect Landing] 😊

#devchallenge #frontendchallenge #webdev #javascript

Frontend Challenge Perfect Landing Submission 🍲🥧

What I Built

Gnoke Books works like an actual printed magazine on a table — you grab the corner of the page and flip it over.

This issue features Port Harcourt Bole & Fish: roasted plantain, sometimes roasted yam, grilled fish, and a pepper sauce people hardly talk about outside Rivers State. People hand it down through stories. A scrollable landing page would feel like an ad for it. A paginated issue feels like sitting down to read a memory.

The cover art is pure CSS — no image file fetched over the wire, just div boxes and gradients shaped directly in the browser. Under the hood, no frameworks, no build step. Once it loads the first time it packs its own bags into local storage and works offline, like keeping a physical booklet on your desk.

Demo

Live: https://gnoke-books.netlify.app
Repo: https://github.com/edmundsparrow/gnoke-books

Behind The Scene

I build everything on an Infinix phone — no laptop, no desktop DevTools. It's like doing engine work through a glovebox. If something feels heavy or stutters in a single mobile browser tab, it gets thrown out.

I used AI across this build, but it wasn't autopilot. More like getting rough fast drafts from an overeager assistant — my actual job was inspecting every bolt before putting it in the machine. A few things I had to catch and fix:

Broken signpost. The Table of Contents was pointing at a page that had already moved during editing. The AI didn't notice. I had to proof read and correct it.

Conveyor belt with no brake. The auto-scrolling sponsor feed ran forever with nothing to stop it. That's a violation of WCAG 2.2.2 (Web Content Accessibility Guidelines)— Pause, Stop, Hide — which says any content that moves for more than five seconds needs a real control, not just a system-level accessibility setting.
I didn't know the standard by name when I started. I looked it up, understood it, and added pause-on-hover, pause-on-focus, and an explicit button for touch users. Learning what the rule was called made fixing it feel different from just patching a bug.

Locked door for keyboards. The TOC worked fine with a mouse but keyboard users couldn't reach it at all. Caught it on a second pass — added tabindex, role, and Enter/Space handlers so it works properly regardless of input.

AI tossed the bricks onto the pile. I had to lay the mortar and make sure the wall stood straight.