DEV Community: Obed Avorlenu

Building AfriWidget: How I Built 100+ Free Online Tools Using HTML, CSS and JavaScript

Obed Avorlenu — Fri, 30 Oct 2026 01:04:23 +0000

From an idea to a growing collection of practical web applications. A look at the development process, technical decisions, challenges and lessons behind AfriWidget.

Building software is interesting. Building software that people can actually use to solve everyday problems is even more interesting.

When I started working on AfriWidget, I wasn't trying to create another website filled with random online calculators. I wanted to build something more useful: a collection of practical digital tools that could make everyday tasks easier, particularly for people who often struggle to find tools designed around their actual needs.

What began as an idea gradually developed into a growing platform containing more than 100 tools and pages across several categories.

The interesting part is how it was built.

AfriWidget was developed using familiar web technologies: HTML, CSS and JavaScript. There was no need to begin with a complicated technology stack or introduce a large collection of frameworks.

Instead, the focus was on building individual tools, making them functional, improving their usability and gradually developing a platform around them.

In this article, I'll explain the thinking behind AfriWidget, the development approach, the technologies involved, some of the engineering challenges and the lessons I learned while building it.

This isn't a claim that everything was perfect. Like most real-world software projects, AfriWidget has required continuous improvements, corrections and difficult decisions.

That's precisely what makes the development process worth discussing.

The Idea: Building Tools That Solve Actual Problems

Every useful software product starts with a problem worth solving.

People regularly need to calculate percentages, understand academic results, manage information, estimate expenses and complete other everyday tasks.

Although many websites provide calculators and similar utilities, finding a tool that properly addresses a particular country's educational system, grading structure or specific requirements can sometimes be difficult.

Consider academic calculations.

A student might need to understand their examination aggregate, calculate a weighted assessment score or estimate whether their results meet a particular admission requirement.

A generic calculator cannot necessarily handle these situations correctly.

The calculation might depend on a specific grading structure, subject combination, weighting system or institutional requirement.

This presented an interesting development opportunity.

Instead of creating only general-purpose calculators, why not build tools that address specific problems?

That became one of the ideas behind AfriWidget.

The objective was to create practical tools that people could access directly through a browser without having to install an application.

The platform would focus on usability, accessibility and solving clearly defined problems.

The guiding idea became:

Built in Ghana. Made for the World.

AfriWidget isn't intended exclusively for African users. Its educational tools include region-specific functionality where necessary, while its broader collection addresses problems that people around the world experience.

Choosing the Technology Stack

One of my earliest development decisions was choosing the technologies that would power the platform.

I wanted a stack that would allow me to build quickly, maintain control over the implementation and avoid unnecessary complexity.

The core technologies were:

HTML
CSS
JavaScript

These three technologies provide everything needed to build interactive browser-based applications.

HTML: Structuring the tools

HTML provides the structure of each application.

For a calculator, this includes:

Input fields.
Labels.
Buttons.
Result sections.
Instructions.
Validation messages.

For example, a simple percentage calculator might require two numerical inputs and a button to calculate the result.

HTML defines these elements and their relationships.

I also wanted the pages to use meaningful semantic elements rather than relying entirely on generic containers.

This helps make the content easier to understand for browsers, assistive technologies and search engines.

CSS: Designing the experience

CSS controls how the applications look and behave visually.

For AfriWidget, the design direction uses a relatively simple visual identity built around black, yellow and white.

The intention was to avoid unnecessary visual complexity.

A calculator should make its purpose obvious.

Users should understand where to enter information, how to perform a calculation and where to find the result.

CSS also handles responsiveness.

This is particularly important because many people access online tools using smartphones rather than desktop computers.

The interface needs to remain usable on smaller screens without requiring users to zoom in or navigate unnecessarily complicated layouts.

JavaScript: Making everything functional

JavaScript handles the actual behaviour of the tools.

It processes inputs, performs calculations, validates information and updates the interface.

For example, consider a weighted academic score calculator.

The calculation might involve several assessment components, each contributing a different percentage to the final result.

JavaScript can receive the scores, apply the appropriate weights and calculate the final value.

A simplified example:

function calculateWeightedScore(
assignment,
test,
examination
) {
const result =
(assignment * 0.20) +
(test * 0.30) +
(examination * 0.50);

return result;

}

console.log(
calculateWeightedScore(80, 70, 60)
);

The output is:

This is a small example of the calculation logic.

A real application also needs input validation, appropriate score limits, error handling and clear result presentation.

The important architectural decision was that the core functionality could be implemented directly in the browser without requiring a backend for every calculation.

Building Individual Tools Instead of One Complicated Application

One of the most important decisions was treating the tools as individual applications within a larger platform.

This approach makes it possible to develop different tools around their specific requirements.

An academic calculator doesn't necessarily need the same input structure as a financial calculator.

A productivity tool may require a completely different interaction model.

Trying to force every tool into one complicated interface would introduce unnecessary limitations.

Instead, each tool can have its own:

Interface.
Calculation logic.
Validation rules.
Instructions.
Results presentation.
Supporting content.

This provides flexibility.

It also means that improvements can be made to individual tools without automatically changing the behaviour of unrelated applications.

However, this approach introduces another challenge: consistency.

When a platform contains dozens or hundreds of individual tools, maintaining a consistent user experience becomes increasingly important.

Users shouldn't feel like they are visiting completely unrelated websites whenever they move between tools.

This is where shared design principles, navigation patterns and common functionality become useful.

Developing the Educational Tools

Education became one of the central areas of AfriWidget.

This wasn't simply about creating generic calculators.

The challenge was understanding that different educational systems use different rules.

A calculation that works for one country might be completely incorrect for another.

WASSCE Aggregate Calculator

The WASSCE calculator was designed around the grading requirements relevant to the examination system.

The implementation needs to account for subject grades, the best-six calculation and relevant core subjects.

This introduces several considerations.

For example:

Which subjects are mandatory?
Which subjects should contribute to the aggregate?
How should grades be converted into numerical values?
How should missing or invalid selections be handled?
How should the result be explained?

The calculation logic must reflect the applicable grading rules.

A visually attractive calculator is not useful if its underlying academic calculation is wrong.

JAMB UTME Calculator

The JAMB calculator requires a different calculation structure.

Its inputs and scoring logic are not interchangeable with those of WASSCE.

This illustrates an important software development principle:

Similar-looking tools can have completely different business logic.

The interface might share design patterns, but the underlying implementation must respect the requirements of the specific examination system.

South African Educational Tools

Another interesting area was developing tools for South African students.

This included tools related to APS calculations and TVET assessment systems.

The ICASS calculator was particularly interesting because it deals with continuous assessment components and their contribution to academic performance.

For example, an assessment might contain different components with different weightings.

The application must interpret those weights correctly before producing a result.

Developing these tools reinforced an important lesson: understanding the domain is just as important as understanding JavaScript.

You cannot reliably implement a specialised educational calculator simply by guessing the formula.

You need to understand the actual requirements, verify the calculation and communicate any relevant limitations to users.

Making the Platform Useful Beyond Calculators

As the project developed, it became clear that simply providing calculations was not enough.

People often need help understanding their results and deciding what to do next.

This led to the development of additional functionality.

Find My Weaknesses

One of the educational features focuses on helping students identify areas where they need improvement.

The idea is to move beyond simply displaying a numerical result.

A student might know their examination score but still struggle to understand which concepts require more attention.

A weakness-identification experience can help direct attention towards specific topics and provide opportunities for practice.

This introduces additional development requirements:

Question organization.
Difficulty levels.
Answer validation.
Performance tracking.
Feedback.
Progress monitoring.

It also requires careful attention to the user experience.

Students should not have to navigate a long, intimidating introduction before starting a useful activity.

The experience should make it easy to begin.

Continue Where You Left Off

Another useful idea is reducing the amount of work users need to repeat.

For example, someone using a calculator might leave the page and return later.

A continuation feature can help users find previously used tools and, where supported, resume their work.

This kind of functionality requires decisions about data persistence and privacy.

If information is stored locally in the browser, users should have a clear way to remove it.

Favourites

A growing platform can make finding tools difficult.

A favourites feature gives users a way to keep track of tools they use regularly.

Rather than searching through multiple categories every time, they can access their preferred tools more easily.

This is a relatively small feature, but it addresses a practical usability problem.

Academic Progress Tracking

Another direction is helping students understand their progress over time.

A single examination result provides only a snapshot.

Tracking multiple results can reveal whether performance is improving, declining or remaining relatively consistent.

A useful progress tracker should present information clearly rather than overwhelming users with unnecessary statistics.

These features represent a broader shift in the project's thinking.

The objective is not simply to provide more calculators.

It is to create more useful experiences around the problems those calculators address.

Why I Avoided an Unnecessarily Complicated Framework Stack

Modern web development offers many frameworks and development environments.

React, Vue, Angular, Next.js and other technologies provide powerful ways to build applications.

They are valuable tools, and there are situations where using them makes perfect sense.

However, not every project needs them.

For AfriWidget, the initial priority was building lightweight browser-based tools.

HTML, CSS and JavaScript were sufficient for implementing the core functionality.

This offered several advantages.

Less unnecessary complexity

There was no requirement to introduce a large framework simply to calculate numbers, validate inputs and display results.

Direct control

The implementation remained close to the underlying browser technologies.

Lightweight delivery

Individual tools could be designed without requiring an unnecessarily large application runtime.

Accessibility of development

The core technologies are widely understood and have extensive documentation.

There are trade-offs, of course.

As the number of tools increases, maintaining consistency and avoiding duplicated code becomes more challenging.

A collection of individually developed pages can gradually become difficult to manage if there are no clear conventions.

This is an area where good organization, shared components where appropriate and consistent development practices become increasingly important.

The lesson isn't that frameworks are bad.

It's that technology choices should follow the needs of the project rather than fashion.

The Importance of Input Validation and Calculation Accuracy

One of the most important engineering lessons from building calculators is that accepting input is not the same as handling input correctly.

Consider a calculator that expects a score between zero and one hundred.

What happens if someone enters:

A negative number?
150?
An empty field?
Text instead of a number?
A decimal value?
An unusually large number?

Without proper validation, the application might produce misleading results or behave unexpectedly.

A simple JavaScript validation example looks like this:

function validateScore(value) {

const score = Number(value);

if (value === "" || !Number.isFinite(score)) {
    return {
        valid: false,
        message: "Please enter a valid number."
    };
}

if (score < 0 || score > 100) {
    return {
        valid: false,
        message: "Score must be between 0 and 100."
    };
}

return {
    valid: true,
    value: score
};

}

This function checks whether the input is a valid numerical value within the specified range.

However, validation rules must be based on the actual requirements of each tool.

Not every calculator should have the same limits.

For example, a percentage calculator might accept values beyond 100 depending on its purpose, while a particular examination score field may have a strict maximum.

Another important consideration is independent verification.

For mathematical tools, I consider it essential to compare application results with manually calculated examples.

A tool should not be considered complete simply because its button works.

Its results must also be correct.

SEO: Making Useful Tools Discoverable

Building a useful application is only one part of creating a successful web platform.

People also need to find it.

Search engine optimization became an important part of developing AfriWidget.

The challenge was that each tool addressed a different search intent.

Someone searching for an ICASS calculator has a different requirement from someone searching for a WASSCE aggregate calculator.

A single generic homepage cannot fully address every one of those needs.

This made individual tool pages important.

Each page needed to communicate:

What the tool does.
Who might benefit from it.
What information users need.
How the calculation works.
How to interpret the result.
What limitations apply.

Writing useful supporting content

A calculator without sufficient explanation can leave users confused.

For example, a student might receive an aggregate but not understand how it was calculated.

Supporting content can explain the grading system, calculation method and relevant considerations.

This provides value beyond the calculator itself.

It also creates opportunities for search engines to understand the purpose of individual pages.

However, publishing large quantities of repetitive content is not a sustainable SEO strategy.

A page should exist because it serves a meaningful purpose.

Adding paragraphs simply to increase word count does not automatically make a tool more useful.

Technical SEO

Technical considerations also matter.

These include:

Descriptive page titles.
Useful meta descriptions.
Logical heading structures.
Canonical URLs.
Internal links.
Mobile usability.
Search engine accessibility.
Structured data where appropriate.

Structured data can help search engines understand certain types of content, but it should accurately describe what users can actually see on the page.

SEO should support the product rather than dictate misleading content.

Performance and the Importance of Lightweight Tools

A website does not become successful simply because it contains many features.

If users have to wait too long for a calculator to load, they may leave before using it.

Performance was therefore an important consideration.

Using browser-native technologies provides opportunities to keep individual tools relatively lightweight.

However, writing vanilla JavaScript does not automatically guarantee good performance.

Poorly optimized JavaScript can still create slow interfaces.

Large images, unnecessary scripts, excessive DOM updates and inefficient event handling can affect the user experience.

Some practical considerations include:

Keep dependencies under control.

Every external library should serve a meaningful purpose.

Optimize images.

Use appropriate image dimensions and modern formats where suitable.

Avoid unnecessary JavaScript execution.

Only perform work when it is needed.

Keep interfaces responsive.

A calculator should not become difficult to use when the screen becomes smaller.

Test on real devices.

Desktop testing alone does not reveal every mobile performance problem.

A website should be evaluated under realistic conditions, including slower connections and less powerful devices.

Browser Storage and User Privacy

As AfriWidget introduced more interactive features, browser storage became increasingly relevant.

Some functionality is more convenient when information can be retained locally.

For example:

Favourite tools.
Previously used tools.
Saved calculation information.
Academic progress.
User preferences.

JavaScript provides browser storage mechanisms such as localStorage.

A simple example:

const preferences = {
theme: "dark",
language: "en"
};

localStorage.setItem(
"userPreferences",
JSON.stringify(preferences)
);

The information can later be retrieved:

const savedPreferences = JSON.parse(
localStorage.getItem("userPreferences") || "{}"
);

console.log(savedPreferences.theme);

This allows an application to preserve certain preferences without requiring a server-side database.

However, local storage introduces responsibilities.

Developers should consider:

What information is being stored?
Why does the application need it?
How long should it remain?
Can users delete it?
Is sensitive information being stored unnecessarily?
What happens when stored data becomes incompatible with a newer version?

Local storage should not be treated as a secure place for passwords, authentication secrets or highly sensitive personal information.

Privacy also needs to be explained clearly.

If an application stores user information locally, users should know what is stored and how to remove it.

Convenience should not come at the expense of transparency.

Challenges That Come With Scaling a Collection of Tools

One of the interesting things about AfriWidget is how quickly a small collection of tools can grow into a much larger platform.

Developing five calculators is one thing.

Maintaining more than one hundred tools and pages introduces an entirely different set of challenges.

