28 — Engineering Under Pressure

Today’s Overview

It’s Thursday day 28 and I got A LOT of work done today… Thankfully. The first component that I got started on today that I want to share is the ‘dashboard graph’ component which you can see below:

Dashboard Graph Organism

This component is a new addition to the software that wasn’t in the previous build. I already had all the data being pulled into my dashboard and displaying on the data cards which I took care of previously and I even got started on the bar graph as well but it was only showing results for one piece of a data for one timeframe. I need the dashboard to be dynamic so it would update to the different data points the user wanted to see and also respond and update to whatever timeline the user selected.

This was my first time creating a graph like this so as I had mentioned in a previous writing, I decided to go with a third-party plug-in to get it set up for now. I didn’t think I had the time right now to build a dynamic chart from scratch and even if I did have all the time in the world to work on it, I still don’t think it’d be the right move to do all that first before trying something that I could get up and running much quicker. And depending on how I can customize it, I might not need to ever build my own from scratch if it’s flexible enough. At least for a while. But we’ll have to see.

After a few hours of setting things up and testing and fixing things, I had the graph up and fully functional!! I’m not going to lie though this took some TIME. It took a lot of strategic thinking and a lot of code. It almost took up my entire day of work, but it was worth it. I now have a chart on my dashboard that shows a nice clean visual representation of whichever data the user selects and for whichever timeline the user selects. I will share more details about this later but I had to keep moving and getting more work done.

The next thing I worked on was the ‘Navigation Bar’ component and the ‘Nav Item’ component which are the child elements inside the navigation bar. I got all the way to day 28 of building without adding in the navigation. Lol. So it was definitely long over due. See the ‘nav item’ component and the ‘navigation bar’ component below:

• Nav Item
• Nav Bar (XS)
• Nav Bar (L)

Nav Item

Nav Bar (XS)

Nav Bar (L)

As you can see, the navigation bar component for mobile is different than the navigation bar for desktop. The navigation bar for desktop size will be in a fixed position on the left where it will always be accessible no matter where the user is in the application or what they are doing. Whereas the navigation bar on mobile (and desktop) will only be visible when the user selects the floating ‘menu’ button that makes it slide in from the left. I shared the mobile version of the nav bar as the whole page with the background overlay and the other elements in the background so you can see what I mean and get a better understanding of the behavior. You’ve seen the ‘menu’ button i’m referring to that triggers the mobile navigation bar in some of my mockups before and i’m sharing it again below:

Menu Button

So after getting the dashboard graph setup, I was working on these navigation components and the navigation functionality. I got all of the functionality setup so the nav bar was working correctly and I was able to navigate around my application as expected, but I didn’t finish the correct styling completely and had to push that to the next day (Friday), which, letting you in on a secret, is the day i’m writing this. I’m writing this today on Friday morning because I was actually falling asleep at my computer last night trying to finish that navigation bar. What a day of work it was. I technically have two days left to finish the project, but i’m trying to have it all done by Friday night. In order to do that I need to finalize the styling on my navigation bar, update all of the pages to fit properly with the new navigation bar addition, finalize the styling on the ‘process transaction’ page, and setup the ‘settings’ page. The settings page is pretty simple because there isn’t a whole lot of additional things the user has the ability to change and have control over outside of everything else in the application. Especially for the MVP, I wanted to keep things light. More things will be added to the ‘settings’ in the future of course and i’ll probably be adding things constantly, but right now it’s pretty simple and I definitely think I can get it all setup today/tomorrow along with my remaining work. Time for Friday’s work!