← Back to projects
CCSO Website: Full-Stack Revitalization with Nuxt 3 and Strapi featured image

CCSO Website: Full-Stack Revitalization with Nuxt 3 and Strapi

Engineered the Penn State CCSO website into a modern, high-performance digital hub using a decoupled stack of Nuxt 3, Vue.js, and a Strapi headless CMS to manage content and drive member engagement.

Contributors: Izzy Masso
View

Overview

As the primary digital hub for the Penn State Competitive Cyber Security Organization (CCSO), this project involved a complete architectural overhaul and modernization of the official psuccso.org website. My initial version of the site was built on WordPress; while functional, it eventually presented limitations in performance, customizability, and developer experience. To address these challenges, I led the re-architecture and migration to a high-performance, decoupled stack to better serve the organization's members, sponsors, and prospective students.

The new platform is built with a Nuxt 3 frontend and a Strapi headless CMS backend. This modern architecture provides a dynamic, responsive, and engaging user experience while empowering non-technical officers to manage content—from event announcements to resource pages—through an intuitive admin interface. The site now effectively showcases the organization's activities, manages major events like the annual SillyCTF competition, and serves as the professional public face for one of the nation's top collegiate cybersecurity clubs.

Key Features

  • Headless CMS Architecture: Decoupled the frontend from the backend by implementing Strapi, enabling flexible content modeling, streamlined updates, and the ability to reuse content across future platforms without rebuilding the entire system.

  • Dynamic Event Management: Created robust content types in Strapi for events, allowing officers to easily publish details, schedules, and locations. The Nuxt frontend consumes this data to generate dynamic pages with features like real-time countdown timers for competitions.

  • Interactive UI/UX: Developed a modern, mobile-first interface using Tailwind CSS, featuring interactive components like flip cards for showcasing club activities, animated backgrounds, and an integrated events calendar to drive member engagement.

  • Full-Stack TypeScript: Implemented TypeScript across both the Nuxt 3 frontend and Strapi backend to ensure type safety, improve code quality, reduce runtime errors, and enhance the overall developer experience for future maintainers.

Technologies & Implementation

The project's architecture was designed to be scalable, maintainable, and performant. I chose a decoupled stack to separate concerns, allowing the frontend and backend to be developed and deployed independently.

  • Frontend (Nuxt 3): Selected Nuxt for its powerful server-side rendering (SSR) capabilities, which significantly improves SEO and initial page load times. Its Vue 3 composition API and file-based routing streamlined development. Tailwind CSS was used for rapid, utility-first styling to create a fully responsive design.

  • Backend (Strapi & PostgreSQL): Strapi was chosen as the headless CMS for its ease of use, customizable API, and robust user-permission system. This allows club officers to manage website content without needing developer intervention. PostgreSQL was selected as the database for its reliability, data integrity, and strong performance with structured content.

graph TD
    A["User/Member"] --> B["Nuxt 3 Frontend (psuccso.org)"];
    B --> C["Strapi Headless CMS API"];
    C <--> D["PostgreSQL Database"];
    E["CCSO Officer"] --> F["Strapi Admin Panel"];
    F --> C;

Challenges & Solutions

The primary challenge was moving beyond the limitations of the initial monolithic WordPress architecture I had built. As the club's needs grew, the WordPress site—which relied on my custom theme and plugins—became difficult to scale and customize. This prompted a complete rethinking of the content structure and technical foundation.

To solve this, I initiated a migration to a modern, decoupled JavaScript ecosystem. I began by performing a content audit and designing a new, structured information architecture within Strapi. I created custom "Collection Types" for events, members, and resources, effectively replacing the old WordPress custom post types with a flexible, API-first model. I then developed a series of scripts to extract and transform critical data from the old WordPress database into the new PostgreSQL schema. This process not only preserved historical information but also cleaned and structured it for better performance and usability, ensuring a smooth transition with minimal content loss.

Results & Impact

The migration successfully transformed the CCSO website into a modern, high-performance platform that better reflects the organization's technical excellence.

  • Improved Performance: Achieved significantly faster page load times and a smoother user experience compared to the previous WordPress site, contributing to better engagement and a more professional brand image.

  • Enhanced Maintainability: The decoupled architecture and intuitive Strapi backend have empowered non-technical club officers to manage content independently, reducing the development team's maintenance workload by an estimated 5-10 hours per month.

  • Scalable Foundation: The new stack provides a robust and scalable foundation for future features, such as integrating with other internal services or expanding the resources available to members.

{TODO: Add screenshot of main interface/dashboard}