Maintaining consistency

Different tools can gradually develop different design patterns.

Buttons might have inconsistent sizes.

Input fields might behave differently.

Navigation might become difficult to predict.

This creates a fragmented experience.

The solution is to establish shared design principles and review individual tools regularly.

Avoiding duplicated logic

When several tools use similar functionality, developers may end up implementing the same logic repeatedly.

For example, multiple calculators might need numerical validation.

Without reusable patterns, maintaining those implementations can become unnecessarily difficult.

A useful approach is identifying functionality that can be shared without forcing unrelated tools into the same implementation.

Managing changes safely

Updating a platform with many independent pages requires care.

A change that improves one tool should not unexpectedly break another.

This makes regression testing important.

After making changes, developers should check both the modified functionality and important existing behaviour.

Knowing when to remove features

There is a common assumption that adding more features always improves a product.

It doesn't.

Sometimes a feature introduces maintenance costs without providing enough value.

Sometimes an entire category needs reconsideration because the available tools do not meet the quality standards of the platform.

Removing unnecessary functionality can be just as important as introducing new functionality.

A healthy product should evolve based on usefulness, reliability and actual user needs.

Hosting and Deployment

A web application needs to be accessible beyond the developer's local environment.

For a static-first platform like AfriWidget, static hosting is a practical approach.

Services such as Cloudflare Pages can host static HTML, CSS and JavaScript projects and distribute content through a global network.

The basic deployment process involves:

Preparing the project files.
Organizing the pages and assets.
Connecting the project to a supported deployment workflow.
Configuring the domain.
Deploying the website.
Testing the published pages.

A major advantage of static hosting is that individual browser-based tools do not necessarily need a continuously running application server.

The browser performs the calculations.

The hosting platform delivers the files.

This can reduce infrastructure complexity for tools that do not require server-side processing.

However, not every future feature will necessarily fit this architecture.

Features involving authentication, protected information, server-side AI processing or external integrations may require additional infrastructure.

Choosing a static-first approach does not mean refusing to use backend services when they become necessary.

It means avoiding infrastructure that the current problem does not require.

Learning From Real Usage Instead of Guessing

Building a website and understanding how people use it are two different things.

Analytics can help developers discover what is happening after deployment.

For example, a developer might assume that a newly introduced feature is popular because it took considerable time to build.

Actual usage might tell a different story.

Some tools may attract substantial search traffic.

Others may receive very little attention.

Some visitors may interact with a calculator and leave immediately because they obtained the answer they needed.

That is not necessarily a negative experience.

A short session can still represent a successful interaction.

Analytics should therefore be interpreted in context.

Useful measurements can include:

Page views.
Active users.
Tool interactions.
Search impressions.
Search clicks.
Search rankings.
Conversion events.
Errors and failed interactions.

One important lesson is that traffic alone doesn't establish product quality.

A tool that attracts thousands of visitors but regularly produces incorrect results is not a successful product.

Likewise, a useful tool with limited visibility may need better discoverability rather than a complete redesign.

The goal is to combine user feedback, technical testing and analytics when deciding what to improve.

What I Would Do Differently If I Started Again

Looking back at the development process, there are several areas I would approach more deliberately.

Establish stronger shared conventions earlier

When building many independent tools, consistency becomes increasingly important.

I would establish clearer conventions for file organization, naming, shared functionality and design patterns from the beginning.

Build testing into the development process

Testing should not become an activity reserved for the end of development.

Each tool should have a defined set of expected inputs, outputs and edge cases.

This is particularly important for academic and financial calculations.

Prioritize quality over quantity

It is tempting to measure progress by the number of tools published.

However, a smaller collection of accurate, well-maintained tools can provide more value than a much larger collection of unfinished or poorly explained applications.

Think about privacy before introducing storage

Features such as favourites, saved progress and continuation functionality should be designed with privacy in mind.

Users should understand what information is retained and how they can remove it.

Treat content as part of the product

Instructions, explanations and supporting articles are not merely SEO additions.

They help users understand how a tool works and whether its results are relevant to their situation.

This is particularly important when dealing with educational calculations.

What Comes Next for AfriWidget?

AfriWidget is an evolving project.

The intention is to continue improving the quality and usefulness of its existing tools rather than simply increasing the number of published pages.

Some important areas of continued development include:

Better educational experiences

Making academic tools more useful through clearer explanations, performance tracking and opportunities for students to identify areas that need improvement.

Improved user experience

Reducing unnecessary steps, improving mobile usability and making important actions easier to understand.

More reliable calculations

Reviewing formulas, handling edge cases and providing transparent explanations of calculation methods.

Better organization

Making it easier for visitors to discover relevant tools without navigating unnecessarily complicated categories.

Thoughtful new functionality

Introducing features when they solve genuine problems rather than adding them simply because they are technically possible.

The long-term objective is to make AfriWidget a useful collection of digital tools for people in different parts of the world.

Final Thoughts: Build Something Useful, Then Keep Improving It

AfriWidget has taught me that building a software product is not just about writing code.

It involves identifying problems, understanding users, making technical decisions, testing assumptions and accepting that the first implementation will not always be the best one.

HTML, CSS and JavaScript made it possible to build a growing collection of browser-based tools without introducing unnecessary complexity at the beginning.

But the technologies themselves were never the main achievement.

The more important part was identifying problems worth solving and continuously improving the solutions.

There is a lesson here for developers, particularly those working independently.

You don't need to begin with an enormous application.

You don't need to use every popular framework.

You don't need a large team before you can create something useful.

Start with a problem you understand.

Build a small solution.

Test it properly.

Listen to how people use it.

Improve what doesn't work.

And don't be afraid to remove something that no longer serves a purpose.

A project becomes more valuable not simply because it grows, but because it becomes better at doing what it was created to do.

That is the principle I want AfriWidget to continue following.

Explore the Project

AfriWidget is an independent project founded by Obed Avorlenu.

It is built in Ghana and developed with the intention of making practical digital tools accessible to people around the world.

The platform includes tools covering education, finance, productivity, business and other everyday needs.

You can explore the project here:

