Freelance Project for

Inside AZ Kids Travel: How We Deliver Myth-Filled Adventures with Modern Web Tech

AZ Kids Travel invites children to explore Greece through interactive stories, mini-games and hands-on projects. Under the hood, it runs on a custom stack that mixes Next.js 14, MongoDB Atlas, NextAuth, and an AI-driven content pipeline—all powered by my own headless CMS, Wordflow.

1. Framework Foundation — Next.js 14 App Router

1.1 Partial Prerendering (PPR)

Marketing pages stream a static shell in under a second; dynamic data (new blog posts, shop items) hydrates once the user’s locale is detected. This keeps Core Web Vitals above 90 on budget Android devices.

1.2 Server Actions

Form submissions—newsletter sign-ups, treasure-hunt uploads—hit Server Actions directly. Each action validates data, writes to MongoDB and returns a JSON payload for optimistic UI updates without a dedicated REST layer.

2. Headless CMS — Wordflow (Built from Scratch)

All content—e-books, game metadata, blog posts—lives in Wordflow, my fully managed CMS written in TypeScript. Key features include:

Visual editor with drag-and-drop blocks for story pages.
Code-first collections (Markdown, JSON, images) stored in MongoDB.
GraphQL and REST endpoints secured by JWT scopes.
Instant previews via an embedded Next.js 14 PPR pipeline.

Editors log in at /admin, craft a post in Markdown, attach images, choose Greek or English, and press Publish. Wordflow emits a webhook that triggers an ISR re-render on the public site—no downtime, no manual cache purge.

3. Database Layer — MongoDB Atlas

Data is modeled with Mongoose and deployed on a multi-region Atlas cluster:

Posts – Markdown body, language slug, AI summary, hero image.
Products – e-book SKU, price, Stripe product ID.
Accounts – NextAuth user, OAuth tokens, refresh timestamps.

Change streams broadcast updates to a real-time dashboard for moderators, letting the team confirm that new content hit production within seconds.

4. Authentication & Security

NextAuth v5 with Google OAuth and email-link magic login.
JWT stored in an HTTP-only, SameSite Lax cookie (15-minute TTL, sliding refresh).
Role-based access enforced inside Server Actions and Wordflow queries.
CSP, X-Frame-Options, and Referrer-Policy headers injected by a single middleware.ts.

5. AI-Enhanced Content Pipeline

New blog posts include an auto-generated TL;DR and SEO description. The flow:

Editor finishes a Markdown draft and clicks “Generate Summary.”
Server Action calls the OpenAI API with a prompt tuned for a 40-word recap.
The summary and suggested meta tags return, ready for minor human tweaks.
Both fields save alongside the post and propagate to the public site during ISR.

6. Internationalisation & Markdown Rendering

The site ships in Greek (el) and English (en). Translation middleware inspects the Accept-Language header, rewrites routes, and loads the correct Markdown file. Rendering uses remark-gfm for tables, checklists and footnotes—handy for interactive lesson plans.

7. Observability & Continuous Delivery

GitHub Actions tests: ESLint, Jest, Playwright.
Green builds auto-deploy to Vercel preview URLs; production promotes on merge.
OpenTelemetry traces piped to Grafana Cloud for API latency charts.
Web Vitals reported back to Vercel analytics; target LCP < 1.2 s.

8. Roadmap

Edge-side translation caching once Next.js request memoization lands.
Interactive map built with Mapbox GL and SSR fallback tiles.
Gamified passport system stored in Redis—kids collect stamps for each region they “visit.”

9. Final Thoughts

AZ Kids Travel proves that playful learning can ride on a serious tech backbone. With Next.js 14 streaming, a MongoDB data core, AI-assisted authoring, and my custom Wordflow CMS, every new fairy tale or treasure hunt ships in minutes, not days. If you’d like a closer look—or want Wordflow for your own project—visit panagiotispitsikoulis.gr/wordflow and reach out!

Enter a URL above to start browsing

No URL loadedStatus: ReadyReady

Discovering Greece Through Play: Inside AZ Kids Travel