Check us out here!
Two members of our team recently joined a service fraternity. In the process, we met an incredible group of friends and discovered great opportunities to give back to the community. We also saw that one of the biggest challenges in volunteering is bridging the gap between organizations and volunteers, and building a community joining volunteers together. We hope that everyone has a platform to easily connect to the community around them and like-minded people who also want to contribute. Service and volunteering is not only a way to help others but also to gain exposure and have fun!
Reach Out is a platform that serves both practical and social causes. On one hand, we provide a place where volunteers can easily find service opportunities and nonprofits looking for help in their area. On the other, we help create a channel of communication and networking amongst the volunteers themselves.
Individual users can use their account to access a map that includes various service events pinned at their respective locations. The markers represent the category of the service event, which can range from healthcare to education to the environment. Users can quickly retrieve information about each of the service events by clicking on the markers on the map. After browsing location, date, and descriptions, they can directly sign up to take part in the event. Additionally, users can friend each other, and build a network on Reach Out to coordinate events or just connect with people who are also interested in service. On each event information page, users can see which of their friends will also be attending. On each user's individual profile page, they will be able to view their friend network, their upcoming events, and a progress bar that displays the hours they have dedicated to volunteering.
Nonprofits and organizations looking for help can also use Reach Out to find volunteers. Organizations will be able to create events for users to see and sign up for. These events and their details will be stored and each event is pinned on the map for all the users to see. This is a direct and clear way of visualizing volunteer opportunities, and will help both the organizations and volunteers to efficiently find what they want.
Reach Out was built using a mix of PHP and JavaScript. We used phpMyAdmin to store the database of organization, event, and user data, and used HTML, CSS, JavaScript, Bootstrap to create our user interface. Additionally, we applied the Google Maps API to create the graphical interface and visualization of our volunteering opportunities map.
We encountered various obstacles in the design of our user interface. From the progress bar on the user profile page to the collapsing sidebar on the main map display, we had trouble making everything look sleek and function properly. Additionally, we had difficulty separating the login and interfaces of the invidual users and the organizations.
Some members of our team did not know much about web development prior to the hackathon, so we are very proud of the product we made and the fact that it actually works! We are also incredibly happy that we were able to find something we were passionate about and turn it into an idea here -- we may even use Reach Out ourselves within our fraternity.
We learned that making everything look nice is really not as easy as it looks. At the same time, addressing these challenges helped us learn much more about JavaScript and the process of making a web application overall. Thinking through the application and how people would be using it helped us a lot when we added features, or just considered details that can make a difference in user experience.
Although people can find and friend each other through Reach Out, we think that there is more potential in the features that would help users make more connections. We would like to have friends to be able to see each other's progress, so they can motivate each other together along the way. Additionally, we would like to see many organizations in different geographical areas using Reach Out.
HTML, CSS, JavaScript, PHP, Bootstrap, Google Maps API, jQuery, Python