| Connections Lab

Asmbly Dash – part 2

Cover Image for Asmbly Dash – part 2

Code | Demo

Background

We‘ve been covering real-time user experiences in Connections Lab. This iteration of the Asmbly dash utilizes adds a web socket server to allow users to "raise their hand" and ask for help at individual stations. I found the discovered the model for this “assist” interactivity from Glitch and thought it would be interesting to adapt to an actual space.

Technology

Having some familiarity with socket.io, I wanted to learn a bit more about ws with this iteration. This library is super light weight, and unlike socket.io, clients in the browser can just use native WebSockets to interact with the server. I had some difficulty updating my Linode box to permit WebSocket connections, but after rolling out a standard Nginx server with LetsEncrypt, those problems were mostly resolved.

On the frontend, I used a library called react-hot-toast to manage the new toast notifications. These notifications broadcast when a user requests assistance and also serve as a status indicator for the requestor.

A toast notification indicating help is on the way

After user testing with some friends, I found that communicating a “pending” state was particularly important so that users new their request was received without issue. It also serves to alert them when help is on the way.

A toast notification indicating a request for assistance is pending

Next steps

In project three, I’d like to make the assist interactions actually one-on-one, so that there isn’t several individuals responding to a request. In addition, I‘d like to add chat functionality so individuals tuned in from their home office can offer assistance. For a reach goal, I‘d like that communication to afford optional video chat.

| Connections Lab

Asmbly Dash

Cover Image for Asmbly Dash

Background

Our Connections Lab midterm project was an opportunity to combine and integrate ideas we’ve been covering over the past few weeks. I recently joined Austin’s local makerspace, Asmbly. During my onboarding and training the instructor mentioned the need for a way to quickly report issues with the stations. For my MVP I wanted to create a site that could contain information about each station (tips, safety, required training) and also allow users to submit those reports to the releveant staff.

Technology

I used Next.js for this project, this choice was motivated by two key features. The dynamic routes would allow me to programatically create pages based on a simple JSON file storing the tool data. In addition, when deployed on Vercel, the Next.js API routes makes deploying serverless functions a snap. I used this feature to create a function to create emails and route them to the appropriate staff using the nodemailer library.

For the frontend code, I used TypeScript, React and CSS modules to create reusable, scoped components. While this project certainly could have been tackled without these tools, I find that React greatly reduced the amount of code authored. In addition, TypeScript and CSS modules makes it difficult for future developers to break things. This is particularly important for this project considering Asmbly staff are all volunteers so anyone could chip in.

One piece that turned out really well was the QR code generation. I used a JavaScript library to map over the tools data and generate a QR Code for each one. I even got a chance to use the print media query to format the list when printed.

Next steps

I did a playback with Charlie, the instructor who first pitched this idea and he had some great ideas. The makerspace has a wiki that has some basic information about each tool. This could be used either as the actual link target or to source data into my app. Rather than throwing the information all on one page, another version might allow the user to select from three options: Info, Maintenance, Problem. The app could then simply route the user to the correct service depending on what they’re trying to do.