Tech stack: Next.js | TypeScript | Framer Motion | Beehiiv API | Tailwind CSS | Netlify

Homepage feed with post previews

Fetched the latest posts from the Beehiiv API at build‑time and via client‑side ISR, rendering hero cards for each item including title, excerpt, and cover image dynamically aligned with the live newsletter content.

Project architecture built around Next.js’s App Router / getStaticProps or useSWR/ISR for fastest possible delivery.

Subscription widget integrated with Beehiiv

Used Beehiiv’s REST API endpoints (v2) to create new subscribers. A lightweight React form collects user email (and optional name) → sends POST /v2/publications/{pub_id}/subscriptions secured by an API key stored in environment variables. Offers real‑time feedback: submission states, and smart spam protection.

Also handles the double-opt-in flow / webhook hooks alignment for future updates.

Framer Motion animations

Page and element transitions handled gracefully via AnimatePresence, easing between homepage, post detail, and archive views. Posts fade and slide in with subtle choreographed entry and exit animations.

Individual CTA buttons and modals use hover-scale physics and staggered list reveals for a tactile UX.

Performance, styling & SEO

Tailwind CSS with custom dark and light theme toggles. Fully responsive, mobile-first design—post grids reflow from 2 to 3 columns seamlessly.

SEO: dynamic meta titles and OG tags based on post data. next/image ensures optimized image delivery. Builds consistently hit Lighthouse scores ≥ 95 in Performance, Accessibility & SEO.

Deployment & updates

Hosted as a statically exported Next.js site on Netlify, with netlify.toml configured for environment variables and redirect rules. ICID deployments trigger automatically on Git push.

Continuous integration allows post content changes or subscriber data updates to be reflected via webhooks ISR without manual rebuilds.