This branch contains files for the frontend demo mode

Care Coordinator - Demo Project

Care Coordinator is one of my demo portfolio projects. Conceptually, it is a web-based appointment management software for Healthcare professionals, allowing patients to sign-up and schedule appointments with their doctor efficiently.

This full-stack application includes a host of different features on both the frontend and backend. We'll look at these in more detail in the next section.

You can view the route documentation at the api demo URL.

A Note On Code

As a demo application, all the backend endpoints are set into demo mode. This means the responses don't connect directly to the database, instead they display data that looks like the response.

Similarly, the frontend forms are mostly disabled. You can select some for interactive purposes. Form validation has been disabled and you cannot add or update any records in the database.

To view the code without demo_mode, check the no-demo-mode branch.

Tech Stack

The tech stack centres around Python on the backend and Next.js on the frontend.

Backend

• Poetry - for managing all Python packages
• FastAPI - for API management and database requests
• Pydantic - for model/class attribute validation
• Appwrite - database management solution

Frontend

• Next.js - our React.js frontend framework
• Zustand - for global data state management
• Zod - for form validation
• Shadcn/ui - for building our components
• Typescript - for prop type safety and validation
• Lucide React - for lightweight and beautiful icons
• TailwindCSS - for CSS styling

Notable Features

• Uses Python generics for consistent route reponses

  1. Success response example:

  {
      "status": "success",
      "code": 200,
      "response": "200_OK",
      "data": {
          "API": "route data",
      },
      "headers": {
          "optional": "response headers",
      }
  }

  2. Error response example:

  {
      "status": "error",
      "code": 404,
      "response": "404_NOT_FOUND",
      "message": "User does not exist.",
      "headers": {
          "optional": "response headers",
      }
  }

• Uses large forms with various fields and validation: inputs, email, phone, date picker, file upload, select boxes, checkboxes, textarea, etc

• Uses an OTP input to access the admin dashboard using a passcode, encrypted and stored in local storage

• Uses a data table to display appointments with actions for scheduling pending appointments or cancelling existing ones

Extensions

While the tool is complete, there are some noteworthy extensions that could be added:

• Patient appointment management - a login portal for patient's so they can manage their own appointments
• SMS notifications - appointment notifications sent to a patients mobile device with information about their upcoming appointments