Volunet

Everyone can volunteer.

Comment

VoluNet

Inspiration

We were inspired by our own struggles with volunteering. Volunteering is one of the most clandestine ways to help your community. The amount of helpful effects that can be achieved by volunteering is exponential. Your library, an animal shelter, a local charity, no matter what you do, someone is benefited positively. Now, more than ever, volunteering is crucial. Many aspiring high and middle school students are eagerly awaiting volunteer hours. However, a Google search is not enough. Only a small fraction of volunteer opportunities can be seen, and only the well-known ones. It took us a lot of deep searching and talking with others to find our respective volunteer areas. We immediately knew that the future generation should not go through the same struggle. This platform was created as a way to easily find volunteer opportunities, to help give back to your community.

What it does

VoluNet has different purposes for different demographics.

  • Volunteers Volunteers can use the platform to find volunteer opportunities in their community, in an easy to use user interface. After logging in, the user can find different volunteer opportunities in our easy to use, social-media like feed, along with an interactive map of the location. Furthermore, users can also keep track of their total hours, and set up a progress bar. A progress bar is perfect to motivate users to reach a certain goal, and keep track of this goal efficiently. The total hours is also perfect for applications to jobs and colleges. For this purpose, users can also have a diary of the dates and locations of their volunteer areas, all in an account-based UI.

  • Volunteer Organizations Local volunteer organizations will find great pleasure in the VoluNet platform. Those who are in need of volunteers, in order to advance their goal of helping their community, can use the platform to set up an advertisement for their volunteering areas, for a user base of eager volunteers. They use the same login interface as the user, but instead of a feed, they can use a specially designed request interface. Volunteer organizations can use the Request Volunteers button to create opportunities. With a rich interface with many different parameters to set it up, the opportunity will then be available for all to see/

How we built it

We built VoluNet with mainly HTML, CSS, Javascript, and Bootstrap. We built the frontend with HTML, and CSS, formatting to the best of our liking. Hundreds of lines of each were carefully typed, making sure that VoluNet looks very user-friendly. As for the backend, Javascript was our main language due to the built-in integrations with HTML. Our original idea for the backend differed drastically from the final output, yet we still made our vision come to life.

Challenges we ran into

If we listed the amount of challenges we ran into, we would reach the character limit. The most jarring challenge was the backend. At first, our vision was completely different. An ambitious design with databases, Firebase, and artificial intelligence were on the cards. However, there were some unavoidable errors that baffled many. We realized that if we dwelled on this setback, we could not progress to our goal. We scrapped the database idea, and went for a local storage approach, which was perfect and lightweight. Second, the frontend design had many initial setbacks. With the margins going one way, the padding going another, a good majority of our time was spent on playing Whack-A-Mole with different CSS elements. The biggest lesson we learned in this time was that dwelling on our minute mistakes was futile. Breaks were important, and we should focus on the big picture. There are many more various errors and challenges that made us want to quit, but perseverance is always key.

Accomplishments that we're proud of

Honestly, we’re pretty proud of the whole thing. The fact that we went from a bunch of disarrayed middle schoolers, to a project that people would genuinely use, is honestly crazy. As beginners to hackathons, we learned to adjust to the new environment, as we were never time-gated when writing code in the past. There are few key pointers that we feel particularly accomplished for. First, the design. The animations and fonts, along with the general designs of many parts of the websites, felt professional and modern, which we loved. Second, the sheer technical capability of getting inputs and putting them in a way that a user can actually use and understand is amazing. Putting a live map inside the boxes was a cherry on top. Third, we are the most proud of the impact that this program could create. Volunteering, as stated before, is one of the best ways to help a community. The fact that we have the potential to create such an impact is mindblowing.

What we learned

We learned how to cooperate as a team, integrating frontend and backend together. Our frontend developers have little experience formatting to perfection, so completing VoluNet was a new world for us. Additionally, we had integrated Google Maps in our recruitment page, another new experience. However, our biggest lesson learned was not through code, rather through our powerful friendship. VoluNet would not have come to life had we not worked together, so our most valuable lesson was that of friendship.

What's next for VoluNet

The amount of impact that this could create, as we already said before, is phenomenal. We want to expand Volunet on a massive scale, allowing anyone to volunteer. A website or an app host would make this a way to be accessed by anyone. Next, we want to create a way to sign up for opportunities, and to contact organizers directly, making it an all-in-one volunteer platform. We have many more ideas for the future, and we hope this could come to life. Thank you for listening :)

Fun fact: All the animations and search element designs were created from the ground up, without any online or premade assets. That’s pretty cool for a complete beginner group.

Share this project:

Updates