29 — Almost Home
Today’s Overview
It’s the end of my Friday…. Day 29…. And well…. I didn’t get all the way to the finish line unfortunately. That’s the bad news. But the good news is i’m so damn close that i’ll definitely be able to get it done tomorrow and i’m going to have my app fully developed and ready!!! Since there’s limited work for me to wrap up on tomorrow I think i’m going to be sharing things about the software in tomorrow’s writing. Like showing more screenshots from the finished application and stuff like that. But, i’m also going to make an in depth writing about my entire application and its use and functionality and then i’m also going to be sharing side-by-side comparisons of my Figma designs and my coded developed project. That’s just to give a preview of what’s coming next, but now let’s talk more about what got done today!
As I mentioned in yesterday’s writing I left off at working on the final styling for my navigation bar. It was working and fully functional, but I still had some work to do on it before it was matching my designs perfectly. So I started my day with finishing that up. Once I finished the navigation bar, I had to update ALL of the pages in my app to now fit appropriately with this new navigation bar. This didn’t take too long at all because the ‘navigation bar’ has a fixed width that never changes so all I had to do was make sure each page was taking up the whole space on the screen MINUS the width size of the navigation bar and boom, things were set.
The next thing I had to do was finalize the styling on the ‘process transaction’ page. This actually took me longer than expected. There was nothing hard about it but I ran into some weird css bugs and just had some tedious styling code to write. Sometimes it’s frustrating how something you quickly design and mockup in Figma or Photoshop (or whichever tool you use), can turn out to be so time consuming when it comes to creating it in code. So, this task took me a little while to complete but no problem, we got it done and moved along to the next task.
Wow….. We’ve come a long way in the last month and did a lot of work. Like we have an entirely new MVP. The customers page, the rewards page, processing transactions, the dashboard page with the graph! Like I’m pretty proud of what was done in this last month and all that’s remaining is the settings page, which you can see below:
Settings Page (XS)
Settings Page (S)
Settings Page (L)
So, as you can see the settings page has 3 tabs the user can choose between for the different types of settings. They have “account” settings, “sms” settings, and “privacy” settings. Pretty straight forward. Like I mentioned before, it’s a pretty simple settings feature right now as you can see under “account” settings the only thing a user is able to do is update their business name. I’m not going to share the details of the remaining tabs in the settings page but just know it’s pretty simple like the “account” settings with just a few more fields and options. Also, the tabs are the “pill” components which I mentioned would show up again in the app at another time and now is that time.
So, I got to work on this page and was able to setup the layout and functionality for the different tabs and got everything I need for the ‘account’ and “privacy” tabs fully functional and ready to go. The styling is finalized and the user is able to update their business name and everything else they are able to do under the “privacy” tab. The “sms” settings are a little more complex so I wasn’t able to fit that in today but that’s literally the only remaining part to take care of in the application!!!
Tomorrow on the 30th I’m going to wrap that up and I will have met my goal for finishing the entire project in a month! A short month at that.
Like I was already mentioning before I got the dashboard, customers, rewards, messages, process transaction entry, process transaction, and customer info pages ALL done. With the settings page being like 60–70% done. Man. I feel a bit relieved right now but not as much as I will feel when the settings page is 100% done. And we did all of this with a nice customer UI design and a lot of custom dynamic components. We didn’t just bootstrap the interface. Tedious css styling and making sure the coded project matched the design perfectly or near perfect takes more time than one would think. Which is why a lot of developers like to just bootstrap the UI so they can spend most of their time on the real code and functionally and meat of the project. So I get that. But I’m also a designer and unless your project has some cutting edge technology, a poor UI/UX can really damage the quality and overall feel and experience of your project. And we’ve all seen those projects where the developed project looks like the design mock-ups we’re stepped on and beat up. Like you can see the developed project was definitely based on the design mock-ups, but just didn’t execute quite right in the way it should’ve. I take pride in making sure the experience the user has using the actual developed product matched and reflects what we designed and mocked-up.
A little side bar there I guess. But wow. I’m just happy to finally be in this position and be just a few hours away from having my new MVP done. It seemed like so far away and such an uphill battle at the start of the month but now we’re finally here. I’ll share more in my next writing though when I’m actually done with it. On to Saturday!
