Built with Next.js, shadcn/ui & Tailwind CSS and is deployed on a self-hosted PaaS using docker. This site integrates serverless functions, Instagram and Mux APIs, Google reCAPTCHA v3, and an MDX-powered blog, with Framer Motion animations creating a smooth, engaging experience that showcases both the brand and the tech behind it.
- Next.Js
- Typescript
- TailwindCSS
- REST APIs
Engagement
Role & team
Owner · Kenzerama Productions
- Team context
- Lead Developer
- My contribution
- End-to-end delivery: scoped, built, and shipped the public site solo; ongoing maintenance and releases.
Context
Overview
Built with Next.js, shadcn/ui & Tailwind CSS and is deployed on a self-hosted PaaS using docker. This site integrates serverless functions, Instagram and Mux APIs, Google reCAPTCHA v3, and an MDX-powered blog, with Framer Motion animations creating a smooth, engaging experience that showcases both the brand and the tech behind it.
This website — built from the ground up with Next.js, React, Tailwind CSS and ShadCN/ui — serves as the official online home for the company I co-own. It blends modern web-app architecture with rich media and content: video galleries, client testimonials, a blog powered by MDX, and interactive features. Under the hood it uses Next.js serverless functions to power backend logic, integrates the Instagram Basic API for social media feeds, the Mux Video API for video hosting and streaming, and includes spam-protection via Google reCAPTCHA v3. Animations and smooth transitions are handled with Framer Motion, giving the site a polished, modern feel. The result is a fully responsive, content-rich company site — one I built with my partner to present our work and brand professionally.
Process
Challenges
01
Instagram API Token Refreshing
The Instagram Basic Display API requires manually refreshing the long-lived access token every 60 days, adding an ongoing maintenance task and the need for reminders or automated tooling to prevent outages in the social feed.
02
Managing Multiple Third-Party Integrations
Coordinating data flows and error handling across the Instagram API, Mux Video API, Google reCAPTCHA v3, and Framer Motion animations introduces complexity and increases the surface area for potential failures.
03
Serverless Function Reliability
Ensuring Next.js serverless functions execute quickly and consistently under load, while handling rate limits, API failures, and network fluctuations, requires careful planning and logging.
04
Video Performance & Optimization
Integrating Mux for video hosting is powerful, but optimizing playback, preloading, thumbnails, and responsive delivery across devices can be challenging.
05
SEO + Media Balance
Heavy media content (videos, animations, image carousels) can negatively impact Core Web Vitals if not optimized, requiring careful lazy-loading and best practices.
06
Form Security & Spam Prevention
Integrating Google reCAPTCHA v3 while keeping forms accessible and user-friendly can be tricky, especially when tuning scoring thresholds to reduce false positives.
Takeaways
What I learned
Building this website taught me a lot about working with modern web tooling and real-world integrations. I learned how to manage and refresh expiring API tokens — including automating Instagram token refreshes using cURL — and became much more confident optimizing video and photo assets in React to keep performance strong across devices. I also deepened my understanding of MDX, from authoring content to wiring it into dynamic routes and layouts. Altogether, the project strengthened my ability to build fast, media-rich applications with clean workflows behind the scenes.