27 — The Determinator

Today’s Overview

We’re now processing transactions! After yesterday I had everything setup that I needed to in order to get going on building the functionality to allow for a customer transaction. And today, we actually have it working.

Getting started on building the functionality for the ‘process transaction’ feature was the first thing I did today. I knew it was going to be a lot considering everything that needs to happen when a transaction is processed so I wanted to tackle this now because it’s one of the two large remaining features standing in the way of me and completion.

So, it took me a few hours to get it all setup but I got there and it works great. I built the entire functionality and didn’t cut any corners. Even the ability to automatically send the default transaction message to the customer whenever they complete a transaction. At this point, the feature is complete and all that’s left is for me to add all of the responsive styling and then we’ll have a completely finished ‘process transaction’ feature with all of the necessary pages polished and finished. Is this what I got working on next though? No it was not. Why not? Because it’s day 27.

There’s no time for tedious css styling right now when when there’s still a lot of functional Typescript code to write. I decided to work on the ‘Edit Customer’ organism component which you can see below:

Edit Customer Form

I’ve used this style of component a few different times in this project and it always appears similar so the design is consistent. This component has the same layout as the forms for adding a reward, editing a reward, and adding a customer. Because i’ve already used it, it didn’t take much to setup the component, but it did take me some time to setup the functionality for it and allow users to edit customers. Got it done though and now I needed to finalize the ‘customer info’ page (which is where users can use the edit ‘customer’ feature) which you can see below:

Customer Info Page (XS)

Customer Info Page (S)

Customer Info Page (L)

This is the profile page for the customer. It gives the user a rundown of their information and their activity with the business. And then from here they can choose to process a transaction for the customer, edit the information, view relevant statistics, view recent activity, etc. It’s a pretty cool page and after today I can say it’s completed and ready to go.

Today was a busy one as it should’ve been. We’re about to go into the middle of the week and there’s still a lot of work to be done.

• Customers
• Rewards
• Messaging
• Customer Info
• Process Transaction Entry
• Dashboard
• Process Transaction
• Settings

Above is the list of all the unique screens I need to have for my app to be complete. If it’s bold, that means it’s 100% complete and if it’s not bold, that means it still needs some work. I haven’t even started on the settings page yet, there’s multiple pages I need to finalize, and I still need to create the side navigation bar. I technically have until the end of Saturday to finish my project for it to be done by the end of the month, but I want to finish by Friday. It just feels right and to do it with one day to spare would be cool. That’s going to take some WORK over these next two days though so moving on to it!