Make It Real - Medical Site Front End

This project is a fully interactive, user-friendly medical application using React.js, which allows users to make appointments, buy products and navigate through the entire application, which will respond smoothly to every device, making user experience very comfortable.

Table of Contents

• Tech
• Pre-Requisites
• Installation
• Demo
• Features
• Usage
• Running Tests
• Screenshots
• Support
• Authors

Tech Stack

• React
• Sass
• Cloudinary
• EmailJS
• Cypress

Pre-Requisites

Before getting started with development for the project, you must first make sure you have installed the following:

• Git
• Node.js
• npm
• Any IDE of your preference

Installation

To start the project's installation, please refer to the following steps:

1. Clone the repository to your local machine

  git clone https://github.com/anstylist/medical-site-fed.git

2. Navigate to the project's directory

  cd medical-site-fed

3. Install the project's dependencies

  npm install

4. Start the development server in your browser of preference

  npm run dev

Demo

In the link below, you can find a working live demo of the project:

https://medical-site-fed-x7hc.vercel.app/

Bear in mind that some of the most recent changes might not have been migrated yet, so its possible this demo does not have all the features available.

Features

This is a comprehensive list of the features that have been added to the project to date.

• Landing Page
• Registration
• Login / Logout
• Forgot Password
• Doctor Details
• Appointment Making
• Email with appointment information
• See your appointments
• See medical products
• Admin dashboard
• Doctor timetables
• See appointments (doctors)
• E2E Testing
• Responsive Design

Usage

Development

Want to contribute? Great!

To fix a bug or enhance an existing module, follow these steps:

Fork the repo

Create a new branch (git checkout -b improve-feature)

Make the appropriate changes in the files

Add changes to reflect the changes made

Commit your changes (git commit -am 'Improve feature')

Push to the branch (git push origin improve-feature)

Create a Pull Request

Bug / Feature Request

If you find a bug (the website couldn't handle the query and / or gave undesired results), kindly open an issue here by including your search query and the expected result.

If you'd like to request a new function, feel free to do so by opening an issue here. Please include sample queries and their corresponding results.

Running Tests

This project has been set up with E2E tests using Cypress. To access the testing environment, please use the following command on your console:

  npx cypress open

Screenshots

About

Doctors List

Doctors Details

Coming Soon

Doctors Timetable

Emergency Services

Department List

Shop

Cart

Checkout

Login

Logged Landing Page

Admin Dashboard

My Appointments

Support

For support, email [email protected] or join our Slack channel.

Challenges

• As a team the biggest challenge was presented to us in the backend, it took us some time to start with the implementation to understand the flow

• Learn prism ORM and know how it worked to implement it

  Achieved Goal

• One of the main achievements is that we defined a directory structure both in back and in frost that allows us to scale our app, we use linters, CSS resets from the beginning, our backend is divided into layers to decentralize specific functionalities applying solid principles

Future Improvements

• Including a patient rating and feedback system can help users make informed decisions about doctors and products.
• Offer video conferencing with doctors
• Customer service, Implement a live chat or hotline
• That both the user and the doctor could have and see YOUR medical history
• A user can see a history of all their orders placed

Authors

• Andry Peña
• Erick Carrasco
• Juan Villegas