Recallr

Introduction

Inspiration

This project was created to easily allow users to store and view their medical details. It also has features to allow them to alter some of their details.

Team

I worked on all aspects of this project by myself with support from my friends who work in medicine. They helped me figure out what data the app should collect and helped me in the formatting of the presentation.

Who for

This project was created for everyone. Especially those of us who struggle with remembering some aspects of their medical information.

Personal focus

My personal focus was in getting started and releasing a presentable version of this project where users could store and easily access a few of their medical details.

Why I Chose To Work On This Project

Everytime someone asked me what my height was or what my blood-type is I ended up having to look it up on my medical insurance or my notes app. This grew tiring quickly because I simply could not retain this information. I asked around and found that some of my friends and family had the same issue. So I figured I'd build this app to help them keep track of some of their medical details.

I had only had a brief interaction Firebase before and wanted to explore it more which is why I chose it for this project. Relying on tutorials and documentation I was able to structure my data and display it. It was definitely a milestone moment for me because it was an achievement. It meant that I could actually put my skills to use in building apps that solve problems. On the front-end I used ReactJS (future versions of Recallr will use NextJS) and Bulma and StyledComponents. It was refreshing to see that the skills I'd picked up during the course of my software engineering bootcamp attendance were handy in quickly picking up technologies.

What I Accomplished With This Project

Architecture

This was the early architecture that I had for the project during the whiteboard phase.

Technologies Used

For the frontend I opted to use ReactJS due to my prior experience with it. I saw this project as an opportunity to challenge myself and improve my skills in using the framework.

For styling I used a combination of Styled-Components and Bulma. I used Bulma in the creation of the forms due to its user friendliness and responsivity. I chose it over bootstrap because I wanted to use something I had never used before.

Features Implemented

• User signup using password and email through Firebase auth.
• User login using password and email through Firebase auth.
• Storage of bio data, drug prescriptions and general medical data on Firestore.
• Password reset via email through Firebase auth.
• Responsivity to make the website friendly on different screen sizes.

Most Difficult Technical Challenge

Before I had gotten to craft any of the other pages, I started with the sign up page. I wanted the user to register by entering their name, email and password. Clicking of the 'SignUp' button would trigger the creation of a collection that used the user's uid generated through firebase auth on success execution of the signInWithEmailAndPassword?function. This was failing however. The uid used as the identifier for the user collection and the uid generated on account creation after execution of signInWithEmailAndPassword?were entirely different. This would mean that I wouldn't be able to run a get() method on the user dashboard to access the records and collections inside the documents created in the collection. To circumvent this, i instead ended up using the user email as the unique identifier for the Firestore collection creation. This worked like a charm and enabled me to proceed with the creation of the React components that I would render on the user dashboard and settings page.

What I Learnt

Technical takeaways

• When using the background-image property in styled-components inside React. Image names with spaces (eg, header image.png) will not render.
• Ems and Rems are better units of measurement to achieve responsive layouts.
• Flexbox is very useful in achieving desired layouts when properly utilized.
• When creating a document for the first time and pushing data to the same document on different user interaction within the same component, it is better to use:

firebase.firestore()
  .collection(<collectionName>)
  .doc(<documentName>)
  .set({<data>}, {merge: true})         

What I might do differently

• I would use NextJS due to its numerous advantageous features.
• I wouldn't use Bulma and would instead fully use styled-components or stitches for all my styling. I would also make use of themeing and the global styles.
• I would do the web design mobile first. I ended up having to revisit the project to make it friendlier for smaller screens.

What I learnt about myself as an engineer

That no matter how stuck I get. I will eventually find the solution. I also enjoy teaching others as I learn. I did this by posting project updates with explanations of what I was doing and why I was doing it that way to the different social forums where I interact with my friends.

How this project informs my engineering path in the future

I am definitely motivated to learn more technologies and implement new features. I am excited to collaborate with others on this project and see how much I can use it to make people's lives better. I enjoy solving problems and look forward to sharing more of my creations with the world.

Changes in perspective

• I thought I would be able to strike a balance between custom CSS and Bulma. I was wrong. I ended up having conflicts when it came to positioning of elements. I will stick to using custom CSS or a react component library to have consistency all through my application.
• FontAwesome icons are really handy. Sadly they don't have icons for every use case.

About Me :)

I am really passionate about crafting great user experiences and solving problems through code. I believe in uplifting those around me and in some way improving the life of everyone I encounter.