The Portal Project – Texas Inventionworks

We created and deployed a facility management tool for the Texas Inventionworks using GraphQL, React and AWS Cloud Infrastructure.

Screen Mockup

This project was initiated in May 2020, soon after the start of the COVID-19 pandemic. With the University of Texas at Austin shutting down all campus operations, our organization needed to resume operations safely in the coming semester. We decided to create a tool that would allow us to automate most of our operations and digitize them, allowing us to reopen in the fall semester.

For reference, the Texas Inventionworks is an innovation center (a makerspace) on the UT Austin campus. It provides student and faculty with free access to advanced fabrication equipment like 3D printers and laser cutters (my personal favorite). Our organization is extremely customer focused, and everything we do revolves around our ability to interact with the student populous.

So what’s the challenge?

  • We needed a way to track who comes into our facility, and how long they were there for. Usage Tracking
  • We needed a way to allow students to checkout and return tools in real time while having minimal contact with our staff. Tool Checkout
  • We needed to be able to track what tools have been checked out, and who they had been checked out to. Contact Tracing

So I started designing. I made the first mockup in Figma, and turned out a quick design in a couple of days. It was extremely helpful that this was an in house tool because it meant that we could skip a large part of the user research/ customer discovery phase because we were the customers. We were building a tool that we would end up using.

Mockup of student sign in flow

There were three main things that we needed to design for

  • Backend, server and database
  • Frontend Student Portal
  • Frontend Staff Portal

We decided that the most critical part in this was the backend infrastructure. I had never actually worked on with a database or any kind of backend infrastructure before, so most of my knowledge was gained from friends and the couple of CS classes that I took.

TLDR; It was time for some research.

I started of by trying to understand how an application really worked. I had a vague understanding, but if I was truly going to design and build and application, that understanding would need to be comprehensive. I ended up turning to my favorite learning tools: YouTube, Stack Overflow and Google.

In the process, I ended up creating a playlist! (Check it out if you’re interested)

Obinna’s intro coding playlist

After doing the research, I finally decided that the tech stack would be built using GraphQL, MongoDB (which we later switched out for DynamoDB) and Node.js

We went through 3 different iterations of the website as we learned, each on constituting a major change in our tooling, but ultimately resulting in a much more performant and effective system. In the end, we finally settled on a serverless solution

  • AWS AppSync for the server
  • GraphQL for the API (which allowed us to employ real time subscriptions)
  • DynamoDB for the NoSQL database
  • AWS Amplify for the hosting

One of our primary considerations when choosing what tools to use was the cost. Although it was never explicitly stated, we knew that our solution needed to cheap and easy to maintain for its continued success. That was one of the primary reasons for choosing AWS. At the moment, a month after deploying the system, we’ve paid a total of $0 for all of our hosting. As the service grows and we see more traffic, we definitely expect the cost to increase, but even then it remains extremely time and cost effective.

The central concept that we structured our application around was the Transaction Log. Similar to Blockchain, we designed our application to work around an immutable log of all transactions that take place. Since we deployed it, the transaction log has been an extremely useful not only on the backend, but also in the field. It has helped us gauge how well the application is working, and also track the usage.

The transaction log

Implementing the Transaction Log often proved to be difficult but was well worthwhile.

On the frontend, we decided to work with Facebook’s React.

We officially launched the site on the 26th of August, 2020, just 3 months after initiating the project. For me, it was a personal achievement. At the start of the project, I had never built a website or an application. Knowing what I know now about web development and software engineering, I think that I’ve learned a lot but more importantly, I feel like there is so much more that I can learn.

The project was personally fulfilling, and working and learning with my team was an irreplaceable experience. In the course of writing this short piece, there was a lot of details that I had to skip over (like the three different ways that I used to rebuild the backend). If you ever get curious, or, better yet, want to chat and give me some advice, please reach out to me!

Thank you very much for reading!

Leave a Comment

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s