Information Gethering
The project is a white-label Oriental Wallet, version 1 of the project. The plan was to completely copy the layout and click-through flow while enhancing the overall look and feel of the web app.
Brainstorming
The whole project was supposed to be a full Laravel and VueJS. But the owner of the project wants to develop a mobile app too, so they develop the Backend into a full API instead. And instead of using VueJS for the front, they decided to use ReactJS, and that is where I come in.
Prototype Development
Since we don't have much time to fully develop this, I went straight to designing it in Photoshop and created 2 designs, the 2nd design was approved immediately. Then I went straight into developing it with NextJS/TypeScript/SASS and write its initial layout, drawer, secondary sidebar, and header. All UI component was handwritten by me. The button, modal, modal alert, alert, cards, inputs, a grid system, etc. Even the icon was a component, it is a sprite icon so all I have to do is call the icon by its id, The icons were drawn in Photoshop by me.
Test and Quality Assurance
I needed some dummy data since the API is not ready yet, I proceeded to install a package called FakerJS to populate and test it on desktop and mobile.
Adjustments
I needed to adjust some components to free up space below and above it. Accommodate an icon conditionally. Also needed to calibrate its color, at the start, the primary color of the project was red because it was based on the logo of the Oriental Wallet, and now it is green. Fixed a bug on the grid system. Finally, implement a dark mode.