Fox Studio CMS Development

Fox Studio CMS Development

Project Overview

Created a highly extensible and versatile CMS template.
Since this is an admin panel, we used only Tailwind with basic utility classes to maintain simple styling.

While we plan to use headless WordPress or MicroCMS for LPs and small to medium-sized sites, we created this base CMS considering the complex configuration requirements.

Technology Stack & Implementation

The front end is built with Nuxt 4, and the back end uses Express.
Authentication is managed with JWT, and the system is built with REST API design.

  • Nuxt4 / Vue3
  • Node.js (Express.js)
  • JavaScript / TypeScript
  • Tailwind CSS v3
  • ESLint / Markuplint
  • Vitest
  • JSON Web Token (JWT)
  • Docker
  • DB (MySQL)
  • Git (CI/CD)
  • Adobe XD

Content Management Features

Created a draft feature allowing content management by selecting "Published," "Unpublished," or "Deleted."

Endpoints can be added for each use case, enabling flexible content retrieval.

Dashboard example
Dashboard example
Content list screen example
Content list screen example
News edit screen example
News edit screen example

Image Upload Feature

Upload destinations and environments are managed with variables, allowing flexible switching between server and cloud uploads.
Automatic image compression is also implemented. (Webp / AVIF)

Media upload screen example
Media upload screen example

User Management Feature

Three permission levels are provided: admin / editor / viewer, restricting the operational scope for each user.

User management screen example
User management screen example

Site Publishing Feature

Sites can be published in two ways: immediate publication or scheduled publication.

Site publishing screen example
Site publishing screen example