CommunityConnect

• 

  Our stylized map with the SacHacks Event

• 

  A list of events in the area

• 

  A list of organizations to follow

• 

  Creating an event

Introduction

At SacHacks, our team spent our first two hours discussing ideas. We talked about developing applications for people to meet up to play sports, to exchange services instead of money, and even an ideal-gerrymandering simulator. Ultimately, we decided we wanted an application that made creating community events easier, allowing people to connect, and create exposure all in one place.

What is CommunityConnect?

In CommunityConnect, events can be hosted by individuals, groups, and even organizations. These events can be for professional or recreational purposes, integrating casual and work life in one platform. These events are laid out on a customized-Google-map with less distractions. This makes keeping up with events in both cases much simpler and makes staying connected with your community a fingertip away. Some other features include showing the number of participants in an event, a discovery page showing relevant local events, and a robust search that allows the searching of users, groups/organizations, and events.

Challenges

We used a combination of TypeScript, HTML, CSS, and React for our frontend web-app-development. As four programmers who mainly focus on the backend, web design and implementation was difficult. We looked through many templates, watched dozens of tutorials, and spent several grueling hours developing a clean and simple UI. We also utilized the Google Maps Platform, the Google Cloud Platform, and their APIs in order to bring our project to life. Without experience in troubleshooting Google Maps APIs, it was difficult to understand why certain things… just wouldn’t work! That was until we figured out it was a bug on Google’s end. Once that was out of the way, we spent several more hours understanding how to integrate, stylize, and embed Google Maps into our website. We ended up designing a map with a custom theme and parameters that made it not only visually pleasing, but also very practical.

What's Next?

After overcoming these hurdles, it was a matter of putting time and effort into implementing and troubleshooting new features. We are proud to have developed all of this in less than 24 hours, gaining important skills in frontend development and becoming familiar with reading API documentation. Although SacHacks is officially concluding soon, this project will not! We plan to develop a database to store user information and possibly even look into making a mobile app-version. We also mistakenly removed event-create permissions for non-organization members, which is something we will need to fix. Besides planning these future changes, we look forward to participating in future hackathons!

*Note that in the linked demo, you must "sign up" for an organization account in order to create an event in the bottom left of the sidebar

Built With

• css
• google-maps
• html
• react
• typescript