01 · Frontend Development ·
How to Structure a React Project for a Real World Application
A practical folder layout for a React and Next.js app: where pages, components, data, and shared helpers belong, with a real project as the example.
Blog
Frontend development, UI and CSS, and technical SEO for people who write the code. The order below is a reading path: structure first, then layout, then the HTML search engines read. RSS feed
02 · UI/UX and CSS ·
CSS Grid vs. Flexbox: Practical Examples
Flexbox lays out one row or column. Grid lays out rows and columns together. Here is how to choose, using a soundboard and a wrapping chip row.
03 · Technical SEO ·
How to Add Open Graph Metadata to a Next.js Website
How to set an Open Graph title, description, URL, and a 1200 by 630 image in the Next.js App Router, then check the tags a crawler will actually see.
04 · UI/UX and CSS ·
How to Convert a Figma Design into Responsive React Components
A workflow for turning a Figma frame into responsive React components: measure spacing and type, name the components, then check the layout at a narrow width.
05 · Frontend Development ·
How to Build Reusable Components with TypeScript
Type the props a component actually accepts, keep variants small, and move a component into a shared folder only when a second screen needs it.
06 · Technical SEO ·
How to Fix Missing Meta Descriptions in Next.js
A missing meta description is a page that never set one, or a template that left it blank. Set it in the App Router and confirm it in the HTML.
07 · UI/UX and CSS ·
How to Build Accessible Forms in React
Labels, keyboard focus, and error text wired with aria-invalid and aria-describedby. A pattern from a real contact form, without relying on placeholder text.
08 · Frontend Development ·
React Server Components vs. Client Components in Next.js
Server Components ship no client JavaScript. Client files opt in with use client. Here is how to choose, and what pulls a whole page onto the client.
09 · UI/UX and CSS ·
A Practical Guide to Responsive Design Breakpoints
Choose breakpoints where the layout breaks, not where a device chart says to. Mobile-first CSS, a fluid card grid, and the few widths worth naming.
10 · Frontend Development ·
7 React Performance Mistakes and How to Fix Them
Seven React performance mistakes that show up in real apps, and how to confirm each one in the profiler before adding memo or rewriting a component.
11 · Technical SEO ·
How to Find and Fix Broken Internal Links
Crawl the site, list internal URLs that 404, fix the href or add a redirect, and check the canonical so repaired links point at the URL you want indexed.
12 · Technical SEO ·
A Developer's Guide to Core Web Vitals
What LCP, INP, and CLS measure, how to read them in the field and in Chrome, and the code-level fixes that move each one. No invented scores.
