Frontend
The part of the app people see: React, Vite, Tailwind and shadcn/ui, the browser errors that break it, and making it fast, installable and pleasant on a phone.
39 posts · page 2 of 2
What Is shadcn/ui? The Component Collection Behind Lovable and v0 Apps
shadcn/ui isn't a normal component library — it copies component code into your project so you own it. What shadcn/ui is, how the CLI works, what's in a components/ui folder, why AI builders use it, and how to customise and update it.
What Is a PWA? Progressive Web Apps Explained for Beginners
A progressive web app is a website that can be installed like an app, work offline and send notifications. What a PWA needs (manifest, service worker, HTTPS), what it can and can't do on iPhone and Android, and when it's a better first step than an app-store app.
How to Turn Your Web App Into a Mobile App (Without Rebuilding It)
Three realistic paths from a web app to a phone app: make it a PWA, wrap it with Capacitor for the App Store and Google Play, or rebuild with React Native. Costs, what Apple rejects, what you need (yes, a Mac), and how to choose.
robots.txt and sitemap.xml Explained: A Beginner's Guide
Two small files that tell search engines (and AI crawlers) what to crawl and what exists on your site. How robots.txt and sitemap.xml work, examples, the robots.txt mistake that hides your whole site, why Disallow doesn't remove pages from Google, and how to generate both in Next.js.
React App Shows a Blank Page After Deploying? Here's How to Fix It
Works locally, white screen in production. The usual causes of a blank page after deploying a React or Vite app — wrong base path, missing environment variables, a JavaScript crash, routing, caching — and how to diagnose each in two minutes with DevTools.
How to Optimize Images for the Web: Formats, Sizes, and Lazy Loading
Images are usually the heaviest part of a page. Which format to use (WebP vs AVIF vs JPEG vs PNG vs SVG), how big to make them, responsive images with srcset, lazy loading done right, and the one image you should never lazy-load.
Next.js Hydration Errors: What They Mean and How to Fix Them
"Hydration failed because the server rendered HTML didn't match the client" — what hydration is, the usual culprits (dates, random values, window, browser extensions, invalid HTML, theme switchers), and the correct fix for each.
How to Add Dark Mode to Your Website (CSS, Tailwind, and a Toggle)
Add dark mode the right way: follow the system setting with prefers-color-scheme, organise colours with CSS variables, use Tailwind's dark: variant, add a toggle that remembers the choice, and avoid the white flash on page load.
Core Web Vitals Explained: LCP, INP, and CLS for Beginners
Google's Core Web Vitals measure how fast, responsive and stable your pages feel. What LCP, INP and CLS mean, the thresholds for "good", how to check your scores, the difference between lab and field data, and the usual fixes.
How to Add a Contact Form to Your Website (With or Without a Backend)
Four ways to make a contact form actually deliver messages — form services, your host's built-in forms, Google Forms, and your own backend route — plus how to stop spam and why you should never put an email API key in frontend code.
"Cannot Read Properties of Undefined": What It Means and How to Fix It
The most common JavaScript error, explained for beginners: what "TypeError: Cannot read properties of undefined (reading 'map')" means, the five usual causes, how to find the exact line, and the right fixes — not just sprinkling ?. everywhere.
Async/Await in JavaScript, Explained Simply (With the Mistakes AI Code Makes)
Why some JavaScript code has to wait, what a Promise is, how async and await work, how to handle errors, how to run things in parallel, and the common async bugs — like the missing await — that show up in AI-generated code.
How to Add a Favicon to Your Website (HTML, Next.js, and Vite)
The small set of favicon files a modern site actually needs, the HTML tags to add, the Next.js and Vite shortcuts, the sizes Google and iPhones use, and why your new favicon still isn't showing.
How to Add a CAPTCHA to Your Forms (Cloudflare Turnstile, reCAPTCHA, hCaptcha)
Stop bots spamming your signup, login and contact forms. How modern CAPTCHAs work, Turnstile vs reCAPTCHA vs hCaptcha, a working Cloudflare Turnstile example with the server-side check most tutorials forget, and when a CAPTCHA isn't the right tool.
Why Refreshing Your React Page Gives a 404 (and How to Fix It on Any Host)
Your single-page app works when you click around but shows 404 Not Found when you refresh or share a link. Why client-side routing causes it, and the exact fix for Nginx, Caddy, Netlify, Vercel, GitHub Pages and Express.