The Mission: Connect Students to Employers based on Competencies 🏆

My senior year in college, I was approached by my mentor and professor, Thor Anderson, to help with a project that has been in the works for some time. The project was called Learner to Jobs, the mission was to connect students to employers based on their learned competencies and skills. The plan was to create a web application that would facilitate this connection between three personas: Students, Employers, and Educators.

My role in this project was to be the Lead Developer and Project Manager. The team I was fortunate enough to work with consisted of three of my peers in the Digital Media Department at Utah Valley University: Andrew Peterson, Moe Peterson, and Ethan Ayers. We were all in the same senior capstone class and were assigned to this project as a team. The structure of the team and roles were defined this way due to the project being in its third stage of product development. The previous teams had already completed the UI/UX design work and handed it off to us for development.

Technology Stack

By the time my team was assigned to the project, the technology stack had already been decided on. The stack consisted of the following:

• SvelteKit - FullStack Web Framework built upon Svelte and leveraging the power of Vite. This framework was chosen due to its unique approach to web development and the ability to create a web application that is fast and lightweight.

• AWS Amplify - FullStack Serverless Framework built upon AWS. This framework was chosen due to its ability to scale and its ease of use.

  • DynanmoDB

    The Amplify platform provides easy access to their NoSQL service via another service called Appsync. All application data is stored in multiple data tables that are specific to defined GraphQL model schemas.

  • GraphQL - Datastore

    Serving as the API layer for the application and providing structured data to the front end. GraphQL is used to query, mutate, and subscribe with Appsync to the DynamoDB data tables created for each modeled schema. Specifically, using Datastore stored persistent data in the browser's local storage.

  • Authentication

    Authentication is being handled by AWS Cognito. This service provides the ability to create user accounts, sign in, and sign out. It also provides the ability to create user groups and assign permissions to those groups.

  NOTE: SvelteKit isn't officially documented to be supported by AWS Amplify, but it is possible to use AWS services with SvelteKit. Known bugs and issues that affect Authentication, Authorization, Amplify App Entry Point Configuration, and hosting are not supported.

• TailwindCSS - Utility-first CSS framework. This framework was chosen due to its ability to create a consistent UI/UX design and its ease of use.
• Skeleton UI - UI Library built upon TailwindCSS. This library was chosen due to its ability to create a consistent UI/UX design and its ease of use.

Problems to solve and Project Phases 🤔

Since most of the UI/UX design work was already completed, my team’s focus was to ensure the development of the first iteration of the web application was completed on time. Each member of the team was a developer, so we were able to divide the work up and work simultaneously on different parts of the application. However, as soon as work began, we ran into roadblocks that we had to solve before we could continue:

• Team's lack of experience with the technology stack
• Untested technology stack and known bugs
• Design inconsistencies with UI Library and previous work

To solve these problems, I decided to have the team focus on learning the technology stack and UI library while I worked on fixing the design inconsistencies. This was going to be our first phase of the project and would at most take a few months to complete—due to the required class hours being 10 hrs per week. The second phase of the project would be to complete the minimal viable product (MVP), based on our client’s requirements, and would take approx. three and half months to complete as well.

Phase One: Learning the Technology Stack and UI Library 📚 (May - July 2023)

To solve the issue of the team’s lack of experience with the tech stack, specifically the UI library Skeleton. I decided to focus the team’s efforts on learning this library and brush up on any needed Svelte knowledge.

Doing so would allow us to be more aware of the design inconsistencies that we would need to fix. The previous design work was done by a different team, and they didn’t use the style of Skeleton’s UI library. Further, there were design choices that were made that didn’t have context to why they were made. Such as missing page designs, components, and other UI features that didn’t conform to the project’s M.V.P. requirements.

Phase One Major Accomplishments:

Learned Technology Stack

There was a portion of the team that needed to take some time to learn the technology stack, and how to work within it. For each member, I assigned them some time to study the UI Library and Svelte functional components. This was done by having them read the documentation and complete the tutorials.

Indexed Design Inconsistencies

The design team didn’t use any UI library for their design work that was handed off to us for development. However since the project adopted the requirement of a UI library that leverages the power of Svelte and TailwindCSS, we needed to perform a design audit and decide what would be developed first. To accomplish this, we reviewed previous work and created a backlog of design inconsistencies that needed to be fixed. Items such as: missing page designs, components, and other UI features that didn’t conform to the project’s M.V.P. requirements.

