Back to Projects
Case Study

RDJ MEDIA
Digital Agency Platform

A highly dynamic, fully custom agency portfolio and Content Management System built for superior performance. Replacing generic templates with cutting-edge GSAP animations and Next.js React features.

Client
Dr. Jules
RDJ MEDIA Showcase

Project Overview & Objective

RDJ MEDIA is a fully custom, high-performance agency portfolio and Content Management System (CRM) tailored for a premium digital media agency. The objective was to replace a generic template with an immersive, dynamic digital experience that showcases web development, 3D visualization, video editing, and social media services, combined with a highly secure, completely bespoke administrative dashboard to manage content and inbound leads.

Deep-Dive: Key Features

A. The Storefront (User Experience)

  • SEO-Optimized Server Components: Deeply integrated JSON-LD schema generation and rigorous metadata configurations for perfect SEO indexing of agency services, dynamic projects, and insights (blogs).
  • Advanced Interactive UI: Extensive custom GSAP animations orchestrating typewriter effects, glowing text, floating interactions (InteractiveStars), and dynamic "count-up" statistics.
  • Immersive Carousels: Custom-engineered React logic for infinite-loop Testimonial sliders and multi-layered, depth-based Project carousels that respond fluidly to user interaction.
  • Robust Form Handling: Complex, multi-step interactions like the ProjectQuestionnaireModal and Contact Forms are strictly validated via Zod schemas and safeguarded by reCAPTCHA v3.

B. The Custom CRM (Admin Dashboard)

Instead of relying on WordPress or generic CMS builders, a custom dashboard was built to empower the agency to manage its digital presence securely.

  • Project & Content Management: Full CRUD capabilities for Projects, Testimonials, Team Members, and Partners. Admins can effortlessly organize partner logo displays using a drag-and-drop sortable interface.
  • Blog Engine (Insights): Admins can author, edit, and publish SEO-friendly blog posts with media handled directly through secure UploadThing configurations.
  • Lead Inbox: A unified dashboard to process and track incoming Contact queries and comprehensive Project form submissions directly within the MongoDB database.

C. Security & Integrations

  • Middleware Protection: Next.js middleware to specifically intercept protected routes, verifying the user's role and custom JWT secret prior to rendering, effectively blocking unauthorized access.
  • File Upload Security: UploadThing endpoints are configured securely so that only authenticated admins can upload or modify the portfolio's media assets.
  • Email Automation: Secure SMTP endpoint routes (/api/form-submissions, /api/contacts) utilizing Nodemailer to trigger instant, stylized administrative alerts when potential clients submit inquiries.

Technologies Used

Next.js 15 (App Router)TypeScriptTailwind CSSGSAPReact Hook FormZod ValidationMongoDBMongooseUploadThingNodemailerJWT Auth (RBAC)@dnd-kit

Deployment

Vercel (Edge Configs Enabled)

Database & ORM

MongoDB Cloud & Mongoose

Auth & Security

Custom JWT Strategy & reCAPTCHA v3

Visit Live Site

Project Gallery

A visual journey through the platform's interfaces and features. Click any image to enlarge.

Project interface thumbnail 1
Project interface thumbnail 2
Project interface thumbnail 3
Project interface thumbnail 4
Project interface thumbnail 5