GeoBoard

Landing Page

Inspiration

Gen Z often remembers with nostalgia the days of using PictoChat to draw with their friends. With GeoBoard, those memories are renewed on a massive scale through the creation of shared drawing boards among users in close proximity, offering a larger, unique experience.

What it does

GeoBoard uses your geographic coordinates and translates them into a grid space representing a 0.5x0.5 mile area. You and other users are able to view and draw on a canvas for this grid space, as well as view the surrounding 5x5 grid area.

Our landing page includes a button "View the Map" which will show the surrounding 5x5 grid for your location. Though you can only view the outer grid spaces, you can draw on the center grid space in which you're located by clicking on it, bringing up the space in an image editor. Click save, then your changes will be reflected in the grid. When your location changes, the grid spaces displayed on your map will change.

How we built it

We used the MEAN stack (MongoDB, Express, Angular, Node.js) to build our application using VSCode and GitHub.

Challenges we ran into

The biggest challenge we ran into was properly storing images in MongoDB. In order to overcome this challenge, we had to ensure our image files were properly rendered and saved in the front end, sent through our image service over Express, received and processed by the server, then sent through Node.js to MongoDB.

Accomplishments that we're proud of

We're most proud of the creativity of our idea. We truly enjoyed using PictoChat as kids, and this project is a very unique rendition of PictoChat with a creative spin that we think has the potential to be lots of fun if used by many users in a local area. Additionally, this was our first Hackathon, and even though we didn't get a fully finished product, we're proud of the progress we made in such a short amount of time.

What we learned

We learned a lot about how different components of a web application work together, as well as how to use the technologies of the MEAN stack more effectively.