Segun Akanbi | Portfolio

The first prototype of Banka was developed within 2 weeks in a Bootcamp project. The instructions and requirements of the challenge were given in detail. The requirement was to build the frontend templates which involves designing the user-facing features like homepage, login, sign up, and several other pages.

"Banka is a light-weight banking application designed to help manage banking activities. Customers can create bank accounts and monitor their transactions on the app."

It adopts a two-level authentication, admin user and staff user with different authorisation levels. To learn more check out the READme of this project. View Readme

Before I kick off on any project, I always understand the business requirements to a level where I'm confident in my knowledge about what the client wants. Firstly, I research on what similar applications look like, function and how they tend to satisfy the user's desire. Basically, to get an idea of what I should have in mind before jumping in.

I looked up several banking applications to figure out what they have in common. I realised there were a lot of moving parts that are connected to each website. However, for our project, we wanted something lightweight and minimal as we do not have enough time to build.

After picking some ideas, I started creating the mockups with pen and paper. Once I was satisfied, I moved on to the design using a graphics editing tool. For this, I could either use Adobe XD, CorelDraw or Figma. The next step is to convert what I have to code. The technologies used were HTML and CSS (no frameworks, libraries or preprocessors).

The first image above was the initial homepage design for our application. A plain background with a teal colour. At this point, what was important was having a structured layout and proper navigation within pages. To view the latest version click here

Here are a few functionalities of the application.

A customer can create a bank account, manage their account details, and view account transactions. An admin or staff can view all bank accounts, view individual accounts, activate or deactivate an account and delete any account. A staff can credit or debit an account.

Crunchies Restaurant App was the first JavaScript application I built using a framework. The project requirement was to develop a responsive web app and a mobile app to enable customers to place orders from the closest restaurant.
The application consists of the User Dashboard (Web and Mobile), Admin Dashboard and the backend API, built entirely using JavaScript tools. The web platform was built using ReactJS, the mobile app using React Native, the admin dashboard using ReactAdmin, the backend API using NodeJS/Express, the database using MongoDB, and cloud storage using Firebase, JSONWebToken, Semantic UI, and more.

My UI case study for this project was the Jumia Food web app. Firstly, I needed to understand the project requirements which include Geolocation tracking, Multi-level authorization, a cart system and so much more.

Next, I began drafting the mock-up for each page. Once I had a few pages done I moved on to implementing the code. I spent so much time brainstorming and researching the right tools to use and also communicating with the project manager and the client, making sure we were on track at every point in time. Below are screenshots of the cuisine page and cart (during the design stage).

With modern technologies, Single Page Applications (SPA) have been feasible and the idea can easily be implemented with small applications. This application was designed with the concept of SPA in mind.

An SPA (Single-page application) is a web app implementation that loads only a single web document, and then updates the body content of that single document via JavaScript APIs such as XMLHttpRequest and Fetch when different content is to be shown. (MDN)

Maze movies is a simple project for showcasing a complete web application by interacting with a backend API. It was built with minimal functionalities. For a movie selection theme, we want a simple aesthetic design that focuses the user's attention on the important components which are the movie listings. This project is near completion and there are several ideas I plan to implement.

Some of the features include:

✔ Viewing a specific movie detail.
✔ Pagination.
✔ Search functionality.
✔ Movie star-rating.

The Open Source API used was the TV Maze API.

Neural Technologies is a Design firm that provides solutions to business problems. They are an IT and Software Development organization that offers Artificial Intelligence solutions, Product Design, Cloud Services and Software Development. They also advise, assist and solve problems of companies and organizations relating to Information Technology.

The requirement was to design a website to showcase its services and what they have to offer.

The image above shows the initial UI template for the homepage. The basic idea of the final design was from the template. On this project, I worked closely with a UI Expert who designed the mock-ups except for a few suggestions. The entire codebase was written in ReactJS and the app was hosted on AWS Amplify.

The logo, font choice and colour palette were all selected based on the client's need. Each page is fully responsive and mobile-friendly using media queries and SCSS.