Wiaan Duvenhage

200307

DV200 | Term 2

Salubrious

A React project built with React, PHP & MySQL .


View Demo · Report Bug · Request Feature

Table of Contents

• About the Project
  • Project Description
  • Built With
• Getting Started
  • Prerequisites
  • How to install
• Features and Functionality
• Concept Process
  • Ideation
  • Wireframes
• Development Process
  • Implementation Process
    • Highlights
    • Challenges
  • Future Implementation
• Final Outcome
  • Mockups
  • Video Demonstration
• Conclusion
• License
• Contact
• Acknowledgements

About the Project

Project Description

Welcome to Salubrious! This is a receptionists management portal that I built using React, PHP & MySQL. It is a CRUD-system that can create, read, update & delete.

Built With

• React
• PHP
• MySQL
• MAMP for Windows
• tailwindcss

Getting Started

The following instructions will get you a copy of the project up and running on your local machine for development and testing purposes.

Installation

Here are a couple of ways to clone this repo:

1. GitHub Desktop
   Enter https://github.com/wiaandev/salubrious.git into the URL field and press the Clone button.

2. Clone Repository
   Run the following in the command-line to clone the project:

   git clone https://github.com/wiaandev/salubrious.git

   Open `Software` and select `File | Open...` from the menu. Select cloned directory and press `Open` button
   

3. Install Dependencies
   Run the following in the command-line to install all the required dependencies:

   npm install

Features and Functionality

Adding an Appointment

The receptionist can add an appointment by assigning a patient to a doctor. They can add the name, date and time and it will display on the page when the page auto-refreshes.

Scroll Through Calendar

The receptionist can scroll through the calendar to see which date falls on which day, the receptionist can go forward or backward in time using the arrows underneath the month's name.

Add Doctor/Patient

The receptionist can add a new doctor or patient's information into the modal and it will push to the database and display on the page after it refreshes.

Only Head Receptionist can add

The head receptionist is the only one authorized to add, delete or update appointments, patients & doctors

Concept Process

It was very evident that blue is something that is very evident when designing dashboards or management portals for medical firms. So it is the route that I decided to go with Salubrious, I tried keeping it clean with different hue's of blue and some accents of a lime green.

Wireframes

Development Process

The Development Process is the technical implementations and functionality done in the frontend and backend of the application.

Implementation Process

• I used npx create-react app to create this React project. I implemented component-based development instead of classes. By doing this, I will be able to easily inject and eject components and sub-components into my project, making it refactorable and reusable instead of writing up classes I have to do everytime making it tedious and redundant

• I implemented the date-fns dependency to manipulate and display the time & date the I wanted to and to create my calendar

• I incorporated tailwindcss to create and style my calendar component the way I wanted it to look

• axios was implemented so that I can make HTTP requests to the database server so that I can retrieve and push data to it

• I used PHPMyAdmin to alter data on the database and used PHP to talk to the backend MySQL database

Highlights

• A highlight of this project was defintely interacting with the database and manipulating data on the database and seeing it being displaye on the application.

Challenges

• I struggled to get all my updates and deletes to be implemented.
• I struggled to get all my profile pictures to be updated and rendered on the DOM from the Database.
• debugging the CORS error's for sending data to the Database, especially my Register page's CORS error
• I struggled a lot with debugging the PHP error's
• Front-end was also a bit tricky because I kept following the trend of putting everything in blocks

Above And Beyond

The aspects I learned outside of this class, is that I implemented tailwindcss to create my calendar, I also incorporated the Date-fns dependency to render my calendar dates.

Future Implementation

• I want to complete all my update and delete's of the patients and doctor's
• I want to fix my styling for my application
• I want to display the appointments by week
• I want to complete the profile pictures to be rendered and updated

Final Outcome

Mockups

Video Demonstration

To see a run through of the application, click below:

View Demonstration

See the open issues for a list of proposed features (and known issues).

Authors

• Wiaan Duvenhage - Github

License

Distributed under the MIT License. See LICENSE for more information.\

Contact

• Wiaan Duvenhage - wiaanduvenhage.dev@gmail.com - @wiaan.dev
• Project Link - https://github.com/wiaandev/salubrious

Acknowledgements

• Stack Overflow
• Cooolors
• Figma
• My Pinterest Board
• (w3schools) SQL SELECT Statement
• Leander van Aarde
• Vian Du Plessis