Map Features

The implemented map features include Zoom In and Zoom Out functionality. When selecting a library to build the map, we carefully considered how information would be displayed at different zoom levels to avoid overwhelming the screen. Ultimately, we chose Leaflet.js for its flexibility and control over zoom behavior.

Webpage on First Load

Zooming In

Zooming Out

Story Checking and Generating Tags

Since the team was busy and overwhelmed during the event, I wanted to avoid assigning someone to manually review the stories uploaded to the map. To address this, I integrated a call to the OpenAI API upon upload to automatically check if a story is appropriate for the event.

I also used the OpenAI API to generate tags for each story, helping categorize them. During user testing with the team, we found that the auto-generated tags added an element of joy and playfulness to the story submission process.

Generating tags to a story

Checking for appropriate story

Submitting Stories

To store the stories, the team used a Google Sheets as our database. Completely free of charge, easy to add and remove from, and if anything went wrong we could just create a new Google Sheets.

Writing/Reading to/from Google Sheets Database

Design Components

Apart from the map interactions, the main component that required designing was the modal that popped up for users to input stories.

The modal consists of an input and final submitted state.

Design Components