Skip to content

Latest commit

 

History

History
58 lines (45 loc) · 3.13 KB

README.md

File metadata and controls

58 lines (45 loc) · 3.13 KB

Health Finder

This is a simple React application that leverages the MyHealthFinder API to allow users to search for health recommendations based on age and sex.

GitHub Page Site

The URL to my GitHub Pages site is: https://tinpham5614.github.io/HealthFinder/

API Used and Why

I used the MyHealthfinder API provided by the U.S. Department of Health and Human Services. This API provides health recommendations for various age groups and helps individuals take preventive measures to maintain their health. I chose this API because it provides useful and relevant information that can benefit people of all ages.

Other Applications of the API

Aside from searching for health recommendations, an app using this API can provide personalized recommendations based on a user's demographic information, lifestyle, and health history. Additionally, it can be used by healthcare providers to offer tailored health education to their patients.

Responsive & Mobile-Friendly Design

To ensure that the website is responsive and mobile-friendly, I used a mobile-first approach to design the website. I made sure that the layout and design elements can adjust to fit different screen sizes and resolutions. I used units like percentages and rems to adjust font sizes and element dimensions based on screen size. In addition, I used Google's Mobile-Friendly Test to check for any issues and ensure that the website meets mobile-friendly standards.

Accessibility for People with Disabilities

To make the app accessible to people with disabilities, I made sure to include descriptive alt text for images, added ARIA attributes to improve screen reader compatibility. Additionally, I made sure that the website can be navigated using keyboard-only navigation to accommodate users who rely on keyboard navigation or screen readers.

Improvements for the Project

If I could make further changes to my project to improve the experience, I would add more filters and sorting options to the search results, as well as provide a way for users to save their search results or share them with others. I would like to use high-contrast colors to make the content more visible for users with colorblindness. Additionally, I would like to incorporate user feedback and ratings to help improve the relevance and accuracy of the search results. To implement these changes, I would need to work on the back-end code to handle user authentication, data storage, and retrieval.

Installation

To install the application, clone the repository and run npm install to install the dependencies.

git clone https://github.com/tinpham5614/healthfinder.git
cd healthfinder
npm install

Usage

To start the application, run npm start and open your browser to http://localhost:3000.

npm start

In the search area at the top of the page, enter the age and sex of the person you are searching for, and click the search icon to retrieve recommendations from the MyHealthFinder API.

The results will appear in the Results Area below the search bar.

Technologies Used

This application was built using:

  • React
  • Font Awesome
  • MyHealthFinder API

Credits

This application was created by Tin.