"AfriWidget — Built in Ghana. Made for the World." (https://afriwidget.com)

I'm also interested in hearing from other developers who have built independent products using HTML, CSS and JavaScript.

Discussion questions:

What would you choose for a project like this: vanilla JavaScript or a framework?
How do you maintain consistency when managing dozens or hundreds of independent tools?
What is one technical decision you would make differently if you started your first major project again?

I'd be particularly interested in hearing from developers who have experience building and maintaining large collections of small web applications.

How to Build Your Own Smart AI Assistant Using Only Your Android Phone (Termux + Python)

Obed Avorlenu — Fri, 30 Oct 2026 01:01:18 +0000

How to Build Your Own Smart AI Assistant Using Only Your Android Phone (Termux + Python)

Have you ever wanted to build your own AI assistant but assumed you needed an expensive computer, powerful graphics card or years of programming experience?

What if I told you that you could build a working AI assistant using nothing more than your Android phone?

You don't need a laptop.

You don't need an expensive development environment.

You don't even need to be an experienced programmer.

With Termux, Python and an AI API, you can create a personal AI assistant directly from your Android device.

In this tutorial, we're going to build one step by step.

But we're not going to stop at creating a basic chatbot that simply accepts a question and returns an answer.

We'll build an assistant that has:

Its own personality and instructions.
The ability to hold conversations.
Short-term conversational memory.
A customizable name.
The ability to remember previous messages during a session.
Commands to reset conversations and exit.
Basic error handling.
A simple terminal interface.

By the end, you'll understand how the different parts work and how to extend the project into something more advanced.

You can follow this tutorial even if you've never built an AI application before.

Let's get started.

First, Understand What We're Building

Before installing anything, let's understand how our assistant will work.

An AI assistant generally has several components.

The interface

This is where you communicate with your assistant.

In our project, the interface will be the Termux terminal.

The programming language

We'll use Python to handle the application's logic.

Python will receive your messages, organize conversation history and communicate with the AI service.

The AI model

This is the component responsible for understanding questions and generating intelligent responses.

Instead of training a massive AI model ourselves, we'll connect our application to an existing model through an API.

Memory

We'll create a system that keeps previous messages during the conversation.

This allows the assistant to understand follow-up questions.

For example:

You: My name is Daniel.

Assistant: Nice to meet you, Daniel!

You: What is my name?

Assistant: Your name is Daniel.

Without conversation history, the assistant might not understand the second question.

Personality and instructions

We'll give our assistant specific instructions about how it should communicate, explain things and respond to users.

This is what makes it behave more like a personal assistant rather than a generic chatbot.

How everything connects

Our application will follow this process:

You enter a message.
Python receives the message.
Python adds it to the conversation history.
The application sends the conversation to the AI model.
The AI generates a response.
Python displays the response.
The conversation history is updated.

That's the basic architecture.

An important distinction: Termux and Python will run on your phone, but the AI model will run on a remote server. Therefore, this first version requires an internet connection.

Your phone is building and controlling the assistant, not performing the expensive AI inference itself.

What You Need Before Starting

You only need three main things.

A. An Android phone

Any reasonably modern Android device supported by the current Termux release should be suitable for this lightweight project.

You don't need a flagship phone.

Our application will not be running a massive language model locally.

B. Termux

Termux is an Android terminal emulator and Linux environment.

It allows you to run programming languages, install development packages and execute commands directly from your phone.

Download it from an official distribution linked by the Termux project.

Termux website: https://termux.dev/
Official GitHub repository: https://github.com/termux/termux-app

Avoid mixing Termux installations from different distribution sources. Its companion applications and plugins should come from the same source.

C. An AI API key

We'll use an AI API to connect our Python application to an existing language model.

An API allows one application to communicate with another application or service.

For example, instead of building a language model capable of understanding thousands of different questions, we send the question to an existing AI model and receive its response.

You can explore available models and API access through:

https://platform.openai.com/

You may need to create an account and configure API billing.

Important: API usage may cost money. Check the current pricing and your account's available access before making requests.

Also, an API key is a private credential. Never publish it in your code, GitHub repository or screenshots.

Prepare Termux for Development

Open Termux.

You should see a terminal where you can enter commands.

Don't worry if this looks unfamiliar. We'll explain what each command does.

First, update the installed package information.

Enter:

pkg update && pkg upgrade -y

This checks for available package updates and installs them.

Next, install Python:

pkg install python -y

Python is the programming language we'll use to build the assistant.

Check whether the installation was successful:

python --version

You should see a Python version displayed.

Now install Git:

pkg install git -y

Git is a version-control tool that helps developers manage changes to their projects.

We won't need Git for the basic assistant, but it's useful to have when developing larger applications.

Next, upgrade pip:

python -m pip install --upgrade pip

Pip is Python's package installer. It allows us to install additional libraries.

Our development environment is now ready.

Create Your AI Assistant Project

Let's create a dedicated folder for the project.

Enter:

mkdir smart-ai

This creates a directory called "smart-ai".

Move into it:

cd smart-ai

Your terminal is now working inside the project directory.

Let's create a Python virtual environment.

python -m venv venv

A virtual environment gives your project its own Python package installation space.

Activate it:

source venv/bin/activate

If activation succeeds, you should see something similar to "(venv)" at the beginning of your terminal prompt.

This helps keep project dependencies separate from other Python projects.

Now install the official OpenAI Python library:

python -m pip install openai

Wait for the installation to finish.

The library allows our Python application to communicate with the OpenAI API without manually constructing every HTTP request.

We are now ready to write the actual assistant.

Create Your AI API Key

Before writing the code, we need to configure access to the AI model.

Visit:

https://platform.openai.com/

Create a new secret API key.

Copy it somewhere temporarily safe.

Do not share it with anyone.

Return to Termux.

Enter:

export OPENAI_API_KEY="YOUR_API_KEY_HERE"

Replace "YOUR_API_KEY_HERE" with your actual API key.

For example, the command should follow this structure:

export OPENAI_API_KEY="sk-your-private-key"

The example above is illustrative, not a working key.

This command creates an environment variable that Python can access.

Why not simply put the API key inside the Python script?

Because separating credentials from application code reduces the chance of accidentally exposing them when sharing your project.

Remember that environment variables set this way generally apply to the current shell session. You'll need to configure the key again when starting a new session unless you set up a secure alternative.

Never upload your real key to GitHub.

Create the Main AI Assistant

Now comes the exciting part.

We're going to create the actual application.

Create a Python file:

nano assistant.py

Nano is a terminal text editor.

Paste the following complete code into the editor.

import os
from openai import OpenAI

Check API credentials

API_KEY = os.getenv("OPENAI_API_KEY")

if not API_KEY:
print("Error: OPENAI_API_KEY is not configured.")
raise SystemExit(1)

Initialize AI client

client = OpenAI(api_key=API_KEY)

Choose a model available to your account

MODEL = os.getenv("OPENAI_MODEL", "gpt-6-luna")

Assistant personality

SYSTEM_PROMPT = """
You are Nova, a smart and helpful personal AI assistant.

Your responsibilities:

Give accurate and useful answers.
Explain complicated topics in simple language.
Be friendly, respectful and conversational.
Ask for clarification when a question is unclear.
Avoid inventing information.
Admit when you do not know something.
Help users solve problems step by step.
Keep simple questions concise.
Provide detailed explanations when necessary.

You should behave like a thoughtful personal assistant,
not a machine that simply generates random text.
"""

Conversation history

conversation = [
{
"role": "system",
"content": SYSTEM_PROMPT
}
]

Display welcome screen

def welcome():

print("\n" + "=" * 45)
print("          NOVA AI ASSISTANT")
print("=" * 45)

print("Your personal AI assistant")
print("Powered by Python and an AI model")
print("\nCommands:")
print("/reset  - Start a new conversation")
print("/exit   - Close the assistant")

print("=" * 45)

Generate AI response

def generate_response(user_message):

conversation.append({
    "role": "user",
    "content": user_message
})

try:

    response = client.responses.create(
        model=MODEL,
        input=conversation
    )

    answer = response.output_text

    conversation.append({
        "role": "assistant",
        "content": answer
    })

    return answer

except Exception as error:

    conversation.pop()

    print("\nSomething went wrong:")
    print(error)

    return None

Main application

def main():

welcome()

while True:

    try:

        user_message = input("\nYou: ").strip()

        if not user_message:
            continue

        # Exit command
        if user_message.lower() == "/exit":

            print("\nNova: Goodbye! See you again.")
            break

        # Reset conversation
        if user_message.lower() == "/reset":

            conversation.clear()

            conversation.append({
                "role": "system",
                "content": SYSTEM_PROMPT
            })

            print("\nNova: Conversation reset!")
            continue

        # Generate answer
        print("\nNova is thinking...")

        answer = generate_response(user_message)

        if answer:
            print("\nNova:", answer)

    except KeyboardInterrupt:

        print("\n\nNova: Assistant stopped.")
        break

if name == "main":
main()

Save your file

If you're using Nano:

Press CTRL + O.
Press Enter to confirm the filename.
Press CTRL + X to exit.

Your Python application is now saved.

What did we just create?

Let's understand the important sections.

The API connection

client = OpenAI(api_key=API_KEY)

This initializes the API client.

It allows our application to communicate with the AI service.

The assistant's personality

SYSTEM_PROMPT = """
You are Nova, a smart and helpful personal AI assistant.
"""

This defines the assistant's behaviour.

You can change the instructions to create a different personality.

For example, you could build:

A programming tutor.
A personal study assistant.
A business assistant.
A writing assistant.
A research assistant.

The underlying AI model remains the same, but the instructions influence how it responds.

The conversation memory

conversation = [
{
"role": "system",
"content": SYSTEM_PROMPT
}
]

This creates the initial conversation history.

Every user message and assistant response is added to this list.

When we send the conversation to the model, it receives the available context.

This is how our assistant can understand follow-up questions.

However, this is short-term conversational memory, not permanent personal memory.

The conversation currently exists in the running Python process. Closing the application clears it.

The AI response

response = client.responses.create(
model=MODEL,
input=conversation
)

This is where the actual AI interaction happens.

We send the conversation to the Responses API.

The model processes the information and generates a response.

We then retrieve the generated text:

answer = response.output_text

Finally, the application displays it in Termux.

Run Your AI Assistant for the First Time

Now let's test everything.

Make sure you're still inside the "smart-ai" directory and your virtual environment is activated.

Run:

python assistant.py

If everything is configured correctly, you should see:

=============================================

NOVA AI ASSISTANT

Your personal AI assistant
Powered by Python and an AI model

Commands:
/reset - Start a new conversation

/exit - Close the assistant

You:

Congratulations!

You have created your first AI-powered assistant using only your Android phone.

Try asking:

Hello, who are you?

Then:

Explain artificial intelligence to me.

Now test its conversational memory:

My name is Daniel.

Follow that with:

What is my name?

The assistant should use the previous message to answer.

You can also test:

/reset

This clears the current conversation.

And:

/exit

This closes the application.

If the model identifier in the example is not available to your API account, check the provider's current model catalogue and set another supported model:

export OPENAI_MODEL="YOUR_AVAILABLE_MODEL"

Then run the application again.

How to Make Your Assistant Smarter

At this stage, you have a functioning AI assistant.

But what makes it smart?

The language model provides the intelligence. Our Python application controls how that intelligence is accessed and presented.

There are several ways to improve the assistant.

A. Give It a Better Personality

You can change the system instructions.

For example, replace the original personality with:

SYSTEM_PROMPT = """
You are Atlas, an intelligent learning assistant.

Your mission is to help people understand
technology, science, programming and everyday problems.

Always explain difficult concepts using simple examples.

When teaching programming:

Explain the concept.
Show a practical example.
Explain the code.
Identify common mistakes.
Give the learner a small exercise.

Never pretend to know something you do not know.

Prioritize understanding over simply giving answers.
"""

Now you have a learning-focused assistant.

B. Give It a Different Name

Find:

print("NOVA AI ASSISTANT")

Replace it with:

print("ATLAS AI ASSISTANT")

You can also change the name inside the system instructions.

C. Limit Conversation History

Our current application sends the entire conversation history with every request.

This is useful for understanding previous messages, but long conversations can become expensive and eventually exceed the model's context limit.

A simple improvement is to retain only the most recent messages.

For example, after adding an assistant response, you could use:

conversation[:] = [
conversation[0]
] + conversation[-20:]

This retains the system instructions and the latest 20 conversation messages.

For a production application, history management should be more careful so that user and assistant messages remain properly paired.

D. Make It Remember Conversations Between Sessions

Currently, closing Termux clears the conversation.

You can extend the project by saving conversation history to a local JSON file.

Python includes a built-in library for this:

import json

You could save the conversation using:

with open("memory.json", "w") as file:
json.dump(conversation, file, indent=4)

And load it when the application starts:

with open("memory.json", "r") as file:
conversation = json.load(file)

These are basic examples. A complete implementation should handle missing files, invalid JSON, reset behaviour and private data.

Also, understand the distinction between conversation history and long-term memory.

Conversation history stores what was said.

A more advanced memory system identifies useful information, stores it separately and retrieves relevant details when needed.

You could eventually give your assistant the ability to remember a user's preferred programming language, ongoing projects or learning goals.

However, users should have control over what is stored and the ability to delete it.

Troubleshooting Common Problems

If something doesn't work, don't immediately assume your phone is incompatible.

Here are some common problems.

Problem 1: Python command not found

You probably haven't installed Python correctly.

Run:

pkg install python

Then check:

python --version

Problem 2: No module named openai

The Python library may not have been installed in your active environment.

Activate your virtual environment:

source venv/bin/activate

Install the library:

python -m pip install openai

Problem 3: API key not found

Check whether your environment variable exists:

echo $OPENAI_API_KEY

If it is empty, configure your API key again:

export OPENAI_API_KEY="YOUR_API_KEY"

Problem 4: Authentication error

Check that:

Your API key is correct.
Your key has not been revoked.
Your API account has access.
Your account has the necessary billing configuration.

Never share your API key when requesting technical assistance.

Problem 5: Model not found

The model name might not be available to your account.

Check the provider's current model documentation and select an accessible model.

Problem 6: Connection errors

The application needs internet access.

Check your connection and try again.

Remember that Termux runs on Android, so Android may also restrict background processes or terminate long-running sessions.

For this beginner project, keep Termux open while using the assistant.

What Can You Build Next?

You now have a basic AI assistant.

But this is only the beginning.

The interesting part of software development is taking a working foundation and gradually introducing more useful features.

Here are some ideas.

Voice assistant

Add speech recognition so that users can speak instead of typing.

You could also add text-to-speech so the assistant can read responses aloud.

Web interface

Instead of communicating through the terminal, create a browser-based interface using Python and a lightweight web framework.

You could build a proper chat interface with message bubbles, a conversation sidebar and a responsive design.

Document assistant

Allow users to provide documents and ask questions about their contents.

For example, a student could provide study notes and ask the assistant to explain particular sections.

Programming assistant

Create a specialized assistant that explains programming errors, reviews code and helps beginners understand unfamiliar concepts.

Long-term memory

Develop a system that stores useful information between conversations.

You could use SQLite or another database to organize saved information.

Tool integration

Eventually, your assistant could perform useful actions rather than simply answering questions.

For example, it could calculate values, organize information or interact with approved external services.

This is an important step towards building an AI agent.

An AI chatbot responds to messages.

An AI agent can also use tools to complete tasks, subject to the permissions and rules you give it.

Can You Build an AI That Works Completely Offline?

Yes, but it is a different project.

The assistant we created uses a remotely hosted model.

If your internet connection disappears, it cannot generate new AI responses.

A completely offline assistant requires a language model that can run locally on your Android device.

Projects such as llama.cpp explore running language models on different hardware platforms.

However, local AI has additional requirements.

Your device needs sufficient:

Available storage.
RAM.
Processing power.
Compatible software.
Battery capacity.

Larger models generally require more resources.

A small quantized model may be practical on some devices, while a larger model might be extremely slow or fail to run because of memory limitations.

Termux also has Android-specific compatibility considerations.

Don't assume that every Linux AI installation tutorial will work on Android without modification.

For a beginner, starting with an API-powered assistant is usually easier.

Once you understand how the application works, you can experiment with local inference.

Final Thoughts: You Don't Need an Expensive Computer to Start Building AI

One of the biggest barriers to learning software development is the belief that you need expensive equipment before you can begin.

That's not always true.

An Android phone can provide a surprisingly useful development environment.

With Termux and Python, you can experiment with programming, create small applications and communicate with powerful AI models.

Of course, a phone has limitations. A larger screen and more powerful hardware make complex development easier.

But the most important thing is getting started.

You now understand how to:

Prepare a Python development environment.
Install programming libraries.
Connect an application to an AI API.
Create an assistant personality.
Manage conversational context.
Handle basic errors.
Extend an AI application with additional features.

Don't just copy the code and stop there.

Change the assistant's name. Experiment with its personality. Add new commands. Try saving conversations. Break something, investigate it and fix it.

The best way to become a developer is not simply to follow tutorials.

It is to understand what you're building and gradually become confident enough to create your own solutions.

If you managed to build Nova, you've already taken your first practical step.

Your phone is not just a device for consuming technology. It can also be a tool for creating it.

A little more inspiration

I believe technology becomes most valuable when it helps people solve real problems.

That is also an idea behind AfriWidget, a project focused on building practical digital tools for education, productivity and everyday needs.

If you're interested in seeing how relatively simple web technologies can become useful products, take a look at "AfriWidget" (https://afriwidget.com).

You don't always need to build the biggest technology to make a meaningful difference. Sometimes, solving one problem properly is a great place to start.

AI Can Write Your Code, But Can You Still Understand It? The Developer's Guide to Avoiding AI Dependency

Obed Avorlenu — Fri, 30 Oct 2026 00:57:09 +0000

Artificial intelligence has changed software development in ways that would have seemed almost impossible a few years ago.

Today, someone with little programming experience can describe an application, ask an AI assistant to generate the code, and receive something that looks like a functioning product within minutes.

A developer can generate an entire website without manually writing every component. Errors that previously required hours of searching can sometimes be explained in seconds. Documentation, debugging suggestions, test cases and even architectural recommendations are becoming easier to access.

This is genuinely exciting.

However, there is an important question that deserves more attention:

Are we becoming better developers, or are we simply becoming better at asking AI to write code?

These two things are not necessarily the same.

AI can increase how quickly we produce software, but speed alone does not guarantee understanding, reliability or technical growth.

A developer who can generate 5,000 lines of code but cannot explain how those lines work may have a functioning application without having the knowledge required to maintain it.

This article explores the difference between using AI as a development partner and becoming dependent on it. More importantly, it provides a practical approach to using AI without sacrificing the skills that make someone a capable developer.

The New Reality of Software Development

There was a time when learning to develop software required spending considerable time understanding programming languages, reading documentation, experimenting with code and troubleshooting errors.

If you wanted to build a calculator, you needed to understand how inputs worked, how calculations were performed and how results were displayed.

If something broke, you had to investigate.

You might spend an entire afternoon discovering that a small mistake in a conditional statement was responsible for an unexpected result.

Today, the experience is different.

You can explain your requirements to an AI assistant and ask it to build the calculator. It might generate the HTML, CSS and JavaScript, including the calculation logic and interface.

This changes the amount of manual work involved.

But it also changes the learning process.

Traditionally, developers often learned through the struggle of constructing something themselves. They encountered problems, investigated them and gradually developed an understanding of how different parts of a system interacted.

AI can remove some of that struggle.

That is not automatically bad. Developers should not have to waste hours solving problems that can be explained quickly.

The challenge is recognising which struggles are unnecessary and which ones contribute to your development as an engineer.

For example:

Spending three hours searching for a missing semicolon may not be particularly valuable.
Understanding why a calculation produces an incorrect result is valuable.
Asking AI to explain an unfamiliar API can accelerate learning.
Copying an API implementation without understanding its security implications can create serious problems.

The objective should not be to avoid AI.

It should be to use AI in a way that makes you more capable rather than less involved.

The Hidden Problem: Understanding Debt

Developers are familiar with technical debt.

Technical debt occurs when shortcuts or imperfect implementation decisions create additional work that must be addressed later.

There is another problem worth recognising: understanding debt.

Understanding debt develops when you accumulate code, tools, dependencies and architectural decisions that you cannot adequately explain.

Imagine asking AI to build a personal finance application.

The first version looks impressive. It has a dashboard, charts, transaction history, calculations and a responsive interface.

You test a few features, and everything appears to work.

Then you request additional functionality.

AI modifies several files. Something that previously worked stops functioning. You ask it to fix the problem, and it changes another section.

After several iterations, you have a growing application.

But you are no longer entirely certain:

Which function controls the transaction calculations?
Where is user data stored?
What happens when an input is empty?
How are incorrect values handled?
Which components depend on the modified function?
Whether the latest changes introduced another problem.

You have accumulated functionality faster than you have accumulated understanding.

This is understanding debt.

It can become particularly expensive when maintaining an application, investigating unexpected behaviour or introducing new features.

The problem is not that AI wrote the code. The problem is that the developer accepted implementation decisions without developing enough knowledge to evaluate them.

Why understanding debt matters

Software is rarely finished when the first version works.

Real applications evolve.

Users discover problems. Requirements change. Browsers introduce new behaviours. Dependencies receive updates. New features interact with existing ones.

A developer who understands the system can investigate these changes.

A developer who depends entirely on AI may have to ask the same tool to explain the system it previously generated.

That creates a cycle:

AI generates code.
The developer encounters a problem.
AI modifies the code.
Another problem appears.
The developer requests another modification.
The codebase becomes increasingly difficult to understand.

This is not an inevitable outcome of AI-assisted development, but it is a pattern worth avoiding.

AI Should Accelerate Your Thinking, Not Replace It

One of the most useful ways to approach AI-assisted development is to change the questions you ask.

Instead of treating AI as a machine that produces finished code, treat it as a technical assistant that helps you understand problems and evaluate possible solutions.

Consider two approaches.

Approach A: Asking AI to do everything

"Build me a complete student grading calculator with a modern interface."

AI generates the application.

You copy the code, open the browser and check whether it looks correct.

If something goes wrong, you ask AI to fix it.

Approach B: Using AI as a development partner

"I want to build a student grading calculator. First, help me identify the calculation requirements, possible input errors and edge cases. Explain the calculation logic before implementation."

You review the proposed approach.

Then you ask AI to implement the calculation function.

Next, you request test cases and examine the results.

Finally, you build or review the interface and verify that it displays the correct information.

The second approach involves more deliberate thinking.

It also produces something more valuable: an understanding of the application you are building.

You do not necessarily need to write every line yourself.

You need to understand enough to make responsible decisions about the code.

Five Skills Developers Should Never Outsource Completely

AI can assist with almost every stage of development. However, there are fundamental skills that developers should continue strengthening.

4.1 Problem-solving

Programming is not fundamentally about typing instructions into an editor.

It is about solving problems through logical and structured thinking.

Before writing code, you should be able to identify:

What problem are you solving?
Who experiences the problem?
What information is required?
What should happen when the information changes?
What should happen when the information is incorrect?
What would a successful outcome look like?

These questions apply whether you are building a simple calculator or a large software platform.

AI can suggest solutions, but you should remain responsible for understanding the problem.

A useful exercise is to describe your proposed solution in plain English before asking AI to implement it.

If you cannot explain what the application should do, you may not yet have enough clarity to evaluate the generated implementation.

4.2 Debugging

Debugging is one of the most important skills in software development.

An application can look perfectly functional while producing incorrect results behind the scenes.

For example, consider a grading calculator.

A student enters three scores:

Assignment: 80%
Class test: 70%
Examination: 60%

The application displays a final score.

But what if the assignment contributes 20% of the final grade, the class test contributes 30%, and the examination contributes 50%?

The correct calculation is:

(80 × 0.20) + (70 × 0.30) + (60 × 0.50)

The result is 67%.

If the application simply calculates the average of the three scores, it produces 70%.

Both results look reasonable. Only one follows the specified weighting system.

This illustrates why debugging is more than fixing syntax errors.

It requires understanding the intended behaviour and comparing it with what the application actually does.

AI can help identify the mistake, but you should learn to verify the underlying logic.

4.3 Reading code

Writing code is only part of development.

You also need to understand code written by other people, libraries, frameworks and AI systems.

Start by becoming comfortable reading:

Variables and functions.
Conditional statements.
Loops.
Event listeners.
Objects and arrays.
Asynchronous operations.
Error handling.
Data structures.

You do not have to understand every advanced programming concept immediately.

However, you should gradually become comfortable following the execution of a program.

When AI generates a function, ask it to explain the function in plain English.

Then try to explain it yourself without looking at the explanation.

This small exercise can make a considerable difference over time.

4.4 Testing and verification

A program working once does not mean it works correctly.

A calculator that produces the right answer for one input might fail when the user enters zero, a decimal, a negative number or an unusually large value.

Developers should learn to test more than the expected scenario.

For example, when building a percentage calculator, test:

AI can generate test cases, but the developer should verify that they represent the actual requirements.

Testing should be part of development, not something added only after users report problems.

4.5 Understanding security

Security is particularly important because AI-generated code can look convincing even when it contains vulnerabilities.

For example, an application might accept user input and insert it directly into HTML.

Without appropriate handling, this can create opportunities for cross-site scripting.

Other areas requiring attention include:

Authentication and authorization.
Password storage.
API key protection.
Input validation.
File uploads.
Database queries.
Cross-origin resource sharing.
Sensitive information exposure.

Never assume that generated code is secure simply because it runs successfully.

Security requires deliberate review, testing and an understanding of the environment in which the application operates.

A Practical Workflow for Building With AI

You do not need to abandon AI-generated code to become a better developer.

Instead, introduce a process that keeps you involved throughout development.

Here is a workflow that works well for small and medium-sized projects.

Step 1: Define the problem before requesting code

Start with the purpose of the application.

For example:

"I want to build a tool that helps students calculate their weighted academic scores."

Identify the users, expected inputs, calculation rules and desired output.

Do not begin with colours, animations or visual effects.

A beautiful interface cannot compensate for incorrect functionality.

Step 2: Ask for the implementation plan

Before generating code, ask AI to explain:

The proposed structure.
The functions required.
How information will move through the application.
Potential edge cases.
Possible technical limitations.

Review the plan.

If something is unclear, ask questions before implementation.

Step 3: Build in manageable sections

Avoid requesting an entire complex application in one enormous prompt.

Divide the project into meaningful components.

For example:

Calculation logic.
Input validation.
Results presentation.
User interface.
Error handling.
Testing.

This makes it easier to identify problems and understand individual components.

It also reduces the risk of unnecessary modifications affecting unrelated parts of the application.

Step 4: Request explanations, not just solutions

When AI generates an unfamiliar function, ask:

"Explain how this function works, what information it receives, what it returns and what could cause it to fail."

Then examine the explanation against the actual code.

Do not blindly trust explanations either. Generated explanations can also contain mistakes.

Step 5: Test independently

Create your own test cases.

Do not rely exclusively on AI saying that the implementation is correct.

For mathematical applications, manually calculate a few expected answers.

For web applications, test different browsers, screen sizes and input combinations.

For applications that store information, check what happens when users refresh the page or clear their saved data.

Step 6: Review every important change

When AI modifies an existing project, examine what changed.

Ask:

Which files were modified?
Why were they modified?
Did the changes affect existing functionality?
Were any dependencies introduced?
Were existing features removed?
What tests were performed?

This is particularly important when maintaining an application that already has real users.

Step 7: Keep learning while building

When you encounter something unfamiliar, take a few minutes to understand it.

You do not need to stop development and study an entire programming textbook.

Learn the specific concept required to understand the implementation.

Over time, these small learning opportunities accumulate into practical experience.

How to Write Better Prompts Without Becoming a Prompt Engineer

There is a lot of discussion about prompt engineering.

However, you do not need complicated prompts to get useful results.

Clear communication is often more important than prompt length.

Compare these examples.

Weak prompt:

"Make my website better."

The request is too broad. The AI must guess what better means.

More useful prompt:

"Review this website for accessibility, mobile usability and performance. Identify the five most important problems, explain why each matters and recommend improvements without changing the existing design."

The second prompt establishes:

The areas to investigate.
The expected output.
The boundaries of the task.
The need for explanations.

You can also use a few simple prompting habits.

Ask for assumptions.

If your requirements are incomplete, ask AI to identify what it is assuming.

Request alternatives.

Ask for two or three approaches when the technical decision has meaningful trade-offs.

Set boundaries.

Specify which files, features or components should remain unchanged.

Request verification.

Ask what tests would demonstrate that the implementation works correctly.

Challenge the result.

If something looks suspicious, ask AI to investigate it rather than immediately accepting its explanation.

Good prompting is not about writing the longest possible instruction.

It is about communicating the problem clearly enough to receive a useful response.

Why Small Projects Are Still Important in the Age of AI

One mistake aspiring developers make is believing that they must build something enormous to gain meaningful experience.

They want to create a social network, a complete e-commerce platform or an advanced artificial intelligence application.

There is nothing wrong with ambitious projects.

However, small projects provide excellent opportunities to understand fundamental programming concepts.

Consider building these five applications:

A percentage calculator

Learn mathematical operations, input validation and event handling.

A personal expense tracker

Learn arrays, objects, data storage and basic data manipulation.

A study timetable generator

Learn conditional logic, date handling and user interaction.

A simple quiz application

Learn state management, arrays, scoring and conditional rendering.

An academic performance tracker

Learn data persistence, calculations, historical records and visual representation.

These projects may appear simple, but they introduce concepts used in larger applications.

The important part is not how impressive the finished interface looks.

It is whether you understand how the application works.

Try building a small project with AI assistance, then challenge yourself to recreate one of its main features without asking AI to generate the implementation.

That exercise can reveal exactly which concepts you understand and which ones still need attention.

Learning to Build Software That Actually Helps People

There is another dimension of software development that deserves attention.

Developers sometimes become so focused on programming languages, frameworks, animations and technical achievements that they forget the reason software exists.

Software should solve problems.

A technically impressive application that nobody needs is not necessarily a successful product.

A simple application that saves someone time, prevents a mistake or makes a difficult process easier can be far more valuable.

Consider a student trying to understand their academic performance.

They might need to calculate weighted marks, understand their examination results, identify subjects requiring more attention or track their improvement over time.

A developer could build several tools to address these needs.

However, the real challenge is not simply implementing mathematical formulas.

It is understanding what students actually need.

A useful educational tool should:

Explain its calculation method.
Accept the correct inputs.
Validate incorrect entries.
Present understandable results.
Avoid misleading claims.
Help users make informed decisions.
Work properly on mobile devices.

This is where the distinction between building software and building useful software becomes important.

The same principle applies to financial tools, productivity applications, business software and health-related calculators.

Technical ability helps you create the product.

Understanding the user helps you create something worth using.

The Importance of Building for People With Different Levels of Technical Knowledge

Developers often build applications for people who do not understand how those applications work.

A developer understands what a percentage means in a particular calculation.

A student using the application might only want to know whether they have passed.

A developer understands how a form validates an input.

A first-time user might simply wonder why the application is refusing to accept their entry.

Good software accounts for these differences.

Consider a poorly designed calculator.

A user enters their scores, presses a button and receives a number without any explanation.

The calculation might be correct, but the user is left wondering what the result means.

A more thoughtful application explains the result, provides relevant context and makes the next step clear.

This does not mean every application needs artificial intelligence, complex dashboards or dozens of features.

Sometimes the best improvement is a simple explanation beside a result.

Accessibility, understandable language, mobile usability and transparent calculations are not optional decorations.

They are part of building software that respects its users.

How to Measure Whether You Are Actually Improving as a Developer

It is easy to confuse productivity with progress.

You might complete ten AI-assisted projects in a month without becoming significantly better at debugging or understanding application architecture.

Equally, you might spend several weeks improving one application and gain substantial technical knowledge.

A better approach is to measure both output and understanding.

Here are five questions worth asking yourself after completing a project.

Can I explain the important parts of the application?

You should be able to describe its main functions, how information moves through it and where its important decisions happen.

Can I identify where something is likely to break?

You do not need to predict every bug, but you should understand the application's limitations and potential failure points.

Can I modify an existing feature?

Try changing a calculation, adding a validation rule or adjusting an existing function without asking AI to rebuild the entire application.

Can I verify its results independently?

For calculations, understand the formula. For other applications, understand the expected behaviour and how to test it.

Can I explain why I chose a particular solution?

A capable developer should be able to discuss important implementation decisions, including their advantages and disadvantages.

You can turn these questions into a simple personal development routine.

After every project, spend 20–30 minutes reviewing what you learned.

Write down unfamiliar concepts, mistakes you encountered and things you would implement differently next time.

This creates a record of actual learning rather than simply counting completed projects.

A 30-Day Challenge: Become a More Independent AI-Assisted Developer

If you already use AI for programming, try this practical challenge.

The objective is not to stop using AI.

It is to become more confident working with and without it.

Week 1: Understand Before Generating

Choose a small application.

Before asking AI to build it, write down:

Its purpose.
Its required inputs.
Its expected outputs.
Its main calculation or business logic.
Potential errors.

Ask AI to review your thinking.

Compare your original plan with its suggestions.

Week 2: Learn to Read and Debug

Choose an existing project.

Identify five functions and understand what each one does.

Introduce a small, controlled error in a development copy and try to identify it.

Ask AI for hints rather than immediately requesting the complete solution.

Week 3: Test What You Build

Create a simple application with at least five meaningful test cases.

Include normal inputs, unusual values and invalid entries.

Compare the results with independently verified expected outcomes.

Pay particular attention to edge cases.

Week 4: Build Something You Can Explain

Build a small but complete project.

Use AI for assistance, but make sure you understand its important components.

At the end, try explaining the project to someone who has never seen the code.

Explain:

What problem it solves.
How it works.
What technologies it uses.
How its important calculations or operations are performed.
What limitations it has.
What you would improve next.

If you can explain these things clearly, you have achieved something more valuable than simply generating another application.

You have developed a better understanding of the software you created.

The Future Belongs to Developers Who Can Think, Not Just Generate

It would be a mistake to dismiss artificial intelligence as a temporary development trend.

AI-assisted development is already changing how software is created, maintained and learned.

Developers who understand how to use these tools effectively can reduce repetitive work, explore unfamiliar technologies and experiment with ideas that might previously have required considerably more time.

But the ability to generate code is not the same as the ability to engineer reliable software.

As code generation becomes easier, other abilities become increasingly important:

Understanding requirements.
Evaluating technical decisions.
Recognising incorrect implementations.
Designing reliable systems.
Testing complex behaviour.
Protecting user information.
Understanding real-world problems.

These are the skills that help turn generated code into dependable products.

You should not feel guilty about using AI to write code.

You should also not feel that doing everything manually makes you a better developer.

The goal is to become someone who can use the available tools intelligently, understand their limitations and take responsibility for the software being produced.

AI should increase what you can accomplish without reducing your ability to think independently.

That is a much more valuable definition of productivity.

Final Thoughts

The most important question is not whether AI can build an application.

It clearly can assist with that process.

The more important question is whether the person directing the process understands what is being built, why it is being built and whether it actually works.

Technology will continue changing. Programming languages will evolve, development environments will improve and AI assistants will become increasingly capable.

But the fundamental purpose of software development will remain the same: identifying problems and creating reliable solutions.

Learn the fundamentals. Build small projects. Experiment. Make mistakes. Read code. Test your assumptions. Use AI when it helps, but never surrender your responsibility to understand what you create.

Do not measure your growth only by how much code you can generate. Measure it by how much you can understand, improve and build independently.

A small resource for developers and learners

One of the reasons I believe useful software matters is that people should not have to struggle with calculations and everyday academic or productivity tasks when a well-designed tool can make them easier.

That idea is part of what drives AfriWidget, a collection of practical tools covering education, productivity, finance and other everyday needs.

If you are interested in exploring practical calculators and tools, you can visit "AfriWidget" (https://afriwidget.com).

The larger idea is simple: technology should make difficult things easier to understand and accomplish.

What Building 120+ Free Web Tools Taught Me About Product Development, SEO, and User Experience

Obed Avorlenu — Wed, 30 Sep 2026 13:10:38 +0000

When most developers start a new project, they aim to build one product.

I took a different path.

Over the past few weeks, I built AfriWidget, a growing collection of free browser-based tools designed to help students, professionals, job seekers, entrepreneurs, and everyday internet users solve practical problems quickly.

Today, AfriWidget contains more than 120 tools and pages across education, finance, health, productivity, and business.

The surprising part isn't how many tools were built.

The surprising part is how much I learned from building them.

Creating dozens of tools forced me to think differently about product development, user behavior, search intent, retention, performance, and what actually creates value online.

This article shares some of the most important lessons from that journey.

The Internet Still Rewards Useful Tools

Many discussions in tech today revolve around AI, startups, SaaS, and automation.

While those topics are important, there's another opportunity that often gets overlooked:

Solving small, everyday problems.

People search the internet for highly specific needs:

How do I calculate my WASSCE aggregate?
Am I eligible for nursing training admission?
What GPA do I need to graduate?
How much will my startup cost?
How can I create a robots.txt file?
How do I calculate my debt repayment timeline?

These are not glamorous problems.

They won't make headlines on technology blogs.

But they matter to the people searching for answers.

One thing I quickly discovered while building AfriWidget is that usefulness beats complexity surprisingly often.

A tool that saves someone five minutes today may provide more value than a feature-packed application they never fully use.

Why AfriWidget Focuses on Practical Solutions

When planning the platform, I deliberately avoided creating tools just because they sounded impressive.

Instead, I focused on questions real people were already asking.

For example, educational calculators became one of the strongest categories on the platform.

Students frequently need help calculating:

WASSCE aggregates
BECE aggregates
JAMB UTME scores
GPA and CGPA
APS scores
Admission eligibility

Many existing solutions were either outdated, confusing, filled with intrusive advertisements, or required unnecessary registration.

The goal became simple:

Create tools that solve the problem immediately.

No account creation.

No downloads.

No complicated onboarding.

Open the page, enter the information, and get the result.

That philosophy now guides every new feature added to AfriWidget.

Building More Than 120 Tools Revealed a Pattern

One lesson became clear very quickly.

Users don't care how difficult something was to build.

They care whether it solves their problem.

Developers sometimes spend weeks implementing sophisticated technology while overlooking the actual user experience.

Meanwhile, a simple calculator built in a few hours can become one of the most useful parts of a platform.

This changed how I evaluate ideas.

Instead of asking:

«"How technically impressive is this?"»

I started asking:

«"How much friction does this remove from someone's life?"»

That question leads to better products.

Why I Chose Simplicity Over Complexity

Many modern websites rely heavily on large frameworks and extensive client-side processing.

There's nothing wrong with that approach when it's necessary.

However, most utility tools don't need massive JavaScript bundles or complex infrastructure.

For AfriWidget, performance became a priority from the beginning.

The platform focuses on:

Fast page loads
Mobile responsiveness
Simple navigation
Browser-based processing
Minimal waiting time

This approach creates several benefits.

Faster User Experience

People can access tools immediately without waiting for heavy applications to load.

Better Accessibility

Users with slower internet connections can still use the platform comfortably.

Easier Maintenance

Simple systems are generally easier to improve and troubleshoot.

Stronger SEO Foundations

Search engines can easily understand content when pages are structured clearly and load efficiently.

Sometimes the best optimization isn't adding more technology.

It's removing unnecessary complexity.

The Most Important SEO Lesson I Learned

Before building AfriWidget, I thought SEO success primarily depended on keywords.

Keywords matter.

But they are only one part of the picture.

The bigger lesson was understanding search intent.

For example:

A person searching for "WASSCE aggregate calculator" doesn't want a lengthy article explaining education systems.

They want a calculator.

Immediately.

The content should support the tool, not distract from it.

On the other hand, someone searching for admission requirements may benefit from educational content, explanations, examples, and frequently asked questions.

Understanding what the user actually wants is often more important than chasing high-volume keywords.

The pages that performed best were usually the ones that solved a specific problem clearly and efficiently.

Why Retention Matters for Tool Websites

Tool websites face a unique challenge.

Most users arrive, complete a task, and leave.

That behavior isn't necessarily bad.

The tool did its job.

However, I wanted AfriWidget to become more than a collection of one-time-use pages.

That led to the development of several retention-focused features.

Save Favorite Tools

Users can save tools they use regularly.

This makes it easier to return to frequently used resources.

Continue Where You Left Off

Progress is automatically stored locally.

When users revisit a tool, they can continue without starting over.

Saved Inputs

For calculators and educational tools, repeating the same information can be frustrating.

Allowing data to persist improves convenience significantly.

These features don't generate flashy marketing headlines.

But they improve real user experience.

And user experience often determines whether someone returns.

What I Learned About AI Features

Like many developers, I experimented extensively with AI-powered functionality.

Some features provided genuine value.

Others sounded impressive but didn't significantly improve outcomes.

This led to an important realization:

Users care more about results than technology.

Most people don't visit a tool because it uses AI.

They visit because they need help solving a problem.

If AI improves the experience, great.

If it doesn't, users won't care that it exists.

This perspective helped prioritize features based on usefulness rather than trends.

The Five Core Areas of AfriWidget

Today, AfriWidget focuses on five major categories.

Education

Educational tools remain one of the platform's strongest areas.

Examples include:

WASSCE calculators
BECE calculators
JAMB calculators
GPA calculators
APS calculators
Nursing admission tools
University eligibility checkers

These tools help students make informed academic decisions quickly.

Finance

Financial planning can be overwhelming.

The finance section includes tools that help users understand:

Debt repayment
Budget planning
Financial calculations
Savings projections

Business

Business tools focus on helping entrepreneurs and freelancers estimate costs, evaluate ideas, and plan projects.

Productivity

Productivity tools aim to eliminate repetitive tasks and improve efficiency.

Health

Health-related calculators provide quick insights that users can access directly within their browsers.

Together, these categories create a platform designed around practical usefulness rather than entertainment.

Building in Public Accelerates Learning

One unexpected benefit of building AfriWidget was how quickly users provided feedback.

People reported issues.

Suggested improvements.

Requested features.

Shared frustrations.

Every interaction revealed something new.

Building publicly creates a continuous feedback loop.

Instead of guessing what users want, developers can observe actual behavior and adapt accordingly.

Many of the platform's improvements came directly from watching how people interacted with existing tools.

The Future of Utility Websites

I believe utility websites still have enormous potential.

Despite advances in AI and software development, people continue searching for straightforward solutions.

The demand for:

Calculators
Checkers
Converters
Planning tools
Educational resources

is not disappearing.

If anything, users increasingly appreciate products that are fast, focused, and easy to use.

The challenge isn't building more features.

The challenge is building the right features.

Final Thoughts

Building AfriWidget taught me that successful products don't always start with groundbreaking innovation.

Sometimes they start with a simple question:

What problem can I solve today?

By focusing on usefulness, speed, accessibility, and user experience, a collection of small tools can become something much larger.

More than 120 tools later, the biggest lesson remains unchanged:

Technology is most valuable when it makes life easier.

Whether you're building a startup, launching a side project, or creating your first web application, remember that solving real problems consistently is often more important than building the most complicated solution.

That's the philosophy behind AfriWidget, and it's the principle I'll continue following as the platform grows.

If you're building products yourself, I'd love to hear what lessons you've learned from creating tools that people actually use.

Building Web Tools That Actually Serve Emerging Markets

Obed Avorlenu — Sun, 09 Aug 2026 18:35:00 +0000

There's a fundamental question I keep coming back to when building for the web: Who are we actually building for?

If you're reading this on a 5G connection with a flagship phone, it's easy to forget that most of the world doesn't have that luxury. According to the GSMA, nearly half the global population still isn't using mobile internet, and for those who are, connections are often slow, data is expensive, and devices are older.

I recently came across AfriWidget — a platform building practical calculators for health, finance, and education — and it got me thinking about what it actually takes to build tools that serve users in emerging markets. Not as a charity case, but as a deliberate design choice.

Here's what I learned.

The Problem: One-Size-Fits-None

Most web tools are built for users in North America, Europe, or wealthy parts of Asia. The assumptions baked into the code are:

· Fast, reliable internet
· Modern smartphones or laptops
· Disposable income for premium features
· Familiarity with Western academic and financial systems

But what if your users are in Lagos, Nairobi, or Accra? What if they're preparing for WASSCE or BECE exams instead of the SAT? What if they're managing finances in a country with high inflation and currency volatility?

AfriWidget was built precisely for this gap. The platform recognizes that millions of people worldwide lack access to personalized financial advisors, nutrition coaches, and academic counselors that wealthier demographics take for granted.

So how do you build for that reality?

Lesson 1: Compute Locally, Not in the Cloud

The most important architectural decision you can make for emerging markets is pushing computation to the client.

AfriWidget's core principle is simple: most calculations stay in your browser. The BMI calculator, the BMR calculator, the GPA calculator — all of them run locally using JavaScript.

Why this matters:

Zero latency. Results appear instantly, no spinner, no "loading..." state.

Works offline. Once the page loads, the calculator functions without a network connection.

Saves data. Every round-trip to a server costs your user money. In many African countries, mobile data is expensive relative to income.

Reduces server costs. You're not paying for compute time on every calculation.

The technical implementation isn't complicated. It's just vanilla JavaScript doing math. But the impact on user experience is massive.

Lesson 2: Use Evidence-Based Formulas, Not Vibes

When you're building tools that people rely on for real decisions — health, finance, academics — you have a responsibility to get the math right.

AfriWidget's calculators use internationally recognised, clinically and academically validated formulas:

· BMI: Follows World Health Organisation (WHO) guidelines
· BMR: Uses the Mifflin-St Jeor equation, considered the gold standard
· GPA: Reflects standard 4.0-scale grading conventions

This isn't just about accuracy. It's about trust. When a user in a region with limited access to healthcare uses your BMI calculator, they need to know the result is reliable.

For developers: Always cite your sources. Be transparent about limitations. And if you're using AI-generated insights, make sure the underlying model is grounded in real data.

Lesson 3: Design for Slow Networks and Old Devices

AfriWidget is built for users across Africa and the developing world. The tools work on low-bandwidth connections and older devices.

What does that mean in practice?

· No heavy frameworks. AfriWidget uses static HTML with minimal JavaScript payloads.
· No app store required. It's a web app, accessible from any browser.
· No premium tier. No paywalls. Just knowledge, freely accessible.

This is a reminder that "modern" doesn't always mean "better." If your React bundle is 2MB, you've already lost a significant portion of potential users in emerging markets.

Lesson 4: AI Is Possible — With a Secure Proxy

One of the more interesting aspects of AfriWidget is how they handle AI-powered insights. Finance and Education tools may send limited calculation context through a secure server-side Groq proxy for an AI explanation.

The architecture looks like this:

Browser calculates result → Sends only context (e.g., "principal: 1000, rate: 5%")
→ Proxy attaches API key → Calls Groq → Returns insight

Key design decisions:

· The proxy keeps the Groq key out of the browser
· No personal identifiers are sent
· No database of calculator submissions is maintained

This is the secure proxy pattern I covered in a previous article. It's a solid way to add AI features without compromising user privacy or exposing API keys.

Lesson 5: Privacy Isn't Optional — It's a Feature

AfriWidget has no user accounts and does not use calculator inputs for advertising targeting.

Think about what that means:

· No password hashes to steal
· No personal data to expose in a breach
· No GDPR compliance headaches for user data
· No "forgot password" flows to build and maintain

Every piece of data you don't collect is a vulnerability you don't have to defend.

For a platform serving users in regions where digital privacy concerns are growing, this is a massive trust signal. Users can calculate their BMI, plan their savings, or check their GPA without worrying about who's watching.

What This Means for Developers

If you're building web tools for a global audience, here are the takeaways:

Question your assumptions. Who are you actually building for? What's their internet speed? What device are they using?
Push computation to the client. Modern browsers are incredibly capable. Use them.
Validate your formulas. If you're building a health or finance tool, use established standards. Cite your sources.
Keep it lightweight. Every kilobyte matters. Every network request costs your user money.
Design for privacy from day one. Don't collect what you don't need. Don't store what you don't have to.
If you use AI, use a proxy. Keep API keys secure. Send only the minimum context needed.

Privacy in Plain Sight: What 3 Calculator Platforms Tell Us About Data Collection

Obed Avorlenu — Sun, 09 Aug 2026 18:29:47 +0000

Online calculators are everywhere. Need to check your BMI? Calculate a mortgage payment? Figure out your GPA? There's a free tool for that.

But here's the uncomfortable question: What happens to the numbers you type in?

Most of us assume these tools are private. We're just doing math, right? But behind the scenes, the data you enter—your weight, your salary, your savings goals—can be valuable. And different platforms handle that data very differently.

I spent some time digging into the privacy practices of three popular calculator platforms: Calculator.net, OmniCalculator, and AfriWidget. Here's what I found, and what it means for developers building similar tools.

The Players

Calculator.net (launched 2007, 200+ calculators) — claims to take privacy seriously but offers vague policy language. OmniCalculator (launched ~2014, 1000+ calculators) — explicitly states they don't store or sell calculator inputs. AfriWidget (launched 2024, 84 tools) — markets itself as privacy-first with client-side computation by default.

All three claim to respect user privacy. But the details tell a different story.

Calculator.net: The Established Incumbent

Calculator.net has been around since 2007. It's the granddaddy of online calculators, with over 200 tools covering finance, health, math, and more.

Privacy Practices:

· Collects "Log Data" including browser information and IP addresses
· Uses cookies and weblogs to "customize services and enhance customer satisfaction"
· For registered users, they store registration information and saved calculations
· Registered users can delete their data, but it requires a request and two business days to process

The Bottom Line: Calculator.net collects standard analytics data and offers registration for users who want to save calculations. The privacy policy is vague about what "Log Data" actually includes and how long it's retained.

Third-Party Tracking: An analysis found 114 third-party tracking requests on calculator.net, along with 5 cookies. That's a lot of potential data flowing to advertisers and analytics providers.

OmniCalculator: The Polish Upstart

OmniCalculator, founded in Poland, has grown rapidly with over 1,000 calculators across dozens of categories.

Privacy Practices:

· Explicitly states: "We neither store nor sell the data you enter into our calculators"
· Collects personal information only when users voluntarily provide it (newsletter signups, job applications, contact forms)
· No account registration required to use calculators
· Offers standard GDPR rights: access, rectification, erasure, restriction, portability

The Bottom Line: OmniCalculator has a clean, transparent privacy policy that clearly separates calculator inputs from personal data. They don't store what you calculate.

Third-Party Tracking: The site uses cookies and has some third-party tracking (analytics.tiktok.com, Google Analytics), but their policy is more explicit than Calculator.net's.

AfriWidget: The Privacy-First Newcomer

AfriWidget is a newer entrant focused on serving users in Africa and developing regions, with 84 tools across health, finance, and education.

Privacy Practices:

· "Most calculations stay in your browser" — client-side computation by default
· No user accounts — no registration, no stored data
· No calculator-submission database — they don't keep what you calculate
· Calculator inputs are not used for advertising targeting
· Finance and Education tools may send limited calculation context through a secure server-side Groq proxy for AI insights
· The proxy keeps the API key out of the browser and does not receive personal identifiers

The Bottom Line: AfriWidget takes a more aggressive privacy stance. They don't collect anything by default. Even their AI features are designed with privacy in mind—only calculation context (numbers, not names) is sent to the proxy.

Third-Party Tracking: The site is supported by "non-intrusive advertising", but calculator inputs are explicitly not used for ad targeting.

The Technical Comparison

Let's look under the hood at how each platform handles your data.

Architecture Approaches

Calculator.net:

· Mixed approach
· Some calculations run client-side, but they also offer user accounts and saved calculations (requires server-side storage)
· Privacy policy suggests they collect usage data via logs and cookies

OmniCalculator:

· Mostly client-side
· Claims calculations happen in the browser
· Collects analytics data and uses cookies
· Policy is clear that calculator inputs aren't stored (but IP addresses and device info are collected)

AfriWidget:

· Client-first with a secure proxy for AI
· Default is local computation
· When AI insights are requested, only the minimal calculation context goes to the server
· No names, no personal identifiers
· No database of submissions is maintained

The Secure Proxy Pattern

AfriWidget's approach to AI is worth examining. Instead of calling Groq (or any LLM provider) directly from the browser—which would expose the API key—they use a server-side proxy.

The flow looks like this:

Browser calculates result → Sends only context (e.g., "principal: 1000, rate: 5%")
→ Proxy attaches API key → Calls Groq → Returns insight → Nothing is logged or stored

This is the same pattern I covered in my previous article on building secure AI proxies. It's a solid architectural choice that balances AI features with privacy.

What This Means for Developers

If you're building a calculator or any tool that handles user data, here are the key takeaways:

Be Explicit About What You Collect

Calculator.net's privacy policy is vague. OmniCalculator's is clearer. AfriWidget's is the most explicit. Users deserve to know exactly what happens to their data.

Client-Side Computation Is Your Friend

The more you can run in the browser, the less data you have to collect, store, or protect. AfriWidget's "most calculations stay in your browser" approach is the gold standard.

If You Need AI, Use a Proxy

Don't expose API keys in client-side code. Use a server-side proxy that receives only the minimum necessary context. AfriWidget's Groq proxy is a good example of this pattern.

No Accounts = No Data to Leak

User accounts create data storage requirements and security risks. AfriWidget has no user accounts, which means no password hashes to steal, no personal data to expose, and no GDPR compliance headaches for user data.

Third-Party Tracking Adds Up

Calculator.net's 114 third-party tracking requests is a lot. Every tracking pixel, analytics script, and ad network is another potential vector for data leakage. Be intentional about what you include.

The Privacy Spectrum

These three platforms represent different points on the privacy spectrum. Here's how they compare:

Client-side computation:

· Calculator.net: Partial
· OmniCalculator: Mostly
· AfriWidget: Default

User accounts:

· Calculator.net: Yes
· OmniCalculator: No
· AfriWidget: No

Stores calculator inputs:

· Calculator.net: Yes (for registered users)
· OmniCalculator: No
· AfriWidget: No

AI features:

· Calculator.net: No
· OmniCalculator: No
· AfriWidget: Yes (via secure proxy)

Third-party tracking:

· Calculator.net: Heavy (114 requests)
· OmniCalculator: Moderate
· AfriWidget: Minimal

· Calculator.net: Vague
· OmniCalculator: Clear
· AfriWidget: Very clear

Final Thoughts

Privacy isn't binary. It's a spectrum of choices about what data you collect, how you store it, and what you do with it.

Calculator.net, as the oldest platform, has accumulated the most data-collection baggage. OmniCalculator takes a cleaner approach but still collects analytics. AfriWidget, as the newest entrant, has designed privacy in from day one.

For developers, the lesson is clear: Privacy is a design choice, not an afterthought. The decisions you make about architecture—client-side vs. server-side, accounts vs. no accounts, analytics vs. no analytics—have real implications for your users.

And if you're building a tool that handles sensitive data (health metrics, financial information, academic records), the privacy-first approach isn't just nice to have. It's the only responsible choice.

Topic selected: Option A – Purely Technical: "Building a Secure AI Proxy for Browser Tools

Obed Avorlenu — Sun, 09 Aug 2026 18:20:32 +0000

This is the strongest choice. It teaches a tangible, highly demanded skill (API key security) with actual code, making the backlink to AfriWidget feel like a natural, neutral citation rather than a sales pitch.

Here is the article, rewritten to be strictly technical, objective, and genuinely useful for dev.to readers.

Stop Exposing Your AI API Keys: Build a Secure Proxy with Cloudflare Workers

We have all seen it. You open the browser's DevTools on a "cutting-edge" AI startup's landing page, check the Network tab, and find a direct POST request to api.openai.com containing a plaintext API key in the headers.

It is one of the most common—and dangerous—mistakes in modern web development. Exposing your LLM API key client-side is an open invitation for abuse, leading to stolen credits, hefty bills, and potential account suspension.

The standard solution is the Backend-for-Frontend (BFF) proxy pattern. But how do you implement it practically, cheaply, and securely without spinning up a heavy Express server?

In this guide, I will walk you through building a lightweight, serverless AI proxy using Cloudflare Workers to securely call Groq (or OpenAI) APIs from your browser-based calculators and tools.

The Architecture: How It Works

Instead of your frontend talking directly to the AI provider, we introduce a stateless middleware layer:

Browser App → Cloudflare Worker (Proxy) → Groq/OpenAI API
     ↑                ↑
  (No API Key)   (API Key stored securely in Worker env vars)

The Worker's responsibilities:

Receive the sanitized calculation context from the frontend (numbers, not PII).
Attach the secret API key via environment variables.
Forward the request to the LLM provider.
Stream or return the generated insight back to the client.

Step 1: Scaffolding the Cloudflare Worker

We will use the new create-cloudflare CLI. Make sure you have Node.js installed.

npm create cloudflare@latest ai-proxy

Choose "Hello World" worker and TypeScript. Once inside the directory, install the Groq SDK:

npm install groq-sdk

Step 2: Securing the API Key

Never hardcode keys. Cloudflare Workers expose environment variables securely.

Update your wrangler.toml:

name = "ai-proxy"
main = "src/index.ts"
compatibility_date = "2024-12-18"

[vars]
GROQ_API_KEY = "your-secret-key-here" # Replace, but prefer using wrangler secret for production

For production, set it as an actual secret to hide it from the dashboard:

npx wrangler secret put GROQ_API_KEY

Step 3: Writing the Worker Logic

We need an endpoint that accepts POST requests, validates the input, calls Groq, and returns the result.

Here is the full src/index.ts implementation:

import { Groq } from "groq-sdk";

export interface Env {
  GROQ_API_KEY: string;
}

export default {
  async fetch(request: Request, env: Env): Promise<Response> {
    // 1. CORS Preflight (handle OPTIONS)
    if (request.method === "OPTIONS") {
      return new Response(null, {
        headers: {
          "Access-Control-Allow-Origin": "*",
          "Access-Control-Allow-Methods": "POST, OPTIONS",
          "Access-Control-Allow-Headers": "Content-Type",
        },
      });
    }

    // 2. Only allow POST requests
    if (request.method !== "POST") {
      return new Response(JSON.stringify({ error: "Method not allowed" }), {
        status: 405,
        headers: { "Content-Type": "application/json" },
      });
    }

    try {
      // 3. Parse and sanitize input
      const body = await request.json();
      const { context, promptType } = body;

      if (!context || typeof context !== "string") {
        return new Response(
          JSON.stringify({ error: "Missing 'context' field" }),
          { status: 400, headers: { "Content-Type": "application/json" } }
        );
      }

      // 4. Initialize Groq with the secret key from environment
      const groq = new Groq({
        apiKey: env.GROQ_API_KEY,
      });

      // 5. Construct a system prompt based on the type (e.g., finance, health)
      let systemPrompt = "You are a helpful financial assistant.";
      if (promptType === "health") {
        systemPrompt =
          "You are a medical disclaimer assistant. Provide general wellness info only, no diagnoses.";
      }

      // 6. Call the LLM
      const chatCompletion = await groq.chat.completions.create({
        messages: [
          { role: "system", content: systemPrompt },
          {
            role: "user",
            content: `Explain what these calculations mean in plain English: ${context}`,
          },
        ],
        model: "llama3-8b-8192", // Fast and cheap Groq model
        temperature: 0.5,
        max_tokens: 200,
      });

      const reply = chatCompletion.choices[0]?.message?.content || "No response generated.";

      // 7. Return the response to the browser with CORS headers
      return new Response(
        JSON.stringify({ success: true, data: reply }),
        {
          headers: {
            "Content-Type": "application/json",
            "Access-Control-Allow-Origin": "*",
          },
        }
      );
    } catch (error) {
      console.error("Proxy error:", error);
      return new Response(
        JSON.stringify({ error: "Internal server error" }),
        { status: 500, headers: { "Content-Type": "application/json" } }
      );
    }
  },
};

Step 4: Calling the Proxy from Your Frontend

Now, back in your browser-based calculator (Vanilla JS, React, or Vue), you simply call your deployed Worker URL.

Here is a minimal frontend fetch example:

async function getAIInsight(calculationResult, type) {
  try {
    const response = await fetch("https://your-worker-name.workers.dev/api/ai", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        context: `Principal: $1000, Rate: 5%, Years: 10. Future Value: $1628.89.`,
        promptType: type, // e.g., "finance"
      }),
    });

    if (!response.ok) throw new Error("Network error");
    const json = await response.json();
    return json.data; // The AI explanation
  } catch (error) {
    console.error("Failed to fetch AI insight:", error);
    return "Insight unavailable at this moment.";
  }
}

