Trial by Fire 🔥 - Developing an application for a University

The Problem - Too Much To Manage! 🤯

While I was attending and working as a part-time employee for Utah Valley University, I was asked to come up with a solution for my college’s ever-growing inventory. There was a need to catalog equipment that ranged from the hundreds to the thousands of dollars. With plans to continue acquiring more equipment for the school, sticking to an old Excel Spreadsheet wasn’t going to be enough.

Smaller problems that arose from the spreadsheet system were:

• Tracking the location of equipment
• Checking in/out equipment to students or employees
• Inventory audits
• Unorganized and unreliable workflows

Researching Solutions

Originally, I was by myself on this project and there wasn’t a plan yet to have others join me. So, at the time, I was trying to piece together a solution that would satisfy the school’s needs. Being a team of one, meant that I had to plan out my research methods and be efficient with my time. Having expertise in UX research, I knew that would be an intensive workload and I needed to produce results quickly.

This meant that I needed to focus on the technology stack. Could I even build an application to solve the problem?

The Best Technology Stack

At the time, I’ve been working with ReactJS for a few other side projects. So the library was fresh in my mind and I knew that I could build a functional UI with it quickly. However, I didn’t want to build a backend from scratch, time was of the essence and I needed to find a solution that would allow me to build a back end quickly, then have it seamlessly integrate with my front end.

Using ReactJS in my recent work made opting for NextJS to build my full-stack web application a no-brainer. This framework is built upon ReactJS and allows for server-side rendering. It’s a full-stack application encapsulated in a single framework and has great documentation.

Leveraging the power of the NextJS framework, I was able to swiftly prototype an application that would prove to be a viable solution to the problem. Having features out of the box, such as:

• Routing - Utilizing features such as nested routes, layouts, data loading, and more.
• Rendering - With the advent of recent React and NextJS client and server-side rendering component features. As the project matured, the teams that joined helped integrate these new features into our UI layouts/components.
• Styling - Having full agency in the app's styling, I opted to use TailwindCSS due to the seamless integration.
• Typescript - Having typesafe code and components would help ensure functional app logic that shall work as expected.

AWS Amplify

Amplify is a full-stack web app platform that enables developers to build and deploy scalable full-stack applications. This made it a great tool for me to prototype the application and scale as needed.

• Authentication - With the help of AWS Cognito being easily accessible in the Amplify platform, I was able to quickly set up a user authentication system that would allow for user roles/permissions.
• Database - Using AWS DynamoDB, I was able to set up a NoSQL database that would allow for the storage of equipment and user data.
• API - Using AWS AppSync, I was able to set up a GraphQL API that would allow for communication between the front and back end.
• Hosting - Using AWS S3, I was able to host the application and have it scale as needed.

Tailwind

Tailwind is a powerful tool and integrates seamlessly with NextJS. Utilizing TailwindCSS along with TailwindUI enabled a swift development process. Making it easy to prototype and iterate a UI that would be functional and look great.

Endless Iteration and Testing 🔄

There were multiple times when my prototype failed and I had to be constantly iterating. This was a great learning experience for me and I was pretty much put through the ringer. When I was testing out how to integrate the best authentication rules and how to model my database, my prototype would fail to send data to and from the client. Albeit, looking back these failures are because of my lack of experience with the technology stack, specifically AWS Amplify.

But this was needed! If I were to develop this prototype and have it presentable enough to my primary stakeholders, I needed to know the ins and outs of the project’s technology stack. This would allow me to be confident in my decisions and be able to answer any questions that would arise.

What Went Wrong?

• Proper DynanmoDB Integration - originally opting for the raw GraphQL API method to transmit data, but switching to Datastore Amplify Service on the fly made my entire backend go haywire.
• Poor Relationship Modeling - Using GraphQL data schemas to model my NoSQL Database, I built relations between device objects and department personal inventories. But sometimes, I would have created a new key-value pair on a model that would break the entire schema and I would have to start over. Or there were times when I deleted one saved object in my database that would delete all the other objects that were related to it.
• No Whiteboard Work - Problem-solving just by coding and not planning out solutions on a whiteboard or paper, just is a recipe for failure. There were times when I had things planned out in a Figma file, but it was nowhere near enough to plan out the design/architecture of my application.

What Went Right?

• Authentication - I was able to set up a user authentication system that would allow for user roles/permissions.
• Rapid Prototyping - Using the NextJS framework and TailwindCSS, I was able to quickly prototype a UI that would be functional and look great. Which made it easy to implement logic with the AWS Amplify platform.
• NoSQL Database Integration - Eventually, I was able to integrate DynamoDB properly into the application and have it work as expected. Which immediately made this project viable to the stakeholders.

What I Would Do Differently

• Plenty of Whiteboard Work - I would have planned out the entire application on a whiteboard or paper. This would have allowed me to plan out the architecture of the application and have a better understanding of how the application would work.
• Read More Documentation - There can be never enough documentation to be read, because the more you read and take the time to understand the tools you are using, the better you will be at using them. This would've saved me the heartache and ensured I modeled my database correctly.
• More User Testing - There were very few instances of me conducting any sort of user testing. Albeit, I was primarily focused on the development of the application to prove that it was a viable solution. But, I should have taken the time to conduct user testing to ensure that the direction I was headed made sense to the stakeholders.

Success, Collaboration, and Project Management 🤝

Once the application was successfully prototyped and got traction with the stakeholders, the school assigned student developers to help finish development and integrate much-needed UX design. This was a great opportunity for me to learn how to manage a team of developers and designers. I was able to learn how to delegate tasks and manage a project’s timeline.

These teams arose from the Digital Media Department’s capstone course. The course is designed to give students the experience to collaborate and create a product for a client. This proved to be a great opportunity to not only get help but eventually, hand off the project to the college. This would allow the college to have a team of developers and designers to maintain the application.

Lessons Learned 📚

Having the opportunity to initiate and develop this project to the point I was able to have others contribute to it, was the experience I needed to learn how to manage a project. Originally, I was the sole developer and was trying to get the project to a point where it was viable to the stakeholders and impacting the school’s everyday business operations for the better. This means there was zero intention to have others collaborate with me on this project at first, and I’m glad that opportunity eventually arose.

Gaining an understanding of these web technologies and how to use them in a real-world application was a great experience. It has helped me integrate some of the most sought-after skills and technology stacks in the industry into my skillset. But the most valuable lesson I learned was how to manage a project and collaborate with others. Having been fortunate enough to be a part of two teams of developers and designers—due to their course’s timeline, teams migrate—has taught me how to collaborate with others to exchange ideas for the betterment of the project. Honestly, I wouldn’t have been able to get this far without the help of my teammates and they are the ones to take this project to the next level.