Hack4Heart

Volunteer Management System for NPO Big At Heart built using Next.JS full stack React framework, Supabase as backend database and EdgeStore for object-level storage, deployed on Vercel

Comment

Inspiration

Our inspiration stems from the belief that technology holds the key to transforming volunteer management into a dynamic and uplifting experience.

Our vision is to go beyond conventional solutions, incorporating gamification elements that infuse joy and purpose into the act of giving. Imagine a world where volunteers can track their impact in real-time, where data-driven insights empower NPO to optimise their efforts to attract more volunteers.

We want to build a volunteer management system that not only meets the needs of charities and volunteers but resonates with the collective heartbeat of a community united by the power of positive change.

What it does

There are 3 main interfaces for our volunteer management system.

Registration and Login

  • Users can register for their account with all relevant details, such as name, date of birth, email, phone number, occupation, etc. to facilitate ease of registration for events after login
  • Login page for users

Volunteer Dashboard

  • Overview dashboard containing volunteer statistics, in graph and numeric format, including the number of events they completed, mins per month and category, etc.
  • View events, with filter for past, ongoing, and all events
  • Register for events in the events page
  • Automatic generation of personalised invitation card that is displayed to user after registration
  • View events that you have registered for, filter by current, ended, attended, pending, all events
  • Confirm attendance for event after event has ended, with reflection submission
  • Generate certificate of participation after admin has approved attendance
  • Settings page to update avatar
  • Unlock avatar based on duration of volunteering minutes (0, 100 min, 500 min tiers currently, but can be expanded upon)
  • Update user information in settings

Admin Dashboard

  • Overview dashboard containing statistics such as number of pending events, mins per month and category in graphical and numeric format
  • Manage all events, view information about who has signed up for the event, their remarks, as well as the progress (whether they have confirmed attendance, and whether you have approved their attendance)
  • Manage all users, view all user information that is collected, eg. email, phone, date of birth, name, occupation, etc.
  • Approve attendance page, one click fast approval of attendance of volunteers (only displays those that are pending)
  • Create Event Listing Form for admin to input all details related to event and the poster
  • Export user and event registration informations as Excel Sheet for further data analysis by admins in the future

How we built it

  • Next.JS, which is a fullstack framework built on top of React to handle both client side and server side rendering and logic
  • Tailwind CSS to style components in React
  • Chakra UI for pre-built React components to help with the design and layout
  • Supabase which serves as the database to store user and event information, etc.
  • Supabase Auth to help with authentication, middleware, registration, cookie management, etc.
  • EdgeStore for object/file-level storage to help with certificate and invitation generation and storage
  • PDFKit to help with customising certificate and invitations
  • Vercel for CI/CD deployment and web hosting

Challenges we ran into

  • We utilised Next.JS server actions which is a relatively new feature in next.js with limited documentation and help online, hence we faced many issues in its implementation that required us to debug ourselves
  • Issues with production deployment, as we had tested our application on development environment for most of the time, but at the last 2 days when we deployed it to production, there were many issues with the production environment which were not reflected in development environment that required hours of debugging
  • This is our first hackthon and we are only a two person team, hence there is severe time and manpower constraints, furthermore, this is also our first time using next.js framework

Accomplishments that we're proud of

  • We are proud to have translated all our ideas into reality, and looking at them work makes us feel a strong sense of accomplishment
  • We learnt many new technologies and gained invaluable experiences throughout our project

What's next for Hack4Heart

Due to time and manpower limitations, we could only do so much and there are many places that can still be improved upon

  1. Next.JS performance optimisation for faster speed loads
  2. Additional sorting and filter fields for better user experience
  3. More data visualisation options by using additional graphs and charts generated based on data fetched from the API, and possibly integrating Power BI for more powerful data visualisation
  4. Integration of ChatGPT into the poster description for creation of events to help administrators write out the poster description and generate posters
  5. Implement tighter RLS security policies for database to prevent hacking
  6. Lazy loading of events and creating pages to browse events
  7. Generate more various kinds of certificates and invitation templates for better user experience

Built With

  • chakra
  • edgestore
  • next
  • pdfkit
  • react
  • supabase
  • tailwind
  • vercel
Share this project:

Updates