Kadiv IT

Description

Parade Wisuda ITB is an event designed to maximize the rights and opportunities to honor ITB graduates and serves as a platform for the collective appreciation of the ITB campus community.

Library / Tools Used

• Next.js (Fullstack Framework)
• React (JS Library)
• TailwindCSS (CSS Library)
• Typescript (Typesafe for JS)
• shadcn/ui (UI Library)
• NextAuth (Auth Library)
• DrizzleORM (ORM)
• Redis (Key–Value Cache)
• Cloudinary (Bucket Storage)
• PostHog (Analytics)
• NeonDB (Serverless Postgres)

Development Experience

This is my second time leading a website team in a campus committee. Unlike TEDxITB, the ITB Graduation Parade is part of a centralized committee, meaning it operates under KM (Kemahasiswaan) ITB. I was accompanied by Naufal throughout this journey, who served as the vice head of the IT department. As with any other website team, we divided our staff into three groups: UI/UX designers, front-end developers, and back-end developers. The team was quite large, with over ten members, so it’s impractical to mention each one by name as I did in my TEDxITB 7.0 post .

Similar to TEDxITB 7.0, we held weekly meetings to discuss our new sprint task divisions. This project took place during the middle of the fourth semester, which was much more chaotic compared to the third semester. However, thanks to numerous holidays, especially Eid, we managed to complete the website perfectly.

One significant issue we encountered was the disappearance of a member from the UI/UX division without any communication, neglecting their tasks for two weeks. This was a major problem because we needed to finish the website within about a month and a half. When communication efforts failed, I decided to recruit additional UI/UX designers to compensate for the missing member’s work. Thankfully, this plan worked out. One key lesson I learned as a leader is to address problems through communication first, then make quick and wise decisions.

Another substantial challenge in this project was optimizing images. Unlike the TEDxITB 7.0 website, which had fewer image assets, this project involved a plethora of images—backgrounds, decorations, and more. To handle this, we converted most images to JPG, resized them as needed, and compressed them. We also carefully set the size of image for each viewport (in Next.js <Image /> components, we can add the sizes props) to ensure optimal image sizes on each viewport and reduce load times.

An interesting experience I had was collecting the final thesis assignment data for the TA Fair Page. While the graduate data was fine, the final thesis assignment data was incomplete. Some student associations did not fill out the forms completely, leaving us with fewer than ten responses close to the website deadline. I decided to scrape the ITB digilib website to gather all final thesis assignment data since October 2023 (previous ITB graduation). This strategy was successful, allowing us to collect about 95% of the data. The remaining 5% was likely not uploaded to the ITB digital library.

Most of the website development involved creating static rendered pages. However, the TA Fair Page and Graduates Page were particularly interesting. These pages are statically generated, but the filtering state is saved in the URL instead of using React's useState(). Although more complex, this approach allows for shareable search results via links and bookmarkable pages. On the TA Fair page, users can like graduates' final assignments, and on the Graduates Page, users can select any graduate and send them a menfess. To prevent spam, we implemented a Redis rate limiter, learning from last year's experience.

Other crucial lesson from this project is the importance of marketing. Despite building a great product, it won’t reach its full potential to reach the users without proper promotion. The website had over 1500 visitors from ITB , but it could have reached more with better marketing efforts beyond a single Instagram post (maybe adding an Instagram story would be better).

Overall, this project provided me with valuable experience leading a larger team and catering to a broader audience. I consider it one of the most successful projects I've worked on.

Events

There were not many internal events or bonding activities within this committee, and even when there were, we were too busy due to the fourth semester's demands. Most of our work was done behind the scenes, like a background process.

However, during the Parade Wisuda April 2024 event, I had the opportunity to join my student association's (HMIF) procession (kind of out of the topic, but who cares). We marched from "Saraga" to "Lapangan Cinta," singing the HMIF anthem and other specially crafted songs to celebrate the graduation. It was a spectacular event, although it was quite unfortunate that my student association, despite being the largest with over 300 members in my generation alone, had a relatively quiet procession. This may have been due to the chaotic fourth semester with numerous assignments.