DEV Community: Obed Avorlenu

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.