Gary Jones
Gary Jones
VueShellMultiple LanguagesJavaScriptHTMLCSSPythoncoding-project

Navigating Air Travel in the Pandemic: A Deep Dive into Covid-on-Flight Application

Navigating Air Travel in the Pandemic: A Deep Dive into Covid-on-Flight Application
0 views
5 min read
#Vue#Shell#Multiple Languages#JavaScript#HTML#CSS#Python#coding-project
Table Of Content

In an era where global travel faces unprecedented challenges due to the COVID-19 pandemic, the Covid-on-Flight project emerges as a beacon of innovation and safety. This project, split between a Django-powered back-end (BE) and a Vue.js front-end (FE), offers a holistic solution to track potential COVID-19 exposures linked to airline travel. This technical exploration delves into the functionalities, methods, and technologies employed by both components to enhance the safety of the airline industry's stakeholders.

For source code please visit the Github repository here: Covid On Flight Back-End and here Covid On Flight Front-End alternatively, for the repository representing all members of the groud please see the following links Covid On Flight Back-End Group Repository and here Covid On Flight Front-End Group Repository

Back-End: The Covid-on-Flight BE Project

Overview

The project is structured as a Django web application, facilitating data handling, user management, and interaction with front-end services. Below is a summary of its core components and functionalities:

Key Files and Their Functionalities

  • requirements.txt: Lists all the Python packages required for the project, ensuring consistent environments across setups. Key dependencies include Django, django-cors-headers for Cross-Origin Resource Sharing (CORS) handling, Twilio for SMS notifications, and SendGrid for email services.

  • cof/settings.py: Configures the Django project settings, including database setup, installed apps, middleware configurations, and static files management. It also includes settings for Heroku deployment and CORS configurations to allow cross-origin requests.

  • cof/urls.py: Defines the URL routes for the application, directing HTTP requests to the appropriate views. It includes routes for user authentication, dashboard access, and administrative functions.

  • main/views.py: Contains view functions that handle requests and responses for the application. Key functionalities include user authentication, dashboard data retrieval, COVID status updates, and administrative data handling.

  • main/models.py: Defines the data models for the application, including custom user model COFUser, RecoveryCombination for password recovery, Survey for COVID status surveys, Flight for flight information, and FlightsTaken for tracking flights taken by users.

  • main/urls.py: Specifies URL routes specific to the app, mapping routes to view functions for operations like login, signup, user and admin dashboard access, and COVID status management.

  • main/admin.py: Configures the Django admin interface for the application, allowing for the administration of users, flights, and surveys directly from a web interface.

  • main/management/commands/populate.py and testdata.py: Custom Django management commands to populate the database with initial test data and perform setup tasks.

Functional Highlights

  • User Authentication and Management: The application supports user signup, login, and password recovery, leveraging Django's authentication system customized for the project's needs.

  • COVID Status Tracking and Notification: Users can update their COVID-19 status, which triggers notifications to other users who may have been exposed to COVID-19 through shared flights.

  • Administrative Dashboard: Provides functionalities for administrators to view and manage user statuses, flight information, and to conduct searches on flights with COVID-19 positive passengers.

  • Data Models and Relationships: The application's data models support complex relationships, such as users to flights and COVID surveys, enabling detailed tracking and reporting capabilities.

Technologies and Frameworks

  • Django: Serves as the backbone of the application, offering robust web development capabilities, ORM for database interactions, and a built-in admin panel for easy management.

  • Twilio and SendGrid: Integrated for sending SMS and email notifications, essential for alerting users about potential COVID-19 exposures.

  • Heroku: The project is configured for deployment on Heroku, facilitating easy hosting and scalability.

Front-End: The Covid-on-Flight FE Project

Overview The application utilizes Vue.js, a progressive JavaScript framework, along with Vuetify, a Vue UI Library, to create a responsive and intuitive user interface. It supports functionalities such as user registration, login, viewing and updating COVID-19 status, and accessing flight history.

Key Components and Functionalities

  • src/main.js: Serves as the entry point for the Vue application. It sets up Vue instance, imports and configures Vuetify, sets the base URL for axios for HTTP requests, and mounts the app to the DOM.

  • src/App.vue: The main app component that serves as the layout foundation for the application. It includes the router-view tag, which is where the routed components will be displayed.

  • src/router/index.js: Configures Vue Router for the application, defining routes to various components such as Home, Dashboard, Login, UserSignup, and more. It enables navigation between different parts of the application.

  • src/views: Contains Vue components for different pages within the application, such as:

    • Home.vue: The landing page component.

    • Dashboard.vue: Shows user or admin dashboard based on the user's role, integrating components like DashboardForm, AdminDashboard, and UserFlightHistory.

    • Login.vue and UserSignup.vue: Handle user authentication and registration.

    • About.vue, AccountSettings.vue, CovidInfo.vue, MyCovidStatus.vue, Survey.vue, ForgotPass.vue: Provide additional functionalities and information related to COVID-19 and user account management.

  • src/components: Includes reusable Vue components like forms for login, signup, survey, and COVID-19 information, as well as headers and dashboard elements.

Technologies and Frameworks

  • Vue.js: Used for building the user interface and single-page application experience.
  • Vuetify: A Vue UI library for creating material design components.
  • Axios: For making HTTP requests to the back-end API.
  • Vue Router: For handling routing and navigation within the application.

Deployment and Environment Configuration

  • Environment variables are managed through .env.development and .env.production files for separating development and production configurations.
  • The application is prepared for production by compiling and minifying the Vue components, with instructions provided for linting and custom configurations.

Conclusion

The Covid-on-Flight application exemplifies the innovative use of Django and Vue.js to create a robust platform capable of mitigating COVID-19 exposure risks in air travel. By bridging backend data management with a user-friendly frontend, it empowers airline employees and travelers to make informed decisions, significantly contributing to public health safety measures. Through detailed technical functionalities, from user authentication to real-time notifications, the project showcases a comprehensive approach to leveraging web technologies for societal benefit.