Crucially: Notice that the frontend never knows the API key. Even if an attacker inspects this network request, they only see a call to your Worker, not to Groq/OpenAI.

Trade-offs and Considerations

While this pattern is highly effective, it is not magic. Be aware of the following:

Factor Consideration
Latency Adding a proxy introduces an extra network hop. With Cloudflare's global network, this is usually < 50ms, but it's worth measuring.
Cost Cloudflare Workers have a generous free tier (100k requests/day). However, you are still paying for the LLM tokens. Implement strict max_tokens limits.
Rate Limiting Without accounts, how do you stop abuse? You can implement a simple IP-based rate limiter using Workers KV to prevent a single IP from draining your credits.
CORS If your frontend is on a specific domain, restrict Access-Control-Allow-Origin to that domain instead of using * in production.

A Real-World Implementation

This exact architecture is currently running in production on AfriWidget.com. They use a Groq proxy to power AI explanations for their compound interest and GPA calculators.

The frontend sends only the numerical context—e.g., { principal: 5000, rate: 7, years: 20 }—to the proxy. The Worker appends the system prompt, calls Groq's Llama 3 model, and streams back a plain-English explanation of the financial projection.

Notably, they do not store user inputs or names anywhere in the proxy logs, ensuring that even if the Worker logs were compromised, no Personally Identifiable Information (PII) would leak.

