ALLIN1

Inspiration

In this day and age, collecting data is king. E-commerce sites like Shopify, Amazons are always collecting user data and doing analysis on our digital footprints. So we thought, why not do something similar for a volunteering system where we are able to collect and store user information so as to better optimize and facilitate future events.

What it does

Breaching the gap between front end and back end, allowing a centralized database to be easily accessible through the use of a website.
Providing a hassle free experience for volunteers to sign up for events as well as keep track of their hours and earn rewards.
Allowing the administrators to reap the benefits of a centralized database, thus providing in-depth analysis on each event.

How we built it

Back End: We created a centralized database using PostgreSQL and connected it to our website through the use of Prisma. We also utilized NextJS to set up server side actions such as user authentication and data retrieval. To ensure that User data matches with the one in our database, we used Zod to validate the data and to prevent any XML attacks.

Front End: Our front end is built with NextJS14 which is a React Framework. We utilized AuthV5 for volunteer registrations. We also set up client side actions to retrieve user data and respond to user actions such as requesting for Certificate and getting the number of hours. To display analysis, we utilized Rechart framework which is able to generate charts such as line graph, pie chart and more.

Challenges we ran into

Integrating database into a website was not a small feat and we had to consult StackOverflow repeatedly to solve some of our problems.
This is our first time setting up a website for production and we ran into countless bugs. Furthermore, the use of Typescript instead of Javascript also did not help our case as even though the website works perfectly fine locally, we realized we had to fixed all the type errors which gave us a lot of trouble.

Accomplishments that we're proud of

Though the journey was not easy, we are really proud of our final prototype -- a user-friendly website which is able to facilitate the storing and extracting of information.

What we learned

We really learnt a lot through this project, not just in terms of web development knowledge, but also how to work efficiently as a team. As we needed both front and backend products, we had to come up with action plans for the UI/UX designer as well as the person designing the database so that the final product can complement one another.