Dinowebsite

The Need for a Digital Presence

In an increasingly connected world, a digital presence has become crucial for organizations to engage with their community, showcase their work, and facilitate communication. Digital Innovation, despite its technological focus, initially lacked a web presence. This realization led to the inception of a project aimed at creating a website that would serve as a digital platform for the organization, enabling it to interact with its audience, share updates, and accept project proposals.

Introduction

The "Digital Innovation Website" project was a group endeavor aimed at creating a web presence for Digital Innovation. Our team shared responsibilities across different aspects of the project, and my primary role was to develop the server-side code for the login system and manage the submitted messages or project proposals.

My Role in the Project

As a member of the team, my main responsibility was to develop the backend functionality. This involved implementing the login system using GitHub authentication and handling the processing and storage of messages and project proposals submitted via the website's contact form. I was also involved in decision-making processes, contributing to discussions and helping to choose the technologies used in the project.

Tools Selection and Requirement Analysis

One of the first steps in the project was selecting the appropriate technologies. We evaluated several popular frontend development frameworks, including NuxtJS, NextJS, and Hugo. After considering the features and capabilities of each, we opted for NextJS with static site generation due to its high performance and flexibility.

Styling was another aspect where we had to make a choice. We evaluated Sass, CSS, and TailwindCSS, eventually selecting TailwindCSS for its dynamic nature and ease of use. It provided a consistent styling approach across different team members, fostering collaboration and maintaining consistency in our codebase.

For hosting, we considered Vercel, Cloudflare, and Netlify. We chose Cloudflare primarily due to personal preference and the fact that our other infrastructure was already hosted on Cloudflare, which made the integration smoother and more convenient.

Vooraleer al dit nuttig was, is er ook een analyse gemaakt van de vereisten. We performed this analysis by creating a use-case diagram.

Fig 1. Datamodel

Data Modeling

The form submissions were stored in Cloudflare's Key-Value (KV) storage. As the actual data was stored in Cloudflare KV, my role was to create the type definitions for these submissions. The main types defined were:

• ProjectData: This type captured the details about a project, including filter, path, image, title, date, raw date, position, summary, content, and featured status.
• InquiryData: This type encapsulated the details of an inquiry, including an optional ID, the user's first name, last name, email, message, date, and an optional file attachment.
• EventData: This type represented the details of an event, including path, image, title, date, raw date, position, summary, and content.

These types were essential in ensuring that the data stored in Cloudflare KV had a predictable and consistent structure.

Challenges and Solutions

While the implementation of the login system using GitHub authentication was fairly straightforward, the major challenge we faced was the handling and managing of form submissions. The form on the contact page allows users to submit queries or project proposals, and these needed to be efficiently stored and managed. Addressing this, I developed a robust system that sorted and categorized the submissions based on their content, making it easier for the Digital Innovation team to manage and respond to them.

Server-side Code Implementation

Our team collaborated to develop the server-side code handling the login and form submission processes. For the login system, I implemented GitHub authentication. For form submissions, I created the aforementioned types to manage user queries and project proposals.

Interface and Login Functionality

We worked together to create a user

-friendly interface for the login page. Users could log in using their GitHub accounts, ensuring a smooth and secure login process. The form for submitting queries and project proposals was also intuitively designed, emphasizing ease of use.

Conclusion

Through our collective efforts, we successfully developed a website that not only met the initial requirements but also provided a user-friendly platform for interaction. The journey had its share of challenges, but these were overcome through careful planning, selection of appropriate technologies, and teamwork. The completion of this project has resulted in a digital presence for Digital Innovation, facilitating community engagement and fostering growth.