Care Amarillo: Provider System
React

Care Amarillo: Provider System

2024-03-20
10 min read

Care Amarillo Provider System

The first open-source distributed system for local providers.

Intro

In Amarillo, Texas at the community college I graduated from, they introduced Code Academy. My classmates and I created a system that will be used initially for local shelters. The idea is that the system will be managed by your local government. The admin will create the shelter and user, then give the initial credentials to the manager of the provider. The provider can then change update their credentials and fill in information such as location, bed count, name, slogan, etc. The provider can look at graphs of their bed count data changing. The admin can look at graphs of data of all provider bed counts, any information that was updated and created by every user, and disable/hide managing users and shelters.

Technologies Used

We created the frontend using React.js and the backend using Node.js. There is some code clean up and folder restructuring needed, which I plan to implement soon, and possibly document those changes. Here are the technologies we used to develop this app. I also plan to document how to set up the project.

Mailgun

Mailgun is an email service. We mainly use it to send the password reset email. It’s pretty easy to set up. This is a backend package. Mailgun Technologies

Axios

We use Axios to make http requests on the frontend and backend. axios/axios

Recharts

We use Recharts to show graph information about the shelter. recharts/recharts

Intro.js-react

We use a react wrapper for Intro.js to give users a guided experience inside the system. HiDeoo/intro.js-react

Firebase

We use firebase to handle the push notifications firebase

Google Maps Embed API

We use this to show the location of the provider and provide driving directions. Get Started | Maps Embed API | Google Developers

Google Maps Place Autocomplete API

We used this to allow managing users of providers to search for their entity on Google when updating their provider information, so they don’t have to fill out everything. It’s essentially the same search you would get when searching on Google Maps. Place Autocomplete | Places API | Google Developers

Material UI

We used Material UI for most of the frontend design of the application. Material-UI: A popular React UI framework

Redux

We used Redux for frontend state management. Redux - A predictable state container for JavaScript apps. | Redux

React Toastr

We used this to show error and success messages on the frontend. tomchentw/react-toastr

React Select

We used this for the frontend provider search on the homepage JedWatson/react-select

Mongoose

Used this on the backend for MongoDB robustness Mongoose

Passport

Used for authentication on the backend Passport.js

UUID

We used this package on the backend to generate unique strings for password reset endpoints uuid

Dotenv

Used to handle backend and frontend environment variables dotenv

Care Amarillo Repositories

You can find the git repositories for Care Amarillo here: Care-Amarillo