Monitor Indonesia Online News Platform

Independent online news platform and back-office admin remake, built across two phases with Laravel and Next.js, featuring role-based dashboards and production-ready SEO/Open Graph optimizations.

Published on
Modified at
Reading time
5 min read
Word count
931 words
Monitor Indonesia Online News Platform
Monitor Indonesia Online News Platform

Overview

Monitor Indonesia(opens in a new tab) is an actual, factual, and independent news forum platform published by a company based in Jakarta, Indonesia, called PT Media Elenora Utama (MEU)(opens in a new tab).

Monitor Indonesia Logo

Monitor Indonesia(opens in a new tab) aims to provide an independent source of news information, present the latest news accurately and clearly, and deliver an in-depth understanding of relevant issues in Indonesia. Through its independent approach, Monitor Indonesia(opens in a new tab) is committed to presenting factual and up-to-date information, facilitating the public to gain deeper insights into important events affecting society and the nation as a whole.

This project was built in two phases: first the online news platform built from scratch with PHP(opens in a new tab) and the Laravel(opens in a new tab) Framework, then an internal back-office admin remake rebuilt around a clean architecture approach with Next.js for the newsroom and operations team. Both phases were collaborative efforts with the Daunnesia Members(opens in a new tab) | Daunnesia Members(opens in a new tab) team, where we actively communicated and resolved development challenges together.

Development Timeline

  • Phase 1: Online News Platform: August 2023 - November 2023 (4 months)
  • Phase 2: Editorial Admin Platform Remake: December 2025 - February 2026 (3 months)

Phase 1: Online News Platform

Role

Full Stack Web Developer

Core Stack

PHP

A popular general-purpose scripting language.

Laravel

A web application framework with expressive, elegant syntax.

TailwindCSS

A utility-first CSS framework.

Vite

A next generation front-end tool that focuses on speed and performance.

The core stack used in this phase includes:

  • PHP is a popular general-purpose scripting language that is especially suited to web development.
  • Laravel is a web application framework with expressive, elegant syntax.
  • TailwindCSS is a utility-first CSS framework for quickly building custom designs.
  • Vite is a next-generation frontend tooling that focuses on speed and performance.

Contributions

  • Created the website from scratch to production in over 4 months.
  • Developed both Front-end and Back-end dashboard systems supporting three user roles.
  • Implemented Open Graph (OG) metadata, updated SEO, and optimized social media sharing.
  • Collaborated actively with the team to build the web-based Monitor Indonesia(opens in a new tab) application and assisted in resolving development challenges.

Collaborators

This phase was a collaborative effort with the following team members:

Phase 2: Editorial Admin Platform Remake

Role

Front-End Web Developer (Admin Dashboard)

Core Stack

Next.js

A React framework for production.

TypeScript

A superset of JavaScript that compiles to clean JavaScript.

TailwindCSS

A utility-first CSS framework.

  • Next.js 15 + React 19 for modern admin pages and scalable frontend workflows.
  • TypeScript for safer, maintainable application logic and UI contracts.
  • Tailwind CSS + Radix UI for a polished and consistent dashboard interface.
  • TanStack Query, TanStack Table, React Hook Form, and Zod for complex data handling, forms, and reusable CRUD patterns.
  • Rich text tooling for editorial content management experiences.

Contributions

  • Built and refined CRUD workflows across major back-office modules including news, archived news, media galleries, advertisements, messaging, and platform settings.
  • Helped shape a maintainable frontend structure so features could be extended more easily as the admin platform expanded.
  • Implemented admin-facing pages and flows for modules such as all news, news categories, category headers and footers, widgets, information pages, image assets, photo galleries, infographic galleries, caricature galleries, video galleries, advertisement locations and types, sharing sites, and contact messaging.
  • Contributed to role-aware operational tooling, including menu, role, member, user, and menu-access management patterns used across protected routes.
  • Improved day-to-day newsroom usability through consistent forms, table patterns, detail/edit/create flows, loading states, and guarded access behavior.
  • Added content-aware loading skeletons that mirrored the final layout, making the dashboard feel faster and more stable while data-heavy pages loaded.

Project Highlights

  • Designed for high-frequency admin work, with consistent create, edit, detail, and listing flows across many content modules.
  • Improved content operations with clearer information hierarchy, repeatable UI patterns, and more efficient dashboard interactions.
  • Supported role-based access patterns so different operational users could work within the same system safely and clearly.
  • Balanced product usability with maintainability, making the admin interface easier to evolve over time.

Screenshots

Login UI

Screenshot of the Monitor Indonesia editorial admin login UI

Dashboard UI

Screenshot of the Monitor Indonesia editorial admin dashboard UI

Collaborators

This phase was a collaborative effort with the following team members:

Resources

Keywords:

Let's Create Something Amazing Together

I'm always open to new projects and ideas. Let's connect and make something great together.

Get in Touch
white gray pattern background