Short Explanation

The Petrolida 2021 website was meticulously crafted to promote the Petroleum Integrated Days 2021 event at Sepuluh Nopember Institute of Technology. Leveraging the robust capabilities of Next.js, I implemented an efficient route management system using Static Side Generation (SSG). This approach not only ensured swift and seamless navigation for users but also optimized performance by pre-rendering pages at build time.

One of the key advantages of using Next.js for this project was its ability to export the website statically, allowing for easy deployment to a CPanel environment. By generating static files, we minimized server-side processing and enhanced the website's reliability and scalability.

Additionally, Next.js provided a flexible and intuitive development experience, enabling rapid iteration and customization of features to meet the specific requirements of the Petrolida 2021 website. Its comprehensive documentation and robust ecosystem of plugins and libraries further facilitated the development process, empowering me to deliver a polished and professional website within the designated timeframe.

In summary, by harnessing the power of Next.js and Static Side Generation, I created a dynamic and responsive website that effectively promoted the Petrolida 2021 event. The seamless route management and easy deployment to CPanel ensured an optimal user experience, while the flexibility and efficiency of Next.js streamlined the development process, resulting in a successful and impactful web presence for the event.

Project Goals

The primary objective of this project is to provide users with comprehensive information and guidance for registering for competitions and pre-event activities through Google Forms. The website comprises four main components, each serving a distinct purpose:

1. Landing Page: This serves as the entry point for users, offering general information about the event. It provides an overview of what participants can expect, highlighting key features and benefits.
2. Competitions: The website features seven distinct competitions, each with its own dedicated route. These routes serve as individual sections where users can explore detailed information about each competition, including rules, guidelines, and registration links.
3. Pre-event Activities: In addition to competitions, the website also includes pre-event activities such as talk shows. These activities are showcased separately, providing users with specific details and registration options.

By organizing the website into these distinct sections, we aim to streamline the user experience and make it easy for participants to navigate to their desired sections. Clear calls-to-action and intuitive navigation further enhance usability, guiding users seamlessly through the registration process.

Overall, the website serves as a comprehensive platform for users to learn about the event, explore different competitions and activities, and register conveniently through Google Forms. Our goal is to provide an informative and user-friendly experience that encourages participation and engagement in the event.

Framework & Dependencies & Tools

• React JS with TailwindCSS and TypeScript

Lesson Learned

Developing my first event website, I prioritized implementing robust SEO practices to ensure optimal visibility and discoverability. My discovery of the next-seo library proved instrumental in configuring SEO parameters seamlessly within the Next.js framework, enabling efficient management of meta tags and other essential SEO elements.

Anticipating multiple revisions throughout the project lifecycle, I adopted a data-driven approach to streamline development and enhance flexibility. By storing content in JavaScript files and dynamically rendering it within the website layout, I minimized HTML writing and expedited the revision process. This strategy not only facilitated rapid iterations but also promoted cleaner and more maintainable code.

Embracing libraries and tools that streamline development processes played a pivotal role in optimizing efficiency and productivity. Through this project, I gained invaluable insights into enhancing code cleanliness, leveraging data-driven techniques, and maximizing the effectiveness of development workflows.

In summary, this project served as a valuable learning experience, emphasizing the importance of prioritizing SEO, adopting data-driven approaches, and leveraging libraries to streamline development processes. These practices not only contributed to the success of the event website but also equipped me with essential skills and insights for future projects.

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.