📌 Project Overview
The Blog / News / Magazine template is a content-first publishing platform designed for media brands, editorial teams, and thought leaders who need a powerful, scalable home for their written work. With MDX-rendered articles, Algolia-powered full-text search, newsletter capture, and auto-generated RSS and sitemaps, this template covers every need of a modern digital publication.
From solo bloggers to multi-author editorial teams, the platform supports structured content with authors, categories, tags, and archives — all backed by Supabase for real-time data and Vercel's edge network for globally fast delivery.
🧩 Core Features
1. MDX Article Rendering
Articles are written in MDX with custom component overrides for headings, code blocks, and callout boxes. Each article page includes reading time estimation, a floating table of contents, and social sharing buttons.
2. Algolia InstantSearch
A dedicated Search page with Algolia InstantSearch delivers real-time results with hit highlighting — synced to Supabase via an Edge Function that indexes every new post on insert.
3. Author & Category Profiles
Every author has a dedicated profile page displaying their bio and all their published work. Category and tag archive pages paginate through relevant posts for deep content discovery.
4. Newsletter with Confirmation Email
A newsletter signup form stores subscriber emails in Supabase and triggers a branded confirmation email via Resend — fully customizable and ready for list-building.
5. Auto-Generated RSS & Sitemap
An RSS feed at /feed.xml is generated by a Next.js route handler. next-sitemap auto-generates sitemap.xml on every build, keeping the site continuously optimized for search crawlers.
6. Tailwind Typography Plugin
Article prose is styled with @tailwindcss/typography for beautiful, readable long-form content — ensuring consistent typographic hierarchy across all post formats.
🧰 Tech Stack
| Feature Area | Technology | Purpose |
|---|---|---|
| Frontend Framework | Next.js 14 (App Router) + TypeScript | SSG blog posts, ISR for updates |
| Styling | Tailwind CSS + Typography Plugin | Readable article prose styling |
| Content Authoring | MDX + next-mdx-remote | Rich content with custom components |
| Search | Algolia InstantSearch | Full-text search with hit highlighting |
| Social Sharing | React Share | Per-article social sharing buttons |
| SEO | next-sitemap + Metadata API | Auto-generated sitemap and meta tags |
| Database | Supabase (PostgreSQL) | Posts, authors, categories, tags |
| Auth | Supabase Auth | Editor/admin access |
| Media | Cloudinary / Supabase Storage | Cover images & media hosting |
| Resend | Newsletter confirmation emails | |
| Hosting | Vercel | Edge caching & deployment |
🗂️ Website Structure
| Page / Component | Functionality |
|---|---|
| Home | Featured articles, category nav, latest posts, newsletter CTA |
| Article [slug] | MDX rendering, reading time, TOC, author card, social share |
| Category Archive | Paginated post listing filtered by category |
| Tag Archive | Paginated post listing filtered by tag |
| Author Profile | Bio, social links, and full post history for each author |
| Archive | Chronological all-posts listing with date and category filters |
| Search | Algolia InstantSearch with real-time results and highlighting |
| Newsletter Signup | Email capture form with Supabase storage and Resend confirmation |
🔒 Key Technical Highlights
- Algolia sync Edge Function — auto-indexes new posts on Supabase insert
- MDX custom component overrides: headings, code blocks, callout boxes
- RSS feed route handler at /feed.xml for podcast and news aggregators
- next-sitemap auto-generates sitemap.xml on every production build
- Supabase RLS ensures only editors can write; public read access remains open