Inspiration

I was inspired by search engines like Google, and Bing https://drive.google.com/file/d/15zz4k6fZd5qZk_3xaTZbhgktgQ33Xffa/view?usp=sharing

What it does

It uses a CSV file containing the resources to filter through certain types of services (online, rehab, therapy), then displays the results on the page based on what the user selected

How we built it

First, we used Figma to create a low-fidelity mockup of the project. After that, we coded the basic frontend for the site (no colours, fonts), then we used JS to create the file parsing system and the filtering system by getting the states and values of the different inputs, then using them to make a list of results, then show it to the screen. After, we used hyperlinks to create the nav bar and the "more information" of the resources. Then, we did our best to make the site visually appealing by adding the Consolas font and adding colours.

Challenges we ran into

The filtering system was a pain to create because we had to iterate through every result row, then iterate through the results list and individually change the elements based on the contents of the CSV file. We also ran into bugs with the PapaParse library; JavaScript's "require" function doesn't load on the client's side, so we had to limit our use of libraries.

Accomplishments that we're proud of

We are proud that we gained more experience with HTML, CSS, and JS and that we learned how to implement a CSV database into a project. We're also proud of how we were even able to finish a project of this size.

What we learned

We learned how to use JS to parse CSV files and we learned how to use Figma to create a low-fidelity mockup.

What's next for HealthBase

What's next is to expand by adding more resources to the list manually by allowing people to request certain resources, or adding support for web scraping tools to automate the process for us.

Built With

Share this project:

Updates