Mappening

An easy-to-use web-based geo-tagging platform that allows users to discover lesser known events/activities in their area.

Comment

Group location: Chamber of Secrets

Inspiration

During the early stages of HackBeanpot, the 5 members of our team spent approximately 1 hour during the team formation session trying to formulate an approach to tackle the age old dilemma of: “I’m bored, what should we do?” Evan brought up an initial idea of creating a geo-tagging social media platform, and Spenser brought up an idea of a web-based platform that provides users with a randomized activity response. Both ideas intrigued the rest of the group, and a hybrid of the two ideas came to be. We felt that having a geo-tagging platform for activities was a super interesting idea for everyone, and fit an answer we all agreed on. So we began hacking.

What it does

At its core, Mappening provides answers to a fundamental question that people (primarily city-dwellers) ask themselves on a daily basis: what is going on near me? Of course, numerous helpful resources, from Meetup to Facebook events, already exist to begin answering this question. However, pre-existing services miss a fundamental sector of the goings-on of an area: the spontaneous events, the ephemeral drop-ins of skilled performers, interesting characters, and eye-catching spectacles. Additionally, they miss out on the events that just aren’t big enough to pop up on the Facebook events feed. Mappening is for the ones who want to be known but lack the resources to penetrate the platforms of the corporate giants. Mappening is the event posting and discovering network for the common man and woman, a place where anyone can make a geotagged post informing other app-users of the nature and whereabouts of cool events that they discover or are hosting and event-seekers on the other end can stumble upon said events to liven up their day.

How I built it

We started with our database solution. We needed something relatively easy to use, powerful, and free, so we went with PostgreSQL with Express and Sequelize to serve it. We used NodeJS and Angular with TypeScript for the front end because they also suited our tastes: strong typing, OOP design, and it lined up with our experience.

Challenges I ran into

When tackling the development of the backend, Chris and Spenser mainly relied on the help of an online tutorial for setting up a REST API with ExpressJS and PostgresSQL, to guide them in understanding what information needed to be handled. After completing all steps of the tutorial, the two decided to test the backend by using Postman JSON to send HTTP requests to our server. Quickly they realized that some of the tutorial code they used was outdated (since the article was over a year old), and needed to be changed. Luckily, this issue was simply resolved by referring to the most recent documentation and leveraging the information they provide. However, simply getting the backend up and running and able to respond to POST and GET requests by communicating with our database did take some time.

On the frontend we decided to use many different libraries and frameworks together, which proved to be a difficult balancing act. Using the Mapbox API, which none of us have ever used before and is untyped JavaScript, together with TypeScript was especially difficult. We also had a hard time with our UI/UX design. We had to adjust our design as we added features, which meant adding new elements and testing with dummies until the feature was ready to be implemented.

Accomplishments that I'm proud of

Throughout the duration of the hackathon we used a variety of different frameworks and programming languages that we had varying experience with. Chris and Spenser had no prior experience working on the backend of an application but successfully setup the backend for this project using Node JS. Matt and Jaron having little experience with front end development quickly learned the basics of Angular and were able to setup the landing page and the maps search/filter bar. Evan having prior knowledge of Angular and front end development in general would consider his newfound knowledge of the MapBox API his greatest accomplishment during the event.

What I learned

Though some pre-existing skills were leveraged in the execution of this project, each of us walked away with either some exposure to or a fledgling mastery of a new framework, programming language, or API library. Jaron and Matt, while entering the competition with a seedling of experience with the Angular framework and its skill dependencies (HTML, SCSS, and Typescript), grew immensely in these skills as they worked to flesh out and functionalize the frontend of the application. Evan, the “Angular god” himself, was already quite familiar with this framework as he worked on the frontend but also picked up the ability to work with the Mapbox API to render beautiful, functional, and TSLint-compliant code to render similarly eye-catching maps. At the other end of the table, Chris and Spenser tackled the backend—a task they were both unfamiliar with but more than willing to approach. Being that we used the PEAN stack for this project, they had to learn how to use NodeJS, ExpressJS, and PostgreSQL, as well as an ORM called Sequelize. They learned how to set up a backend Express app that ran provided various API endpoints for the frontend to connect to and would subsequently query a remotely-hosted Postgres database, returning the results to the application frontend.

What's next for Mappening

The next big step for us is User Profiles. Currently, all users are equally privileged, which would lead to some obvious moderation problems down the line. Our plan regarding this is to allow limited use by anonymous users, for example a limit on posting, that then increases based on user reputation over time as determined by other users’ utility (possible ‘usefulness’ mechanic). Getting user profiles implies authentication, so integration for gmail, FB, Insta, and Snap are next. Also, we would like to implement a method of filtering event submissions; either via an admin portal or automated checker. This would allow our map to not be consumed with spam events, and enable our platform to gain its users’ trust. Another feature we aimed to add was a self-deleting event. We aimed to have the user distinguish how long the lifespan of an event they’re creating will be, and then it would disappear after that lifespan expired. We added functionality for this feature in our back-end, however we weren’t able to incorporate it due to having to limit our scope based on available time.

Share this project:

Updates