BEM FEB UGM Official Site

This project marks my first-ever involvement in OmahTI, nearly a year after joining, and it also represents my debut as a project manager alongside Albert Cristianto Halim. The project itself was straightforward, focusing on a website for BEM FEB UGM’s organizational profile and a CMS to streamline management processes. Despite its simplicity, this project laid the groundwork for the development of OmahTI’s official CLI, which now generates Next.js templates for company profile sites. In fact, this very CLI was used to generate the BEM FEB UGM website!

Requirements and Approach

Given the nature of a company site, our approach prioritized overall design (UI interfaces), site performance, and ease of use for BEM FEB UGM’s staff. Here’s how we tackled it:

1. Content Clarification:

   We began by clarifying the type of content they wanted to showcase, as this would dictate the content model in the CMS. They aimed to feature organizational information, current cabinet and hierarchy, publications, and events.

2. Design System:

   The design system for the site was derived from their social media design guidelines. I appreciated their human-centric approach, with member photos and elegant gold and dark blue accents.

3. Domain and Hosting Preferences:

   Finally, we discussed their domain and hosting preferences. The client already had an existing website and domain on Wix.

With these points in mind, we crafted our solution: a company profile site built with Next.js and Contentful CMS. This combination provided high performance with minimal development effort and simplified content management through the CMS.

Development

Setting up the Next.js app followed the usual process using the create-next-app CLI, along with TailwindCSS. For Contentful, instead of manually defining types based on the content model, we used the official Contentful CLI to generate these files. For smaller components like the photo swiper, we utilized the Swiper library, while the video player on the landing page was handled by the react-player library. To achieve a smooth scrolling experience, we experimented with the Lenis library, which indeed improved scrolling smoothness but also made it slower.

One of the most challenging aspects of the development was the hierarchy chart component. Our design featured a simplistic yet extensive chart with dozens of nodes. Unable to find a responsive solution that fit our needs, we decided to design multiple versions of the chart and export them as SVGs, displaying each version based on screen size. Additionally, we coded positioned transparent buttons over the chart to make it clickable, allowing users to navigate to each member’s page.

Hosting and Deployment

After development, I personally handled the domain transfer from Wix to Vercel, which was chosen for its compatibility with Next.js. Fortunately, Wix offered a straightforward domain transfer process, allowing us to successfully launch the BEM FEB UGM official site at bemfebugm.com.

OmahTI’s First CLI

As mentioned earlier, this seemingly simple project ultimately led David Lois and me to develop a CLI for swiftly configuring generic company profile sites in OmahTI’s style. This CLI features Next.js, TailwindCSS, Lenis, and Contentful, and even accepts Contentful tokens to generate content model types during setup. The development and challenges faced during this process were quite complex and merit a separate discussion.