All projects
UI Design • Development

AI Dreams

A blog platform built with React and Next.js, featuring dynamic content loading and a clean, minimalist design. Leverages Hygraph's CMS capabilities for efficient content management, with responsive layouts and optimised performance. Implements modern SEO practices and server-side rendering for optimal search engine visibility.

React
Next.js
GraphQL
TailwindCSS
Hygraph

Why it exists

A blog exploring philosophy, society and consciousness through a materialist lens. It is also where the transcripts of the Dev Camp talks are published.

What it does

  • A home feed with featured posts and paginated loading, plus category and tag archives.
  • Post pages with cover images, related posts and syntax-highlighted code blocks.
  • Static pages, such as a glossary and book recommendations, written in Markdoc with custom components.
  • An RSS feed, a sitemap and a public data dashboard of top posts, category counts and yearly charts.

How it's built

  • A Next.js and TypeScript site with posts managed in Hygraph over GraphQL: drafts in development, published content in production, and previews gated by a shared secret.
  • Post view tracking in Supabase feeds the data dashboard.
  • Vitest and Testing Library cover units, API routes and components with the CMS mocked, and Playwright runs end-to-end smoke tests against a production build.
Screenshot 1 of AI DreamsScreenshot 2 of AI DreamsScreenshot 3 of AI Dreams