LionWell

In this project, I teamed up with Penn State Students to devlop a AI full-stack application named Lion Well. LionWell is a healthcare platform that is supposed to make being healthy fun. Through leaderboards, gamification, and notificaiton this could be accomplished.

To make this project, I used React it is a modern approach and makes it great for professional deployment.

My First Part of the project was implementing the HomeScreen page it needed to be welcoming, beginning friendly and welcoming.

Here is my current Home Page

Image: HomeScreen1

Image: HomeScreen2

When developing the project, I wanted to make the Homescreen simple and easy to create so I could focus on the Database and the AI integration Piece.

Once I fished the Homescreen I started to work on the Login/Singup Page this involved making a database in Firestore. I connected the Login/Singup system to the database to make authenticating and creating a new user a seamless process.

Image: Login Page

Image: SignUp Page

Once I finished the Login/Signup, I started to work on the MainPage. There were a couple of main components that I wanted to add.

Number 1 being a graph to show ones anylatics.

I used React Graph Library to show the Different Trends

Number 2 is the daily check-in option

In order to implement this, I had to make a database that constantly monitroed when the person checked in and made sure that they didnt do multiple Check Ins on one day.

Number 3 is the modal for the AI integration.

Number 1 Graph Integration

I used the React Graph Library to represent all the data. I pulled the data from the Database and represneted the graph on the homepage. The individual l points represent the times that the Person has done a Daily Check in.

Image: Graph

Number 2 Daily Check-in Option

This part of the project was the simplest and most easy to do. As per the UI it is a modal on the website that asks three simple questions. Sleep Taken, Hours Slept, and Mood, this was than saved in the firestore database. I wanted to expand the questions that we asked for the Daily Check-in but for right now I believed it would be enough.

Image: Modal Display

Number 3 Modal for AI Integration

This AI integration was the most complicated part of the project. I used a modal to show users the AI interface, but on the backend is where the majority of the code was. I used a hugging face model to locally train the data, and I refined the data by using a RAG system and inputting Penn State Data into this system. It worked fine locally but when I tried to deploy it through Github it would not work because the AI model was not big for it deploy. To combat this problem I am in the works of using an API from another Artificial l Intelligence Model.

Image: AI Modal

OTHER COMPONENTS

In order to make the Health platform fun to be and a little bit compettive I added a leaderboard. This was probably the most math heavy part of the application. In the leaderboard I first had to make code to see if the person had a streak. This involved some logic code + math. The other hand I had to calculate the Progress which involved subtracting from the original value and turning that difference into a percent.

Image: Health Leaderboard

LAST COMPONENT(JK)

For the last part of my contribution I added a Badges section to signify accomplishments. This was when a user completed a certain accomplishment and would obtain a badge which they could share with others.

Image: Badge

NOTIFICATIONS

In order to make this Gamified I took inspiration from Duo-Lingo which is a language app that sends constant information so that you login and complete their exercies. I wanted to implement a similar framework where I was sending notifications, however, I ran into a roadblock because of the cost.