Final Thoughts

Exposing API keys in client-side code is a shortcut that eventually becomes a financial liability. By spending 15 minutes setting up a Cloudflare Worker, you get:

Security: Keys stay out of source control and browser memory.
Flexibility: You can swap LLM providers (Groq, OpenAI, Anthropic) without redeploying your frontend.
Observability: You can add logging and error handling in one centralized place.

The proxy pattern isn't just for AI APIs. Apply it to any third-party service that requires a secret. Your future self—and your bank account—will thank you.

What patterns do you use to secure external API calls? Let me know in the comments, or share your Worker implementation!

15 Free Online Tools Every Student, Freelancer, and Small Business Owner Should Know

Obed Avorlenu — Sun, 09 Aug 2026 18:09:38 +0000

The internet is full of complicated software, expensive subscriptions, and tools that require you to create an account before you can even use them. But many everyday tasks don't need complicated software—you simply need the right tool for the job.

Whether you're a student calculating your grades, a freelancer estimating your rates, a business owner working with numbers, or someone trying to manage personal finances, having a collection of simple online tools can save significant time.

That's why I put together this list of useful free tools available through AfriWidget, a growing collection of calculators and AI-powered tools designed for everyday problems.

GPA and CGPA Calculators

Students often have to calculate their GPA or CGPA manually, which can become confusing when different courses have different credit weights.

