I wanted to make sure that I could make actionable opportunities for any young person who might be doing nothing on the couch.
As a recent high school graduate in Miami Dade County, I remember when I needed to volunteer community service hours to pass classes and to earn scholarships for university expenses. I enjoyed volunteering and still volunteer to this day. Even though Miami Dade County Public School students are required to obtain community service hours, those students may get discouraged in the process of finding volunteer service hours and not find volunteering as something they would actually enjoy to explore. From my three years of experience in providing design, user-experience, and website development services to non-profits, my proposed solution is to develop a website application that allows students to choose to volunteer community service hours based on interest, values, types of service, and location.
By solving this problem, more students will have an easily accessible way to get involved in their community. ~Daniel
What it does
Starburst has two audiences: opportunity creators who are looking for volunteers & students (or anyone) who want to be involved in making the world better.
Users may search and view volunteering opportunities based on your personal values, interest, types of service, or location preferences. After finding an opportunity of interest, they may contact the event organizer and request to volunteer.
Opportunity creators may create events that can be easily accessible to search engines, but only logged in users can request to volunteer.
In order to help users view volunteering opportunities that are most relevant to them, please provide details such as the opportunity available positions, characteristics (we call them “tags”), types of service, and location preferences. They may provide key contact information so that interested users may ask questions and be sure that everything will work out safe and fun!
How we built it
Version control with git and developed in VScode. The webapp was hosted with Google firebase firestore & user authentication. We used React to handle the dynamic content. React Router 4 handled, you guessed it, routing which allowed us to only load the website once while the views change. For event creation, Formik (data validation with Yup) was used to create opportuinity listings. For the domain, we used domain.com. Full-text search and filtering were implemented with Google Compute Engine VM with Docker running Elastic Search. Throughout the front-end, we used Bootstrap UI framework. We also used Sass (CSS preprocessor) to help with some custom styling.
Challenges we ran into
Data validation was a challenge at first. But on React's Documentation, I found a great Form component that didn't rely on the component state. ~Daniel
My biggest challenge was writing in React JS, since I haven't had previous experience in writing in that language. Another challenge I came across was using Bootstrap as the UI framework. Although Bootstrap is a great tool to incorporate into the creation of the web app, its various rules sometimes became difficult. It was through reading the documentation in Bootstrap that we were able to apply its rules correctly. ~Pablo
Accomplishments that we're proud of
- My first hackathon ever!
- Meeting cool people and have a great duo.
- Creating a passion project that has the potential to help students make the world a better place.
- Got the starburst web app up and running on by Sunday 1:30 am on superstarbust.com. ~Daniel
- Using React JS for the first time!
- Learning to use the UI framework Bootstrap
- Working on the front-end as opposed to back-end as I had done in my previous hackathon. ~Pablo
What we learned
This project taught me React, React-Router, Formik (React context Form), Yup (data validation), and Firebase. It refreshed my experience with Webpack and Babel. ~Daniel
Well this project was an amazing learning experience for me and I am very happy to be able to contribute to Daniel's idea. I learned React, Bootstrap, UI Design as well as what it takes to build and implement a web application. ~Pablo
What's next for StarBurst
- I seek to build out proper security by assigning user roles. The user roles will allow the public listing not be tampered with by sneaky people.
- Create opportunity organizer view that allows requests to be accepted or declined.
- Allow students to view where their friends are volunteering.
- I would try to transform my backend database from Firestore to GraphQL (thanks to 8base for inspiration).
- Add more style and animations!
- Transform into a server-side-rendered progressive web app.