Petrolida `21

Front-End


project-cover

Description: Website to promote the petroleum event and provide registration solutions.

Tech Stack:

Short Explanation

The Petrolida 2021 website promoted the Petroleum Integrated Days 2021 event at ITS. I used Next.js with Static Site Generation (SSG) for fast navigation and better performance by pre-rendering pages at build time.

Next.js let us export the site as static files, which made deployment to CPanel easy and reduced server processing.

Project Goals

The main goal was to provide information about registering for competitions and pre-event activities through Google Forms. The website has four parts:

  1. Landing Page: Entry point with event overview
  2. Competitions: Seven competitions with their own pages
  3. Pre-event Activities: Talk shows and other events
  4. Registration through Google Forms

The site makes it easy for participants to find what they need and register.

Framework & Dependencies & Tools

  • React JS with TailwindCSS and TypeScript

Lesson Learned

This was my first event website. I focused on SEO and discovered the next-seo library, which made it easy to manage meta tags in Next.js.

I also used a data-driven approach by storing content in JavaScript files. This made revisions faster since we didn't have to edit HTML directly.

Appreciation Section

Before closing this article, I would like to thank all members of the Petrolida ITS Teams especially Clarence who have worked with me for about 6 months up to make Petrolida Website. I hope we can continue this collaboration to develop another wonderful application in the future.

© Ishaq Adheltyo