Contact Us
24/7
Python BlogDjango BlogSearch for Kubernetes Big DataSearch for Kubernetes AWS BlogCloud Services

Building a COVID Check App With Django and React

Central New Mexico Community College
<< ALL PROJECTS

Areas of Expertise

Text Link
App Development

Industries

Education
Text Link

CHALLENGE

The COVID-19 pandemic changed everything. For Central New Mexico Community College (CNM), it meant that in order for students to return to in-person instruction, the college needed to know students, faculty, and staff were vaccinated and were not experiencing symptoms.

The college had created an application to facilitate this process, but the app's design made changing the application code challenging for the college’s single developer, leading to bottlenecks. CNM also wanted an app with less lag between when information was submitted to the front-end and when it was visible to administrators.

Having previously worked with Six Feet Up on a Plone migration and distance learning platform — and recognizing their expertise in both Plone and Python applications — CNM reached out with the goal of improving the application. Six Feet Up’s experts rebuilt the application using a design that offers more speed and flexibility for front-end users and administrators.

Implementation Details

CNM’s existing application was designed to be used by students, administrators, and faculty seeking to return to campus. The app, which could be used on any laptop or mobile device and was administered to visitors at campus entrances, included:

  • a survey to record any symptoms the user is experiencing,
  • an upload method for proof of vaccination,
  • an upload method for COVID-19 test results; and
  • a means of applying for exemptions.

The app could also be used by human resources and administrators to generate reports and see the status of various students or faculty members.

Before the Six Feet Up team could start building the new application, a deeper understanding of the current app’s back-end infrastructure and front-end functionality was required so that the existing app logic could be reimplemented.

Analyzing the existing application

The existing application was written with Java using the Vaadin platform and had two main audiences — front-end users who submit data, and administrators who analyze and report the data. Most of the application data, including user health assessments and labels, was hardcoded. Because of this, something as simple as changing a question on the health assessment required developer intervention.

The application was heavily used. The existing app clocks roughly 3 million entries per year from 15,000 active users — 70% of whom were using the app to check and see if they were allowed on campus.

The Six Feet Up team tested the existing app’s functions from the front-end to see how different user inputs affected the UI and the backend data. From this testing, the team’s tech lead devised a series of tasks split to front-end and back-end developers, as well as a test and review plan for implementation.

Building the app

Six Feet Up developers settled on a Django backend linked to a PostgreSQL database and a REST API to link to a React frontend.

The back-end was implemented using Six Feet Up’s standard Django template, which incorporates best practices learned by Six Feet Up’s expert developers over the years, such as code formatting and scripts that make it easier to set up new environments. The template makes it easier for the Six Feet Up team to launch into a Django project and focus on development without spending as much time on basic setup.

Moving the application framework to Django gave administrators greater flexibility by allowing them to alter assessment questions and labels without a code release.

Automatic API documentation through the Restful API using Swagger allowed Six Feet Up developers — or any CNM developer who worked on the new app — to view documentation as the code runs in the back-end and see faster implementation on the front-end. This means that the user could test that an API is behaving as expected without having to write front-end code.

Speaking of the front-end, Six Feet Up’s experts mirrored the existing app’s UI using a React front-end developed with Redux Toolkit. The UI features customized user alerts that display depending on the individual’s information and status in the CNM database, a symptoms assessment, location tracker, and proof of vaccination import. On the admin side, reports have sort and filter functionality.

Once set up, Six Feet Up’s back-end developers worked with the front-end developers to create the necessary API endpoints and link up functionality between the app’s components. While syncing the front- and back-end of an application developed in this manner can be difficult, the team communicated effectively to line up the functionality on both ends.

Interfacing with CNMs systems in a way that gave Six Feet Up experts the data they needed without compromising personal data proved a challenge. The team worked with CNM staff to pull minimal data on an as-needed basis in order to successfully reimplement and test the functionality on the new platform.

Results

While not yet in production, Six Feet Up’s experts were able to construct an application that can handle all of the data that the current app can but with a greater degree of usability — both for system administrators and developers.

ARE YOU READY TO START YOUR NEXT PROJECT?

Let's Talk