Beyond the Usual, Passive DEI Efforts in Tech

Blog: Building an Internet-of-Things (IoT) Gate App Using a Raspberry Pi, React (JavaScript), Node, HTML and CSS

Manny Becerra as a child

June 2019

My good friends at 720 in Reno recently asked if I could help them with identifying and creating a simple, affordable solution to help alleviate their parking delemna. After learning more about the situation, collecting feedback from tenants, and understanding the property owner's initial criteria/wishes and resource constraints, we settled on designing and developing an IoT app — for iOS, Android and as a Progressive Web App (PWA) — that tenants and guests of the property could easily use to open and close the analog gate on the lot for whenever they needed to ensure parking was more available to them and their clients during peak times.

The level of polish and professionalism on this app is amazing - User feedback

Screen shot of IoT front-end app for controlling the 720 Tahoe Street parking lot gate

Additional background on use case and situation

The property (720) is located in Midtown Reno, which has experienced a surge in traffic the past few years. The property has one of the few, existing parking lots in the Midtown area. This has made it difficult at times for students and customers to find nearby parking when visiting the 720 property to attend yoga classes, salon appointments, and conduct general business.




  • Working with the property owner, John, we installed a physical keypad next to the gate as an "escape hatch" that folks can use should they forget their smartphone or simply don't have one to begin with (again, our users range from tech savvy to tech avoidant and we wanted to ensure there was more than one way to get in-and-out of the lot if the gate was closed when someone arrived)

  • SMS notification is sent whenever the gate is toggled (closed/opened). I leveraged the Twilio SMS API to accomplish this.

  • The frontend (F/E) user interface (UI) is built using React, CSS, XHTML, JavaScript, my design system, Bristlecone, and accessibility best practices (A11Y).

  • The app allows for many concurrent users at once and syncs the gate's state across all active user sessions. For example, if user A opens the gate, user B's app session is automagically updated to reflect the most current state of the physical gate, in this case, opened. Now, if user B then closes the gate, user A's app session would reflect this too

  • The node API server resides on the R-Pi, while the secure front-end (F/E) app I have hosted in the "cloud" with Zeit's excellent serverless hosting services. The F/E app that users use to interact with the on-site gate communicates with the API server via secure DNS and port-forwarding configurations

  • The node API server is auto-started anytime the R-Pi is rebooted, intentionally or, for example, if there is a power outage, then the power comes back online

  • I integrated a live video stream on the F/E app using the R-Pi's camera capabilities; this way if a user is inside the property and cannot visually see the gate while wanting to operate it, they can get a real-time visual before and after operating the gate using the app's user interface

  • User events, such as the toggling of the gate to the open or close state, are logged to help the property owner and myself review the analytic trends from time-to-time. The data and reviewing of it can help us better understand peak-times and general usage of the app for helping adapt and improve the app further in the future as needed to reflect the ongoing real-life needs as they evolve

Project collage

Tech and rollout overview

Raspberry Pi

This problem was prime for leveraging a Raspberry Pi (R-Pi) and custom node API server for interfacing with the analog gate hardware, specifically, controlling the R-Pi's GPIO input/output pins for triggering the gate arm to either open or close per a users' request.

Nodejs API server + customer-facing app

For communicating with the API server, I built a front-end app using JavaScript, HTML and CSS, more specifically, React w/hooks, my Bristlecone design system, accessibility best practices, and semantic markup.

Marketing and product training site

To help with the adoption rate and on-going usage of the product (app), I created a product website, also housed within the monorepo. Learn more about the product and training site below.

One-code-to-rule-them-all: monorepo

To manage the development of all code and assets for this project in a sane and sensible manner, I organized everything under a monorepo architecture with a configuration that allows me to run all sub-apps (e.g. api, frontend, marketing) at once via one command; this also allows me to run each sub-app individually, if desired or as needed.

Continuous deployment and hosting

I rolled-up a deployment script that leverages Zeit's Now serverless hosting service for supporting continuous deployments of the marketing (product + training) site along with hosting the main frontend app app's assets used by the mobile app. The mobile app, for both iOS and Android, is itself made-up of one codebase (the frontend sub-app within the monorepo). ✨

Learn more about other tidbits to the final solution.

Design approach

Partial visual of the 720 IoT solution's QR code for directing users to product and training material

Since users of the app would range across the entire spectrum, from novice to seasoned smartphone users, the user interface and overall experience (UI/X) had to be extra considerate of keeping the learning curve low while delivering a user-friendly, rich experience. After some initial design iterations, it made sense to have the UI/X reflect a typical push-button keypad that the majority of the app's users would already be familiar with in one form or another. Couple this common real-life user interface (a keypad) with a thought out color state management approach that reflects the gate and user interface's state (based on user input). Along with motion effects, the final product and UI/X turned out better than originally expected.

Reliable connectivity

Since this is an IoT solution, reliable and consistent Internet connectivity between the API server hosted on the R-Pi and the outer world was paramount. Since the Internet router sits physically inside the building and the R-Pi is located securely outside a good amount of time was spent experimenting with various antennas from the building to the R-Pi. After the first several attempts, it seemed like we were going to hit a blocker, but with persistence, curiosity and collaboration with others, we arrived at a reliable solution that can be further fine-tuned over time as we collect user feedback. I learned a bit about antenna theory during this phase of the project.

Product + training material

To complement the rollout of the app, I created a customer-facing, by-invite product page — under the brand Park with Ease — that encompasses the same look and feel as the app's UI/X, which contains helpful training and educational material for tenants and their customers, such as how to access and use the IoT app for controlling the on-site gate arm. This product page was also used for creating the hard-copy assets for in-person training, which contains a custom QR code that users can, for ease of access, scan with their phones to be redirected to the app's how-to product page at any time when needed. Product page also contains the relevant links to the Google Play Store and Apple App Store for users to download the app for their respective smartphone. As an alternative, the app is also accessible as a Progressive Web App.

Collaborators and Contributors

While I played several, active roles in this project, from UI/X designer, dev/coder, devops and architecture, educational trainer to product and project manager, the final deliverable couldn't have been reached as well as it did without the collaborative contributions of the following individuals (in no particular order):

  • John J. Jesse, property owner, co-lead; also filled in my gaps in knowledge with how analog, dry-contact connections work
  • Greg Warren, networking + WiFi hardware
  • Randy Sloan, antenna theory
  • Launie Gardner, copy editing and UX
  • Tenants and customers of 720 and their feedback

With the contributions and cross-functional collaboration from these individuals, the IoT gate app's quality and deliverable increased better than originally anticipated in system uptime reliability, physical design implementation, clearer training material and Web content, and overall user experience.

Closing remarks

While the initial product has been delivered, it's been designed and architected — from the API server, frontend app, even the physical gate configuration with the Raspberry Pi — to be easily extended as needed or desired in the future; for example, we may want to add some LEDs down the road that turn on/off, of various colors, depending on user interaction and the state of the physical gate. There's another feature enhancement in the pipeline that I will do a follow-up post on, as it deserves its own dedicated piece.

If you have questions about how to rollout your own, similar IoT solution using a Raspberry Pi, node API server and robust F/E web app, feel free to connect with me and ask away - I'd be happy to share and consult.


Manny Becerra as a child

I operate from a place of compassion, possibility and imagination. My work and efforts share a common goal: create a better, sustainable and equitable world by building inclusive communities, products & experiences.