A GPA/CGPA calculator allows you to enter your courses, grades, and credit hours and quickly estimate your result.

This is particularly useful when you're planning your semester or trying to understand how your current grades affect your overall academic performance.

👉 Try AfriWidget's academic tools to make academic calculations easier.

Savings Goal Calculator

Saving money is easier when you have a specific target.

Instead of simply saying "I want to save more," determine how much you need to save each week or month to reach a specific goal.

For example, if you want to save $1,200 within one year, a savings calculator can help you determine the approximate amount you need to put aside regularly.

Emergency Fund Calculator

An emergency fund can help protect you from unexpected expenses such as repairs, temporary loss of income, or urgent bills.

A simple emergency-fund calculator can help you estimate how much money you should aim to keep available based on your monthly expenses and desired number of months of coverage.

Investment Return Calculator

Investing involves risk, but understanding potential returns can help you make more informed decisions.

An investment calculator allows you to experiment with variables such as:

Initial investment

Monthly contributions

Expected annual return

Investment period

Remember that calculator results are estimates—not guarantees of future investment performance.

Freelance Rate Calculator

One of the biggest challenges for new freelancers is deciding what to charge.

Instead of choosing a random hourly rate, consider your target income, working hours, expenses, taxes, and the amount of time you actually expect to spend working.

A freelance rate calculator can give you a starting point for determining a reasonable rate.

AI Cover Letter Generator

Writing a different cover letter for every job application can take a lot of time.

An AI-powered cover letter generator can help you create a first draft based on your experience and the position you're applying for.

You should always review and personalize the generated letter before submitting it.

AI Freelance Bio Generator

Your freelance bio is often one of the first things a potential client sees.

A good bio should quickly communicate:

What you do

Who you help

Your skills

The value you provide

An AI-powered bio generator can help you create a professional starting point that you can then customize.

Gig Description Generator

If you're selling services on freelance marketplaces, writing descriptions for every service can become repetitive.

An AI gig-description tool can help you structure your offer and explain your service more clearly.

The important part is to make sure the final description accurately represents what you actually provide.

Side Hustle Finder

Not every side hustle works for everyone.

Your available time, skills, equipment, location, and starting budget all matter.

A side-hustle finder can help you explore ideas based on your circumstances instead of randomly choosing something from a list of popular trends.

Currency Converter

People increasingly work, shop, study, and communicate internationally.

A currency converter can be useful when comparing prices, freelance payments, international salaries, or expenses in different currencies.

For financial decisions, however, remember that actual bank, card, or payment-provider exchange rates may differ from a displayed reference rate.

BMI Calculator

A BMI calculator uses height and weight to calculate a basic body-mass index.

BMI can be useful as a general screening measure, but it isn't a complete assessment of someone's health or body composition. It should not be treated as a diagnosis.

Percentage Calculator

Percentages appear everywhere:

Discounts

Business growth

Exam scores

Profit margins

Salary increases

Interest calculations

Statistics

A dedicated percentage calculator can save you from repeatedly doing the same calculations manually.

Loan Calculator

Before considering a loan, it can be useful to estimate potential monthly payments.

A loan calculator can help you experiment with:

Loan amount + interest rate + repayment period = estimated payment

The actual amount you pay may vary depending on fees, lender policies, compounding methods, and other terms.

Random Generator Tools

Sometimes you simply need something random.

Random generators can be useful for:

Choosing names

Generating numbers

Creating ideas

Selecting options

Testing applications

Brainstorming

Developers can also use simple generators during testing without building their own scripts.

Why Use a Collection of Small Tools?

The biggest advantage isn't necessarily having one complicated application.

Sometimes, small tools that solve specific problems are more useful.

