Medi App (React & Firebase)
Case Study
Introduction
"Medi App" is a web app for tracking medication.
Users can login with their Google Account, add medication, track it with one click,
and track blood pressure.
The project involved building the database with firebase, using the firebase commands
and building the client-side using React and Scss.
- PWA
- Hosted with Firebase
"Medi App" in use
Objective
The aim of the project was build a web application using full-stack JavaScript
technologies for my portfolio.
The problem to be solved was building the complete server-side and client-side for the
application from scratch.
Screenshot of finished app (main view)
Context
The application was a private project for expanding my knowledge and keep practising.
"Medi App" in use
Approach
To build an app that offer a way to track medication, there had to be the server-side, that stores all the data, and the client-side, that has the user interface to interact with all the information.
"Medi App" in use
1. Step: Create the Server Side
The first step was to create API requests using Firebase Services. For this, code with the
HTTP methods for the endpoints had to be written.
After that the database was set up with Firebase.
2. Step: Create the Client Side
In the second part of building the app, I created the components with React.
The main view component contained the app routing, and there had to be a registration and a
login components, handling the authentication.
The main view displays ..., based on a function that maps through all ... and
creates ... components.
Functions to add and delete medication from a list were added.
At this point the first part of the project, the server side, came together with the client
side - all connected and accessible through the UI.
App.js with Routes
Firebase Project
Database in Firebase
"Medi App": Login Screen
Login with Google Account
Reflection
It was challenging to understand the general structure of React and the use of props and state, how
things are connected, how data is passed between components and how it can be accessed in the
database to be used in the functions.
I found it difficult to work with useEffect as I had an infinite loop updating the list from the
database.
With the help of an experienced developer I integrated useRef, after trying different cleanup
solution that failed.
Duration + Next Steps
Both parts of the application together, the server side and the client side, took me about 2 months.