M Fiqri

Petrolida

An Energy Competition Website

Team of 5

Overview

Petroleum Integrated Days (Petrolida) is the biggest annual event held by SPE ITS Student Chapter. This year’s series will be the 10th annual event. Petroleum Integrated Days mainly focuses on several competitions in the energy sector but also provides non-competition events. Petrolida 2022 aims to serve as a platform for university students to explore and disclose their innovation regarding today’s energy challenges through providing them a chance to achieve substantial and competitive experiences to advance their excellence.

Project Goals

Petrolida website was made to promote Petroleum Integrated Days 2023 at Sepuluh Nopember Institute of Technology. This website has several features such as:

  • A dynamic event platform showcasing everything about Petrolida, including a landing page, detailed competition pages, a merchandise page, and information about the Petrolida 2023 team
  • Login and Register pages that allow users to create an account before joining any event
  • A comprehensive user dashboard that displays all available competition and non-competition events along with the timelines, shows registered events, real-time announcement to notify user about the event they registered, and form for competition file submission
  • Dyanamic multi-form event registration for both competition and non-competition with form validation in each form step
  • Admin dashboard to monitor participants for each competition, verify registrations, and manage event data

Tech Stack

The tech stack used for this project includes Next.js, TypeScript, Axios, and Tailwind CSS for the front-end. And for backend tech stack used Laravel and MySQL.

My Role

As a Frontend Lead of this project, I was responsible of assigning tasks to the other 2 frontend developers and develop features. Here are the key tasks I worked on:

  • Implemented responsive competition pages, "About Petrolida" page and Microsite page for event profile
  • Implemented 4 reusable components including Timeline Bar, Countdown Card, Competition Jumbotron, and Footer
  • Implemented responsive multi step form UI and validation logic for each form step in competition and non-competition registration page
  • Implemented "Competition Announcement" component including form file submission enabled user see updated information and submit file regarding competition they registered
  • Integrated 4 Rest API including "create event registration", "get event registration by event and user id", "get announcement by event and user id", and "post file submission by event and user id"

App Preview

Note: to see full image preview please click the image

Back to projects