HeartSync

Elevating Volunteer Engagement with Customizable Enrollment Forms, QR Attendance, and Comprehensive Reporting for Social Impact

Comment 2

Inspiration

Non-profits can have a lot of admin work to do - managing their beneficiaries and volunteers and keeping track of the engagement and attendance of both parties. This can be incredibly time consuming - the manpower wasted on admin work could be used for ground work and pushing for the causes they proudly stand for. Our team may or may not know this from prior experience somewhere…

This is why we built HeartSync. We hope it can simplify the process from volunteer sign up all the way to report generation, as much as possible, with intuitive UI and detailed reporting, to grant its users the power to divert their attention from time wasting adminstrative tasks to the maximum social good they want to achieve.

What it does

Manage volunteers (and more!)- built for admins and volunteers!

Cool features

  • Enrollment forms (Create and manage your own custom forms- our own "Google Forms", built from scratch!) 📝
  • QR code scanner for attendance taking 🤳🏻
    • We have an alternative method as well, including blank attendance sheets as excel exports and manual marking into the system.
  • Reports! (Some cool data visualisation for volunteer data, activity data, individuals data) and support for Excel generation! 📊📈
    • We have all three reports requested in the FAQ document: the Individual Volunteer Activity Report, the Volunteer Activity Report and the Volunteer Demographics Report.
  • 2FA: Opt in to 2FA with Singpass (using sgID) to make your account more secure! 🔐

Less-cool but still cool features

  • Volunteer Dashboard (View blogs, upcoming events, outstanding feedback and activities instantly, from the moment you sign in) 👨‍💻
  • CRUD (create/ read/ update/ delete) for volunteer 🙋
  • CRUD for organisation 🏢
  • CRUD activities (and activity session, activity attendance, activity registration) 🧩
  • CRUD for blogs 📰
  • CRUD for feedback/ reflection ✍️
  • Certificate generation for each activity that the admin has confirmed attendance 🏅
  • Deployment 🛫
  • Sign up/ in + forget password (email fallback) 🔄 📧

How we built it

We built this with:

  • Design: Figma
  • Frontend: React, Redux, Formik, TailwindCSS, CanvasJS, XLSX-renderer
  • Backend: Express, Prisma, PDFLib
  • Deployment: Nginx, DigitalOcean, CircleCI

Challenges we ran into

  • Time constraints- so many things on the bucket list but not enough time- while struggling with 5 CS mods :" )

Accomplishments that we're proud of

  1. We completed a prototype that can accomplish all of Problem Statement 1 (Big At Heart)'s requirements within a short span of two weeks, and more. Every feature we claim to have has a legitimate implementation with a supporting backend - we do zero hardcoding.

  2. We put a lot of effort into the UI as we believe that for a prototype to be useful to the NPO, it must be intuitive to use. That is why we utilised Figma for the designs and used TailwindCSS to ensure that we can customise everything we wanted for this project. We also built a custom form builder with drag and drop functionality for our enrollment forms and a QR code attendance taker for maximum flexibility for the user.

  3. Our reports are also very detailed - we believe that numbers alone aren't useful for the user - we could be bluffing them with random.randint() and they would not be able to tell. Hence, all of our data points come with an individual breakdown of the volunteers/activities involved in the count. We also have interactive graphs for better insights! :^]

What we learned

  • Tailwind CSS 💨: Maybe not the best idea to pick up Tailwind during a hackathon (we found ourselves missing our pre-styled MUI/ Chakra components many a time 🥲). But nevertheless, it was really fun to learn something new! (and be forced to brush up on our CSS).
  • Prisma ⚡: While we worked with Prisma before, working on a project with more complicated schema allowed us to really learn and appreciate Prisma : )
  • UI: The first time collaborating with a UI designer! It was an awesome experience working with someone who knows what they're doing (UI-wise) so that we can be code monkeys 🐵

What's next for HeartSync

  • More 2FA options (email, oauth, sms, authenticator- you name it!), also look into make our 2FA more comprehensive 🔒
  • Along that line, we want to expand on the capabilities offered by sgID- we might want to look into getting access to more data (scope) and the possibility of signing up just through sgID- a simple click of a button to set your profile up! 🚀
  • Audit Logs (additional security!) 📜
  • Integration with AI (recommended for you page!) 🤖
  • More mailer stuff (sending emails to all registrants, CRON jobs for event event reminders) ✉️
Share this project:

Updates