Top 5 Overengineered (but cool) Features On My Website

A bit overkill, but I like it. Hopefully this will get me hired somewhere.

1. Fully Featured Headless Gravity Forms Components

Forms are essential to any website. But a sane developer would have just made a simple contact form with a couple of inputs and called it a day. Not me.

I pulled the Gravity Forms components straight from client projects I have worked on, upgraded them to use shadcn/ui components and sonner for toast notifications, and built a fully headless, fully typed form system that supports every Gravity Forms field type.

Supported input types:

Address
Checkbox
Date
Email
MultiSelect
Name
Phone
Radio
Select
TextArea
Text
Website
Number
FileUpload
HTML

The whole thing is driven by a custom hook that handles form state, validation, and submission:

useGravityForm.tsx:

import { useState, useCallback } from "react";
import { toast } from "sonner";
 
interface GravityFormField {
  id: number;
  type: string;
  label: string;
  isRequired: boolean;
  choices?: { text: string; value: string }[];
}
 
interface UseGravityFormProps {
  formId: number;
  fields: GravityFormField[];
}
 
export function useGravityForm({ formId, fields }: UseGravityFormProps) {
  const [formData, setFormData] = useState<Record<string, string>>({});
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [errors, setErrors] = useState<Record<string, string>>({});
 
  const handleChange = useCallback((id: number, value: string) => {
    setFormData((prev) => ({ ...prev, [id]: value }));
    setErrors((prev) => {
      const next = { ...prev };
      delete next[String(id)];
      return next;
    });
  }, []);
 
  const validate = useCallback(() => {
    const newErrors: Record<string, string> = {};
    for (const field of fields) {
      if (field.isRequired && !formData[field.id]) {
        newErrors[field.id] = `${field.label} is required`;
      }
    }
    setErrors(newErrors);
    return Object.keys(newErrors).length === 0;
  }, [fields, formData]);
 
  const handleSubmit = useCallback(async () => {
    if (!validate()) return;
 
    setIsSubmitting(true);
    try {
      const response = await fetch("/api/gravity-forms/submit", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ formId, fieldValues: formData }),
      });
 
      if (!response.ok) throw new Error("Submission failed");
 
      toast.success("Form submitted successfully!");
      setFormData({});
    } catch {
      toast.error("Something went wrong. Please try again.");
    } finally {
      setIsSubmitting(false);
    }
  }, [formId, formData, validate]);
 
  return { formData, errors, isSubmitting, handleChange, handleSubmit };
}

EmailField.tsx:

import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
 
interface EmailFieldProps {
  id: number;
  label: string;
  isRequired: boolean;
  value: string;
  error?: string;
  onChange: (id: number, value: string) => void;
}
 
export function EmailField({
  id,
  label,
  isRequired,
  value,
  error,
  onChange,
}: EmailFieldProps) {
  return (
    <div className="space-y-2">
      <Label htmlFor={`field-${id}`}>
        {label}
        {isRequired && <span className="text-destructive"> *</span>}
      </Label>
      <Input
        id={`field-${id}`}
        type="email"
        value={value}
        onChange={(e) => onChange(id, e.target.value)}
        className={error ? "border-destructive" : ""}
      />
      {error && <p className="text-sm text-destructive">{error}</p>}
    </div>
  );
}

2. Auth Integration with Auth.js v5 Beta with Credentials & GitHub Providers

Why does a portfolio website need authentication? Great question. I spent hours digging through outdated docs, GitHub issues, and Discord threads to get Auth.js v5 (beta at the time) working with both Credentials and GitHub providers. All so I could... have a login page on my portfolio.

auth.ts:

import NextAuth from "next-auth";
import Credentials from "next-auth/providers/credentials";
import GitHub from "next-auth/providers/github";
 
export const { handlers, signIn, signOut, auth } = NextAuth({
  providers: [
    GitHub({
      clientId: process.env.GITHUB_CLIENT_ID,
      clientSecret: process.env.GITHUB_CLIENT_SECRET,
    }),
    Credentials({
      name: "WordPress",
      credentials: {
        username: { label: "Username", type: "text" },
        password: { label: "Password", type: "password" },
      },
      async authorize(credentials) {
        const res = await fetch(
          `${process.env.NEXT_PUBLIC_GRAPHQL_ENDPOINT}`,
          {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify({
              query: `
                mutation LoginUser($input: LoginInput!) {
                  login(input: $input) {
                    authToken
                    refreshToken
                    user {
                      id
                      name
                      email
                    }
                  }
                }
              `,
              variables: {
                input: {
                  username: credentials?.username,
                  password: credentials?.password,
                },
              },
            }),
          }
        );
 
        const { data } = await res.json();
        if (data?.login?.user) {
          return {
            id: data.login.user.id,
            name: data.login.user.name,
            email: data.login.user.email,
            authToken: data.login.authToken,
            refreshToken: data.login.refreshToken,
          };
        }
        return null;
      },
    }),
  ],
  callbacks: {
    async jwt({ token, user }) {
      if (user) {
        token.authToken = user.authToken;
        token.refreshToken = user.refreshToken;
      }
      return token;
    },
    async session({ session, token }) {
      session.authToken = token.authToken;
      return session;
    },
  },
});

/api/auth/custom/github route handler:

import { auth } from "@/auth";
import { NextResponse } from "next/server";
 
export async function GET() {
  const session = await auth();
 
  if (!session) {
    return NextResponse.json({ error: "Not authenticated" }, { status: 401 });
  }
 
  return NextResponse.json({
    user: session.user,
    authenticated: true,
  });
}

login-form.tsx:

"use client";
 
import { signIn } from "next-auth/react";
import { useState } from "react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Icons } from "@/components/icons";
 
