Hacker News Portal
A modern, accessible, and performance-focused Hacker News client built with Next.js (App Router), TypeScript, and Tailwind CSS, integrating live data from the Hacker News Algolia API. This project was designed to simulate real-world frontend architecture decisions, with a strong focus on intentional SSR/CSR usage, scalability, accessibility, and production-ready UI patterns. Key decisions made: • Chose SSR for Home/Category pages — SEO and first paint mattered there • Chose CSR for Search — full page reload on every keystroke would've killed the UX • Built threaded comment trees with ARIA patterns • Hydration-safe dark/light theme — anyone who's dealt with hydration mismatch knows why this matters 🔑 Key Features • Intentional SSR for Home and Category pages to optimize SEO, performance, and first contentful paint • Client-side rendering (CSR) for Search and interactive experiences to enable fast, dynamic updates • Dynamic routes for trending stories, categories, search results, and item details • Threaded, collapsible comment trees with accessible ARIA patterns • Fully responsive layout with mobile-first navigation • System-aware light/dark theme with hydration-safe rendering • Skeleton loaders, loading/error boundaries, and subtle UI animations • Centralized API abstraction layer for consistency and maintainability ♿ Accessibility & UX • Semantic HTML with keyboard-friendly navigation • Screen-reader aware loading, error, and empty states • WCAG-aligned UI decisions across interactive components 🛠 Tech Stack Next.js (App Router) · TypeScript · Tailwind CSS v4 · Framer Motion · REST APIs · Git 🔗 Live Demo: https://hn-news-two.vercel.app 💻 Source Code: https://github.com/lalman-dev/hn-news