Fast Tracker

Successful sign in for Volunteer (Currently on Register Mode)
Main Page that both attendee and volunteer encounter
Sign in Page for both types of users
Successful sign in for Attendee

Inspiration

I'm one of the developers from the Alerts App team that helped developed the BeachHacks schedule page. One of the project goals of the website is to keep track of interest rates for events beforehand. It gave me a lot of experience setting up the frontend and backend but I felt like the project goals could expand more now that I have more technical experience. I originally wanted the website to be able to streamline the process for taking attendance, consequently lessening the workload of BH volunteers by reducing redundant operations and improving attendee experience by shifting responsibility towards the software. Now that I have the technical experience, BeachHacks 2023 was the perfect opportunity to create a demo of my original idea

What it does

The Web Application serves for two actors:

BH Attendees
BH Volunteers

The Use cases for the software are built around these two actors --> Use Case 1: Lets Attendees login to an account using a unique ID sent by BH --> Use Case 2: Register attendee for BH --> Use Case 3: Let Attendees purchase merchandize

How I built it

My Tech Stack revolves around React.tsx for my frontend which allows me to break down the application into smaller components, and Firestore for my serverless backend that contains the profile for each attendee and volunteer using the application. Additional libraries for this are the qr-code generator and the qr-code scanner. Finally my development environment was Vite which provides fast start-up and module installation. The web application was separated into 6 tsx. components which makes the application very modular and open to expansion and optimization.

Challenges I ran into

Implementing TypeScript into the project was definitely the biggest challenge that I have encountered. I was faced with errors that I've never encountered before. Eating up time for problems that could have literally been solved with a single exclamation point! (I didn't know a variable can be undefined when it has a value??). I was not able to use the first choice of the library that I picked due to TypeScript having problems inside the config.ts! I definitely need more practice using TypeScript.

Accomplishments that I'm proud of

One of the accomplishments I'm most proud of is providing every use case a programmatic solution in the software using technologies that I'm new too. It was my first time using TypeScript and Firebase. Michael Botsko's speech was definitely one of the main factors in me taking a leaping to TypeScript and I'm glad I took the risk of using it since it allowed me to dip my foot in a language that improves development in the long term.

What I learned

I learned how to use TypeScript and got more familiar with it which I will definitely use more in my projects. I also learned how to use Firebase which was incredibly easy to set up besides some confusion about some methods. It definitely makes the developer experience for the back end totally awesome. These technologies are what I will use with the next project that I will be part of which is also a web application used for scheduling emt's.