FrontEnd Manuals

Hippocrates FrontEnd Application

Welcome to React FrontEnd application of Hippocrates!

Hippocrates is a medical experience sharing plotform. Users can share any medical-related issues by posts, comments and read articles written by doctors.

This is the manual of the Web FrontEnd React application of the Hippocrates.

Table of Contents

• User Manual

  • 1. Signing up

  • 2. Logging in

  • 3. Home Page: Browse the app

  • 4. Post Page

  • 5. Article Page

  • 6. Post Creation

  • 7. Comment Creation

  • 8. Article Creation

  • 9. Article/Post/Comment Deletion

  • 10. Categories Page and Category Following

  • 11. Searching

  • 12. Chatbot

  • 13. User Profile Page and Activity History

  • 14. Annotations

• System Manual

User Manual

1. Signing up

• In order to signup our application from the web page, you can use the sign-up page demonstrated below. You can also access this page from anywhere on the website by clicking "Sign-Up" on navigation bar.

• While Signing-up, there are 2 types of users: One is the Members, the other one is the Doctors.

• If you are signing-up as a doctor, you also need to send us a document that proves your doctor status. Also, you need to select your branch.

• Regular users can register the system by only filling e-mail, username, password, date-of-birth fields.

• After sign-up you can use log-in page to login to the system.

Member Signup	Doctor Signup

2. Logging in

• To login the page after signing-up, you can directly redirect /login page, or again in anywhere of the application by clicking the "Log In" button on the navigation bar you can open the login page.

Log In

3. Home Page: Browse the app

• After Log In, our HomePage welcomes you just as in the image below.

HomePage

• By clicking the "Posts" and "Articles" buttons, you can navigate between them and see last 10 posts and articles in the homepage.

Posts	Articles

• On the left side of the page, you can see several health categories. You can "Follow", "Unfollow" them or also by clicking you can filter the posts/articles by their categories.

Categories Followed, Anesthesiology selected

• On the left side of the page again, you can see "Create Post" button. This button is visible for both Members and Doctors. But the Create Article button is only visible for Doctors.

Member HomePage	Doctor HomePage

• On the navigation bar, you can see "Profile Page" and "Search" Fields. These are further explained in the following sections.

4. Post Page

• You can open up a post just by clicking onto it.

Inside of a Post

• Posts have "Create Times", "Authors", "Title", "Body" fields as you can see from the image.

• In this page, you can Upvote/Downvote a post, comment. Write a comment by adding texts and images also you can share your location.

• And if this is your post, you can see the delete button on the top of Upvote/Downvote buttons and delete your post.

Another User's Post	Own Post

5. Article Page

• Article Page structure is not far different from the Post page.

• Note that, only Doctors can enter Article to the system and Users/Doctors can only Upvote/Downvote after the entry. There is no comment feature on the Articles.

An Example Article Page

6. Post Creation

• A user can create post by filling the necessary fields. "Body", "Title", "Labels (Optional)", "Location(Optional)", "Images(Optional)". Users can also select the category of the posts while creating.

Post Creation Page

• You can see that there are 2 input fields as "Title" and "Body".

• On the right side of the page, Users can upload images, add labels to the post, add their current location to the post, and select the category of the post.

User wrote "title", "body", "selected label", "Inserted Image"	Adding Label Modal

7. Comment Creation

• To create a comment under a post, you should be a Registered user_. After logging in and entering a post page you will see the comment section under the post. You should write your comment box and click send button at the rigth side. Your comment will be seen under the comment creation part of the page and there will be a notification as "Comment is created" at the top of the page.

8. Article Creation

• To create an article, you should be a Doctor user. After logging in and tapping create article button at the left side of the main page, you will be directed to the article creation page. In the article creation page, you can fill the article creation form and then submit your article.

Create Article Button

Article Creation Page

9. Article/Post Deletion

• You can delete your articles, posts and comments if you want. When the post, article or comment is opened, there is a red bin button at right side of the component. When it is clicked, the component is deleted.

10. Categories Page and Category Following

• Categories part is at the right side of the main page. All the categories are listed there. You can search for a category from the search bar. Also you can follow a category if you are a registered user.

11. Searching

• There are two searching methods in the website. One of them is category search, user can search the category of the branch from the panel at the left side of the main page. The other is the keyword search. You can search any keyword from the searchbox at the upper side of the main page.

Category Search

Keyword Search

12. FrontEnd Chatbot

• Users can find the related category about their condition by using the Chatbot decision tree. They can click the options offered to communicate with the Chatbot.

Step 1 ChatBot	Step 2 ChatBot

13. User Profile Page and Activity History

• In the user profile page, a registered user can see their personal information and avatar/profile picture. The personal information can be edited by clicking the edit button.
• Also, a user can see its all activity history by clicking the buttons below the personal information. While Posts, Comments, Upvoted Posts, and Upvoted Articles are available for all registered users, Articles are only for the doctor.

For Doctors

For Members

• In the edit profile page, a user can fill the box to change their personal information by clicking the submit button. While doctors can change their hospital name, members can change their username, weight and height.

For Doctors	For Members

14. Annotations

• You can make annotations on texts and images. Also you can see the annotations of the other users.

Annotations on texts:

Giving annotation on texts

Reviewing annotations of others on texts.

Annotations on images:

Giving annotation on image.

GReviewing annotations of others on image.

System Manual

• You can easily run our React Application from a shell by using npm commands.

• This manual explains how to setup the environment for our FrontEnd app.

If your computer does not have "npm" installed.

• If you're on a Mac, simply run the command below to install npm

brew install node

• If you're on a windows, Navigate to This Site and follow the steps.

After installing npm on your computer.

1. Clone Our Repository to any directory on your machine.
2. Navigate to, App -> FrontEnd Directory.
3. Simply run 2 commands below and your application is ready to serve.

npm install --force

npm start

4. Now, you can reach the website from a browser on

http://localhost:3000