How I Created An Medical Records Management Web App Using JavaScript. pt1

I love the challenging part of engineering something others will need and will use profusely

“ Do you know how to build software ?… I didn’t think so…”

The guy acted like a complete ego manic with terrible people skills. The experience left me wondering if all experienced software developers are condescending?

I was visiting this software development company in long beach about building an app for a non-profit.

It seemed that he was discriminating against us because of my race and maybe he thought we didn’t have $30K to drop.

He said we would need to fly him to the headquarters and pay for hotel fees and daily hourly fees while he watches us do the process before he can advise us on the software we need to build.

I’ve never heard of such a thing and felt this was unnecessary. He could have just said that we will need to work out the process first before we can help you build the software.

Later I did find out that there is indeed a problem with software developers and people skills.

Being from heavy customer service background I felt inspired to do a better job myself. I want to build software that people will use in a non-condescending way.

Only problem… He was right, I didn’t know anything about programming and barely knew what a computer was.

Fast-forward many years later I “self-taught” computer hardware, stripped a computer down to just the motherboard, and even looked up what the motherboard was made up off and learned enough about etching to know that I’m total ok with someone else doing it.

I got a job at staples easy tech while in school to get a bachelor’s with a focus on software development. Before then I took Cisco’s CCENT certificate and passed with flying colors which help me land a job as an enterprise employee help desk tech job. 6 years later I left that to free ball my own web development company.

The experience inspired me to explore technology for myself. To create a better experience for clients needing software solutions to complex problems.

The non-profit never did find a good solution so I’m about to create it.

How I Gathered Requirements

I worked in-depth with the organization and know enough about what the problems are to put together a critical features-focused solution.

They will use a computer with the internet and will need to emphasize crud features for admins and a client portal to view invoices and make payments.

The idea is to build a working prototype then approach them with a solution to test-drive and then pitch a sell.

It cost me zero dollars just time and effort so any sale would be pure profit.

• it’s 100% cloud using google firebase
• custom coded using reusable code I created from other projects.
• plain javascript and custom CSS styles
• borrowed UI design for dashboard and client portal using Figma

Tools going in:

• stackblitz to code in the cloud
• github to save templated code
• envato elements to get icons and css styling in figma
• JavaScript possible use react

I went to capterra to compare and contrast other software to help me narrow down the key features expected from such an ERM-type software.

Key features for ERM

How I Designed

I went to Envato elements to look at UI for a medical dashboard

Medical Dashboard UI High Fidelity

Went with this type of dashboard but branded it to their company. I looked for a design that had a Figma import option.

UI to make Div Elements

I created a div for each “frame” I renamed some of them “Wrappers” or “Containers”.

After I created each div I would copy the style that was in figma under the related id.

Using Inspect and clicking the code brackets you will see css and notes

It’s saved me a lot of time just typing all this stuff. There are points where you need to change position to relative or you need to change the width to auto or 100% as this Figma image is meant for a concept but not a working website asset.

Got left panel and middle panel with a search ad a data section

I deployed it as a repo in GitHub as I think I will be able to reuse this for a future project up to this point. I plan to make it private repo later.

I also deployed live using google firebase hosting. I do this early to catch any mistakes before I start adding complexity with features and data requests.

How I structured the data

Now I want to make sure the data is organized properly and that we can get it from the database into this app.

I saw interesting database training on youtube google firebase so I spent from downtime watching the whole playlist.

…..