All Projects
Full StackProduction
TechPulse
Real-Time Tech News Platform
Next.js 16TypeScriptTailwind CSSNewsAPIZodISREdge MiddlewareWeb VitalsVercel
Overview
A mobile-first, high-performance technology news platform built around fast content delivery, real-time updates, and modern Next.js architecture.
95+
Lighthouse (score)
< 1.2
Target LCP (seconds)
< 0.05
Target CLS (score)
< 80
Client JS (KB)
The Problem
News sites are usually heavy and slow, and live feeds either hammer the origin with polling or push too much JavaScript to the client. I wanted a news experience that felt instant on mobile while staying cheap to operate and easy to reason about.
What I Built
Next.js 16 App Router with React Server Components for static pages, live category feeds refreshed with 15-second polling, ISR + edge caching with stale-while-revalidate, and a type-safe frontend-for-backend API layer validated with Zod.
Architecture
Requests pass through edge middleware (bot detection + security headers), are served from the CDN/ISR cache, and only miss through to the API route when data is stale. NewsAPI.org is fetched in the API route, validated with Zod, and cached for freshness. Web Vitals (CLS, INP, LCP) and client errors are collected via dedicated API routes.
Technical Decisions
- Used React Server Components for static pages to keep client JavaScript below 80KB.
- Chose ISR with 5-minute revalidation plus stale-while-revalidate over a fully custom cache.
- Polled the live feed every 15 seconds for freshness instead of pushing WebSockets.
- Put every external API response behind a Zod-validated, typed frontend-for-backend layer.
- Added Web Vitals + client-error reporting to measure and fix real-user performance.
- Enabled dynamic sitemap, robots, JSON-LD, and edge security headers for SEO and safety.
Freshness vs. cost
Balancing live-updating content against origin load by combining polling, ISR caching, and stale-while-revalidate so readers see fresh data without hammering the API.
Rate limits
NewsAPI.org limits requests per key, so the app had to cache aggressively and de-duplicate concurrent requests to stay within budget.
Client weight
Keeping client-side JavaScript tiny required limiting it to interactive features like search, ticker rotation, and the new-article badge.
My Contribution
- Designed and built the full platform with Next.js 16 App Router and TypeScript.
- Implemented ISR + edge caching with stale-while-revalidate.
- Built the type-safe, Zod-validated API layer and live category feeds.
- Added search (Ctrl+K), article detail with JSON-LD, and dynamic sitemap/robots.
- Instrumented Web Vitals, client errors, and structured logging.
- Added security headers and bot detection in edge middleware; deployed to Vercel.