Overview

This was my final project as a senior at Utah Valley University, and I gained valuable skills and experience during my time contributing to the app. Every capstone project must be for a real-world client, so the client for my team was Prof. Michael Harper from the Digital Media Department. They needed a solution for checking out devices for students, but existing options didn't have all the features they needed. The decision was made to make the app in-house and give seniors the opportunity to work on it! I was a lead developer on a team of other developers and designers, all working toward the same goal of building this app for the school.

The project was two semesters long (about 8 months), which gave me and the team plenty of time to research and iterate on features that the digital media department needed in the app. My group was actually the second group to contribute to the app; the first group was responsible for the discovery phase and building a basic prototype. The app needed to be built with the latest technologies that would be production-ready, so the tech stack of NextJS, TypeScript, and AWS for the backend was chosen.

The first major goal for my team was to overhaul the user experience of the app. The prototype included basic functionality, but the UI needed some major work if the app was going to eventually fulfill the end goal of being used by students and faculty. We used the first semester to focus on this, and in the second semester we focused on adding major new features like kit management and checkout. My team took a basic prototype and turned it into a fully featured app for managing equipment from the digital media department.

NextJS

NextJS was chosen for the project because it is a fully-featured framework on the cutting edge of web development. When this project first started, the prototype was built in NextJS 12 using the page router, which was the latest at the time. The very first thing I did on the project was convert it to NextJS 13, which introduced the app router and other features like default loading and error pages. It was important that we converted everything over to the app router, as all new features introduced in NextJS would be based on it.

Because NextJS is a React framework, it takes advantage of the latest React features, like server-side components. Normally, in a web app, all code is run on the client side in your browser, making it mandatory for you to download the entire code package, which makes the app much slower. In NextJS, all components are server-side components by default, reducing the amount of code needed for the client to download and run.

One of my favorite features of NextJS is the layout file. This file contains all the UI that is shared between pages on your site, enabling it to run faster because it only needs to load this code once. It also improves the developer experience because you only need to make updates to the shared UI in one place!

One layout file at the root of the app contains all shared UI.

AWS amplify

AWS Amplify was chosen for the backend because it offered a scalable, relatively simple, no-sql solution for our data. More specifically, Amplify uses DynamoDB with graphQL for the API. There are also some other great features, like secure authentication for users, which made building the app much faster without having to develop these things ourselves from scratch. Working with the graphQL API for our data was very straight-forward and intuitive. I had the choice of defining models and manipulating data in the browser using Amplify Studio or directly in the code.

UI overhaul

Me and my team dove into the project right away, overhauling the UI of every page in the app. The existing prototype was functional, but it was not great to look at and left users confused. We decided to go with TailwindCSS because of the awesome developer experience working with it. TailwindUI is a fully-featured UI library made by the creators of TailwindCSS, so it was the perfect choice for our project.

Our focus with the UI overhaul was to make the app look great, of course, but mainly to improve the user journey. Using the app should be a positive experience for the user that allows them to seamlessly navigate through it without confusion or error. Things like adding feedback for users when they fill out forms, log in, etc. are extremely important for any app if it is to be adopted by a large user base. Typically, the designers on my team would create some mockups of the new UI for a page, and then me and the other developers would implement these designs. During this process, we would discuss ideas and come up with the best solution.

Using TailwindCSS we customized every component to our liking

Barcode scanning

The first new feature that I added to the checkout app was the ability to scan device barcodes using a separate barcode scanner. Every device in the digital media department at UVU has a barcode and serial number assigned, so it was a no-brainer to include this functionality in the app.

To implement barcode scanning, I needed to learn how a USB barcode scanner actually works. As it turns out, USB barcode scanners send the data they scan as keyboard input! Because NextJS is a React framework, I created a useEffect() to add an event listener to listen for keyboard input and then query our database based on the scanned data from the barcode. This saved a huge amount of time for the user because instead of searching for devices manually by name or serial number, they can just scan the device, and the relevant information comes right up.

Kit creation and checkout

After presenting the project at the end of the first semester of work, we got some valuable feedback from a few professors that the ability to manage and checkout kits of multiple items would be very useful. Up to that point, the app focused on single devices, so it was a big upgrade to include kits. Me and the other two developers worked on this feature together, with me taking on a portion of kit creation and management.

For the kit creation, I implemented new UI and logic inside the existing dashboard page to create a kit based on the main list of devices. This gave the UI cohesion between individual devices and the kit features, enabling users to create kits quickly and easily. After completing the requested features, me and my team had the opportunity to present our work to the client and other faculty at Utah Valley University.

New kit UI implemented in the main app dashboard

What I learned

Working on this app for Utah Valley University was a great experience! I learned how to collaborate as part of a team, work with real clients, and build a useful app that will be utilized by students and faculty every day. I gained valuable experience working with designers to implement new UI designs and working with other developers to architect and then implement new features. I really enjoyed my time working on my senior capstone, and I will use all of that knowledge and experience going forward in my career as a developer.