In their first week with Commit, each new Engineering Partner takes on a hackathon onboarding project. They build a project, present it to the Commit community, and write a short summary of their experience. There are no restrictions, no limits, no joke.
I had no idea what to do for my hackathon onboarding project.
But when I read through the guideline, I saw an interesting idea: “Snapchat-like-map to show where each EP is located.” The “aha” feeling just came to my mind, I found my HOP idea.
In a new world, everything is trending towards the cloud. People are now working remotely, far away from each other, connecting through the internet (Slack, Linkedin, etc.). An application that displays all team member’s locations on a map view is a great way to show how diverse your team is.
PLANNING
The application has several components: a Slack bot, API, map interface, database and authentication. The HOP is a great way to experiment with new technology and learn new skills. I had never worked with Slack API before so this was a chance to try it out.
Users will register through the Slack bot. In this way, I can use user info from Slack to verify their team and set up their account accordingly. Once the registration is completed, the user will be granted access to the app with a temporary password. On the first time logging in, the user will be asked to set their new password and set their location. Then they can view the map with all registered members of the team.
THE STACK
I used Google’s Firebase for authentication and database (Firestore), for quick implementation.
On the frontend, I used NextJS, Material UI, and Emotion CSS for styling. The application is quite simple at this stage—I decided to not set up any state management. In addition, Firebase Firestore provides offline data access [Access data offline | Firebase Documentation (google.com)], so I didn’t have to cache any data on the client myself.
The map is engined by MapBox. I chose MapBox because it provides a lot of flexibility in customizing and styling, and the pricing is much more affordable than other map API.
About the API, at first, I placed it on Firebase cloud functions because other components are also Firebase products. However, there is a downside of the serverless environment that made me move the API into NextJS API routes: COLD START. If you ever work with the Slack command, you might know it has a 3000ms timeout. If the function isn’t running while the user sends a command from Slack, it always returns an “operation_timeout” error, even though the action still executes and returns a successful response later on. That’s not right at all.
I was struggling with Slack API, in the beginning, to test my bot on the window Slack app. There were no changes to my bot on the app after I configured it. It took me hours to find out the Slack app has a cache to prevent the bot from reflecting my changes immediately. I had to refresh the app manually (Ctrl + R within the app) to get the result.
THE OUTCOME
Here is how it looks:
Register through Slack bot.
Set up password and location on the app.
And here is your team.
FUTURE EXTENDS
The application is very simple and straightforward. At the time I wrote this, the Slack bot is only for internal use by the Commit team. However, the project is ongoing, so I will still keep building and upgrading this project to publish it to the public.
At this stage, users do not have much power over the application. I want to give them more ways to customize how they view the map, and more opportunities to interact with other members, like messaging inside the app, filtering members based on their profile, etc.
Anh Nguyen is a software engineer who is experienced with React and building effective user interfaces and web experiences. In his spare time, he builds things with Raspberry Pi and enjoys video games.
# # #