Marvel Creative Media — Case Study

Full-stack project showcase · Next.js & Tailwind · PHP/MySQL API

A professional, card-based case study page that explains the architecture, engineering decisions, and business impact for the Marvel Creative Media website. Built with Next.js and Tailwind CSS; backend APIs powered by PHP & MySQL on shared cPanel hosting.

Read the case study Contact / Hire

Project Overview

Marvel Creative Media is a modern digital agency website that showcases web development, branding and creative services. It demonstrates a full-stack implementation — performant frontend with Next.js and Tailwind, and a lightweight PHP/MySQL API backend.

• Portfolio, Services, Blog, and Admin Dashboard
• Rich blog editing with Tiptap
• Image uploads & optimized delivery

Frontend (Next.js + Tailwind)

The frontend emphasizes speed, accessibility, and responsive layout. Next.js App Router enables hybrid rendering (SSR/SSG/ISR) and React Server Components for SEO-critical areas.

• Reusable component system (Nav, Footer, Cards)

• Rich blog viewer using Tiptap output

• Framer Motion micro-interactions

• next/image for optimized images

Backend & API (PHP + MySQL)

A small RESTful PHP API hosted on a cPanel shared host powers content management and file uploads. MySQL stores blog content, users, and form submissions.

• Secure endpoints with prepared statements
• FormData-based image uploads
• Clear separation between frontend (Vercel) and backend (cPanel)

Data Fetching & Architecture

Server components fetch SEO-critical content from the PHP API. Client components handle interactive UI such as the admin dashboard and forms. Absolute API URLs and CORS were configured to ensure reliable cross-host communication between Vercel and cPanel.

• Server Components for blog pages (SSR/ISR)

• Client Components for editors, uploads, and forms

• fetch() with cache control (no-store / revalidate)

Challenges & Solutions

Cross-host CORS: Configured appropriate CORS headers and used environment-configured base URLs to avoid failures between Vercel and cPanel.
Image path duplication: Normalized server logic to only store filenames and build URLs on the frontend using a single uploads base path.
Slug conflicts: Implemented a modal workflow in the admin UI to allow auto-resolve or manual slug edits during blog creation.

Impact & Outcome

The site now offers a polished agency presence with easy content publishing and fast performance. The split hosting approach keeps costs predictable and ensures the frontend delivers via Vercel's CDN.

• Improved SEO and page load performance
• Reliable admin workflow with image handling
• Mobile-first responsive design

Tech Stack

Frontend

Next.js, React, Tailwind CSS, Framer Motion, Tiptap

Backend

PHP, MySQL, cPanel (shared hosting)

Hosting

Vercel (frontend), cPanel (API)

Tools

Git, Postman, Lucide Icons