For my senior Capstone project, I co-led a team of seven to design a full-stack data management system for Penn State’s Center for Immersive Learning, replacing the outdated spreadsheets and Power BI dashboards used by the College of Nursing. At the time, Nese College of Nursing’s graduate program did not have a streamlined way of keeping track of their students. Each department tracked recruitment, enrollment, and student progress separately, which led to inefficiency and inconsistent records. Over four months, we developed a secure web application to meet our sponsors’ needs and concerns. I served as co-lead, lead designer, and frontend developer, contributing significantly to both the technical implementation and team coordination.

Tech Stack

Our goal was to deliver a synchronized web application to connect student and recruitment data for administrators. Our deliverables were a modifiable and searchable database of students, reflecting their individual progress from recruitment to their first post-graduation job. Additionally, we were to display several up-to-date dashboards to quantify recruitment information and department statistics based on the information in the database. We built the front-end in React.js, using the Material UI and MUI X libraries for our components. The backend used a Django REST Framework connected to a MySQL database. A primary concern for our team was security, given the sensitive nature of student information. Therefore, we implemented Auth0 for secure administration-only sign-in. Additionally, we used sandbox data when temporarily hosting on AWS, while coordinating with Penn State IT for eventual campus server deployment.

Design

By adopting an agile workflow, our team would focus on building one navigation section at a time and each sprint started with me designing the section. I took the role of UX/UI designer because of my extensive course work in both art and graphic design. I wanted the web app to fit into the Penn State ecosystem, so I took inspiration from other Penn State applications like LionPath and Starfish. This meant minimalistic design featuring the signature Penn State white, gray and blue, a collapsible sidebar navigation, and a modular layout with clearly defined components. While sketching my designs, I would reference the Material UI and MUI X libraries to see which components could be used during development. After my wireframes and mock-ups were complete, I would present my designs to our sponsors for their approval. By the end of the project, I had hand-drawn over 20 designs for the project.

Implementation

Despite never working with React and Django, I built 50% of the frontend. My largest task was building a student progress tracker. By using Material UI tabs and timeline components, I split a student’s academic career into distinct stages. Each stage had its own timeline of milestones that should be met by their deadline. I used boolean conditions to perform checks for each milestone and display their status (completed, warning, late) and available information. This system ensured that no student would be left behind or forgotten. It also linked student information across the stages of recruitment, enrollment, graduation, and professional career for the very first time in the College of Nursing.

Additionally, I implemented several dashboards front-to-back. On the backend, I wrote several Django REST endpoints that queried our student database for information like number of graduates and incoming students. These endpoints returned compact JSONs with the exact KPIs needed for the different graphs and displays. On the frontend, I used React Query and axios to fetch and cache the data. Then, I used different Material UI components and MUI X charts to render the metrics.

Leadership

Outside of programming, I managed a lot of coordination. My co-lead and I started by meeting with Penn State IT to discuss our security concerns. Then, I began to lead the weekly meetings with our professor, giving him updates and showing him our progress. By the end of the semester, I was coordinating with the head of IT for the Department of Nursing, and organizing the rest of the team into roles and assigning tasks.

Final Presentation

Our final web application was presented at the Penn State Capstone Showcase. I demoed the application while a teammate spoke to guests about our project. Many industry professionals applauded our work. A common comment made was how useful our application would be in other environments, like keeping track of employees at a company. Our sponsors were impressed with the work we had done and planned on continuing the project with future capstone groups. We handed over the repository and a 60 page report, including suggestions on where to take the project next.