Kenzerama Productions
Next.js
Mux API
Meta API
CURL
Tailwind
Framer
Tech Stack & Features
- Next.js / React
- Next.js Serverless API
- Tailwind CSS / ShadCN
Integrations:
Next.js
Mux API
Meta API
CURL
Tailwind
Framer
About this Project
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.
Challenges
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.
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.
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.
Video Performance & Optimization
Integrating Mux for video hosting is powerful, but optimizing playback, preloading, thumbnails, and responsive delivery across devices can be challenging.
Complex UI/UX Interactions
Combining Tailwind CSS, shadcn/ui, and Framer Motion to create smooth, polished visuals without introducing layout shifts, jank, or animation timing issues takes iterative tuning.
Responsive Design for Media-Heavy Pages
Balancing large video content, Instagram embeds, and dynamic components while preserving speed, accessibility, and mobile performance requires constant testing.
MDX Blog Architecture
Implementing MDX brings flexibility but requires extra work around content parsing, SEO structuring, dynamic routing, and maintaining a clean authoring workflow.
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.
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.
Brand Consistency Between Web & Social
Maintaining consistent styling and media presentation across the site while pulling real-time content from Instagram requires design discipline and fallback states.
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.