Overview

Over the past week, we were focused on learning the main concepts of React and looking into its best practices. We have also started developing the reusable components based on the Figma prototype.

Learning React

We decided that we should not compromise on spending time on learning the best React practices for front end development. Since we want the application to be of high quality and scalable, we must be writing efficient code, which will save us a lot of time in the future when modifying or adding new functionality.

React’s main concepts documentation was very useful for this. More experienced members helped the others, so the misunderstandings are cleared.

Front End Development

We have started developing reusable, dynamically-changing components. Have we not thoroughly worked on the prototype before, this would be much more complicated.

We have broken down the Front End Components as follows:

  • Sign In Page
    • Input (UserId and Password)
    • Continue Button
  • Patient Dashboard
    • Graph (use Chart.js)
      • Filters
      • Toggle
    • Graph Selector
    • Title
    • “Notifications” Button
    • “Change Treatment Plan” Button
  • My Patients
    • Search Bar
    • Graph Preview (with Patient name)
    • Filter Patients

This is an early draft and is subject to change. We are employing the Agile software development practice, and will be responding to change over following the plan. The plan gives us a clear roadmap for development.

Next Steps

Over the next few weeks, we will be working in sprints to develop the components and cover the majority of the Front End Development Plan.

We will closely look into the backend processes, create API endpoints and further think about the architecture to employ for the backend.

We need to create a specific Back End Development Plan to create a clear roadmap and structure our workflow.

We also need to think about the database design and create an ERD (Entity Relationship Diagram).