Tested SvelteKit and AWS Amplify configuration

At the time of writing this, SvelteKit is not officially supported by the AWS Amplify web platform. This led to some issues with the configuration of the Amplify backend in the SvelteKit app’s entry point. To solve this, I had to test the configuration and find a solution that would work for our project. The solution was not ideal, but it worked for the time being. Since the goal was to get the project to a working state and a populated database was a major milestone to accomplish. Eventually, the backend was developed and that allowed us to test the frontend for any bugs and issues.

Keep in mind the two major components of the project’s tech stack, the front and back, are not officially documented to be supported by each other. Eventually, with configuration, it will start to work but has many bugs and issues that affect Authentication, Authorization, Amplify App Entry Point Configuration, and hosting. Every time a new session is started, the user’s info isn’t persistent, the configuration for Amplify would produce warnings and errors that would break the app, and the app would not be able to be hosted on Amplify.

Prototyped UI

At this time, any UI developed by the team was loosely based on the handed-off designs. However, we were primarily testing the tech stack while fixing design inconsistencies. This led to the UI being prototyped in the browser with temporary data stored in memory. Essentially, the goal was to mimic the designs as close as possible while testing was being done and at a later point plug in the backend to the frontend by using the GraphQL API.

Phase Two: Development Cycle 🚀 (August - December 2023)

The second phase of the project took place in the second and final semester of my senior year. So, the urgency to complete the project was high and the team was ready to start developing the MVP that would result in a working prototype. During this phase, the team and I accomplished:

UI and Functional Svelte Components Developed

In this phase, the team was ready to focus on finishing the UI and integrating real data being queried from our API. Leveraging Svelte’s ability to create functional components and stateful data, we were able to integrate basic lifecycle features that would mount components when the data was present.

The UI at this point was representative of the designs handed off to us at the start of our time on the project. With minor changes that had to be done due to time constraints, the group had 10 hours per week to work on this project due to the nature of the college course.

App Routing/Layout

To handle unique UI and UX for when a user is interacting with the web app or not (e.g., logged in/out users), SvelteKit provides some advanced routing features that enable unique layouts to render for specific routes.

Finish Database Population

In this phase, our client and other stakeholders requested the database to be populated with data to a point where the app is a functional prototype and is ready to demo. This was accomplished and a loosely related NoSQL database, thanks to the added GraphQL layer in the API we developed.

The visual below describes how we made our data tables related to each other. Upon sign-in, the application logic on the front end automatically mapped and rendered user-owned data. From the perspective of a logged-in Instructor Account, the app would grab the owned courses and then each course’s required competencies.

Data Visualization and Formulas

With all the data being queried from our API with Datastore, we needed to produce visuals that would inform users effectively. To do that functions needed to be created specifically for functional components that had some kind of data visualization. With the unique nature of how AWS created its Datastore API, querying related/nested data can be painful. Formulas were created by me to help calculate percentage values to render the necessary data to our components.

Video Demo 📦

Handoff Preparation

The team’s time for this project has come to an end as of December 2023, meaning the project will be handed off to the next group of developers and designers. My team’s goal was to develop the first iteration/proof-of-concept of the application, we navigated through the issues of the technology stack and developed the front end in hopes of setting up the next group for success.

What Was Accomplished ✅

• Developed a UI for Educator personas.
• Researched and tested SvelteKit compatibility with AWS Amplify.
• Adapted designs to UI library's style constraints (e.g., themes and components).
• Modeled and populated the project NoSQL database.
• Discovered issues and possible solutions for the next team.

Project Backlog 📝

• Migrate backend database to Weaviate vector database, as per client request after being presented the discovered issues of the technology stack.
• Finish development of Student and Employer persona UIs, using the Educator UI as a foundation.
• Migrate API to raw GraphQL API from Amplify or use the given API from Weaviate, if proven to be viable.
• Integrate responsive designs for (App) layout group in the SvelteKit app.
• Populate database further.

Post-Mortem

My time on the project was extremely valuable for my personal development. My knowledge and understanding of SvelteKit and Amplify were already strong since I’ve used them in other projects and technology stacks. So, the most valuable reward from this project is the knowledge of project management and being a lead developer. These two roles taught me many soft skills and hard lessons that should set me up for success in the future. For projects in the future, I’ll be armed with the knowledge of proper technology stack research and implementation, team communication skills and project management, issue tracking, and so much more.