feat: implement blog management with admin interface and API endpoints

Author: sanderhd

app/admin/AdminBlogForm.tsx

@@ -0,0 +1,31 @@
+"use client";
+import React, { useState } from "react";
+
+export default function AdminBlogForm() {
+    const [title, setTitle] = useState("");
+    const [content, setContent] = useState("");
+
+    async function onSubmit(e: React.FormEvent) {
+        e.preventDefault();
+
+        const res = await fetch("/api/admin/blogs", {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({ title, content, published: true }),
+        });
+        if (!res.ok) alert(await res.text());
+        else {
+            setTitle("");
+            setContent("");
+            alert("Saved");
+        }
+    }
+
+    return (
+        <form onSubmit={onSubmit} className="space-y-2">
+            <input value={title} onChange={e=>setTitle(e.target.value)} placeholder="Title" className="border p-2 w-full" />
+            <textarea value={content} onChange={e=>setContent(e.target.value)} placeholder="Content" className="border p-2 w-full" />
+            <button className="border px-3 py-2">Create</button>
+        </form>
+    );
+}

app/admin/page.tsx

@@ -0,0 +1,10 @@
+import AdminBlogForm from "./AdminBlogForm";
+
+export default function AdminPage() {
+    return (
+        <main className="p-6 space-y-6">
+            <h1 className="text-2xl font-bold">Admin</h1>
+            <AdminBlogForm />
+        </main>
+    )
+}

app/api/admin/blogs/route.ts

@@ -0,0 +1,23 @@
+import { prisma } from "@/lib/prisma";
+
+async function requireAdmin() {
+    const isAdmin = true;
+    if (!isAdmin) return new Response("Unauthorized", { status: 403 });
+    return null;
+}
+
+export async function POST(req: Request) {
+    const forbidden = await requireAdmin();
+    if (forbidden) return forbidden;
+
+    const body = await req.json();
+    const blog = await prisma.blog.create({
+        data: {
+            title: body.title,
+            content: body.content,
+            published: body.published ?? true,
+        },
+    });
+
+    return Response.json(blog);
+}

app/api/admin/route.ts

@@ -0,0 +1,10 @@
+import { prisma } from "@/lib/prisma";
+
+export async function GET() {
+    const blogs = await prisma.blog.findMany({
+        where: { published: true },
+        orderBy: { createdAt: "desc" },
+    });
+
+    return Response.json(blogs);
+}

app/api/blogs/route.ts

@@ -1,9 +1,35 @@
 "use client";
 
-import { ArrowRight } from "lucide-react";
 import { motion } from "framer-motion";
