KANM

Next.jsReactTypescriptKeystoneWordpress

Revamped my college radio station's website, improving database structure, migrating old articles, and redesigning the UI for a modern user experience.

Problem:

KANM’s website was outdated, with limited functionality and poor support for structured content. After a security vulnerability took us down in June 2023, we had 2 months to rebuild the website or KANM wouldn't be able to stream audio in the fall. The previous article database was stored as unstructured data in a headless WordPress CMS, with inconsistencies in author attribution and no categorization. Additionally, the UI did not effectively showcase the station’s content, such as member-written articles or event details.

Solution:

We rebuilt the website using Next and Typescript, restructuring the backend with Keystone CMS to provide better organization and content management. I designed and implemented an article database with structured fields for author attribution, categorization, and metadata. On the front end, I helped redesign the website’s layout, improving accessibility and readability.

Technical Approach

The backend was implemented in Keystone CMS, and the front end was built using React, Typescript, and Next.js. The design was first created in Figma before being translated into code. We aimed to modernize the site with a responsive design, improve ease of content management for non-technical staff, and preserve archival articles for historical purposes. Data migration scripts were written in Python to handle the large volume of legacy content.

My Contributions

> Developed and executed a Python script to clean, transform, and migrate articles from the legacy WordPress database to Keystone CMS. This involved resolving duplicate entries, extracting authors from unstructured text, and applying category tags with OpenAI's API.
> Designed and implemented the article database schema in Keystone CMS, ensuring structured storage for fields like author, publication date, and tags.
> Built the UI for article pages, transforming Figma designs into responsive React components.
> Enabled the preservation of pre-2023 articles by advocating for and executing their migration, providing a fully populated archive on the new site.

Impact

The redesigned website improved usability and functionality, empowering KANM members to upload and manage content efficiently. The structured archive preserved the station's history and highlighted member contributions more effectively, enhancing the station’s online presence.