DEV Community: Obed Avorlenu

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.