byanrkh
  • About
  • Projects
  • Writings
  • Guestbook
  • About
  • Projects
  • Writings
  • Guestbook

© 2026 Abyan Raditya

EmailGitHubInstagramRSS
← Back to Projects
Al Azhar Creative Steps
Featured2026

Al Azhar Creative Steps

Built a full-stack web platform for Al Azhar Creative Steps (ACS) to fully automate ACS Fun Run registrations and ticketing. Integrated Midtrans for instant payments and created a real-time admin dashboard to eliminate manual data entry for the event committee.

  • Next.JS
  • TailwindCSS
  • Midtrans
  • Supabase
Visit site

ACS (Al Azhar 4 Creative Show) is a school event organized by the OSIS of SMA Islam Al Azhar 4 Bekasi. For this event, I took part in the organizing team while also designing and developing the official website.

The website was created as a central place for students and visitors to find information about the event without having to rely entirely on announcements or social media posts. I wanted the site to feel more like an actual event website rather than a typical school information page — simple, modern, and easy to navigate.

The Idea

The main goal was to make the event's information accessible while keeping the interface visually aligned with the identity of ACS.

Since school event websites can easily become overloaded with information, I tried to keep the experience straightforward. Important information should be easy to find, while the visual design still gives the website its own character.

The website was designed around the idea of putting the event itself first. Rather than filling every section with unnecessary content, each page and component had a specific purpose.

My Role

I worked on the project as both a member of the OSIS event committee and as the developer responsible for building the website.

My responsibilities included:

  • Designing the overall website structure and user experience
  • Developing the website from scratch
  • Creating responsive layouts for different screen sizes
  • Implementing the event's information and content
  • Organizing the navigation and page structure
  • Making sure the website remained simple and easy to use
  • Handling development and deployment throughout the project

Working on the website while being directly involved in the event also gave me a different perspective. I wasn't only building something based on a brief — I was part of the team that actually needed to use and maintain the website.

Design & Development

I wanted the interface to feel clean and modern without losing the character of a school event.

The design focuses on clear typography, spacing, hierarchy, and straightforward navigation. Instead of relying heavily on decorative elements, I tried to let the content and event identity carry most of the visual experience.

The website was also built with responsiveness in mind, since most students would likely access the site through their phones.

What I Learned

Building ACS taught me that developing a website for an actual event is quite different from building a personal project.

There are real deadlines, changing information, requests from other people, and limitations that have to be considered during development. Sometimes the challenge isn't figuring out how to implement something technically, but figuring out what actually needs to be implemented in the first place.

Being involved in both the technical and organizational sides also made me more aware of how important communication is when building something for other people.

ACS became one of the projects where I got to combine two things I enjoy: being involved in school events and building things for the web.

Outcome

The final website became part of the digital presence of ACS and served as an accessible place for students and visitors to learn more about the event.

More than just another school project, ACS gave me the experience of taking a website from an idea into something that was actually used for a real event — from planning the structure and visual direction to development and deployment.

Registration Flow Chart

Pembayaran Registrasi Flow-2026-09-20-123539