export function LoginForm() {
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");
  const [isLoading, setIsLoading] = useState(false);
 
  const handleCredentialsLogin = async (e: React.FormEvent) => {
    e.preventDefault();
    setIsLoading(true);
    await signIn("credentials", { username, password, callbackUrl: "/" });
    setIsLoading(false);
  };
 
  return (
    <div className="space-y-6">
      <form onSubmit={handleCredentialsLogin} className="space-y-4">
        <div className="space-y-2">
          <Label htmlFor="username">Username</Label>
          <Input
            id="username"
            value={username}
            onChange={(e) => setUsername(e.target.value)}
            required
          />
        </div>
        <div className="space-y-2">
          <Label htmlFor="password">Password</Label>
          <Input
            id="password"
            type="password"
            value={password}
            onChange={(e) => setPassword(e.target.value)}
            required
          />
        </div>
        <Button type="submit" className="w-full" disabled={isLoading}>
          {isLoading ? "Signing in..." : "Sign in"}
        </Button>
      </form>
 
      <div className="relative">
        <div className="absolute inset-0 flex items-center">
          <span className="w-full border-t" />
        </div>
        <div className="relative flex justify-center text-xs uppercase">
          <span className="bg-background px-2 text-muted-foreground">
            Or continue with
          </span>
        </div>
      </div>
 
      <Button
        variant="outline"
        className="w-full"
        onClick={() => signIn("github", { callbackUrl: "/" })}
      >
        <Icons.gitHub className="mr-2 h-4 w-4" />
        GitHub
      </Button>
    </div>
  );
}

3. Turborepo + Beta Shadcn/ui Monorepo

Someone smart would have just used a template, or better yet, a single Next.js project. But no -- I went full monorepo with Turborepo and the beta shadcn/ui monorepo setup.

Turbo is an incremental bundler and build system optimized for JavaScript and TypeScript monorepos. It provides blazing-fast builds through intelligent caching, parallel execution, and minimal re-computation. It is used by teams at Vercel, AWS, Microsoft, Netflix, Disney, and Adobe -- and now, by me, for my personal portfolio. You are welcome.

4. Headless Yoast SEO Using New generateMetadata from Next.js

I do not think anyone is searching Google for my name. But just in case they do, every page on my site has fully dynamic SEO metadata pulled from WordPress via WPGraphQL and Yoast SEO -- leveraging the new generateMetadata API from Next.js.

getMetaData.ts:

import { Metadata } from "next";
 
interface YoastSEO {
  title: string;
  metaDesc: string;
  opengraphTitle: string;
  opengraphDescription: string;
  opengraphImage?: {
    sourceUrl: string;
    altText: string;
    mediaDetails: {
      width: number;
      height: number;
    };
  };
  twitterTitle: string;
  twitterDescription: string;
  twitterImage?: {
    sourceUrl: string;
  };
  canonical: string;
  schema: {
    raw: string;
  };
}
 
export function getMetaData(seo: YoastSEO): Metadata {
  return {
    title: seo.title,
    description: seo.metaDesc,
    openGraph: {
      title: seo.opengraphTitle,
      description: seo.opengraphDescription,
      images: seo.opengraphImage
        ? [
            {
              url: seo.opengraphImage.sourceUrl,
              alt: seo.opengraphImage.altText,
              width: seo.opengraphImage.mediaDetails.width,
              height: seo.opengraphImage.mediaDetails.height,
            },
          ]
        : [],
    },
    twitter: {
      card: "summary_large_image",
      title: seo.twitterTitle,
      description: seo.twitterDescription,
      images: seo.twitterImage ? [seo.twitterImage.sourceUrl] : [],
    },
    alternates: {
      canonical: seo.canonical,
    },
  };
}

page.tsx:

import { getMetaData } from "@/lib/getMetaData";
import { getPageBySlug } from "@/lib/getPageBySlug";
import { Metadata } from "next";
 
interface PageProps {
  params: { slug: string };
}
 
export async function generateMetadata({
  params,
}: PageProps): Promise<Metadata> {
  const page = await getPageBySlug(params.slug);
  if (!page?.seo) return {};
  return getMetaData(page.seo);
}
 
export default async function Page({ params }: PageProps) {
  const page = await getPageBySlug(params.slug);
 
  if (!page) return null;
 
  return (
    <main>
      <h1>{page.title}</h1>
      {/* render flexible content blocks */}
    </main>
  );
}

5. Preview from WP CMS Backend and Custom Flexible Content Blocks

I know exactly how to get what I want out of a CMS. I could have just thrown everything into .mdx files and called it a day -- but where is the fun in that?

Instead, I built a full headless WordPress setup with:

Draft preview mode -- Click "Preview" in WordPress and see the draft rendered on the Next.js frontend instantly
Custom ACF Flexible Content blocks -- Every page is built from a set of reusable, typed content blocks (Hero, RichContent, Cards, CodeBlock, etc.)
Incremental Static Regeneration -- Pages are statically generated at build time and revalidated on demand when content changes in WordPress

This gives me the best of both worlds: the editorial experience of WordPress with the performance and developer experience of Next.js.

Honorable Mentions

A few more things that did not make the top 5 but are still gloriously unnecessary:

Page Transitions -- Smooth, animated page transitions using Framer Motion
Dark Mode -- System-aware dark mode with a toggle and persistence
Layout Animation -- Animated layout shifts using Framer Motion's layoutId
PostHog Analytics -- Full product analytics on a personal portfolio (because I need to know my bounce rate, apparently)

Hosting:

InstaWP -- WordPress backend
Vercel -- Next.js frontend

So, there you have it -- the top 5 absolutely unnecessary yet undeniably cool features on my portfolio website. Did I spend way too long on these? Absolutely. Do they make me more employable? Probably not. But do they make me happy? You bet.

Call me Chadcn.