Volunteller

Volunteller is a web application to help people find volunteer opportunities near them. This way, people can spend less time searching for opportunities and more time giving back to their community.

Comment

My name is Rishabh and am in high school, 9th grade.

This is my first hackathon and my first time creating a project in react, and I hope you like it!

Try my live demo!

Inspiration

When I saw the theme "Give Back Hacks", I started thinking about ways to give back to the community, and my mind instantly went to volunteering. I have joined multiple volunteering organizations in the past and have volunteered throughout my school and my city. However, now if you want to be part of certain clubs or organizations, you have to spend a certain amount of time volunteering, which is great, except for the fact that it is sometimes hard to find volunteer opportunities near you. As a result, I built volunteller for this Hackathon to make it easier for people to find and sign up for volunteer opportunities.

What it does

Volunteller is a website made with ReactJS and NodeJS, and uses a database set up on Google Firebase. The database contains a list of volunteer opportunities in different cities, which are accessible via the website. On the website, you can search by city and a list of volunteer opportunities will pop up, each displaying things like the times, requirements, and locations for each volunteer opportunity and an option to sign up. There is also a feature on the website which allows users to input volunteer opportunities, and the website will directly update the database for future searches. As people find new opportunities they can enter is into the website, and the website will be used more like a crowdsourcing platform for volunteers.

How I built it

Volunteller was built with NodeJS and create-react-app. I used the UI library Chakra UI to make most of the UI elements to put an emphasis on the user experience. I made multiple different react functional components to work together and make the website. I also used the real-time database on Google Firebase to store all of the volunteer opportunities. I used their API to read data and set data into the database.

Challenges I ran into

When trying to add a list of volunteer opportunities to the Firebase database, the website was rejecting the .json files containing the list. I eventually traced it back to some of the basic formatting of the .json file and how it used UTF-8 so it could only contain UTF-8 character. What happened was Firebase was not compatible with some of the characters in the file and those needed to be formatted differently.

The time limit before submissions was also a huge challenge for me. This is only my first hackathon, and it's my first time making a real project with react. On top of that, I was working individually and did not a have team to work with. Nevertheless, I was able to push through and create a working project which I am very happy about and very satisfied with.

Accomplishments that I am proud of

I proud of how I was able to create such a high quality, visually appealing react website even when it was my first time doing this and I had barely used react before. I was also able to integrate and use Google Firebase, and I had never used it before in the past, and I am proud that I was able to do that.

What I learned

Throughout this process, I learned how to use react hooks and create functional components. I also learned many different react basics which I can use in the future. I also learned a lot about using UI libraries such as Chakra UI, since I have never used one before, and I learned a lot about CSS and styling from using this library. Finally, I learned about Google Firebase and NoSQL databases. I also learned about how to integrate a database into my code and use Google Firebase's APIs.

What's next for Volunteller

Volunteller is very much still in its early stages. It could use lots of different crowdsourcing features like asking someone to login to verify that they are a real person, and reporting volunteer opportunities to make sure they are real. I could also give volunteer opportunities an end date so that a volunteer opportunity doesn't show up once it is over. As a whole, there are lots of possibilities for volunteller's future there are lots of improvements to be made

Github Source Code: https://github.com/shaubby/volunteller

Credits: https://icons8.com/license https://www.freepik.com/?_gl=1*1lezffn*test_ga*MTQ3OTk3MDQ2Mi4xNjY5MzI3MDk4*test_ga_523JXC6VL7*MTY2OTQyNTUxNy4zLjEuMTY2OTQyNTU4OC40OS4wLjA.*fp_ga*MTQ3OTk3MDQ2Mi4xNjY5MzI3MDk4*fp_ga_1ZY8468CQB*MTY2OTQyNTUxNy4zLjEuMTY2OTQyNTU4OC40OS4wLjA.

Built With

Share this project:

Updates