If you need to calculate your GPA, you don't need project-management software. If you need to estimate a freelance rate, you don't need an enterprise accounting platform.

You just need a tool that solves the problem quickly.

That's the idea behind AfriWidget: bringing useful calculators and AI-powered tools together in one place so users can solve everyday problems without searching across dozens of different websites.

A Better Approach to Online Tools

When using online calculators and AI tools, don't blindly accept the result.

Instead:

Understand what the tool is calculating.
Check the information you entered.
Review the result.
Compare important calculations when necessary.
Use professional advice for high-stakes financial, medical, or legal decisions.

Tools should help you make decisions—not replace your judgment.

Final Thoughts

The best online tool isn't necessarily the one with the most features. It's often the one that solves your problem quickly, clearly, and without unnecessary complexity.

From academic calculators and financial tools to AI-powered career and freelancing tools, AfriWidget brings a growing collection of practical tools into one platform.

Explore the free tools at AfriWidget and find one that can make your next task easier.

Beyond the Code: Why Remote African Developers Need a "Financial Tech Stack"

Obed Avorlenu — Fri, 17 Jul 2026 16:10:35 +0000

We spend thousands of hours optimizing our IDEs, perfecting our CI/CD pipelines, and mastering new frameworks. But as a developer working remotely, I realized I was putting more effort into my code than I was into the financial infrastructure that supports my life.
If you are a developer based in Africa landing remote roles, you’re dealing with a specific set of variables that developers in other regions don't face: international exchange rates, complex cross-border tax implications, and the challenge of building long-term wealth when your income is in USD but your expenses are in local currency.
The "Financial Debt" in Your Career
In software, we know that technical debt slows down development. In your personal life, "financial debt" works the same way. It manifests when:
You don't have a system to hedge against local currency volatility.
You underprice your freelance contracts because you aren't using data-driven negotiation strategies.
You are manually calculating taxes and conversion fees instead of automating your "take-home" analysis.
To solve this, you need to build a "Financial Tech Stack"—a set of automated tools and mental models that manage your money with the same efficiency you apply to your deployments.
Building Your Personal Financial Infrastructure
1. The Negotiation Layer (Data-Driven Compensation)
Many developers fall into the trap of accepting the first offer because they don't have a clear benchmark. Don't just guess your value. You should be calculating your worth based on:
Purchasing Power Parity (PPP): Understanding what your rate means in a global market versus your local cost of living.
The "Premium" Factor: Remote roles often require specialized asynchronous communication skills. Your rate should reflect your ability to work autonomously, not just your ability to commit code.
2. The Conversion Layer (Managing Volatility)
When your income arrives in foreign currency, you are essentially managing a micro-treasury. If you wait until the end of the month to convert your money, you are subject to whatever rate the bank gives you that day.
Automation: Use tools to track currency trends and automate your conversion at optimal times.
Fees vs. Speed: Calculate the hidden cost of traditional wire transfers versus modern digital wallets or crypto-rails. The "cheapest" service is often the one that saves you 3% in fees per transaction.
3. The Scalability Layer (Investing for the Future)
Your career as a developer has a "compounding interest" effect, but only if you reinvest your capital. The goal isn't just to earn USD; it’s to move that capital into assets—whether that’s stocks, local real estate, or business ventures—that grow while you sleep. If you are keeping all your earnings in a basic savings account, inflation is effectively acting as a "memory leak" in your portfolio.
Bridging the Gap: Tools for the African Context
I got tired of using "global" tools that didn't understand the realities of my bank, my currency, or my career path. Standard calculators assume stable banking and low-friction markets, which often isn't the case here.
Because of this, I built a set of 20 AI-powered tools at VectricEarn to fill this gap. I designed these to function as the missing components in your financial tech stack:
Remote Salary Benchmarking: AI-driven frameworks to help you negotiate better contracts based on global standards.
Currency & Budgeting Calculators: Tools that account for the local reality of living in markets like Nigeria, Kenya, or Ghana, so you can track your "true" income.
Side Hustle ROI Analysis: A way to calculate if your extra projects are actually profitable, factoring in your time and current operational costs.
How to Get Started Today
If you want to treat your career like a professional project, start here:
Audit your current "Financial Stack." Where are you losing money to fees or poor exchange rate management?
Define your KPIs. What is your target monthly savings rate? What is your target hourly rate for the next 6 months?
Automate. Stop doing manual math. Use tools (like the ones I’ve listed above) to handle the logic so you can focus on building your next feature.
We are the architects of the future of tech in Africa. But we can't build great things if we are constantly stressed about our financial stability. Stop treating your personal finances as an afterthought. Build an infrastructure for your money that is just as robust as the code you write.
What's your "Financial Tech Stack"?
Are you currently using specific tools to manage your remote salary or handle your local finances? Have you found ways to automate your currency conversion or tax planning? Let’s discuss in the comments.

Build a Side Hustle Finder Web App with Next.js A Practical Step‑by‑Step Guide Inspired by VectricEarn

Obed Avorlenu — Fri, 03 Jul 2026 12:57:52 +0000

TL;DR – In this tutorial, you’ll build a full‑stack web app that helps users discover side hustles, save favourites, and follow practical guides. The content is inspired by the kind of actionable advice you'd find on VectricEarn – a website that covers personal finance, remote jobs, side hustles, investing, career growth, and scholarships for Africans. Your finished app can become a portfolio piece, a community tool, or even a monetisable product.

Why This Project?

Across Africa, young people are looking for practical ways to earn extra income, grow their careers, and build wealth. Resources like VectricEarn provide valuable guides on:

· Personal Finance – Budgeting, saving, and investing in the African context
· Remote Jobs & Freelancing – Legitimate work opportunities that pay in foreign currency
· Side Hustles – Step‑by‑step guides to earning outside your 9‑to‑5
· Investing & Wealth Building – Stocks, ETFs, real estate, and crypto explained simply
· Career Growth – Salary negotiation, promotions, and in‑demand skills
· Scholarships & Opportunities – Fully funded programs and grants

This Side Hustle Finder app complements that mission by helping users:

· Browse hustle ideas filtered by category, startup cost, and difficulty
· Read step‑by‑step guides for each hustle
· Save favourite hustles to a personal dashboard
· Track estimated income and progress

What’s in it for you?
Building this app teaches you:

· Full‑stack development with Next.js (App Router + API routes)
· Database modelling with Prisma and SQLite
· Authentication with NextAuth.js
· Modern frontend with Tailwind CSS
· How to turn a real‑world problem into a software solution

And you can earn from it too: use it as a portfolio project to land freelance gigs, or package it as a SaaS for local entrepreneurs.

Prerequisites

· Basic knowledge of JavaScript/TypeScript and React
· Node.js 18+ installed
· A code editor (VS Code recommended)
· Familiarity with the command line

Step 1: Set Up Your Next.js Project

# Create a new Next.js project with TypeScript and Tailwind CSS
npx create-next-app@latest side-hustle-finder --typescript --tailwind --app
cd side-hustle-finder

# Install dependencies
npm install @prisma/client prisma next-auth @types/next-auth bcryptjs
npm install -D @types/bcryptjs

Step 2: Set Up the Database with Prisma

npx prisma init

Edit prisma/schema.prisma:

generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "sqlite"
  url      = env("DATABASE_URL")
}

model User {
  id        String   @id @default(cuid())
  username  String   @unique
  email     String   @unique
  password  String   // hashed
  savedHustles SavedHustle[]
}

model Hustle {
  id        String   @id @default(cuid())
  title     String
  category  String
  startupCost String
  difficulty String
  description String
  steps     String   // JSON array of practical steps
  estimatedIncome String
  savedBy   SavedHustle[]
}

model SavedHustle {
  id        String @id @default(cuid())
  userId    String
  hustleId  String
  user      User @relation(fields: [userId], references: [id])
  hustle    Hustle @relation(fields: [hustleId], references: [id])

  @@unique([userId, hustleId])
}

Set .env:

DATABASE_URL="file:./dev.db"

Run migration:

npx prisma migrate dev --name init

Step 3: Seed the Database with Real Hustle Ideas

Create prisma/seed.ts (install ts-node as dev dependency first). These ideas are inspired by the practical guides you'd find on VectricEarn – covering side hustles that actually work in the African context.

import { PrismaClient } from '@prisma/client';
const prisma = new PrismaClient();

const hustles = [
  {
    title: "AI‑Powered Tutoring via WhatsApp",
    category: "Teaching",
    startupCost: "$0",
    difficulty: "Beginner",
    description: "Use ChatGPT + WhatsApp to teach subjects you already know.",
    steps: JSON.stringify([
      "Ask ChatGPT to create a lesson plan",
      "Design a flyer using Canva",
      "Share on WhatsApp status and groups",
      "Teach via voice notes and shared docs"
    ]),
    estimatedIncome: "$10‑$50 per student"
  },
  {
    title: "Canva + AI Micro‑Designs for Local Shops",
    category: "Design",
    startupCost: "$0",
    difficulty: "Beginner",
    description: "Create posters, menus, and flyers for local businesses using Canva and AI.",
    steps: JSON.stringify([
      "Find 5 small shops in your neighbourhood",
      "Use ChatGPT to write catchy slogans",
      "Design posters in Canva",
      "Show samples and offer 3 designs for $10"
    ]),
    estimatedIncome: "$10‑$30 per design"
  },
  {
    title: "Virtual Research Assistant",
    category: "Writing",
    startupCost: "$0",
    difficulty: "Intermediate",
    description: "Help students and organisations with research using ChatGPT.",
    steps: JSON.stringify([
      "Join student groups on Facebook/LinkedIn",
      "Offer to summarise papers or find references",
      "Use Google Docs to deliver summaries",
      "Polish AI output in your own voice"
    ]),
    estimatedIncome: "$20‑$50 per project"
  },
  {
    title: "Social Media Caption Micro‑Agency",
    category: "Marketing",
    startupCost: "$0",
    difficulty: "Intermediate",
    description: "Write captions and manage social media for local businesses.",
    steps: JSON.stringify([
      "Pick 3 local brands",
      "Ask ChatGPT for caption ideas",
      "Schedule posts with Meta Business Suite",
      "Offer management for $30‑$50/month"
    ]),
    estimatedIncome: "$50‑$150/month"
  },
  {
    title: "Remote Freelance Writing",
    category: "Writing",
    startupCost: "$0",
    difficulty: "Intermediate",
    description: "Write for international clients on platforms like Upwork and Fiverr.",
    steps: JSON.stringify([
      "Choose a niche (tech, finance, lifestyle)",
      "Build a portfolio with sample articles",
      "Create profiles on Upwork and Fiverr",
      "Start with smaller gigs to build reputation"
    ]),
    estimatedIncome: "$100‑$1000+ per month"
  }
];

async function main() {
  for (const h of hustles) {
    await prisma.hustle.upsert({
      where: { title: h.title },
      update: {},
      create: h,
    });
  }
}
main()
  .catch(e => console.error(e))
  .finally(() => prisma.$disconnect());

Add seed script in package.json:

"prisma": {
  "seed": "ts-node --compiler-options {\"module\":\"CommonJS\"} prisma/seed.ts"
}

Run seeding:

npx prisma db seed

Step 4: Set Up Authentication (NextAuth.js)

Create src/app/api/auth/[...nextauth]/route.ts:

import NextAuth from "next-auth";
import CredentialsProvider from "next-auth/providers/credentials";
import { PrismaAdapter } from "@next-auth/prisma-adapter";
import { PrismaClient } from "@prisma/client";
import bcrypt from "bcryptjs";

const prisma = new PrismaClient();

export const authOptions = {
  adapter: PrismaAdapter(prisma),
  providers: [
    CredentialsProvider({
      name: "Credentials",
      credentials: {
        email: { label: "Email", type: "email" },
        password: { label: "Password", type: "password" }
      },
      async authorize(credentials) {
        if (!credentials?.email || !credentials?.password) return null;
        const user = await prisma.user.findUnique({
          where: { email: credentials.email }
        });
        if (!user) return null;
        const isValid = await bcrypt.compare(credentials.password, user.password);
        if (!isValid) return null;
        return { id: user.id, email: user.email, name: user.username };
      }
    })
  ],
  session: { strategy: "jwt" },
  callbacks: {
    async jwt({ token, user }) {
      if (user) token.id = user.id;
      return token;
    },
    async session({ session, token }) {
      if (token?.id) session.user.id = token.id as string;
      return session;
    }
  },
  pages: { signIn: "/login" },
};

const handler = NextAuth(authOptions);
export { handler as GET, handler as POST };

Step 5: Build API Routes

src/app/api/hustles/route.ts – GET all with filters:

import { NextRequest, NextResponse } from 'next/server';
import { PrismaClient } from '@prisma/client';
const prisma = new PrismaClient();

export async function GET(request: NextRequest) {
  const searchParams = request.nextUrl.searchParams;
  const category = searchParams.get('category');
  const cost = searchParams.get('cost');
  const difficulty = searchParams.get('difficulty');

  const where: any = {};
  if (category && category !== 'All') where.category = category;
  if (cost) where.startupCost = cost;
  if (difficulty) where.difficulty = difficulty;

  const hustles = await prisma.hustle.findMany({ where });
  return NextResponse.json(hustles);
}

src/app/api/hustles/[id]/route.ts – GET single:

import { NextResponse } from 'next/server';
import { PrismaClient } from '@prisma/client';
const prisma = new PrismaClient();

export async function GET(req: Request, { params }: { params: { id: string } }) {
  const hustle = await prisma.hustle.findUnique({ where: { id: params.id } });
  if (!hustle) return new NextResponse('Not found', { status: 404 });
  return NextResponse.json(hustle);
}

src/app/api/saved/route.ts – POST save, DELETE unsave (protected):

import { NextResponse } from 'next/server';
import { getServerSession } from 'next-auth';
import { authOptions } from '../auth/[...nextauth]/route';
import { PrismaClient } from '@prisma/client';
const prisma = new PrismaClient();

export async function POST(req: Request) {
  const session = await getServerSession(authOptions);
  if (!session) return new NextResponse('Unauthorized', { status: 401 });
  const { hustleId } = await req.json();
  await prisma.savedHustle.create({
    data: { userId: session.user.id, hustleId }
  });
  return NextResponse.json({ success: true });
}

export async function DELETE(req: Request) {
  const session = await getServerSession(authOptions);
  if (!session) return new NextResponse('Unauthorized', { status: 401 });
  const { hustleId } = await req.json();
  await prisma.savedHustle.delete({
    where: { userId_hustleId: { userId: session.user.id, hustleId } }
  });
  return NextResponse.json({ success: true });
}

Step 6: Build the Frontend Pages

Homepage (src/app/page.tsx)

