Andrew Allred Portfolio CMS Platform
A full-stack portfolio platform with a custom CMS that allows dynamic project management, media uploads, and automated portfolio updates.
Project overview
The A&R Portfolio CMS is a full-stack portfolio platform designed to make managing and updating projects significantly easier. Instead of manually editing code whenever a new project is added, the system provides a custom admin dashboard that allows projects, media, and case studies to be created and edited dynamically. The application was built using Next.js with React and TypeScript, and uses MongoDB with Mongoose to store project data. A protected admin interface allows authenticated users to create, edit, reorder, and publish portfolio projects. Each project contains structured case study fields including problem statements, approaches, implementation details, outcomes, and lessons learned. The platform also supports media galleries, GIF demonstrations, and project links, allowing each project page to function as a full case study. Projects can be saved as drafts or published, enabling a workflow similar to a lightweight content management system. This system was designed to scale beyond a simple portfolio website and could easily be adapted to manage projects for freelancers, designers, or development agencies. Building the platform required designing both the frontend user experience and the backend data structure, including API routes, validation schemas, and database models.
Problem
Updating a portfolio website often requires manually editing code, which makes adding projects slow and inconvenient. I wanted a system that would allow new projects, images, and case studies to be added dynamically without modifying the site’s source code.
Approach / process
I designed the portfolio as a full-stack application with a structured project database and a custom admin dashboard. The goal was to separate the content from the presentation layer so projects could be managed through a CMS interface rather than directly editing code.
Implementation details
The platform was built using Next.js with React and TypeScript. MongoDB and Mongoose were used to store structured project data including case study sections, media galleries, and project metadata. I created API routes for creating, editing, deleting, and reordering projects. Validation was implemented using Zod to ensure that all required fields were properly formatted before being stored in the database. The admin interface allows authenticated users to manage projects, upload images and GIF demonstrations, and publish projects to the public portfolio. The system also supports draft states so projects can be worked on before being made visible on the site.
Gallery
Related projects
CineNiche Streaming Platform
A full-stack movie discovery platform built during BYU’s INTEX 2025 that enables users to browse, rate, and organize films while receiving personalized recommendations through content-based and collaborative filtering.
Interactive Model
An interactive web visualization of the Christlike Leader Model created with the Sorensen Center, allowing users to explore leadership principles through a dynamic hover and click interface.
