Back to Portfolio

A Modular Content Management System for the Top University in Open and Distance Education

Web Application | Content Management System

eBulletin

Overview

eBulletin is a dynamic, modular Content Management System designed for creating, managing, and displaying online bulletins. With a strict Administrator and Viewer role structure, it gives content managers a complete dashboard for building engaging bulletins from reusable content blocks while providing general audiences with a streamlined, read-only experience.

Full Stack Development Internship Project

University of the Philippines Open University

Problem Statement

UPOU Administratieve Staffs often rely on static, difficult-to-update announcements that lack modern engagement features. The university needs a dynamic web platform that makes it possible to create rich, interactive, and easily updatable content without programming skills. The main challenge is simplifying the creation of complex, modular page layouts for staff with moderate technical proficiency.

eBulletin demo

Key Features

  • Modular Block-Based Editor: Administrators can build complex page layouts using reusable blocks for rich text, images, videos, and file attachments.
  • Intuitive Drag-and-Drop Organization: Admins can reorder entire bulletin sections or individual content blocks through smooth drag-and-drop interactions.
  • Rich Text Editing: The text editor supports formatting such as bold text, lists, and hyperlinks while accurately reflecting the final published appearance.
  • Distinct Edit and View States: Viewers see only the last saved, read-only version of a bulletin, keeping unfinished content and editing controls private.
  • Dashboard and Search Navigation: Admins can view and reorder all bulletins from a central dashboard, while viewers can search entries by bulletin section titles.

Design & Development

eBulletin was developed as a responsive single-page application with a component-based frontend and modular service layer. Its architecture separates reusable interface components from asynchronous API operations, making the CMS easier to maintain and extend while keeping content management responsive for both administrators and viewers.

1

Single-Page Application

React provides a fluid, responsive experience that updates content without requiring full page reloads.

2

UI and Styling System

Ant Design supplies accessible interface components, while SCSS provides consistent, centralized styling.

3

Modular Component Architecture

Reusable components such as SectionCard and BlockCard organize bulletin layouts and promote maintainable code reuse.

4

Service-Based API Integration

A modular useBulletinService hook coordinates asynchronous RESTful or GraphQL requests for fetching, creating, updating, and deleting content.

Impact & Outcomes

The block-based architecture lowers the technical barrier for administrative staff, allowing them to publish rich media content without programming knowledge. The system is optimized for dashboards and content pages to load within three seconds, with API fetches and save operations resolving within two seconds. Strict role separation keeps administrative CRUD controls inaccessible to viewers, protecting data security and content integrity.