'use client';
import { useEffect, useState } from 'react';
import Link from 'next/link';
import { useSession } from 'next-auth/react';
import { Hustle } from '@prisma/client';

export default function Home() {
  const { data: session } = useSession();
  const [hustles, setHustles] = useState<Hustle[]>([]);
  const [categories, setCategories] = useState<string[]>([]);

  useEffect(() => {
    fetch('/api/hustles')
      .then(res => res.json())
      .then(data => {
        setHustles(data);
        const cats = data.map((h: Hustle) => h.category);
        setCategories(['All', ...new Set(cats)]);
      });
  }, []);

  return (
    <main className="container mx-auto p-4">
      <h1 className="text-3xl font-bold mb-4">Find Your Next Side Hustle 💰</h1>
      <p className="text-lg mb-6">Discover legitimate ways to earn extra income — built for the African context.</p>
      <div className="flex gap-4 mb-6">
        <select className="border p-2 rounded">
          <option>All Categories</option>
          {categories.map(c => <option key={c}>{c}</option>)}
        </select>
        <select className="border p-2 rounded">
          <option>All Costs</option>
          <option>$0</option>
          <option>$10-50</option>
          <option>$50+</option>
        </select>
      </div>
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        {hustles.map(h => (
          <div key={h.id} className="border rounded-lg p-4 shadow">
            <h2 className="text-xl font-semibold">{h.title}</h2>
            <div className="flex gap-2 my-2">
              <span className="bg-gray-200 px-2 py-1 rounded text-sm">{h.category}</span>
              <span className="bg-blue-100 px-2 py-1 rounded text-sm">{h.difficulty}</span>
              <span className="bg-green-100 px-2 py-1 rounded text-sm">{h.startupCost}</span>
            </div>
            <p className="text-gray-600">{h.description.slice(0, 100)}...</p>
            <div className="mt-4 flex justify-between items-center">
              <Link href={`/hustle/${h.id}`} className="text-blue-600 hover:underline">View Guide</Link>
              {session && (
                <button
                  onClick={async () => {
                    await fetch('/api/saved', { method: 'POST', body: JSON.stringify({ hustleId: h.id }) });
                  }}
                  className="bg-green-500 text-white px-3 py-1 rounded"
                >
                  Save
                </button>
              )}
            </div>
            <div className="mt-2 text-sm text-gray-500">Est. income: {h.estimatedIncome}</div>
          </div>
        ))}
      </div>
    </main>
  );
}

Detail Page (src/app/hustle/[id]/page.tsx)

import { PrismaClient } from '@prisma/client';
import { notFound } from 'next/navigation';
import Link from 'next/link';
import { getServerSession } from 'next-auth';
import { authOptions } from '@/app/api/auth/[...nextauth]/route';

const prisma = new PrismaClient();

export default async function HustlePage({ params }: { params: { id: string } }) {
  const session = await getServerSession(authOptions);
  const hustle = await prisma.hustle.findUnique({ where: { id: params.id } });
  if (!hustle) notFound();

  const steps = JSON.parse(hustle.steps) as string[];

  return (
    <main className="container mx-auto p-4">
      <nav className="text-sm mb-4"><Link href="/" className="text-blue-600">Home</Link> / {hustle.title}</nav>
      <h1 className="text-3xl font-bold">{hustle.title}</h1>
      <div className="flex gap-2 my-3">
        <span className="bg-gray-200 px-2 py-1 rounded">{hustle.category}</span>
        <span className="bg-blue-100 px-2 py-1 rounded">{hustle.difficulty}</span>
        <span className="bg-green-100 px-2 py-1 rounded">Startup: {hustle.startupCost}</span>
        <span className="bg-yellow-100 px-2 py-1 rounded">Est. income: {hustle.estimatedIncome}</span>
      </div>
      <p className="text-lg">{hustle.description}</p>
      <h2 className="text-2xl font-semibold mt-6">Step‑by‑Step Guide</h2>
      <ol className="list-decimal list-inside space-y-2 mt-2">
        {steps.map((step, i) => <li key={i}>{step}</li>)}
      </ol>
      {session ? (
        <button
          onClick={async () => {
            await fetch('/api/saved', { method: 'POST', body: JSON.stringify({ hustleId: hustle.id }) });
          }}
          className="mt-6 bg-green-500 text-white px-4 py-2 rounded"
        >
          Save to Dashboard
        </button>
      ) : (
        <Link href="/login" className="mt-6 inline-block text-blue-600">Login to save</Link>
      )}
      <Link href="/" className="mt-4 inline-block ml-4 text-gray-600">Back to all</Link>
    </main>
  );
}

Dashboard (src/app/dashboard/page.tsx) – protected

import { getServerSession } from 'next-auth';
import { authOptions } from '@/app/api/auth/[...nextauth]/route';
import { PrismaClient } from '@prisma/client';
import Link from 'next/link';
import { redirect } from 'next/navigation';

const prisma = new PrismaClient();

export default async function Dashboard() {
  const session = await getServerSession(authOptions);
  if (!session) redirect('/login');

  const saved = await prisma.savedHustle.findMany({
    where: { userId: session.user.id },
    include: { hustle: true }
  });

  return (
    <main className="container mx-auto p-4">
      <h1 className="text-2xl font-bold">My Saved Hustles</h1>
      {saved.length === 0 ? (
        <p>You haven't saved any hustles yet. <Link href="/" className="text-blue-600">Browse all</Link>.</p>
      ) : (
        <ul className="space-y-4 mt-4">
          {saved.map(({ hustle }) => (
            <li key={hustle.id} className="border p-4 rounded flex justify-between items-center">
              <Link href={`/hustle/${hustle.id}`} className="text-xl font-medium">{hustle.title}</Link>
              <div>
                <span className="mr-4 text-sm">{hustle.estimatedIncome}</span>
                <button
                  onClick={async () => {
                    await fetch('/api/saved', { method: 'DELETE', body: JSON.stringify({ hustleId: hustle.id }) });
                  }}
                  className="bg-red-500 text-white px-3 py-1 rounded"
                >
                  Remove
                </button>
              </div>
            </li>
          ))}
        </ul>
      )}
    </main>
  );
}

Simple client‑side forms using next-auth/react – implement with standard forms and call signIn('credentials', { email, password }).

Step 7: Run Your App

npm run dev

Visit http://localhost:3000. Register, log in, explore, and save hustles.

How to Monetise This Project

· White‑Label it – Sell the app to local businesses, universities, or co‑working spaces as a tool for their communities.
· Offer Custom Content – Charge to add more hustles (like those covered on [Next.js and tailor the guides to specific regions.
· Build a Community – Add forums, success stories, and monetise through ads or premium listings.
· Showcase in Your Portfolio – Use it to land freelance or full‑time roles in web development.

Next Steps

· Add user‑submitted hustles (moderated) – this could turn into a crowdsourced library of practical guides.
· Implement income tracking – let users log their actual earnings to see progress.
· Integrate payment gateways for premium features.
· Improve filters with server‑side pagination and search.

Conclusion

You've built a full‑stack, production‑ready Next.js application that addresses a genuine need for Africans looking to earn extra income. The data and ideas used are drawn from real‑world opportunities – the kind you'd find on resources like VectricEarn, which provides practical guides on personal finance, remote jobs, side hustles, investing, career growth, and scholarships.

This project is not just a coding exercise; it's a potential revenue stream. Deploy it, iterate, and watch it grow.

Happy building – and happy earning! 🚀

Build Your First AI App: A Code-First Guide for Beginners

Obed Avorlenu — Tue, 30 Jun 2026 07:18:24 +0000

Forget the high-level theory and endless debates about artificial general intelligence. If you are a developer looking to actually build with AI, the best way to learn is by writing code.
In this guide, we are going to build a functional AI text generator using Next.js, TypeScript, and the OpenAI API. No fluff, no abstract concepts—just line-by-line code and practical implementation.
Prerequisites
Before writing any code, ensure you have the following ready:
Node.js installed on your machine.
A code editor (VS Code is recommended).
An OpenAI API Key (Grab one from the OpenAI developer dashboard).
Step 1: Project Setup
We are using Next.js (App Router) for this build because it allows us to handle both our frontend UI and our backend API routes in a single repository.
Open your terminal and run:
npx create-next-app@latest my-first-ai-app
During the setup, select the following options:
TypeScript: Yes
ESLint: Yes
Tailwind CSS: Yes
src/ directory: No
App Router: Yes
Customize default import alias: No
Navigate into your new project and install the official OpenAI SDK:cd my-first-ai-app
npm install openai
Create a file named .env.local in the root of your project to securely store your API key:
OPENAI_API_KEY=your_actual_api_key_here
Never commit this file to GitHub. Next.js automatically ignores .env.local by default).
Step 2: Building the API Route (The Backend)
We need a secure place to execute our AI requests so our API key isn't exposed to the client. Next.js Route Handlers are perfect for this.
Create a new file at app/api/generate/route.ts and add the following code
import { NextResponse } from 'next/server';
import OpenAI from 'openai';

// Initialize the OpenAI client with your API key
const openai = new OpenAI({
apiKey: process.env.OPENAI_API_KEY,
});

export async function POST(request: Request) {
try {
// Parse the incoming JSON payload from the frontend
const body = await request.json();
const { prompt } = body;

// Validate that a prompt was actually provided
if (!prompt) {
  return NextResponse.json(
    { error: 'Prompt is required' },
    { status: 400 }
  );
}

// Call the OpenAI API using the gpt-3.5-turbo model
const completion = await openai.chat.completions.create({
  model: 'gpt-3.5-turbo',
  messages: [
    {
      role: 'system',
      content: 'You are a helpful and concise AI assistant.',
    },
    {
      role: 'user',
      content: prompt,
    },
  ],
  temperature: 0.7,
  max_tokens: 500,
});

// Extract the AI's response text
const aiResponse = completion.choices[0].message.content;

// Send the response back to the client
return NextResponse.json({ result: aiResponse });

} catch (error) {
// Handle errors (e.g., rate limits, invalid keys)
console.error('AI API Error:', error);
return NextResponse.json(
{ error: 'Failed to generate response' },
{ status: 500 }
);
}
}
Line-by-Line Breakdown:
import { NextResponse }...: We import Next.js's built-in response handler to send data back to the browser.
const openai = new OpenAI(...): This instantiates the OpenAI client. It automatically looks for process.env.OPENAI_API_KEY.
export async function POST(request: Request): This defines an HTTP POST endpoint. AI generation should always be a POST request because we are sending a payload (the prompt).
const body = await request.json(): We extract the JSON body sent from our frontend.
openai.chat.completions.create(...): This is the core engine. We specify the model (GPT-3.5-turbo is fast and cheap for beginners), set the system message to define the AI's personality, and pass the user prompt.
temperature: 0.7: Controls creativity. 0 is robotic and exact, 1 is highly creative. 0.7 is a good middle ground.
completion.choices[0].message.content: The OpenAI API returns a deeply nested JSON object. This specific path extracts just the raw text of the AI's answer.
Step 3: Building the User Interface (The Frontend)
Now, let's build the visual interface where users can type their prompts and read the AI's responses.
Open app/page.tsx, delete the boilerplate code, and replace it with this:

'use client';

import { useState } from 'react';

export default function Home() {
// State variables to manage inputs, outputs, and loading status
const [input, setInput] = useState('');
const [output, setOutput] = useState('');
const [isLoading, setIsLoading] = useState(false);

// The function triggered when the user clicks "Generate"
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
if (!input) return;

setIsLoading(true);
setOutput('');

try {
  // Make a POST request to our custom API route
  const response = await fetch('/api/generate', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({ prompt: input }),
  });

  const data = await response.json();

  // Check for errors returned by the backend
  if (!response.ok) {
    throw new Error(data.error || 'Something went wrong');
  }

  // Update the UI with the AI's response
  setOutput(data.result);
} catch (error: any) {
  setOutput(`Error: ${error.message}`);
} finally {
  setIsLoading(false);
}

};

return (

My First AI Generator

    <form onSubmit={handleSubmit} className="flex flex-col gap-4">
      <textarea
        className="w-full p-4 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 text-black"
        rows={4}
        placeholder="Ask the AI something..."
        value={input}
        onChange={(e) => setInput(e.target.value)}
      />

      <button
        type="submit"
        disabled={isLoading}
        className="bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 disabled:bg-blue-300 transition-colors"
      >
        {isLoading ? 'Generating...' : 'Generate Response'}
      </button>
    </form>

    {output && (
      <div className="mt-8 p-6 bg-gray-100 rounded-md border border-gray-200 text-black">
        <h2 className="text-sm font-semibold text-gray-500 mb-2">AI Response:</h2>
        <p className="whitespace-pre-wrap">{output}</p>
      </div>
    )}
  </div>
</main>

);
}
Line-by-Line Breakdown:
'use client';: A required Next.js directive indicating this component runs in the browser, allowing us to use React Hooks.
const [input, setInput] = useState('');: Manages the text the user types into the textarea.
const [output, setOutput] = useState('');: Stores the final response returned by the AI.
const [isLoading, setIsLoading] = useState(false);: Prevents the user from spamming the submit button while waiting for the API.
const response = await fetch('/api/generate', ...): We call the backend route we created in Step 2, passing the user's input as a JSON string.
if (!response.ok): Catch backend errors (like a 400 or 500 status code) and throw an exception to be caught in our catch block.
className="...": We use Tailwind CSS utility classes to rapidly style the app.
whitespace-pre-wrap: A crucial CSS class for AI text formatting. It ensures that line breaks and paragraphs generated by the AI are actually rendered on the screen, rather than mashed into a single block of text.
Step 4: Run and Test
Start your development server:
npm run dev
Open http://localhost:3000 in your browser. Type a prompt like "Write a two-sentence horror story" into the box and hit Generate. You have just built a fully functional, full-stack AI application.
The Next Step: Monetizing Your AI Skill
Writing the code is only the first half of the equation; the second half is turning that technical execution into a tangible income stream. Knowing how to wire up an API isn't enough if you don't know how to package and sell the result.
Once you have mastered these basics, you can monetize this skill in several ways:
Micro-SaaS: Build a niche AI tool (e.g., an AI cover letter generator for a specific industry) and charge a monthly subscription.
Freelance Integration: Many traditional businesses want AI integrated into their existing sites but don't know how. You can offer services to build custom AI chatbots for their customer service.
Digital Products: Package specific, highly optimized prompts and small scripts into templates that you can sell to non-developers.
If you are looking for practical, actionable steps on how to transition from simply writing code to actually monetizing digital products and tech skills, VectricEarn is an excellent resource to study. It focuses heavily on the business side of content, remote opportunities, and digital monetization, providing the blueprints needed to turn your new AI development skills into actual revenue.
Keep building, keep shipping, and start looking at your code as a product.