# How I Redesigned the Interactive Cleva Banking Mobile App.

Abel Emmanuel — Sun, 19 Oct 2025 22:08:04 +0000

I made a post on LinkedIn today, 2hours ago, on the #Clevaredesignchallenge.

78 hours ago, when I was scrolling through my LinkedIn news timeline, I saw a post made by Joseph Onaolapo about his redesign, then I inboxed him to share the link to the Figma file.

Even before he shared the link, I searched LinkedIn with the challenge’s keyword, and I saw all the participants’ redesigns; however, Joseph Onaolapo stood out to me.

He shared the Figma link, and I turned the redesign User Interface (UI) into an interactive mobile application.

This is how it goes:

I opened the Figma file
Exported the icons and converted them into font icons for high performance.
Download Geist font family (Light, Regular, Medium & Semibold).
Set up & configured my SDK environment.

The challenge I faced while building it was converting the icons into font icons for high performance.

I struggled converting some icons to font-icons. Not all the icons were able to convert with iconmoon or FlutterIcon; however, I got them all converted.

Apart from icon conversion issues, nothing more.

Kudos to Joseph Onaolapo; he redesigned it and shared the Figma file.

Drive link (Android only)
https://lnkd.in/eJDWBhUx

What are your thoughts about it?

Fab3 is Live!

Abel Emmanuel — Fri, 06 Jun 2025 13:05:14 +0000

It's 1:36 PM over here.

I felt I should start documenting my journey in a blog, and here I am doing it. I know it's not going to be easy, however, I'll keep on pushing until I have a billionaire product.

Everything I'm going to be writing is going to be raw, as it's coming from my head.

Matter of the day.

Yesterday, I bought a domain name for the current project I'm working on. I named it Fab3, it is a tool to help folks in Web3 to keep track, manage, and organize their Web3 airdrop project.

The project is fun, and I've learnt a lot while working on this project. Most importantly, in terms of the database language implementation (MongoDB).

A few minutes ago, I connected the domain name with the DNS server, installed the SSL certificate, and others.

Everything is working fine, except for one thing: redirecting from HTTP to HTTPS. It wasn't a lot of work to do. I will be finishing it when I'm done with this blog.

This is where I'll stop for today. Thank you for reading to this point.

I'm Abel Emmanuel, building products from Nigeria.

Let connect on X @abellmanuell

Click to visit fab3.rest

How I start typescript.

Abel Emmanuel — Sat, 21 Dec 2024 12:31:59 +0000

Hey there,

If you're reading this particular post, I want to appreciate you specially by finding your way to my first technical writing blog post.

The Chinese proverb says "The journey of a thousand miles begun with a step".

Firstly, my name is Abel Emmanuel and I'm a software developer, open source contributor and advocate. I will like to wish my humble self happy birthday.

Today, being 20th December 2024, I started learning Typescript and technical writing. I've known Typescript for quite sometimes but I never saw the important, usefulness, rich features and how it'll help me write better code.

Ideally, I refused to learn Typescript earlier at the times I knew about it. I concluded there is no usefulness of learning Typescript since it has the same syntax and everything with JavaScript not until I got a job that required Typescript.

This is how I started learning Typescript properly, if not I have zeroed my mind on Typescript.

Today, I want to share the basic of Typescript and how important it is and how it can help you reduce the errors you write in your code.

JavaScript from birth is not a typed language like C, C++, C#, Rust and other low-level programming language.

In typed languages, variables and values have a types.

This is what it means by typed-language using C programming language as a practical illustration.

For example in JavaScript to defined a variable:

let x = 5
typeof x    //number

In JavaScript, x can be reassign to a string value.

x = "Emmanuel"
typeof x    //string

Compare with low-level language like C programming language that you have to let the variable aware of the value data type. For instance:

init x =  5
float y = 0.5

If you attempt to reassign variable x and y it throw an error. However, JavaScript is a loosely typed language which can cause plenty of bugs in your code.

To avoid this, you need a super-set of JavaScript called Typescript. Typescript is a static type checker that help check an error in a program before running the program.

Let get started
Install Typescript globally or locally into your project.
npm install -g typescript

Create a folder and name it typescript.

Right-click on the folder (typescript), open with visual studio code and create a file test.ts.

After you've done that, the next step is to start writing your typescript.

Inside your test.ts file copy and paste code inside the file and run it.

console.log("Hello world");

To run typescript file. Open your Command Line Interface (CLI) and tsc test.ts. The command will run the typescript file.

Note: If you do not install typescript you won't access tsc in the CLI.

After you run it, you'll notice that nothing spectacular happen in the CLI but however, you'll note a new file test.js in the folder.

Open the test.js file you will note the command you run will output everything in test.ts to test.js.

Let include types in our code. Let see how it look like in Javascript.

function meet(name, id){
    console.log(`Hello ${name}, your unique ID is ${id}.`)
}

meet("Abel Emmanuel", 7)
// Hello Abel Emmanuel, your unique ID is 7.

Run tsc test.ts. Nothing special happened.
However, assuming the function call meet() get a one argument like meet(7).

Typescript will indicate a an error.

Expected 2 arguments, but got 1.ts(2554)
test.ts(1, 21): An argument for 'id' was not provided.

Normally, in JavaScript world the code is cool but that isn't what we wanted. So even though it doesn't throw an error at runtime. Typescript has help us identify a problem before hand. This is the cooool part of typescript. It help you write a less buggy codes.

Let examine this code.

function meet(name: string, id: number){
    console.log(`Hello ${name}, your unique ID is ${id}.`)
}

meet("Abel Emmanuel", 7)
// Hello 7, your unique ID is undefined.

Note function meet(name: string, id: number), the additional :string and :number. this tell us that we are expecting a argument string and a number. If you do the otherwise your code will trigger an error.

Function return a type
We can allow our function to return a particular typed.

function meet(name: string, id: number): string{
    return `Hello ${name}, your unique ID is ${id}.`
}

meet("Abel Emmanuel", 7)
// Hello Abel Emmanuel, your unique ID is 7.

Object Typed

interface Person{
    name: string;
    age: number;
}

function meet(person: Person): string{
    return `Hello ${name}, your unique ID is ${id}.`
}

meet("Abel Emmanuel", 20)
// Hello Abel Emmanuel, your unique ID is 7.

Other primitive typed Annotation.

let x: string = "Abel Emmanuel"
let y: number = 20

Array Typed Annotation
type Pesron = Array[]

Generic Typed Annotation
type StringGeneric = Array<string>
type NumberGeneric = Array<number>
type ObjectNumberWithGeneric = Array<{number}>

In conclusion, Typescript is a typed language that help you write a better JavaScript and lesser bugs. Read more on Typescript Official website: Typescript.

Let me know if you find this post helpful and if there's a better way to improve I will be glad to learn from you. Thanks for reading my first post.

Follow me on Twitter where I share great content.

Forem: Abel Emmanuel

# How I Redesigned the Interactive Cleva Banking Mobile App.

Fab3 is Live!

How I start typescript.