Able University

I built this for a healthcare company that I work for. The company has about 130 field nurses and only one person to train them all. In order to help streamline and speed up the process, I created this web app.

Tech Stack

• React
• GatsbyJS(Static site generator)
• Auth0
• Contentful(Content management system)
• Google Firebase
• Gitlab
• Material UI
• GraphQL

How It Works

In order to have people who are not programmers add courses to the web app, I used a CMS named Contentful. Contentful is a Wordpress like framework where data can be stored. Whenever a user changes any data in Contentful, a web hook is sent to the Gitlab project causing the website to be rebuilt using GatsbyJS. GatsbyJS is a static site generator that can query any data source and build static html pages from it. Gatsby queries the new data from contentful and build the new/updated pages on the fly.

Course List

All courses are programatically organized and built from Contentful

Course Page

The course page is built with two parts. The first part is based off of data that is pulled from Contentful. The data from Contentful helps build the images, text paragraphs and lesson lists for eeach individual course page.

The second part of building the page is to grab live data from our database that allows us to see what lessons the current user has and hasn't completed.

Lesson Page

More data is pulled from contentful to build a leseson page. The lesson page also has clickable buttons on the bottom left and right that open up full side menus.