+import { useEffect, useState } from "react";
+
+type BlogPost = {
+  id: string;
+  title: string;
+  content: string | null;
+};
 
 export default function Home() {
+  const [posts, setPosts] = useState<BlogPost[]>([]);
+
+  useEffect(() => {
+    let isMounted = true;
+
+    async function loadPosts() {
+      const res = await fetch("/api/blogs", { cache: "no-store" });
+      if (!res.ok || !isMounted) return;
+
+      const data = (await res.json()) as BlogPost[];
+      setPosts(data);
+    }
+
+    loadPosts();
+
+    return () => {
+      isMounted = false;
+    };
+  }, []);
+
   return (
     <div className="relative isolate flex min-h-screen items-center justify-center overflow-hidden">
       <div className="pointer-events-none absolute inset-0 overflow-hidden bg-white dark:bg-gray-950">
@@ -35,10 +61,56 @@ export default function Home() {
           initial={{ opacity: 0, y: 24, filter: "blur(6px)" }}
           animate={{ opacity: 1, y: 0, filter: "blur(0px)" }}
           transition={{ duration: 0.8, ease: [0.22, 1, 0.36, 1] }}
-          className="font-mono text-5xl tracking-tight text-gray-900 select-none sm:text-7xl md:text-8xl lg:text-9xl dark:text-white">
+          className="font-mono text-4xl tracking-tight text-gray-900 select-none sm:text-6xl md:text-7xl lg:text-8xl dark:text-white">
 
-              sander.tf
+              blogs
           </motion.h1>
+
+          <motion.p
+            initial={{ opacity: 0, y: 16 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ delay: 0.15, duration: 0.6 }}
+            className="mt-4 max-w-2xl text-sm text-slate-600 dark:text-slate-300 sm:text-base"
+            >
+              Thoughts, expiriments and logs.
+            </motion.p>
+
+          {posts.length === 0 ? (
+            <motion.div
+              initial={{ opacity: 0, y: 12 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ delay: 0.25, duration: 0.5 }}
+              className="mt-10 rounded-2xl border border-slate-200/700 bg-white/70 p-6 text-slate-700 shadow-sm backdrop-blur dark:border-slate-700/70 dark:bg-slate-900/40 dark:text-slate-200"
+            >
+              No blogs posted.
+            </motion.div>
+          ) : (
+            <div className="mt-10 grid grid-cols-1 gap-4 sm:gap-5">
+              {posts.map((p, i) => (
+                <motion.article
+                  key={p.id}
+                  initial={{ opacity: 0, y: 18 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  transition={{ delay: 0.08 * i, duration: 0.5 }}
+                  className="group rounded-2xl border border-slate-200/70 bg-white/70 p-5 shadow-sm backdrop-blur transition hover:-translate-y-0.5 hover:shadow-md dark:border-slate-700/70 dark:bg-slate-900/40"
+                  >
+                    <h2 className="text-xl font-semibold tracking-tight text-slate-900 dark:text-white">
+                      {p.title}
+                    </h2>
+
+                    <p className="mt-2 line-clamp-3 text-sm leading-6 text-slate-600 dark:text-slate-300">
+                      {p.content ?? "Geen inhoud toegevoegd."}
+                    </p>
+
+                    <div className="mt-4">
+                      <button className="inline-flex items-center rounded-full border border-slate-300 px-3 py-1.5 text-xs font-medium text-slate-700 transition hover:bg-slate-100 dark:border-slate-600 dark:text-slate-200 dark:hover:bg-slate-800">
+                        Read more
+                      </button>
+                    </div>
+                  </motion.article>
+              ))}
+              </div>
+          )}
       </div>
     </div>
   );

app/blogs/page.tsx

@@ -1,6 +1,8 @@
 services:
   db:
     image: postgres:16
+    ports:
+      - "5432:5432"
     container_name: sander-tf-postgres
     restart: unless-stopped
     environment:

docker-compose.yml

@@ -0,0 +1,5 @@
+-- CreateEnum
+CREATE TYPE "Role" AS ENUM ('USER', 'ADMIN');
+
+-- AlterTable
+ALTER TABLE "User" ADD COLUMN     "role" "Role" NOT NULL DEFAULT 'USER';

prisma/migrations/20260305191012_add_role/migration.sql

@@ -0,0 +1,10 @@
+-- CreateTable
+CREATE TABLE "Blogs" (
+    "id" TEXT NOT NULL,
+    "title" TEXT NOT NULL,
+    "content" TEXT,
+    "published" BOOLEAN NOT NULL DEFAULT true,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+
+    CONSTRAINT "Blogs_pkey" PRIMARY KEY ("id")
+);

prisma/migrations/20260305191144_add_blogs/migration.sql

@@ -0,0 +1,19 @@
+/*
+  Warnings:
+
+  - You are about to drop the `Blogs` table. If the table is not empty, all the data it contains will be lost.
+
+*/
+-- DropTable
+DROP TABLE "Blogs";
+
+-- CreateTable
+CREATE TABLE "Blog" (
+    "id" TEXT NOT NULL,
+    "title" TEXT NOT NULL,
+    "content" TEXT,
+    "published" BOOLEAN NOT NULL DEFAULT true,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+
+    CONSTRAINT "Blog_pkey" PRIMARY KEY ("id")
+);