How I Built My Portfolio & Blog on Next.js 14, MongoDB Atlas & Wordflow CMS

This article outlines the technology powering my personal site—including Next.js 14, Prisma, MongoDB Atlas, NextAuth, and the in-house CMS I wrote from scratch, Wordflow. I’ve recently extended Wordflow with custom block types, a Safari-style page previewer, built-in video streaming, and an ultra-fast block editor that renders animations at 120 FPS. Below you’ll find every moving part in detail.

1. Front-End Framework — Next.js 14

1.1 Partial Prerendering (PPR)

Static shells for the home page, project grid, and contact form stream in <800 ms. Dynamic bits—latest posts, GitHub stars—hydrate as soon as the server finishes querying Wordflow.

1.2 Server Actions

Newsletter sign-ups, “like” counters, and contact messages are processed directly in Server Actions. The mutation writes through Prisma and returns an optimistic UI patch—no REST overhead.

2. Headless CMS — Wordflow

Wordflow manages all Markdown, images, and structured data. Core capabilities:

Visual Block Editor with drag-and-drop ordering, inline Markdown, and rich-text controls.
GraphQL + REST API with JWT scopes for programmatic access.
Instant Preview running on the same Next.js PPR pipeline as production.

3. Data Layer — MongoDB Atlas + Prisma

Collections for posts, projects, media, comments, and analytics live in a multi-region Atlas cluster. Prisma migrations deploy automatically in the Vercel build step.

4. Authentication & Security

NextAuth v5 with Google & GitHub OAuth.
HTTP-only SameSite Lax JWT cookies (15 min sliding window).
CSP and security headers injected by a global middleware.ts.

5. AI-Assisted Authoring

Each blog post can auto-generate:

a 50-word TL;DR
SEO meta description
social-media thread stubs

All via an OpenAI Function call embedded in a Wordflow Server Action.

6. New Custom Features in Wordflow 0.9

6.1 Custom Blocks Library

I extended Wordflow’s schema with reusable blocks so I can build complex layouts without code changes. Current block types include:

Code Sandbox — embeds live TypeScript or React snippets with syntax highlighting.
Callout — stylized tip/warning boxes with emoji icons.
Image Gallery — responsive grid with lazy-loaded Lightbox.
Timeline — vertical roadmap component used on the Projects page.

6.2 Safari-Style Preview Tab

Inside Wordflow’s editor a mini-Safari viewport shows how a draft page renders on an iPhone 15 Pro at 100 % scale. The preview leverages the same Next.js PPR output, so there’s zero mismatch between draft and production.

6.3 Custom Blog Viewer

The public blog uses a bespoke viewer component that supports:

Dynamic Table of Contents generated from h2/h3 headings.
Code Copy Buttons for every fenced block.
Reading Progress Bar that syncs with scroll position.

6.4 Native Video Support

Videos are uploaded via Wordflow, transcoded on the fly (1080p HLS) using FFmpeg in a background Server Action, and delivered through a signed CloudFront URL. The Markdown renderer swaps the placeholder for an adaptive <video> element at runtime.

6.5 Lottie & Framer-Motion Animations

Interactive headers use Framer Motion; mascot graphics employ Lottie-web, lazy-loaded after DOMContentLoaded. These assets live in a separate JS chunk so first paint stays lightning fast.

6.6 Speed & Caching

Edge Cache — ISR pages are cached on Vercel’s edge network with a 60-second revalidate window.
Client-Side Memoization — SWR persists JSON responses in IndexedDB for offline reading.
PWA — the entire site is installable; all static images ship from the service-worker cache.

7. Internationalisation Workflow

A middleware.ts chooses /en or /el routes based on the Accept-Language header or a user toggle. Wordflow stores separate Markdown files per locale, and next-intl supplies type-safe translation hooks.

8. Developer Experience Enhancements

Tailwind CSS dark-mode driven by CSS variables and class toggles.
Radix UI and shadcn/ui primitives for accessible components.
Turborepo local caching—incremental builds in <5 sec.

9. Observability & CI/CD

GitHub Actions run ESLint, Vitest, and Playwright tests on every push.
Preview deploys on Vercel spin up in <90 seconds; production auto-promotes on merge.
Grafana Cloud displays OpenTelemetry traces; Core Web Vitals reported to Vercel Analytics.

10. Final Thoughts

Leveraging Next.js streaming, MongoDB Atlas, NextAuth security layers, and my Wordflow CMS with custom blocks, Safari-style previews, and built-in video/animation pipelines, I can push a fully localised article from idea to production in under ten minutes. If you’re curious about integrating Wordflow—or want to discuss Partial Prerendering and edge caching—get in touch via the contact form on my site.

Enter a URL above to start browsing

No URL loadedStatus: ReadyReady

Portfolio Panagiotis Pitsikoulis