This device is not compatible.


Create a Healthcare Application Using Vue.js

Learn to develop a healthcare application using Vue.js and FastAPI to enable medical professionals to efficiently manage patients, view medical records, schedule appointments, and toggle patient status for optimized healthcare services.

Create a Healthcare Application Using Vue.js

You will learn to:

Create a website using Vue.js.

Manage component-based architecture.

Integrate the Vue.js application with FastAPI.

Style the application using Bootstrap.


Web Development

Web Frameworks

API Development


Intermediate knowledge of FastAPI

Basic understanding of Vue.js

Basic understanding of component-based architecture

Basic understanding of integrating Vue.js components for communication




fastapi logo



Project Description

In this project, we will develop a healthcare application that offers a comprehensive solution to enhance patient management and healthcare services. We’ll use technologies like Vue.js for the frontend and FastAPI for the backend to deliver a user-friendly and robust application. Vue.js is a JavaScript progressive framework for creating user interfaces (UIs), and it follows a component-based architecture. FastAPI is a modern, high-performance web framework for creating Python APIs.

Our application will provide a tabular view allowing medical professionals to access patient information at a glance. In addition to the tabular view, it will offer a gallery view for patients. The application will enable medical professionals to easily enable or disable patient accounts based on their current status. With the healthcare application, medical professionals will be able to conveniently access and review patients’ medical records. The application will include a feature to manage patient appointments efficiently.

Project Tasks


Create Patient View

Task 0: Getting Started

Task 1: Create an Environment Variable

Task 2: Create a Patient Route

Task 3: Add Buttons to the View

Task 4: Add a Table to the View

Task 5: Create a Script to Fetch Data

Task 6: Update the Table to Display API Data

Task 7: Add a Script to Enable/Disable Patient

Task 8: Create a View for Gallery

Task 9: Create a View to Add a Record


Create Data View

Task 10: Add a Route for Appointments

Task 11: Create a View for Appointments

Task 12: Add Scripts to Fetch Data from the API

Task 13: Add a Route for Medical Records

Task 14: Create a Table for Medical Records

Task 15: Add Scripts to Fetch Data from the API

Task 16: Show Multiple Views in a Single View