Blog

PagesNext.jsMDX

Post catalog with featured card, article grid, and categories.

Blog

Thoughts, tutorials, and insights about web development, programming, and technology.

Browse by tag

Architecture2
DevOps1
Node.js1
React1
Security1
Tutorial1

Architecture

Scaling Real-Time Tracking Systems: Lessons from Container Logistics

How we built a real-time container tracking system that handles thousands of concurrent connections with WebSocket and Redis pub/sub.

January 25, 2026 | 9 min read

Architecture

Multi-Tenant SaaS Architecture Lessons

Lessons from building an ePayment platform with tenant isolation.

January 10, 2026 | 10 min read

React

React State Management in 2026: What You Need to Know

A practical comparison of modern state management approaches.

January 20, 2026 | 9 min read

Security

React Security Vulnerabilities Every Developer Should Know

Common security pitfalls in React apps and how to avoid them.

February 5, 2026 | 7 min read

Tutorial

Using Font Awesome 6 Icons in React

Step-by-step guide to integrating Font Awesome with React.

February 1, 2026 | 5 min read

Node.js

Building RESTful APIs with Node.js and Express

A comprehensive guide to building production-ready REST APIs.

December 28, 2025 | 12 min read

DevOps

Designing CI/CD Pipelines for Multi-Environment Deployments

Strategies for managing dev, staging, and production pipelines.

December 15, 2025 | 8 min read

1 // app/blog/page.tsx
2 // This just renders the list — your actual posts are Markdown files in content/blog/ (add/edit those).
3 import { getAllBlogPosts, getAllTags } from "@/features/blog/server/blog-data";
4 import { BlogListTabs } from "@/features/blog/components/blog-list-tabs";
5 import { BlogTagChips } from "@/features/blog/components/blog-tag-chips";
6 import { generatePageMetadata } from "@/server/seo/seo";
7 
8 export const metadata = generatePageMetadata({
9   title: "Blog",
10   description: "Your blog description.",
11   path: "/blog",
12 });
13 
14 export default function BlogPage() {
15   const posts = getAllBlogPosts();
16   const tags = getAllTags();
17 
18   return (
19     <>
20       {/* Hero */}
21       <div className="max-w-2xl">
22         <div className="bg-primary mb-6 h-0.5 w-12" />
23         <h1 className="mb-3 text-3xl font-bold">Blog</h1>
24         <p className="text-muted-foreground">
25           Thoughts, tutorials, and insights about web development.
26         </p>
27       </div>
28 
29       {/* Tabs + Tag Sidebar */}
30       <div className="relative lg:flex">
31         <div className="max-w-5xl min-w-0 flex-1">
32           {/* Mobile: chips above tabs */}
33           <div className="mb-8 lg:hidden">
34             <BlogTagChips tags={tags} />
35           </div>
36           <BlogListTabs posts={posts} />
37         </div>
38 
39         {/* Desktop: chips in sticky sidebar */}
40         <aside className="hidden shrink-0 border-l pl-6 lg:ml-12 lg:block">
41           <nav className="sticky top-20 w-56">
42             <BlogTagChips tags={tags} />
43           </nav>
44         </aside>
45       </div>
46     </>
47   );
48 }
49 
50 // Tag pages live at /blog/tag/[slug] (SSG, generateStaticParams from getAllTags)
51 // Click any tag chip → navigates to that tag's archive page.
52 // Posts are Markdown files in content/blog/ with gray-matter frontmatter.

1	// app/blog/page.tsx
2	// This just renders the list — your actual posts are Markdown files in content/blog/ (add/edit those).
3	import { getAllBlogPosts, getAllTags } from "@/features/blog/server/blog-data";
4	import { BlogListTabs } from "@/features/blog/components/blog-list-tabs";
5	import { BlogTagChips } from "@/features/blog/components/blog-tag-chips";
6	import { generatePageMetadata } from "@/server/seo/seo";
7
8	export const metadata = generatePageMetadata({
9	title: "Blog",
10	description: "Your blog description.",
11	path: "/blog",
12	});
13
14	export default function BlogPage() {
15	const posts = getAllBlogPosts();
16	const tags = getAllTags();
17
18	return (
19	<>
20	{/* Hero */}
21	<div className="max-w-2xl">
22	<div className="bg-primary mb-6 h-0.5 w-12" />
23	<h1 className="mb-3 text-3xl font-bold">Blog</h1>
24	<p className="text-muted-foreground">
25	Thoughts, tutorials, and insights about web development.
26	</p>
27	</div>
28
29	{/* Tabs + Tag Sidebar */}
30	<div className="relative lg:flex">
31	<div className="max-w-5xl min-w-0 flex-1">
32	{/* Mobile: chips above tabs */}
33	<div className="mb-8 lg:hidden">
34	<BlogTagChips tags={tags} />
35	</div>
36	<BlogListTabs posts={posts} />
37	</div>
38
39	{/* Desktop: chips in sticky sidebar */}
40	<aside className="hidden shrink-0 border-l pl-6 lg:ml-12 lg:block">
41	<nav className="sticky top-20 w-56">
42	<BlogTagChips tags={tags} />
43	</nav>
44	</aside>
45	</div>
46	</>
47	);
48	}
49
50	// Tag pages live at /blog/tag/[slug] (SSG, generateStaticParams from getAllTags)
51	// Click any tag chip → navigates to that tag's archive page.
52	// Posts are Markdown files in content/blog/ with gray-matter frontmatter.