BAHFamily

Inspiration

We were inspired by the functionalities and UI of giving.sg, which is a non-profit organisation that runs a website where volunteers can easily view and sign up for upcoming volunteering events. We wanted to make a dashboard style website that enables the user, volunteers, organisations or adminstrators, to easily navigate through the page and find the necessary feature that they need to use. For example, NUS Canvas has all the functionalities that students and teachers need for student-teacher interactions in the dashboard-like website.

What it does

BAHFamily is a platform used by volunteers, organisations and adminstrators of BAH. It serves several purposes, such as recruitment of volunteers, promoting volunteering events, collecting volunteering demographics data and collecting feedback and evaluation. The platform enables volunteers to enroll in events, create requests for certificates and be notified of activities. Organisations can create events, manage requests and view the list of new volunteers signups and those already enrolled. Administrators can view reports about volunteers such as their volunteering hours throughout the year and demographics of volunteers.

How we built it

BAHFamily is a full-stack application developed using Next.js framework and Postgresql with Prisma client. The frontend components were built using the ShadeCN UI library and TailwindCSS.

Challenges we ran into

One of the biggest challenges that we ran into was using Nextjs 13 App router, which was vastly different from the previous page router. It took us a few days to get accustomed to this new framework. The second biggest challenge that we encountered was the scope of the project. The problem statement was quite general and allowed great room for creativity, hence, we had to spend some time discerning what features we wanted our application to have.

Accomplishments that we're proud of

By splitting our team into the backend and frontend side, we delegated our work smoothly and quickly worked on our tasks. We spent a good amount of time on the wireframing of the website using Figma. In the short amount of time of the hackathon while also juggling with our school workload, we are happy that we could create a working wireframe of the website based on the figma ideation process.

What we learned

Learnt to use

UI libraries in react such as ShadCN and tailwind CSS
using figma
creating dashboard components such as charts, events cards, and tables

What's next for BAHFamily

List of features for future development: Email notification feature Use of a session-based authentication system Deployment of the web application on Vercel