Andrew Baisden - freeCodeCamp.org

How to Build a CRUD App with TanStack Start and TanStackDB (with RxDB Integration)

Andrew Baisden — Mon, 27 Oct 2025 21:08:27 +0000

TanStack Start is a new full-stack framework for React. It’s been growing in popularity ever since it reached the Release Candidate stage of its development in September, 2025. The Release Candidate stage is basically a version of software which is considered to be almost complete, in a stable state, and ready for final public testing before its official launch.

TanStack Start has already started to emerge as a good alternative to other popular React frameworks like Next.js and Remix. The TanStack ecosystem is already quite popular with developers, and other well-known tools include:

TanStack Router: Type-safe Routing for React and Solid applications
TanStack Query: Powerful asynchronous state management, server-state utilities and data fetching
TanStack Form: Headless UI for building performant and type-safe forms
TanStackDB: A reactive client store for building super-fast apps on sync

In this tutorial, we’ll build a simple but powerful to-do list CRUD application using TanStack Start, TanStackDB, and RxDB. You can see what the app looks like below:

The tutorial will teach you how to:

Create and persist data locally using RxDB
Create a TanStack Start project that uses TanStackDB for data storage
Build a full CRUD (Create, Read, Update, Delete) app

At the end of this guide, we are also going to look at what makes TanStack Start different from other React frameworks like Next.js and Remix and how TanStackDB fits into this ever-growing ecosystem.

Let's get started.

What is TanStack Start?
What is TanStack DB (with RxDB Integration)?
Setting Up Our Project
Creating the Database Client
Understanding Local Persistence with RxDB
Creating a Todo Collection
Creating Our CRUD Actions
Creating the Frontend Page
How does TanStack Start Compare to Next.js and Remix?
When Should You Use TanStack Start, Next.js, or Remix?
Conclusion

Prerequisites

Fortunately, not much is required – just the following:

Node and npm installed
Code editor/IDE

What is TanStack Start?

TanStack Start is a modern React-based meta-framework built by the developer Tanner Linsley (who’s famous for building the TanStack ecosystem).

TanStack Start is designed to be:

Blazing fast, as it is powered by Vite, Bun, or other modern bundlers
Type-safe, because it is deeply integrated with TypeScript as well as TanStack Router
Lightweight, since there is no server-side rendering unless you want it
Full-stack ready, as it works with loaders, actions, and data mutations just like Remix

If you’re already familiar with Next.js and Remix, you can think of TanStack Start as a more modular, transparent, and flexible way of building full-stack React apps.

What is TanStack DB (with RxDB Integration)?

TanStackDB is a reactive data management layer which sits between your user interface and data source. It’s not like a typical ORM (Object Relational Mapper). Instead, it gives you a unified abstraction layer for working with local-first data collections which are reactive.

So when you combine TanStackDB with RxDB, you get local database persistence which works by using IndexDB or SQLite and real-time reactivity. This gives you the ability to sync data to remote backends later like PostgreSQL, for example.

In this project, we’re going to use RxDB for local-first-storage that makes it behave like SQLite when it’s inside a browser.

Setting Up Our Project

Let’s start fresh. Find a location on your computer for creating this project and run these commands in your terminal to set it up:

npm create @tanstack/start@latest my-app
cd my-app
npm install rxdb @tanstack/react-db @tanstack/rxdb-db-collection
mkdir -p src/db
touch src/db/actions.ts src/db/client.ts src/db/todoCollection.ts

This run script creates a TanStack Start project, installs dependencies for RxDB and TanStackDB, and creates the folders and files we need for our app.

At the end, we’re also going to replace the existing index.tsx page with our own CRUD app codebase, while also keeping the demo routes in navigation so you can still explore them.

Creating the Database Client

Up first is our src/db/client.ts file, so copy and paste the below code into the file:

import { createRxDatabase, removeRxDatabase } from "rxdb";
import { getRxStorageDexie } from "rxdb/plugins/storage-dexie";

let dbInstance: any = null;

export async function initDB() {
  // Only initialize in browser environment
  if (typeof window === "undefined") {
    console.log("initDB: Not in browser, skipping");
    return null;
  }

  if (dbInstance) {
    console.log("initDB: Returning existing instance");
    return dbInstance;
  }

  try {
    console.log("initDB: Creating new database instance");
    const storage = getRxStorageDexie();

    // Always remove existing database in development
    if (import.meta.env.DEV) {
      try {
        console.log("initDB: Removing existing database (dev mode)");
        await removeRxDatabase("appdb", storage);
      } catch (e) {
        console.log("initDB: No existing database to remove");
      }
    }

    dbInstance = await createRxDatabase({
      name: "appdb",
      storage,
      multiInstance: false,
      eventReduce: true,
    });

    console.log("initDB: Database created successfully");
    return dbInstance;
  } catch (error) {
    console.error("initDB: Failed to create database", error);
    throw error;
  }
}

// Cleanup for HMR
if (typeof window !== "undefined" && import.meta.hot) {
  import.meta.hot.dispose(async () => {
    console.log("HMR: Disposing database");
    if (dbInstance) {
      await dbInstance.destroy();
      dbInstance = null;
    }
  });
}

This code uses RxDB to create a client-side database which is appdb. We use the function getRxStorageDexie() to provide IndexDB storage when used in browsers.

In dev mode, we can clear the DB on each reload, giving us a clean state. Server-side execution is protected by using the window check. HMR cleanup guarantees that the DB is reset properly when hot reloading.

Understanding Local Persistence with RxDB

Before we move to the next section, lets go over the concept of local persistence with RxDB. Our data is likely to disappear when the page is reloaded during development because RxDB used a browser-based database engine for persisting data locally. So we’ll be using the Dexie storage adapter which stores all of our apps data inside a browser’s IndexedDB.

So basically, this means that our todos actually don’t persist in the browser, even if we close and reopen the app – but there’s a way to get this working in our app.

In the src/db/client.ts file, there just happens to be a section of code that looks like this:

    if (import.meta.env.DEV) {
      try {
        console.log("initDB: Removing existing database (dev mode)");
        await removeRxDatabase("appdb", storage);
      } catch (e) {
        console.log("initDB: No existing database to remove");
      }
    }

This code is making sure that when we’re in development mode, our database is removed and then recreated every time the app is reloaded. This is quite useful, because when we’re actively developing and changing schemas, it can guarantee that old data is not going to conflict with new database structures.

The downside, though, is that todos will disappear every time the page is refreshed. This behaviour is expected while running our app locally in dev mode. If you want todos to persist between reloads, then all you have to do is comment out this code block:

// Comment or remove this code block to persist data across reloads
   if (import.meta.env.DEV) {
      try {
        console.log("initDB: Removing existing database (dev mode)");
        await removeRxDatabase("appdb", storage);
      } catch (e) {
        console.log("initDB: No existing database to remove");
      }
    }

After making this update, RxDB will now store your todos in IndexedDB and they will be automatically loaded whenever you revisit the app. You can even see this for yourself by opening your browser while the app is running and navigating to DevTools -> Application -> IndexedDB -> appdb.

See the examples shown here:

Here you can see an example of what our app looks like with some tasks:

Here, you can see that our data stored inside IndexedDB in our browser.

The tasks should remain there until you have manually cleared the browser data.

Creating a Todo Collection

Now, let's work on our src/db/todoCollection.ts file. Copy and paste this code into the empty file in the codebase:

import { initDB } from "./client";

let todoCollectionInstance: any = null;

export async function createTodoCollection() {
  // Protect against server-side execution
  if (typeof window === "undefined") {
    console.log("createTodoCollection: Not in browser, skipping");
    return null;
  }

  if (todoCollectionInstance) {
    console.log("createTodoCollection: Returning existing collection");
    return todoCollectionInstance;
  }

  try {
    console.log("createTodoCollection: Initializing database");
    const db = await initDB();

    if (!db) {
      console.error(
        "createTodoCollection: Database initialization returned null",
      );
      return null;
    }

    console.log("createTodoCollection: Adding collections");
    if (!db.todos) {
      await db.addCollections({
        todos: {
          schema: {
            version: 0,
            primaryKey: "id",
            type: "object",
            properties: {
              id: {
                type: "string",
                maxLength: 100,
              },
              title: {
                type: "string",
              },
              completed: {
                type: "boolean",
              },
            },
            required: ["id", "title", "completed"],
          },
        },
      });
      console.log("createTodoCollection: Collections added successfully");
    }

    // Return the RxDB collection directly
    todoCollectionInstance = db.todos;

    console.log("createTodoCollection: Collection created successfully");
    return todoCollectionInstance;
  } catch (error) {
    console.error("createTodoCollection: Failed to create collection", error);
    throw error;
  }
}

With this file, we define a todos collection schema which has an id, title, and completed fields. This schema is able to ensure that the structure and validation is correct, and we memoize the collection instance which prevents multiple DB connections from occurring. The code then returns a live RxDB collection which is ready for querying and mutation.

Creating Our CRUD Actions

It’s now time to work on our CRUD actions. These allow us to perform the usual updates/changes to the data in our todo list.

Open the src/db/actions.ts file and copy and paste this code into it:

import { createTodoCollection } from "./todoCollection";

let collectionPromise: Promise<any> | null = null;

async function getCollection() {
  if (typeof window === "undefined") {
    return null;
  }

  if (!collectionPromise) {
    collectionPromise = createTodoCollection();
  }
  return collectionPromise;
}

export const TodoActions = {
  async getAll() {
    try {
      const collection = await getCollection();
      if (!collection) return [];

      const docs = await collection.find().exec();
      return docs.map((doc: any) => ({
        id: doc.id,
        title: doc.title,
        completed: doc.completed,
      }));
    } catch (error) {
      console.error("TodoActions.getAll error:", error);
      throw error;
    }
  },

  async add(title: string) {
    const collection = await getCollection();
    if (!collection) throw new Error("Collection not initialized");

    await collection.insert({
      id: crypto.randomUUID(),
      title,
      completed: false,
    });
  },

  async update(
    id: string,
    changes: Partial<{ title: string; completed: boolean }>
  ) {
    const collection = await getCollection();
    if (!collection) throw new Error("Collection not initialized");

    const doc = await collection.findOne(id).exec();
    if (doc) {
      const patch: any = {};
      if (typeof changes.title !== "undefined") patch.title = changes.title;
      if (typeof changes.completed !== "undefined")
        patch.completed = changes.completed;
      if (Object.keys(patch).length > 0) {
        await doc.patch(patch);
      }
    }
  },

  async toggle(id: string) {
    const collection = await getCollection();
    if (!collection) throw new Error("Collection not initialized");

    const doc = await collection.findOne(id).exec();
    if (doc) {
      await doc.patch({ completed: !doc.completed });
    }
  },

  async remove(id: string) {
    const collection = await getCollection();
    if (!collection) throw new Error("Collection not initialized");

    const doc = await collection.findOne(id).exec();
    if (doc) {
      await doc.remove();
    }
  },
};

With this code, we use the getCollection() function to ensure that we only initialise the collection once. Each CRUD method (getAll, add, toggle, remove) interacts directly with RxDB and the methods use the native browser crypto.randomUUID() to generate a unique ID. We can now safely handle server-side rendering, as we skip DB access on the server using this strategy.

Creating the Frontend Page

All that remains is the frontend user interface, as we’ve written the bulk of the logic already. We’re going to replace the default src/routes/index.tsx file with our own CRUD UI, so just replace all of the code in that file with this code here:

import * as React from "react";
import { createFileRoute } from "@tanstack/react-router";
import { TodoActions } from "../db/actions";

function Index() {
  const [todos, setTodos] = React.useState<
    Array<{ id: string; title: string; completed: boolean }>
  >([]);
  const [title, setTitle] = React.useState("");
  const [isLoading, setIsLoading] = React.useState(true);
  const [error, setError] = React.useState(null);
  const [editingId, setEditingId] = React.useState(null);
  const [editingTitle, setEditingTitle] = React.useState("");

  React.useEffect(() => {
    let active = true;

    (async () => {
      try {
        console.log("Index: Loading todos");
        const data = await TodoActions.getAll();
        console.log("Index: Todos loaded", data);
        if (active) {
          setTodos(data);
          setIsLoading(false);
        }
      } catch (err) {
        console.error("Index: Failed to load todos:", err);
        if (active) {
          setError(err as Error);
          setIsLoading(false);
        }
      }
    })();

    return () => {
      active = false;
    };
  }, []);

  const handleAdd = async (e: React.FormEvent) => {
    e.preventDefault();
    if (title.trim()) {
      try {
        await TodoActions.add(title);
        setTodos(await TodoActions.getAll());
        setTitle("");
      } catch (err) {
        console.error("Failed to add todo:", err);
        setError(err as Error);
      }
    }
  };

  const handleToggle = async (id: string) => {
    try {
      await TodoActions.toggle(id);
      setTodos(await TodoActions.getAll());
    } catch (err) {
      console.error("Failed to toggle todo:", err);
    }
  };

  const handleRemove = async (id: string) => {
    try {
      await TodoActions.remove(id);
      setTodos(await TodoActions.getAll());
    } catch (err) {
      console.error("Failed to remove todo:", err);
    }
  };

  const startEdit = (todo: { id: string; title: string }) => {
    setEditingId(todo.id);
    setEditingTitle(todo.title);
  };

  const cancelEdit = () => {
    setEditingId(null);
    setEditingTitle("");
  };

  const saveEdit = async () => {
    if (!editingId) return;
    const newTitle = editingTitle.trim();
    if (!newTitle) return;
    try {
      await TodoActions.update(editingId, { title: newTitle });
      setTodos(await TodoActions.getAll());
      setEditingId(null);
      setEditingTitle("");
    } catch (err) {
      console.error("Failed to update todo:", err);
    }
  };

  if (isLoading) {
    return (
      
        Loading database...
      
    );
  }

  if (error) {
    return (
      
        
          Error: 
          {error.message}
          
            Show details
            {error.stack}
          
        
      
    );
  }

  return (
    
      TanStack CRUD (RxDB)

      
         setTitle(e.target.value)}
          placeholder="Add a new task"
          className="border rounded px-3 py-2 flex-1"
        />
        
      

      
        {todos.length === 0 ? (
          No todos yet
        ) : (
          todos.map((todo) => (
            
              {editingId === todo.id ? (
                
                   setEditingTitle(e.target.value)}
                    className="border rounded px-2 py-1 flex-1"
                  />
                  
                  
                
              ) : (
                <>
                   handleToggle(todo.id)}
                    className={
                      todo.completed
                        ? "line-through cursor-pointer"
                        : "cursor-pointer"
                    }
                  >
                    {todo.title}
                  
                  
                    
                    
                  
                
              )}
            
          ))
        )}
      
    
  );
}

export const Route = createFileRoute("/")({
  component: Index,
});

Our updated index.tsx file uses TanStack Router to define our root page, and we have React hooks to handle state, error handling, and the CRUD updates.

Our frontend is set up to show loading/error states for a much smoother UX, and each button triggers a corresponding TodoActions method. The result is that we have a fully reactive, local CRUD app.

That's all there is to it. To run the app, use the usual run command for a Vite application:

npm run dev

How Does TanStack Start Compare to Next.js and Remix?

TanStack Start seems pretty impressive, right? But lets see how it compares to the other two big established frameworks, Next.js and Remix.

Next.js recently released version 16, which brought some new improvements and features which you can read about. It’s without a doubt the most well known and used React framework available right now.

Remix also has a lot going for it, recently held its Remix Jam 2025 recap event which you can also read and learn about.

TanStack Start, on the other hand, is built using the popular Vite build tool which it uses for its development, workflow, and production builds alongside TanStack Router and other libraries.

This is how all three compare when we put them side by side in a table:

Feature	TanStack Start	Next.js	Remix
Routing	TanStack Router	File-based	Nested routes
Type Safety	Deep TS integration	Partial	Full
Data Loading	Loaders/Actions	Server Components	Loaders/Actions
SSR Support	Optional	Built-in	Built-in
Bundler	Vite / Bun	Webpack / Turbopack	Remix Compiler
DX	Simple, minimal	Full-stack ecosystem	Full-stack with conventions

As you can see, TanStack Start offers quite a lot of flexibility. It doesn’t force conventions like Next.js or Remix because of its design and it has just the right amount of structure for developers who want control and transparency in their projects. All three are great options, though.

When Should You Use TanStack Start, Next.js, or Remix?

Each of these frameworks has its advantages and disadvantages depending on your projects setup and priorities. We have to take into account the performance, flexibility, ecosystem as well as the developer experience.

With all of this in mind, it paints a clearer picture on when its best to use them.

When to use TanStack Start

If you want full control of your architecture without having to be locked into conventions, then TanStack Start is a great choice. It’s ideal if you value having transparency alongside the flexibility that comes from it.

You’ll find that its pretty useful especially in projects which need fine-grained control over routing, data fetching, and caching – without having to worry about the overhead of a large opinionated framework.

The integration between Vite and TanStack Router makes it a lightweight and blazing fast tool which can be great for greenfield projects and teams that want to have a modular setup.

When to use Next.js

Next.js is a great option when you need to have a production-ready scalability and extensive documentation, with a very large ecosystem. The framework has been a go to for startups as well as enterprises because of its tight integration with React Server Components, hosting with Vercel, and community driven packages.

So if SEO, SSR, or hybrid rendering are part of your team’s core needs, or if you want to shop something fast with a proven foundation, then Next.js is the safest and most mature way to go about doing it.

When to use Remix.js

Remix is a great choice when you want to have a strong focus on web fundamentals, progressive enhancement, and a reliable UX. It’s good for applications where you want to use a browser’s native capabilities such as forms, caching, and accessibility while also benefitting from a modern full-stack workflow.

It's also great for teams that want to have the simplicity of conventional routing and loaders while also remaining close to the original platform.

Conclusion

In this article, we built a CRUD app from scratch using:

TanStack Start for the app structure and routing
TanStackDB for the reactive data management
RxDB for an offline-first experience and local persistence

You learned how to initialise a local database and collections as well as perform CRUD operations safely.

The TanStack ecosystem is quite powerful, and there are many tools available. They all fit really well together to give you a next-gen, local-first, reactive web development experience. TanStack Start is likely to become one of your favourite ways for building React applications and has a lot of potential for growth.

The official TanStack demos are still available in your nav on the homepage, and they are well worth checking out. Give the TanStack ecosystem a try. I think it could easily become your main tech stack.

Clerk vs Kinde vs Better Auth: How to Choose the Right Next.js Authentication Library

Andrew Baisden — Tue, 23 Sep 2025 02:34:54 +0000

Authentication is an important aspect when building applications, especially if they hold financial information or require users to sign into accounts. Building an auth library can be a lot of work, and there is no need to reinvent the wheel when so many efficient libraries already exist.

In this article, we’ll compare some libraries that you can use for authentication in your Next app. They include: Clerk, Kinde and Better Auth. You’ll learn how to set up these tools in a Next.js application, with the goal of creating at least one authenticated, protected page route.

The aim here is simply to see how each tool works when it comes to speed of setup and ease of use.

What are Clerk, Kinde and Better Auth?
Prerequisites
How to Set Up Authentication Using Clerk
How to Set Up Authentication Using Kinde
How to Set Up Authentication Using Better Auth
When To Use Each Library
Conclusion

What are Clerk, Kinde and Better Auth?

Clerk, Kinde and Better Auth are basically modern authentication providers, much like Auth.js, which have been built with developers in mind. Although they share similarities, they have certain aspects that differentiate them from each other.

To begin with, Clerk is more full-featured. It's more of a hosted solution that offers components which are ready-made, as well as user management and other integrations, which allow you to get up and running pretty quickly.

Kinde, on the other hand, is more of a developer platform, which has authentication, feature flags and team management all in one place.

Better Auth is more of an open-source and code-first place that gives developers the building blocks to create authentication without having to be locked into an ecosystem.

Prerequisites

The prerequisites for this tutorial are minimal, and the databases and Prisma ORM are only required for Better Auth. Alternatively, you can use any of the databases inside a Docker container instead of installing them locally, but that is outside of the scope of this tutorial.

You’ll need these to follow along:

Node and npm installed
Prisma ORM
SQLite, PostgreSQL, or MySQL database set up locally
Code editor/IDE

Let's see how to set up authentication with all three auth platforms in a Next.js application. We’ll use separate Next.js applications to set up each library so that the codebase will remain clean, and you can experience what it's like to set them up from scratch.

First, decide on a location for your project, like on the desktop and then use the command npx create-next-app@latest to set up a Next.js project. You can just use the default configuration. These are the settings I used:

✔ What is your project named? … my-app
✔ Would you like to use TypeScript? … No / Yes
✔ Which linter would you like to use? › ESLint
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like your code inside a src/ directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to use Turbopack? (recommended) … No / Yes
✔ Would you like to customize the import alias (@/* by default)? … No / Yes

We are creating three apps, so it's up to you if you want to duplicate the codebases now and give them different names like my-app, my-app2 and my-app3 or do them later when we reach each section.

How to Set Up Authentication Using Clerk

With your Next.js project set up, cd into the my-app folder or whatever name you gave the project and run the following command to install the Next.js SDK for Clerk:

npm install @clerk/nextjs

Now we need to create a middleware file that will grant us access to user authentication throughout our entire app.

Create a middleware.ts file with this code inside the /src folder:

import { clerkMiddleware } from '@clerk/nextjs/server'

export default clerkMiddleware()

export const config = {
  matcher: [
    // Skip Next.js internals and all static files, unless found in search params
    '/((?!_next|[^?]*\\.(?:html?|css|js(?!on)|jpe?g|webp|png|gif|svg|ttf|woff2?|ico|csv|docx?|xlsx?|zip|webmanifest)).*)',
    // Always run for API routes
    '/(api|trpc)(.*)',
  ],
}

With this file, authentication is set up for different page routes.

All that's left is to add the component to your app's layout.tsx file so that authentication is available throughout your entire app.

Just replace all of the code inside of src/app/layout.tsx with this code here:

import type { Metadata } from 'next';
import { Geist, Geist_Mono } from 'next/font/google';
import './globals.css';
import {
  ClerkProvider,
  SignInButton,
  SignUpButton,
  SignedIn,
  SignedOut,
  UserButton,
} from '@clerk/nextjs';

const geistSans = Geist({
  variable: '--font-geist-sans',
  subsets: ['latin'],
});

const geistMono = Geist_Mono({
  variable: '--font-geist-mono',
  subsets: ['latin'],
});

export const metadata: Metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    
      "en">
        `${geistSans.variable} ${geistMono.variable} antialiased`}
        >
          "flex justify-end items-center p-4 gap-4 h-16">
            
              
              
                
              
            
            
              
            
          
          {children}
        
      
    
  );
}

What we did was to import the ClerkProvider, as well as the buttons for signing in and out using Clerk authentication. These additions have been added to the layout.tsx file which means that they are available throughout our entire application. So every page should display the sign in flow at the top of the page.

The ClerkProvider component is needed for integrating Clerk inside of our application, so now we can use session and user context with Clerks hooks and components.

Now you can run your Next.js app with npm run dev, and you should see the homepage, as well as a sign-in and sign-up button at the top of the page, as shown here:

Clicking the signup button will take you to a sign-up form where you can use an email address or sign in with Google, which is pretty easy.

When you have signed in, you should see your profile picture and account information in the top right-hand corner of the screen. That's the hard part done - all that's left is to create a page and then make the route protected so that only a signed-in user can access it.

To begin with, lets update our middleware.ts file with some code which lets us protect a route:

import { clerkMiddleware, createRouteMatcher } from '@clerk/nextjs/server'

const isProtectedRoute = createRouteMatcher(['/dashboard(.*)'])

export default clerkMiddleware(async (auth, req) => {
  if (isProtectedRoute(req)) await auth.protect()
})

export const config = {
  matcher: [
    // Skip Next.js internals and all static files, unless found in search params
    '/((?!_next|[^?]*\\.(?:html?|css|js(?!on)|jpe?g|webp|png|gif|svg|ttf|woff2?|ico|csv|docx?|xlsx?|zip|webmanifest)).*)',
    // Always run for API routes
    '/(api|trpc)(.*)',
  ],
}

We added some new imports for createRouteMatcher, which is a Clerk helper function that gives us the power to protect multiple routes. In this case, the dashboard page route in our application requires a user to be signed in to access the route. Now we need create a dashboard page. Create this folder and file inside the app folder: dashboard/page.tsx. Then complete the page by giving it some code like below:

export default function Dashboard() {
  return (
    <>
      Dashboard Page
    
  );
}

We created a simple page which has a heading that says Dashboard Page.

Congratulations, you have successfully added authentication to your Next app and protected a page route, and it only took a few steps! When you navigate to http://localhost:3000/dashboard as a non-signed-in user, you should be redirected to a sign-in form as shown below:

If you are already signed in, then you should see the Dashboard page. You can learn more using the Clerk official documentation.

How to Set Up Authentication Using Kinde

Create another Next.js application for this project if you have not done so already. Kinde will require you to create an account on their platform before using their authentication library. Let's go through the sign-up process.

Firstly, go to the Kinde website, and you should see a button that says "Start for free" or similar.

Clicking that button should take you to a page where you can create an account:

An email code verification may be required:

On the next screen, you should be able to enter your business details, which can be anything you want. Every time you set up authentication for an app, you will have to create an application for it on your account. Give it any name you want, like app-clerk-test3272346214. The same name will be used for the business and the domain.

On the next screen, we’ll choose to use an existing codebase because we have a local project:

The codebase is in Next.js, so select it from the list:

The next important step is choosing how users are going to sign in. I chose email and Google. You can select whichever options you desire:

Now, on the last screen, choose to explore at your own pace.

And finally, we’ve reach the dashboard screen.

Viewing details lets you see your app keys and environment variables, among other useful information.

That's the long part out of the way, let's get to some code. Navigate to your project folder and then install the package for Kinde:

npm i @kinde-oss/kinde-auth-nextjs

Now, create a .env.local file and put it in the root folder of your project with your environment variables. You can find your environment variables in the Quick Start page of your application.

Here's an example:

KINDE_CLIENT_ID=
KINDE_CLIENT_SECRET=
KINDE_ISSUER_URL=https://.kinde.com
KINDE_SITE_URL=http://localhost:3000
KINDE_POST_LOGOUT_REDIRECT_URL=http://localhost:3000
KINDE_POST_LOGIN_REDIRECT_URL=http://localhost:3000/dashboard

Next, you need to create the following API endpoint and folder structure and files as shown here src/app/api/auth/[kindeAuth]/route.ts.

This is the code needed for the route.ts file:

import {handleAuth} from "@kinde-oss/kinde-auth-nextjs/server";

export const GET = handleAuth();

With this code, Kinde can now handle auth endpoints inside our application.

Once again, you’ll need a middleware.ts file so that authentication can be set up properly in your app. The file should be in the root directory and needs this code added to it:

import { withAuth } from "@kinde-oss/kinde-auth-nextjs/middleware";

export default function middleware(req) {
  return withAuth(req);
}

export const config = {
  matcher: [
    // Run on everything but Next internals and static files
    '/((?!_next|[^?]*\\.(?:html?|css|js(?!on)|jpe?g|webp|png|gif|svg|ttf|woff2?|ico|csv|docx?|xlsx?|zip|webmanifest)).*)',
  ]
};

Like before, we can now protect page routes with this file. Your app has to be wrapped in a Kinde Auth Provider so that you can access the data throughout your app.

Create an AuthProvider.tsx file inside the app directory with this code:

"use client";
import {KindeProvider} from "@kinde-oss/kinde-auth-nextjs";

export const AuthProvider = ({children}) => {
  return {children};
};

Kinde uses a React Context Provider to maintain its internal state throughout our application by using the KindeProvider component.

Next, replace and update the layout.tsx file, so it is wrapped in the Auth Provider:

import type { Metadata } from 'next';
import { Geist, Geist_Mono } from 'next/font/google';
import './globals.css';
import { AuthProvider } from './AuthProvider';
import {
  RegisterLink,
  LoginLink,
  LogoutLink,
} from '@kinde-oss/kinde-auth-nextjs/components';

const geistSans = Geist({
  variable: '--font-geist-sans',
  subsets: ['latin'],
});

const geistMono = Geist_Mono({
  variable: '--font-geist-mono',
  subsets: ['latin'],
});

export const metadata: Metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    
      "grid grid-flow-col gap2">
        Sign in
        Sign up
        Log out
      
      "en">
        `${geistSans.variable} ${geistMono.variable} antialiased`}
        >
          {children}
        
      
    
  );
}

In this file, we also added buttons for signing up, signing in, and logging out which will be displayed at the top of every page as this is the main layout.tsx file. Our AuthProvider component is wrapped around our application which means we can now use Kinde throughout it.

The basic setup is now complete! Run the usual command to start the Next.js app, and you should see the sign-in flow buttons at the top of the screen.

You should be able to sign up and create an account. Doing so will redirect you to the dashboard screen, which shows a 404 error page. This is because we have not created a dashboard page yet.

This is what the Kinde register form looks like:

And this is what the Kinde sign-in form looks like:

Only one step remains now: creating a protected route for your authentication.

Create the following file structure and file for your dashboard page: src/app/dashboard/page.tsx.

Then add this code to the file:

'use client';

import { useKindeBrowserClient } from '@kinde-oss/kinde-auth-nextjs';
import { LoginLink } from '@kinde-oss/kinde-auth-nextjs/components';

export default function Dashboard() {
  const { isAuthenticated, isLoading } = useKindeBrowserClient();

  if (isLoading) return Loading...;

  return isAuthenticated ? (
    
      
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ut
        ante enim. Maecenas ut eros nec diam vulputate sollicitudin. Cras ut
        quam leo. Pellentesque semper, lacus sodales gravida suscipit, metus
        quam congue eros, nec sagittis est dolor eu turpis. Nulla congue
        tristique venenatis. Donec ac venenatis mauris. Donec commodo cursus
        magna, vitae tincidunt magna vestibulum eget.
      
    
  ) : (
    
      You have to Login to see this page
    
  );
}

This page file checks to see if the user is authenticated and signed in. If they are signed in, they see the Lorem ipsum text, and if they are not signed in, they will see a message telling them that they have to log in to see the page.

All you have to do is go to the dashboard route as a signed-in or signed-out user to see it for yourself. And that's pretty much the basics of authentication using the Kinde platform. See the online documentation to learn everything there is to know about it.

How to Set Up Authentication Using Better Auth

And lastly, let's create a project that uses Better Auth. Better Auth requires a database to store user data, so the setup will require a few more steps. You can find the installation guide here, but, we’ll also go through it here.

Ok, just like before, create a Next.js project if you have not done so yet and then install the better-auth package with this command:

npm install better-auth

Next, you have to set up your environment variables, so create a .env file with these values:

BETTER_AUTH_SECRET= #Create your own secret key!
BETTER_AUTH_URL=http://localhost:3000 # Base URL of your app

Make sure that you create a secret key, as if you were generating a secure password with uppercase and lowercase letters and numbers.

Let's get our Prisma package and PostgreSQL database set up, so run these scripts to initialise them:

npm install prisma --save-dev
npx prisma init
npm install @prisma/client

In the next step, we have to create a better auth instance. In this case, we will put the file in the src/lib/auth.ts.

So create an auth.ts file with this code:

import { betterAuth } from 'better-auth';
import { anonymous } from 'better-auth/plugins';
import { prismaAdapter } from 'better-auth/adapters/prisma';
// If your Prisma file is located elsewhere, you can change the path
import { PrismaClient } from '@/generated/prisma';

const prisma = new PrismaClient();
export const auth = betterAuth({
  database: prismaAdapter(prisma, {
    provider: 'postgresql', // or "mysql", "postgresql", ...etc
  }),
  plugins: [anonymous()],
});

In this file, we have configured Better Auth to use Prisma ORM for our database connection, and we will be connecting to a PostgreSQL database. If you want, you can change it to a different database, but the setup might be different, so bear that in mind. You could also use Docker if you know how to set it up. Anonymous sign-in is the default for users.

Now we need to create our database tables for saving user information, so use this command in the terminal to do that:

npx @better-auth/cli generate

You might see this warning, just select yes with "y":

prisma:warn In production, we recommend using `prisma generate --no-engine` (See: `prisma generate --help`)
✔ The file ./prisma/schema.prisma already exists. Do you want to overwrite the schema to the file? … yes

For handling API requests, we must have a route handler set up on our server. Create a folder structure and file for the route.ts file, like shown here /app/api/auth/[...all]/route.ts.

Add this code to the file:

import { auth } from '@/lib/auth'; // path to your auth file
import { toNextJsHandler } from 'better-auth/next-js';

export const { POST, GET } = toNextJsHandler(auth);

This file lets you handle POST and GET requests for your auth file.

Lastly, we have to create a lib/auth-client.ts file. This file allows you to interact with the auth server, and it has a plugin so users can sign in anonymously.

And here is the code to put inside this file:

import { createAuthClient } from 'better-auth/react';
import { anonymousClient } from 'better-auth/client/plugins';
export const authClient = createAuthClient({
  /** The base URL of the server (optional if you're using the same domain) */
  baseURL: 'http://localhost:3000',
  plugins: [anonymousClient()],
});

With this file, it's possible for users to sign in anonymously without having to even create an account or use social sign-in, thanks to the plugin.

All that remains is to create another dashboard page, which has authentication like before. Create another dashboard page with this structure: app/dashboard/page.tsx, and then add this code to the file:

'use client';

import { useState, useEffect } from 'react';
import { authClient } from '@/lib/auth-client';

type User = {
  id: string;
  email: string;
  emailVerified: boolean;
  name: string;
  createdAt: Date;
  updatedAt: Date;
  image?: string | null;
  isAnonymous?: boolean | null;
};

export default function Dashboard() {
  const [user, setUser] = useStatenull>(null);
  const [isLoading, setIsLoading] = useState(true);
  const [isSigningIn, setIsSigningIn] = useState(false);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    const checkAuth = async () => {
      try {
        const session = await authClient.getSession();
        if (session.data?.user) {
          setUser(session.data.user);
        }
      } catch (err) {
        console.error('Auth check error:', err);
      } finally {
        setIsLoading(false);
      }
    };

    checkAuth();
  }, []);

  const handleAnonymousSignIn = async () => {
    try {
      setIsSigningIn(true);
      setError(null);

      const result = await authClient.signIn.anonymous();

      if (result.data) {
        setUser(result.data.user);
        console.log('Anonymous user signed in:', result.data.user);
      } else if (result.error) {
        setError(result.error.message || 'Failed to sign in anonymously');
      }
    } catch (err) {
      setError('An unexpected error occurred');
      console.error('Anonymous sign-in error:', err);
    } finally {
      setIsSigningIn(false);
    }
  };

  const handleSignOut = async () => {
    try {
      await authClient.signOut();
      setUser(null);
    } catch (err) {
      console.error('Sign out error:', err);
    }
  };

  if (isLoading) {
    return (
      "max-w-4xl mx-auto p-6">
        "flex items-center justify-center min-h-[400px]">
          "text-center">
            "animate-spin rounded-full h-12 w-12 border-b-2 border-blue-500 mx-auto mb-4">
            "text-gray-600">Checking authentication...
          
        
      
    );
  }

  if (!user) {
    return (
      "max-w-4xl mx-auto p-6">
        "text-center">
          "text-3xl font-bold mb-6">Access Required
          "text-gray-600 mb-8">
            You need to be signed in to access our dashboard. Choose an option
            below to continue.
          

          {error && (
            "bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-6 max-w-md mx-auto">
              {error}
            
          )}

          "bg-gray-50 p-8 rounded-lg border max-w-md mx-auto">
            "text-xl font-semibold mb-4 text-black">
              Sign In Options
            

            

            "text-sm text-gray-500 mb-4">
              Anonymous access allows you to use our dashboard without creating
              an account. You can always link your account later.
            
          
        
      
    );
  }

  return (
    "max-w-4xl mx-auto p-6">
      "bg-green-50 border border-green-200 rounded-lg p-4 mb-6">
        "flex items-center justify-between">
          
            "text-lg font-semibold text-green-800">
              Welcome, {user.isAnonymous ? 'Anonymous User' : user.name}!
            
            "text-sm text-green-600">
              {user.isAnonymous
                ? 'You are signed in anonymously'
                : `Signed in as ${user.email}`}
            
          
          
        
      

      "text-3xl font-bold mb-6">Dashboard

      {process.env.NODE_ENV === 'development' && (
        "mt-8 bg-gray-100 p-4 rounded-lg">
          "font-semibold mb-2 text-black">Debug Info:
          "text-xs text-gray-600 overflow-auto">
            {JSON.stringify(user, null, 2)}
          
        
      )}
    
  );
}

This code creates a dashboard page which requires a user to be authenticated and signed in to use it. After a user signs in anonymously, they can view some debug info about their profile. So basically, this page is an authentication flow for our dashboard view which integrates with our custom authClient. This page also handles loading error state and sign out for anonymous users.

Ok, now we probably need to reset our Prisma database again, or we could get schema and table errors.

First, make sure that your Prisma development database is running with this command:

npx prisma dev

And then run these commands to reset the database and apply the new migrations for the schema:

npx prisma migrate reset
npx prisma migrate dev

You might need to restart the Prisma development server and then run it with the command npx prisma dev.

Our Better Auth app needs two servers to be running.

The Prisma development server
The Next.js application

With the Prisma development server running, you can now start the Next.js app with the usual command npm run dev.

If you encounter any problems with the Prisma ORM or database, like tables missing or schema mismatches, then here are some useful commands which could hopefully resolve them.

# ⚠️ WARNING: This will drop the database, recreate it, and apply all migrations from scratch.
npx prisma migrate reset

# Applies any new migrations that haven’t been run yet (or creates a new one if your schema changed).
npx prisma migrate dev

# Starts Prisma Studio (a GUI for exploring and editing your database).
npx prisma dev

# Runs Better Auth CLI migrations (sets up any database tables/changes required for authentication).
npx @better-auth/cli migrate

These commands are self-explanatory and let us run migrations on our database when there are changes, and we can see our database inside of Prisma Studio.

This is what the dashboard page looks like when a user is not signed in:

Signing in will show the dashboard screen. To learn more about Better Auth, you can read their official documentation.

When To Use Each Library

Each of these authentication libraries have their pros and cons, and can suit various needs depending on your project. Knowing when to use each one can better prepare you for real-world conditions and when building for production, so let's go through them and see how they compare.

When to Use Clerk

Clerk excels when you need to use auth quickly without worrying about managing multiple servers, and when you need to have pre-made interfaces and management systems. It's great for startups and teams that want to prioritize developer experience and fast implementation.

It has a streamlined and user-friendly setup, which is still able to support the bare minimum essentials, so it's a really good option for small teams and projects that must have an easy implementation. If you are building a SaaS that needs a good interface and components from the start, or if you require social logins without a ton of code, then it's a very good solution, especially if you want speed and cost effectiveness in a smaller project.

When to Use Kinde

Kinde is a fantastic choice when you are keen on having transparent pricing and quick auth integration in more frameworks. Kinde has been designed to be a cost-effective alternative to Clerk and offers more transparent pricing and a more generous, free tier.

It's great for teams that need to have a reliable authentication option but want lower costs and better framework support. Kinde is effective when used in medium-sized projects that need more than a basic authentication system, but also don't have the need to have enterprise-grade tooling.

When to Use Better Auth

Better Auth is a great solution when you have a need for an expansive set of features out of the box. It is also worth noting that Better Auth has a plugin ecosystem that can simplify adding more advanced functionalities with only a few lines of code. Of all the options discussed in this article, Better Auth is by far the cleanest; however, it requires more coding knowledge and skills.

It's a good option if you are building a TypeScript application and want to have full control over the customization and auth data flows. The framework is agnostic and has features such as 2FA, multi-tenant support and other complex features so developers can get the best out of the tool, as there is no vendor lock-in. Functionality can easily be expanded with the plugin ecosystem, so developers can tailor it to their needs.

Conclusion

All three platforms are fairly good at their job, and I do not doubt that they are going to remain popular options for adding authentication to our applications. Auth.js is one of the most well-known out there; however, Clerk, Kinde and Better Auth also appear to have growing followings, and judging by conversations on socials, they appear to be the first choice for many developers at the moment.

After experiencing what it's like to set them up for the first time, I would have to say that Clerk is the easiest to set up because you don't have to create an account, and you can get the authentication working fairly quickly with little troubleshooting. Kinde would be the second easiest to set up, in my opinion. You do have to register for an account to use the platform; however, the setup was also pretty easy and did not need any troubleshooting.

Better Auth is a great platform, but the setup requires a bit more work because a database is required for storing users' information, which makes the process slightly more difficult. I also found it easier to create authenticated routes with the other two auth options. However, the fact that the platform is open-source with no vendor lock-in works in its favour because developers can self-host and it's completely free, which means no paid plans.

How to Build a Team of AI Agents for Your Website for Free Using Agno and Groq

Andrew Baisden — Mon, 31 Mar 2025 22:46:11 +0000

AI is quickly changing the way we work, and more and more companies are using it to help them get and retain clients. Teams are also using AI to create innovative and responsive websites capable of engaging visitors while also providing helpful information.

AI agents are powerful tools for customer services. Having them power your platforms and websites might sound like an expensive proposition with high technical expertise required. But with the emergence of new modern platforms like Agno and Groq, it’s now easier to integrate an AI agent system into your website while still staying within budget.

In this article, you’ll go through the process of developing your own AI agent ecosystem (for free). This will enable you to have a website that can handle customer enquiries, create content, analyse a user's behaviour, and provide custom personal experiences for each user. It's a fantastic setup because you can automate part of your business, speeding up lead generation and freeing up your time to work on more high-priority tasks.

This article is for developers who are familiar with JavaScript, React, and Python. Even if you don’t have a complete understanding of all three, as long as you are a beginner or junior with some knowledge, you should be able to understand at least some of the code. For example, JavaScript and Python are pretty similar syntax-wise, so if you have experience with either of them, then just reading through the codebase will give you an idea of how everything works.

For this tutorial, we’ll build a portfolio website. But you can use the ideas and concepts you learn here for any type of website, regardless of whether you are a solo entrepreneur or part of a large company. With these tools and frameworks, it's possible to transform your web presence without going over budget.

Prerequisites
What Are AI Agents?
What Are Agno and Groq Cloud?
What You Will Be Building
Building Our Python Backend
Building Our React Frontend
Conclusion
Stay Up to Date with Tech, Programming, Productivity, and AI

Prerequisites

Prior knowledge of JavaScript, React, and Python
Python installed and setup locally on your computer
An account on Groq Cloud
A code editor/IDE installed like Cursor, Windsurf, or VS Code

What Are AI Agents?

AI agents are computer systems or programs that are designed to use artificial intelligence to interact with their world and achieve certain objectives. They are able to perceive their world – through sensors, user input, or data – and act to achieve goals, typically with some degree of autonomy. This means that they will decide things for themselves, sometimes with little to no human intervention, depending on how they were designed.

What are Agno and Groq Cloud?

Agno is a lightweight library that lets you build Multimodal Agents. It’s an AI inference engine designed to optimise LLMs for speed and performance. This means it can provide super-fast AI model inference with reduced latency and improved resource utilisation. It has the potential to replace current inference platforms like NVIDIA TensorRT or Hugging Face's Text Generation Inference (TGI).

Groq Cloud is a cloud-based AI inference platform based on Groq LPU (Language Processing Unit) chips, which are optimised for ultra-low-latency AI workloads. Groq is great at high-speed token generation rates, making it perfect for real-time AI applications like chatbots, AI coding help, and other latency-sensitive workloads. The Groq Cloud platform offers free access to its large language models (LLMs) through a free tier, but there are some usage limits.

If you go to the Groq Cloud Playground you can find LLM models from different companies like:

Qwen
DeepSeek R1
Google Gemma 2
Hugging Face
Meta llama
Mistral AI
OpenAI

This is great because Groq Cloud gives us the flexibility to choose from any of these AI LLM models for our AI agent application. Agno basically acts as the orchestration layer for multiple AI agents. In our case, that would be WelcomeAgent, ProjectAgent, CareerAgent, BusinessAdvisor and ResearchAgent.

The platform is able to manage their conversations, task delegation, and memory. When any of our AI agents need to reason or generate output, Agno then uses Groq Cloud, which can run large language models (LLMs), and it does this with ultra-low latency. The advantage to this is that it ensures that it has fast and efficient responses. Groq Cloud itself is not an LLM – rather, it is a high-performance inference engine which hosts and serves LLMs from lots of different providers.

For this project, we will use Meta’s LLaMA 3 model because it strikes a strong balance between performance and accuracy and is openly accessible. This means that it is well-suited for the AI agents in our portfolio website.

It's worth mentioning that we could have used the LLaMA model from llama.com. Still, instead we will use it via Groq Cloud, because, this way, we get better optimisation, more capabilities, and better-quality responses for each AI agent. This is because Groq Cloud gives us the flexibility to test and choose between different AI models if we wish to do so, and that means that we can get the best one for our needs.

What You Will Be Building

Today, you will be building a portfolio website that incorporates AI agents with which anyone can interact. These AI agents are like customer service representatives because anyone can ask them questions about your skills and portfolio, and they will provide the person with information.

This is great because it means that potential clients can learn anything about you 24/7 without having actually to talk to you when you are unavailable. You could even use this portfolio as a template for building your portfolio website or as inspiration for creating one.

In total, there will be five AI agents on your portfolio website:

WelcomeAgent: a specialist in helping users navigate the website, whether the user is an employer, client, or fellow programmer
ProjectAgent: a project specialist that can provide information about projects, technology, and challenges
CareerAgent: a career specialist that can provide information about skills, experience, and professional background
BusinessAdvisor: a client specialist that can provide information about services, pricing, and project details
ResearchAgent: a research specialist that can provide information about technology, trends, and industry news

The massive benefit of incorporating AI agents into a portfolio website is that they can create a personalised experience by providing an interactive experience which is tailor-made and not as easily replicated on other, more generic websites.

This can set your website apart because, as opposed to having a static website for showcasing your talent, an AI agent is capable of guiding visitors, answering queries about your projects, and recommending relevant work based on an interest.

Another great feature is the ability to simulate a conversation, which can make the portfolio feel more dynamic, engaging, and immersive while also demonstrating how good you are at working with modern tooling.

All of this combined provides you with a practical and approachable way to explore AI agents. This can be a real-world example and a personal project that does not require the implementation of a full-scale business application to see how valuable this type of concept can be.

The website will have the following six pages:

Home – the main webpage
Projects – showcasing some featured projects and technical skills
Career – showing skills, experience, education, and certifications
Services – client services and the engagement process
Research – a way to search the web regarding the tech industry
Contact – a page with a form to contact the user

You can see what your frontend React application will look like below:

First, you have your portfolio homepage:

Next is your Projects page:

Now you have your Career page:

Then you have the Services page:

Then you can see your Research and Insights page:

Lastly, you have your Contact page:

Now, let's begin building your application, starting with the Python Backend.

Building Our Python Backend

For this tutorial I will be using macOS, and the commands should also work on Linux. If you’re a Windows user, most of the commands should work (although there are some differences like activating a Python environment). You can find the correct commands by searching if need be – and you’ll know if your terminal gives you errors when trying to run a command.

Creating An Account On Groq Cloud

As mentioned earlier, we will use Meta’s LLaMA 3 via Groq Cloud, which is ideal. So, first, we have to create an account on Groq Cloud, as shown here.

Once you have created an account on Groq Cloud, go to the API Keys page and create an API Key as shown in this example. I gave mine the name team-ai-agents:

You should have an API Key that looks like this example, so make sure that you save it somewhere safe – we will need it later.

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

Setting Up Our Python Project

Ok, now let's quickly set up our project. Navigate to a location on your computer, like the desktop, and create a folder called ai-agent-app. cd into the project folder and get ready – we’re going to start building our backend using Python.

I recommend installing agno and groq locally in a Python virtual environment. First, use this terminal command to setup a Python virtual environment inside of your ai-agent-app folder:

python3 -m venv venv
source venv/bin/activate
cd venv

Note: depending on your local Python environment, you might need to use either the python or python3 command for running Python commands. In my environment and examples, I use python3, so adjust the command to suit your needs.

The same applies when using either pip or pip3 when installing Python packages. You can check to see which version of Python and pip you have installed with the python --version, python3 --version , pip --version and pip3 --version commands in your terminal window.

The above command should create a venv folder inside of your ai-agent-app folder. This will be your REST backend with all of your API endpoints which your React frontend will use later on in this tutorial. Your Python virtual environment has also been activated.

To activate and deactivate your Python environment, you can use these commands:

# Activate on macOS/Linux
source venv/bin/activate

# Activate on Windows
venv\Scripts\activate

# Deactivate works on all platforms
conda deactivate

At this point, its a good idea to open the project in your code editor. Now you’ll need to install agno and groq using pip alongside a few other packages: flask, requests, and python-dotenv. You need these packages for setting up your server environment, so go ahead and install them all with this command:

pip install agno
pip install groq
pip install flask
pip install flask_cors
pip install requests
pip install python-dotenv

With these Python packages installed, you’re now ready to set up your API for this project. We’ll be using the Python web application framework Flask, along with the CORS package so that we can access the server anywhere. At the same time, we’ll also use the requests module, which allows us to send HTTP requests using Python.

Note that you’ll also need a .env file for your API keys, so make sure you have installed the python-dotenv package in your Python environment, although in some cases, it's installed automatically.

Working On The Python Codebase

Alright, time to make a start on the codebase. But first, let's generate all of the files for your project. You can do this simply by running the run script I created for the project. Run this command in the venv folder:

mkdir agents
touch .env main.py
cd agents
touch __init__.py base_agent.py career_agent.py client_agent.py project_agent.py research_agent.py welcome_agent.py

With this script, you should now have:

Created a .env file for your API Keys
Created an agents folder with all of the files for creating your different AI agents
Created a main.py file, which will be the main project file for your entire backend app

Ok, your files are set. All that’s left is to add the codebase, and the backend is complete. Let's start with the .env file, as it only needs one line of code and that is for your API key. See my example and update it with your own API Key:

GROQ_API_KEY="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"

Your application now has an API key, which gives you access to Groq Cloud. Now let’s start to add the code for all the various AI agents. The first file we’ll work on will be the __init__.py which holds the imports for all of the AI agent files.

Add this code to the file:

from agents.welcome_agent import WelcomeAgent
from agents.project_agent import ProjectAgent
from agents.career_agent import CareerAgent
from agents.client_agent import ClientAgent
from agents.research_agent import ResearchAgent

# Export all agents
__all__ = ['WelcomeAgent', 'ProjectAgent', 'CareerAgent', 'ClientAgent', 'ResearchAgent']

As you can see, all of the classes for the AI agents will be imported and exported from here so you can use them in your main.py file later.

Ok, good. Now, we have 6 AI agent files to work on, beginning with the base_agent.py file.

Make sure that you add this code to the file:

from agno.agent import Agent
from agno.models.groq import Groq
import os


class BaseAgent:
    def __init__(self, name, description, avatar="default_avatar.png"):

        self.name = name
        self.description = description
        self.avatar = avatar
        self.model = Groq(id="llama-3.3-70b-versatile")
        self.agent = Agent(model=self.model, markdown=True)

    def get_response(self, query, stream=False):

        return self.agent.get_response(query, stream=stream)

    def print_response(self, query, stream=True):

        return self.agent.print_response(query, stream=stream)

This class uses the agno framework to create AI agents powered by Groq's LLama 3.3 70B model, which is free to use with some usage restrictions for API calls. This should be fine for your project. It provides the basic structure that other specialised agents in the application can inherit from and extend with domain-specific functionality.

The model we chose is available on the Groq Cloud platform, and we can change it if we want to. Each model has pros and cons, and a cut-off date for how up-to-date it is, so you can expect to get different results. Just keep in mind that using an up to date LLM like OpenAI will provide better results, but you might have to pay for it.

The next file we will work on will be the career_agent.py file.

And this is this code required for it:

from agents.base_agent import BaseAgent


class CareerAgent(BaseAgent):
    def __init__(self):
        super().__init__(
            name="CareerGuide",
            description="I'm the career specialist. I can provide information about skills, experience, and job suitability.",
            avatar="career_avatar.png"
        )

        self.skills = {
            "languages": ["Python", "JavaScript", "TypeScript", "Java", "SQL"],
            "frameworks": ["React", "Vue.js", "Node.js", "Django", "Flask", "Spring Boot"],
            "tools": ["Git", "Docker", "AWS", "Azure", "CI/CD", "Kubernetes"],
            "soft_skills": ["Team leadership", "Project management", "Agile methodologies", "Technical writing", "Client communication"]
        }

        self.experience = [
            {
                "title": "Senior Full Stack Developer",
                "company": "Tech Innovations Inc.",
                "period": "2020-Present",
                "responsibilities": [
                    "Led development of cloud-based SaaS platform",
                    "Managed team of 5 developers",
                    "Implemented CI/CD pipeline reducing deployment time by 40%",
                    "Architected microservices infrastructure"
                ]
            },
            {
                "title": "Full Stack Developer",
                "company": "WebSolutions Co.",
                "period": "2017-2020",
                "responsibilities": [
                    "Developed responsive web applications using React and Node.js",
                    "Implemented RESTful APIs and database schemas",
                    "Collaborated with UX/UI designers to implement user-friendly interfaces",
                    "Participated in code reviews and mentored junior developers"
                ]
            },
            {
                "title": "Junior Developer",
                "company": "StartUp Labs",
                "period": "2015-2017",
                "responsibilities": [
                    "Built and maintained client websites",
                    "Developed custom WordPress plugins",
                    "Implemented responsive designs and cross-browser compatibility",
                    "Assisted in database design and optimization"
                ]
            }
        ]

    def get_skills_summary(self):

        prompt = f"""
        Generate a professional summary of the following skills for a portfolio website:

        Programming Languages: {', '.join(self.skills['languages'])}
        Frameworks & Libraries: {', '.join(self.skills['frameworks'])}
        Tools & Platforms: {', '.join(self.skills['tools'])}
        Soft Skills: {', '.join(self.skills['soft_skills'])}

        Format the response in markdown with appropriate sections and highlights.
        """
        return self.get_response(prompt)

    def get_experience_summary(self):

        experience_text = "# Work Experience\n\n"
        for job in self.experience:
            experience_text += f"## {job['title']} at {job['company']}\n"
            experience_text += f"**{job['period']}**\n\n"
            experience_text += "**Responsibilities:**\n"
            for resp in job['responsibilities']:
                experience_text += f"- {resp}\n"
            experience_text += "\n"

        prompt = f"""
        Based on the following work experience, generate a professional career summary for a portfolio website:

        {experience_text}

        Highlight career progression, key achievements, and growth. Format the response in markdown.
        """
        return self.get_response(prompt)

    def assess_job_fit(self, job_description):

        skills_flat = []
        for skill_category in self.skills.values():
            skills_flat.extend(skill_category)

        experience_flat = []
        for job in self.experience:
            experience_flat.extend(job['responsibilities'])

        prompt = f"""
        Assess the fit for the following job description based on the skills and experience provided:

        Job Description:
        {job_description}

        Skills:
        {', '.join(skills_flat)}

        Experience:
        {' '.join(experience_flat)}

        Provide an analysis of strengths, potential gaps, and overall suitability for the role. Format the response in markdown.
        """
        return self.get_response(prompt)

This agent is designed to help users with career-related tasks such as:

Creating professional summaries of technical and soft skills
Generating career narratives based on work experience
Evaluating job fit by comparing skills and experience against job descriptions

The agent uses the LLM capabilities of the base agent (using Groq's LLama 3.3 70B model) to generate natural language responses that are formatted in markdown, making them suitable for inclusion in portfolio websites, résumés, or job applications. This file has sample career data, and in a real implementation, this would come from a database

Ok time for the next AI agent – this time it’s client_agent.py, which receives this code:

from agents.base_agent import BaseAgent


class ClientAgent(BaseAgent):
    def __init__(self):
        super().__init__(
            name="BusinessAdvisor",
            description="I'm the client specialist. I can provide information about services, pricing, and project details.",
            avatar="client_avatar.png"
        )

        self.services = {
            "web_development": {
                "name": "Web Development",
                "description": "Custom web application development using modern frameworks and best practices.",
                "pricing_model": "Project-based or hourly",
                "price_range": "$5,000 - $50,000 depending on complexity",
                "timeline": "4-12 weeks depending on scope",
                "technologies": ["React", "Vue.js", "Node.js", "Django", "Flask"]
            },
            "mobile_development": {
                "name": "Mobile App Development",
                "description": "Native and cross-platform mobile application development for iOS and Android.",
                "pricing_model": "Project-based",
                "price_range": "$8,000 - $60,000 depending on complexity",
                "timeline": "6-16 weeks depending on scope",
                "technologies": ["React Native", "Flutter", "Swift", "Kotlin"]
            },
            "consulting": {
                "name": "Technical Consulting",
                "description": "Expert advice on architecture, technology stack, and development practices.",
                "pricing_model": "Hourly",
                "price_range": "$150 - $250 per hour",
                "timeline": "Ongoing or as needed",
                "technologies": ["Various based on client needs"]
            }
        }

        self.process = [
            "Initial consultation to understand requirements",
            "Proposal and quote preparation",
            "Contract signing and project kickoff",
            "Design and prototyping phase",
            "Development sprints with regular client feedback",
            "Testing and quality assurance",
            "Deployment and launch",
            "Post-launch support and maintenance"
        ]

    def get_services_overview(self):

        services_text = "# Services Offered\n\n"
        for service_id, service in self.services.items():
            services_text += f"## {service['name']}\n"
            services_text += f"{service['description']}\n\n"
            services_text += f"**Pricing Model**: {service['pricing_model']}\n"
            services_text += f"**Price Range**: {service['price_range']}\n"
            services_text += f"**Timeline**: {service['timeline']}\n"
            services_text += f"**Technologies**: {', '.join(service['technologies'])}\n\n"

        prompt = f"""
        Generate a professional overview of the following services for a programmer's portfolio website:

        {services_text}

        Format the response in markdown with appropriate sections and highlights.
        """
        return self.get_response(prompt)

    def get_service_details(self, service_id):

        if service_id in self.services:
            service = self.services[service_id]
            prompt = f"""
            Generate a detailed description for the following service:

            Service Name: {service['name']}
            Description: {service['description']}
            Pricing Model: {service['pricing_model']}
            Price Range: {service['price_range']}
            Timeline: {service['timeline']}
            Technologies: {', '.join(service['technologies'])}

            Include information about the value proposition, typical deliverables, and client benefits. Format the response in markdown.
            """
            return self.get_response(prompt)
        else:
            return "Service not found. Please check the service ID and try again."

    def explain_process(self):

        process_text = "# Client Engagement Process\n\n"
        for i, step in enumerate(self.process, 1):
            process_text += f"## Step {i}: {step}\n\n"

        prompt = f"""
        Based on the following client engagement process, generate a detailed explanation for potential clients:

        {process_text}

        For each step, provide a brief explanation of what happens, what the client can expect, and any deliverables. Format the response in markdown.
        """
        return self.get_response(prompt)

    def generate_proposal(self, project_description):

        prompt = f"""
        Generate a professional project proposal based on the following client requirements:

        Project Description:
        {project_description}

        Include the following sections:
        1. Project Understanding
        2. Proposed Approach
        3. Estimated Timeline
        4. Estimated Budget Range
        5. Next Steps

        Base your proposal on the services and processes described in the portfolio. Format the response in markdown.
        """
        return self.get_response(prompt)

This agent is designed to help users with client and business-related tasks such as:

Providing overviews of available services for marketing materials
Generating detailed service descriptions for specific offerings
Explaining the client engagement process to potential clients
Creating customised project proposals based on client requirements

The agent also uses the LLM capabilities of the base agent (using Groq's LLama 3.3 70B model) to generate professional, business-oriented content formatted in markdown. Like before, this file also has sample service data.

Now we can start to work on the project_agent.py file and add this code to its codebase:

from agents.base_agent import BaseAgent


class ProjectAgent(BaseAgent):
    def __init__(self):
        super().__init__(
            name="TechExpert",
            description="I'm the project specialist. I can provide detailed information about any project in this portfolio.",
            avatar="project_avatar.png"
        )

        self.projects = {
            "project1": {
                "name": "E-commerce Platform",
                "tech_stack": ["React", "Node.js", "MongoDB", "Express"],
                "description": "A full-stack e-commerce platform with user authentication, product catalog, shopping cart, and payment processing.",
                "highlights": ["Responsive design", "RESTful API", "Stripe integration", "JWT authentication"],
                "github_link": "https://github.com/username/ecommerce-platform",
                "demo_link": "https://ecommerce-demo.example.com"
            },
            "project2": {
                "name": "Task Management App",
                "tech_stack": ["Vue.js", "Firebase", "Tailwind CSS"],
                "description": "A real-time task management application with collaborative features, notifications, and progress tracking.",
                "highlights": ["Real-time updates", "User collaboration", "Drag-and-drop interface", "Progressive Web App"],
                "github_link": "https://github.com/username/task-manager",
                "demo_link": "https://taskmanager-demo.example.com"
            },
            "project3": {
                "name": "Data Visualization Dashboard",
                "tech_stack": ["Python", "Django", "D3.js", "PostgreSQL"],
                "description": "An interactive dashboard for visualizing complex datasets with filtering, sorting, and export capabilities.",
                "highlights": ["Interactive charts", "Data filtering", "CSV/PDF export", "Responsive design"],
                "github_link": "https://github.com/username/data-dashboard",
                "demo_link": "https://dataviz-demo.example.com"
            }
        }

    def get_project_list(self):

        project_list = "# Available Projects\n\n"
        for project_id, project in self.projects.items():
            project_list += f"## {project['name']}\n"
            project_list += f"**Tech Stack**: {', '.join(project['tech_stack'])}\n"
            project_list += f"{project['description']}\n\n"

        return project_list

    def get_project_details(self, project_id):

        if project_id in self.projects:
            project = self.projects[project_id]
            prompt = f"""
            Generate a detailed description for the following project:

            Project Name: {project['name']}
            Tech Stack: {', '.join(project['tech_stack'])}
            Description: {project['description']}
            Highlights: {', '.join(project['highlights'])}
            GitHub: {project['github_link']}
            Demo: {project['demo_link']}

            Include technical details about implementation challenges and solutions. Format the response in markdown.
            """
            return self.get_response(prompt)
        else:
            return "Project not found. Please check the project ID and try again."

    def answer_technical_question(self, project_id, question):

        if project_id in self.projects:
            project = self.projects[project_id]
            prompt = f"""
            Answer the following technical question about this project:

            Project Name: {project['name']}
            Tech Stack: {', '.join(project['tech_stack'])}
            Description: {project['description']}
            Highlights: {', '.join(project['highlights'])}

            Question: {question}

            Provide a detailed technical answer with code examples if relevant.
            """
            return self.get_response(prompt)
        else:
            return "Project not found. Please check the project ID and try again."

This agent is designed to help users with project-related tasks such as:

Providing an overview of all projects in a portfolio
Generating detailed descriptions of specific projects
Answering technical questions about implementation details

The agent, like in the previous examples, uses the LLM capabilities of the base agent (using Groq's LLama 3.3 70B model) to generate technical, project-oriented content formatted in markdown. This is good for technical documentation, or when responding to inquiries about project implementations. We’re using mock data here as opposed to a database.

With that file completed, we have two left. The next is the research_agent.py file, so go ahead and add this code:

from agents.base_agent import BaseAgent
import requests
import os
import json


class ResearchAgent(BaseAgent):
    def __init__(self):
        super().__init__(
            name="ResearchAssistant",
            description="I'm the research specialist. I can search the web for information about technologies, trends, and industry news.",
            avatar="research_avatar.png"
        )
        self.api_key = os.getenv("GROQ_API_KEY")

    def search_web(self, query):

        headers = {
            "Authorization": f"Bearer {self.api_key}",
            "Content-Type": "application/json"
        }

        payload = {
            "model": "llama-3.3-70b-versatile",
            "messages": [
                {"role": "system", "content": "You are a helpful research assistant."},
                {"role": "user", "content": f"Search the web for: {query}"}
            ],
            "tools": [
                {
                    "type": "web_search"
                }
            ]
        }

        try:
            response = requests.post(
                "https://api.groq.com/openai/v1/chat/completions",
                headers=headers,
                json=payload
            )

            if response.status_code == 200:
                result = response.json()
                return result["choices"][0]["message"]["content"]
            else:
                return f"Error searching the web: {response.status_code} - {response.text}"
        except Exception as e:
            return f"Error searching the web: {str(e)}"

    def research_technology(self, technology):

        query = f"latest developments and best practices for {technology} in software development"
        search_results = self.search_web(query)

        prompt = f"""
        Based on the following search results about {technology}, provide a concise summary of:
        1. What it is
        2. Current state and popularity
        3. Key features and benefits
        4. Common use cases
        5. Future trends

        Search Results:
        {search_results}

        Format the response in markdown with appropriate sections.
        """
        return self.get_response(prompt)

    def compare_technologies(self, tech1, tech2):

        query = f"comparison between {tech1} and {tech2} for software development"
        search_results = self.search_web(query)

        prompt = f"""
        Based on the following search results comparing {tech1} and {tech2}, provide a detailed comparison including:
        6. Core differences
        7. Performance considerations
        8. Learning curve
        9. Community support
        10. Use case recommendations

        Search Results:
        {search_results}

        Format the response in markdown with a comparison table and explanatory text.
        """
        return self.get_response(prompt)

    def get_industry_trends(self):

        query = "latest trends in software development industry"
        search_results = self.search_web(query)

        prompt = f"""
        Based on the following search results about software development trends, provide a summary of:
        11. Emerging technologies
        12. Industry shifts
        13. In-demand skills
        14. Future predictions

        Search Results:
        {search_results}

        Format the response in markdown with appropriate sections and highlights.
        """
        return self.get_response(prompt)

This agent is designed to help users with research-related tasks such as:

Researching specific technologies to understand their features, benefits, and use cases
Comparing different technologies to make informed decisions
Staying updated on industry trends and emerging technologies

What makes this agent unique compared to the other agents is that it actively fetches real-time information from the web using the Groq Toolhouse API's web search capability instead of relying solely on pre-defined data or the LLM's training data. This allows it to provide more current and comprehensive information about rapidly evolving technology topics.

Ok, now we have one last AI agent to create and it’s the welcome_agent.py file. Add this code to the file:

from agents.base_agent import BaseAgent


class WelcomeAgent(BaseAgent):
    def __init__(self):
        super().__init__(
            name="Greeter",
            description="I'm the welcome agent for this portfolio. I can help guide you to the right section based on your interests.",
            avatar="welcome_avatar.png"
        )

    def greet(self, visitor_type=None):

        if visitor_type == "employer":
            return self.get_response(
                "Generate a friendly, professional greeting for a potential employer visiting a programmer's portfolio website. "
                "Mention that they can explore the Projects section to see technical skills and the Career section for professional experience."
            )
        elif visitor_type == "client":
            return self.get_response(
                "Generate a friendly, business-oriented greeting for a potential client visiting a programmer's portfolio website. "
                "Mention that they can check out the Projects section for examples of past work and the Client section for service details."
            )
        elif visitor_type == "fellow_programmer":
            return self.get_response(
                "Generate a friendly, casual greeting for a fellow programmer visiting a portfolio website. "
                "Mention that they can explore the Projects section for technical details and code samples."
            )
        else:
            return self.get_response(
                "Generate a friendly, general greeting for a visitor to a programmer's portfolio website. "
                "Ask if they are an employer, client, or fellow programmer to provide more tailored information."
            )

    def suggest_section(self, interest):

        prompt = f"Based on a visitor expressing interest in '{interest}', suggest which section of a programmer's portfolio they should visit. Options include: Projects, Career, Client Work, About Me, Contact. Explain why in 1-2 sentences."
        return self.get_response(prompt)

This agent is designed to serve as the initial point of contact for visitors to a portfolio website, providing:

Personalised greetings based on visitor type
Guidance to relevant sections based on specific interests
A friendly, conversational introduction to the portfolio

The WelcomeAgent is simpler than some of the other agents we've looked at because it focuses on creating a positive first impression and helping visitors navigate to the content most relevant to their needs. It uses the LLM capabilities of the base agent to generate natural, contextually appropriate responses.

Ok good – your backend API is almost ready. You just have one last file to work on: the main.py file that completes your codebase. This file is quite big, so I will split it into three parts. You’ll need to copy and paste each section into the file. If you have not done so already, its worth installing the Python extension for VS Code as this has debugging, linting, and formatting for Python files.

Alright, here is the first part of the codebase for our main.py file:

from flask import Flask, request, jsonify
import os
from dotenv import load_dotenv
import json
import requests
from flask_cors import CORS


load_dotenv()


app = Flask(__name__)
CORS(app)


class BaseAgent:
    def __init__(self, name, description):
        self.name = name
        self.description = description

        self.api_key = os.getenv("GROQ_API_KEY")

    def get_response(self, prompt):

        try:
            headers = {
                "Authorization": f"Bearer {self.api_key}",
                "Content-Type": "application/json"
            }

            data = {
                "model": "llama3-8b-8192",
                "messages": [
                    {"role": "system", "content": f"You are {self.name}, {self.description}. Respond in a helpful, concise, and professional manner."},
                    {"role": "user", "content": prompt}
                ],
                "temperature": 0.7,
                "max_tokens": 500
            }

            response = requests.post(
                "https://api.groq.com/openai/v1/chat/completions",
                headers=headers,
                json=data
            )

            if response.status_code == 200:
                return response.json()["choices"][0]["message"]["content"]
            else:
                return f"Error: {response.status_code} - {response.text}"
        except Exception as e:
            return f"An error occurred: {str(e)}"


class WelcomeAgent(BaseAgent):
    def __init__(self):
        super().__init__(
            "WelcomeAgent",
            "a welcome specialist who greets visitors and helps them navigate the portfolio website"
        )

    def greet(self, visitor_type=None):
        if visitor_type == "employer":
            return self.get_response("Generate a warm welcome message for an employer visiting a programmer's portfolio website. Suggest they check out the Projects and Career sections.")
        elif visitor_type == "client":
            return self.get_response("Generate a warm welcome message for a potential client visiting a programmer's portfolio website. Suggest they check out the Services section.")
        elif visitor_type == "fellow_programmer":
            return self.get_response("Generate a warm welcome message for a fellow programmer visiting a programmer's portfolio website. Suggest they check out the Projects and Research sections.")
        else:
            return self.get_response("Generate a general welcome message for a visitor to a programmer's portfolio website. Ask if they are an employer, client, or fellow programmer.")

    def suggest_section(self, interest):
        return self.get_response(f"A visitor to my portfolio website has expressed interest in {interest}. Suggest which section(s) of the website they should visit based on this interest.")


class ProjectAgent(BaseAgent):
    def __init__(self):
        super().__init__(
            "ProjectAgent",
            "a project specialist who provides detailed information about the programmer's projects"
        )

    def get_project_list(self):
        return self.get_response("Generate a list of 3-5 impressive software development projects that could be in a programmer's portfolio. Include a brief description for each.")

    def get_project_details(self, project_id):
        project_prompts = {
            "project1": "Describe in detail an e-commerce platform project for a programmer's portfolio. Include technologies used, challenges overcome, and key features.",
            "project2": "Describe in detail a task management application project for a programmer's portfolio. Include technologies used, challenges overcome, and key features.",
            "project3": "Describe in detail a data visualization dashboard project for a programmer's portfolio. Include technologies used, challenges overcome, and key features."
        }

        prompt = project_prompts.get(
            project_id, f"Describe a project called {project_id} in detail.")
        return self.get_response(prompt)

    def answer_technical_question(self, project_id, question):
        return self.get_response(f"Answer this technical question about a project: '{question}'. The project is {project_id}.")

This part of the code has your imports, set up, and some greetings for the AI agent.

Now for part two, add this code to the file underneath the first code you added:


class CareerAgent(BaseAgent):
    def __init__(self):
        super().__init__(
            "CareerAgent",
            "a career specialist who provides information about the programmer's skills and experience"
        )

    def get_skills_summary(self):
        return self.get_response("Generate a comprehensive summary of technical and professional skills for a full-stack developer's portfolio.")

    def get_experience_summary(self):
        return self.get_response("Generate a summary of work experience for a full-stack developer with 5+ years of experience.")

    def assess_job_fit(self, job_description):
        return self.get_response(f"Assess how well a full-stack developer with 5+ years of experience would fit this job description: '{job_description}'. Highlight matching skills and experience.")


class ClientAgent(BaseAgent):
    def __init__(self):
        super().__init__(
            "ClientAgent",
            "a client specialist who provides information about services, pricing, and the client engagement process"
        )

    def get_services_overview(self):
        return self.get_response("Generate an overview of services that a freelance full-stack developer might offer to clients.")

    def get_service_details(self, service_type):
        service_prompts = {
            "web_development": "Describe web development services offered by a freelance full-stack developer, including technologies, pricing range, and typical timeline.",
            "mobile_development": "Describe mobile app development services offered by a freelance full-stack developer, including technologies, pricing range, and typical timeline.",
            "consulting": "Describe technical consulting services offered by a freelance full-stack developer, including areas of expertise, hourly rate range, and engagement model."
        }

        prompt = service_prompts.get(
            service_type, f"Describe {service_type} services in detail.")
        return self.get_response(prompt)

    def explain_process(self):
        return self.get_response("Explain the client engagement process for a freelance full-stack developer, from initial consultation to project delivery.")

    def generate_proposal(self, project_description):
        return self.get_response(f"Generate a project proposal for this client request: '{project_description}'. Include estimated timeline, cost range, and approach.")


class ResearchAgent(BaseAgent):
    def __init__(self):
        super().__init__(
            "ResearchAgent",
            "a research specialist who provides information about technologies, trends, and industry news"
        )

    def search_web(self, query):
        return self.get_response(f"Provide information about '{query}' as if you've just searched the web for the latest information. Include key points and insights.")

    def compare_technologies(self, tech1, tech2):
        return self.get_response(f"Compare {tech1} vs {tech2} in terms of features, performance, use cases, community support, and future prospects.")

    def get_industry_trends(self):
        return self.get_response("Describe current trends in software development and technology that are important for developers to be aware of.")


welcome_agent = WelcomeAgent()
project_agent = ProjectAgent()
career_agent = CareerAgent()
client_agent = ClientAgent()
research_agent = ResearchAgent()


@app.route('/static/images/default_avatar.png')
@app.route('/static/images/default_project.jpg')
def block_default_images():

    response = app.make_response(
        b'GIF89a\x01\x00\x01\x00\x80\x00\x00\xff\xff\xff\x00\x00\x00!\xf9\x04\x01\x00\x00\x00\x00,\x00\x00\x00\x00\x01\x00\x01\x00\x00\x02\x02D\x01\x00;')
    response.headers['Content-Type'] = 'image/gif'

    response.headers['Cache-Control'] = 'public, max-age=31536000'
    response.headers['Expires'] = 'Thu, 31 Dec 2037 23:59:59 GMT'
    return response


@app.route('/api/welcome', methods=['POST'])
def welcome_agent_endpoint():
    data = request.json
    message = data.get('message', '')

    visitor_type = None
    if 'employer' in message.lower():
        visitor_type = 'employer'
    elif 'client' in message.lower():
        visitor_type = 'client'
    elif 'programmer' in message.lower() or 'developer' in message.lower():
        visitor_type = 'fellow_programmer'

    if 'interest' in message.lower() or 'looking for' in message.lower():

        interest = message.replace('interest', '').replace(
            'looking for', '').strip()
        response = welcome_agent.suggest_section(interest)
    else:
        response = welcome_agent.greet(visitor_type)

    return jsonify({'response': response})

In this part of your codebase, you have more AI responses and a welcome API route.

Lastly, complete the code by adding this final piece at the end:


@app.route('/api/project', methods=['POST'])
def project_agent_endpoint():
    data = request.json
    message = data.get('message', '')

    project_id = None
    if 'e-commerce' in message.lower() or 'ecommerce' in message.lower():
        project_id = 'project1'
    elif 'task' in message.lower() or 'management' in message.lower():
        project_id = 'project2'
    elif 'data' in message.lower() or 'visualization' in message.lower() or 'dashboard' in message.lower():
        project_id = 'project3'

    if project_id and ('tell me more' in message.lower() or 'details' in message.lower()):
        response = project_agent.get_project_details(project_id)
    elif 'list' in message.lower() or 'all projects' in message.lower():
        response = project_agent.get_project_list()
    elif project_id:

        response = project_agent.answer_technical_question(project_id, message)
    else:

        response = project_agent.get_response(
            f"The user asked: '{message}'. Respond as if you are a project specialist for a portfolio website. "
            "If they're asking about a specific project, suggest they mention one of the projects: "
            "E-commerce Platform, Task Management App, or Data Visualization Dashboard."
        )

    return jsonify({'response': response})


@app.route('/api/career', methods=['POST'])
def career_agent_endpoint():
    data = request.json
    message = data.get('message', '')

    if 'skills' in message.lower():
        response = career_agent.get_skills_summary()
    elif 'experience' in message.lower() or 'work history' in message.lower():
        response = career_agent.get_experience_summary()
    elif 'job' in message.lower() or 'position' in message.lower() or 'role' in message.lower():

        response = career_agent.assess_job_fit(message)
    else:

        response = career_agent.get_response(
            f"The user asked: '{message}'. Respond as if you are a career specialist for a portfolio website. "
            "Suggest they ask about skills, experience, or job fit assessment."
        )

    return jsonify({'response': response})


@app.route('/api/client', methods=['POST'])
def client_agent_endpoint():
    data = request.json
    message = data.get('message', '')

    if 'services' in message.lower() or 'offerings' in message.lower():
        response = client_agent.get_services_overview()
    elif 'web' in message.lower() and 'development' in message.lower():
        response = client_agent.get_service_details('web_development')
    elif 'mobile' in message.lower() and 'development' in message.lower():
        response = client_agent.get_service_details('mobile_development')
    elif 'consulting' in message.lower() or 'technical consulting' in message.lower():
        response = client_agent.get_service_details('consulting')
    elif 'process' in message.lower() or 'how does it work' in message.lower():
        response = client_agent.explain_process()
    elif 'proposal' in message.lower() or 'quote' in message.lower() or 'estimate' in message.lower():

        response = client_agent.generate_proposal(message)
    else:

        response = client_agent.get_response(
            f"The user asked: '{message}'. Respond as if you are a client specialist for a portfolio website. "
            "Suggest they ask about services, the client engagement process, or request a proposal."
        )

    return jsonify({'response': response})


@app.route('/api/research', methods=['POST'])
def research_agent_endpoint():
    data = request.json
    message = data.get('message', '')

    if 'compare' in message.lower() and ('vs' in message.lower() or 'versus' in message.lower()):

        tech_parts = message.lower().replace('compare', '').replace(
            'vs', ' ').replace('versus', ' ').split()
        tech1 = tech_parts[0] if len(tech_parts) > 0 else ''
        tech2 = tech_parts[-1] if len(tech_parts) > 1 else ''
        response = research_agent.compare_technologies(tech1, tech2)
    elif 'trends' in message.lower() or 'industry' in message.lower():
        response = research_agent.get_industry_trends()
    else:
        response = research_agent.search_web(message)

    return jsonify({'response': response})


if __name__ == '__main__':

    app.config['SEND_FILE_MAX_AGE_DEFAULT'] = 0
    app.config['TEMPLATES_AUTO_RELOAD'] = True   # Ensure templates reload

    @app.after_request
    def add_header(response):
        response.headers['Cache-Control'] = 'no-store, no-cache, must-revalidate, max-age=0'
        response.headers['Pragma'] = 'no-cache'
        response.headers['Expires'] = '0'
        return response

    app.run(host='0.0.0.0', port=5001, debug=True,
            use_reloader=False, threaded=True)

Okay, if your file has errors, they're probably caused by the Python indentation. Hopefully, the formatting will not make them too difficult to fix.

The file is now complete, and you’ve created the rest of your AI API routes.

Running Our Python Backend

All that's left is to run your Flask server and get the backend up and running. You can do that with this run script inside the venv folder:

python3 main.py

Your backend should now be running on http://127.0.0.1:5001/. If you go to the page you will see an error like this:

Not Found

The requested URL was not found on the server. If you entered the URL manually please check your spelling and try again.

This is expected, because if you have checked the codebase, you’ll realise that there are no GET routes, only POST routes. To see them working, you need to use an HTTP client like Postman. Another option is to create some curl commands that send a POST request, which you can run from your terminal. Let's use curl because there is less setup. You’ll need to copy and paste the commands.

Each POST request will use exactly one API call on Groq Cloud for your API Key which you can view here https://console.groq.com/keys. Remember that it’s free to use but there are usage limits which you can read about in their documentation on Rate Limits.

I have provided some sample curl commands below – just copy and paste them into your terminal and hit enter, and you should see the response message:

1. Testing the Welcome Agent Endpoint

curl -X POST http://localhost:5001/api/welcome \
  -H "Content-Type: application/json" \
  -d '{"message": "I am an employer looking for a skilled developer"}'

2. Testing the Project Agent Endpoint

curl -X POST http://localhost:5001/api/project \
  -H "Content-Type: application/json" \
  -d '{"message": "Tell me more about the e-commerce project"}'

3. Testing the Career Agent Endpoint

curl -X POST http://localhost:5001/api/career \
  -H "Content-Type: application/json" \
  -d '{"message": "What skills do you have?"}'

4. Testing the Client Agent Endpoint

curl -X POST http://localhost:5001/api/client \
  -H "Content-Type: application/json" \
  -d '{"message": "What services do you offer?"}'

5. Testing the Research Agent Endpoint

curl -X POST http://localhost:5001/api/research \
  -H "Content-Type: application/json" \
  -d '{"message": "What are the current trends in web development?"}'

Building Our React Frontend

We have reached halfway point, and all that's left is to build your front end. We’ll build the front end using Vite, and the website will have six pages. Make sure that you are now inside the root folder for the ai-agent-app project. You can leave the Python server running because your front end is going to connect to the API routes you created.

Now, run the commands below to setup your React project using Vite, Tailwind CSS, react-router and Axios, which we need for page routing and fetch requests:

npm create vite@latest frontend -- --template react
cd frontend
npm install -D tailwindcss@3 postcss autoprefixer react-router axios
npx tailwindcss init -p
npm install

Great, now with those packages installed and our dependencies set up, we are almost ready to start on the codebase. But before that, we need to run one more script, which is going to create all of the files and folders for our project. It's much faster than doing them all manually.

Run this command inside the frontend folder:

mkdir -p src/components src/pages
touch src/style.css src/components/{Chat,Footer,Layout,Navbar}.jsx
touch src/pages/{Career,Contact,Home,Projects,Research,Services}.jsx

Our React frontend should now have a project structure like the example shown below:

We are now ready to start writing some code.

Up first is the tailwind.config.js file. This is the only configuration file you’ll need to work on, as the others already have the configuration we need. Replace all of the code in the file with the code below:

/** @type {import('tailwindcss').Config} */
export default {
  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [],
};

All this code does is add the paths to all of your template files.

Ok, next, you are going to work on your styles and Tailwind CSS. There are three CSS files to work on: App.css, index.css, and style.css.

First up is the App.css file. Replace all of the code with this code here:

#root {
  max-width: 100%;
  margin: 0;
  padding: 0;
  text-align: left;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1;
}

We just have some basic layout styles here for root and main.

Next is the index.css file. Below is the code you’ll need, so replace everything in the file with it:

@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@layer components {
  .chat-container {
    @apply w-full h-96 flex flex-col;
  }

  .chat-messages {
    @apply flex-1 overflow-y-auto p-4;
  }

  .message {
    @apply flex mb-4;
  }

  .user-message {
    @apply justify-end;
  }

  .agent-message {
    @apply justify-start;
  }

  .message-avatar {
    @apply flex-shrink-0 mr-2;
  }

  .avatar-placeholder {
    @apply w-10 h-10 rounded-full bg-blue-500 text-white flex items-center justify-center font-bold;
  }

  .message-content {
    @apply p-3 rounded-lg max-w-xs sm:max-w-sm md:max-w-md;
  }

  .user-message .message-content {
    @apply bg-blue-500 text-white;
  }

  .agent-message .message-content {
    @apply bg-gray-200 text-gray-800;
  }

  .chat-input-container {
    @apply p-4 border-t border-gray-200;
  }

  .chat-input-group {
    @apply flex;
  }

  .chat-input {
    @apply flex-1 border border-gray-300 rounded-l-lg p-2 focus:outline-none focus:ring-2 focus:ring-blue-500;
  }

  .chat-send-button {
    @apply bg-blue-500 text-white px-4 py-2 rounded-r-lg hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500;
  }

  .loading-dots:after {
    @apply content-['...'] animate-pulse;
  }

  .project-image-placeholder {
    @apply h-48 bg-gray-300 flex items-center justify-center text-gray-600 font-semibold;
  }

  .agent-avatar-placeholder {
    @apply w-16 h-16 rounded-full bg-blue-500 text-white flex items-center justify-center font-bold mx-auto;
  }
}

All of these styles relate to your Tailwind CSS setup throughout your project.

Just one file remains for the CSS and it’s the style.css file. This is a big file, so I will split the code into two parts – just copy and paste them into the file.

Here is the first part:

/* Main Styles */
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
    Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  color: #333;
  background-color: #f8f9fa;
}

/* Layout Styles */
#root {
  max-width: 100%;
  margin: 0;
  padding: 0;
  text-align: left;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 600;
}

footer {
  margin-top: auto;
}

/* Navbar Styles */
.navbar {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.navbar-brand {
  font-weight: 700;
}

.navbar .container {
  max-width: 1320px;
}

/* Card Styles */
.card {
  border: none;
  border-radius: 0.5rem;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  margin-bottom: 1rem;
  padding: 2em;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

/* Agent Styles */
.agent-avatar-placeholder {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: #6c757d;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: bold;
  margin: 0 auto;
  border: 3px solid #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.avatar-placeholder {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #6c757d;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: bold;
}

/* Chat Container Styles */
.chat-container {
  display: flex;
  flex-direction: column;
  height: 400px;
  border: 1px solid #dee2e6;
  border-radius: 0.25rem;
  overflow: hidden;
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
  background-color: #f8f9fa;
}

And here is the second part:

.chat-input-container {
  padding: 0.5rem;
  background-color: #fff;
  border-top: 1px solid #dee2e6;
}

.chat-input-group {
  display: flex;
}

.chat-input {
  flex: 1;
  margin-right: 0.5rem;
  border: 1px solid #dee2e6;
  border-radius: 0.25rem;
  padding: 0.5rem;
}

.chat-send-button {
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 0.25rem;
  padding: 0.5rem 1rem;
  cursor: pointer;
}

.chat-send-button:hover {
  background-color: #0069d9;
}

/* Message Styles */
.message {
  margin-bottom: 1rem;
  max-width: 80%;
}

.user-message {
  margin-left: auto;
  text-align: right;
}

.agent-message {
  display: flex;
  align-items: flex-start;
}

.message-avatar {
  margin-right: 0.5rem;
}

.message-content {
  background-color: #fff;
  padding: 0.75rem;
  border-radius: 0.5rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.user-message .message-content {
  background-color: #007bff;
  color: #fff;
}

.agent-message .message-content {
  background-color: #fff;
}

/* Loading Animation */
.loading-dots:after {
  content: '.';
  animation: dots 1.5s steps(5, end) infinite;
}

@keyframes dots {
  0%,
  20% {
    content: '.';
  }
  40% {
    content: '..';
  }
  60% {
    content: '...';
  }
  80%,
  100% {
    content: '';
  }
}

This code has the main styles for the layout of the website’s content. That takes care of the styling. We just have the components and pages left, and then you can run your app. Before we start on those folders, let’s quickly do the App.jsx and main.jsx files in the src folder.

So, add this code to the App.jsx file:

import { BrowserRouter as Router, Routes, Route } from 'react-router';
import Layout from './components/Layout';
import Home from './pages/Home';
import Projects from './pages/Projects';
import Career from './pages/Career';
import Services from './pages/Services';
import Research from './pages/Research';
import Contact from './pages/Contact';
import './App.css';

function App() {
  return (
    <Router>
      <Layout>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/projects" element={<Projects />} />
          <Route path="/career" element={<Career />} />
          <Route path="/services" element={<Services />} />
          <Route path="/research" element={<Research />} />
          <Route path="/contact" element={<Contact />} />
        Routes>
      Layout>
    Router>
  );
}

export default App;

In this file, you have all of your routes. This is how you’ll navigate between pages using BrowserRouter.

Finally, replace and update all of the code inside of main.jsx with this:

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import './index.css';
import './style.css';
import App from './App.jsx';

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <App />
  StrictMode>
);

The only update we did here was add an import for import './style.css' so now you can access the styles from this file across your application.

Time to work on your component files, starting with the Chat.jsx file. I split the codebase because it’s a big file, so make sure you add it all together.

Like before, here is the first part:

import { useState, useEffect, useRef, useCallback } from "react";
import axios from "axios";

function Chat({ agentType, initialMessage, agentInitials, directQuestion }) {
  const [messages, setMessages] = useState([]);
  const [input, setInput] = useState("");
  const [isLoading, setIsLoading] = useState(false);
  const messagesEndRef = useRef(null);
  const [processedQuestions, setProcessedQuestions] = useState([]);

  const API_BASE_URL = "http://127.0.0.1:5001";

  const scrollToBottom = () => {
    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
  };

  const handleSendMessage = useCallback(
    async (questionOverride = null) => {
      const messageToSend = questionOverride || input;

      if (!messageToSend.trim()) return;

      const userMessage = {
        content: messageToSend,
        isUser: true,
      };

      setMessages((prev) => [...prev, userMessage]);

      if (!questionOverride) {
        setInput("");
      }

      setIsLoading(true);

      try {
        const response = await axios.post(
          `${API_BASE_URL}/api/${agentType}`,
          {
            message: messageToSend,
          },
          {
            headers: {
              "Content-Type": "application/json",
              "Access-Control-Allow-Origin": "*",
            },
          }
        );

        if (response.data && response.data.response) {
          setMessages((prev) => [
            ...prev,
            {
              content: response.data.response,
              isUser: false,
            },
          ]);
        }
      } catch (error) {
        console.error("Error sending message:", error);
        setMessages((prev) => [
          ...prev,
          {
            content:
              "Sorry, there was an error connecting to the AI agent. Please make sure the Flask server is running at http://127.0.0.1:5001/",
            isUser: false,
          },
        ]);
      } finally {
        setIsLoading(false);
      }
    },
    [input, agentType, API_BASE_URL]
  );

  const handleKeyPress = (e) => {
    if (e.key === "Enter") {
      handleSendMessage();
    }
  };

  const cleanQuestion = (question) => {
    return question.replace(/\s*\[\d+\]\s*$/, "");
  };

  useEffect(() => {
    if (initialMessage) {
      setMessages([
        {
          content: initialMessage,
          isUser: false,
        },
      ]);
    }
  }, [initialMessage]);

  useEffect(() => {
    scrollToBottom();
  }, [messages]);

The first part of this code has your imports, base URL to connect to the backend, and the functions.

Now let’s add the second part of the codebase:

  useEffect(() => {
    if (
      directQuestion &&
      directQuestion.trim() !== "" &&
      !processedQuestions.includes(directQuestion)
    ) {
      const cleanedQuestion = cleanQuestion(directQuestion);
      setInput(cleanedQuestion);
      handleSendMessage(cleanedQuestion);
      setProcessedQuestions((prev) => [...prev, directQuestion]);
    }
  }, [directQuestion, processedQuestions, handleSendMessage]);

  const renderContent = (content) => {
    let formattedContent = content;

    formattedContent = formattedContent.replace(
      /#{6}\s+(.*?)(?=\n|$)/g,
      "$1
"
    );
    formattedContent = formattedContent.replace(
      /#{5}\s+(.*?)(?=\n|$)/g,
      "$1
"
    );
    formattedContent = formattedContent.replace(
      /#{4}\s+(.*?)(?=\n|$)/g,
      "$1
"
    );
    formattedContent = formattedContent.replace(
      /#{3}\s+(.*?)(?=\n|$)/g,
      "$1
"
    );
    formattedContent = formattedContent.replace(
      /#{2}\s+(.*?)(?=\n|$)/g,
      "$1
"
    );
    formattedContent = formattedContent.replace(
      /#{1}\s+(.*?)(?=\n|$)/g,
      "$1
"
    );

    formattedContent = formattedContent.replace(
      /\*\*(.*?)\*\*/g,
      "$1"
    );

    formattedContent = formattedContent.replace(/\*(.*?)\*/g, "$1");

    formattedContent = formattedContent.replace(/`(.*?)`/g, "$1");

    formattedContent = formattedContent.replace(
      /\[(.*?)\]\((.*?)\)/g,
      '$1'
    );

    formattedContent = formattedContent.replace(
      /^\s*\*\s+(.*?)(?=\n|$)/gm,
      "$1
"
    );
    formattedContent = formattedContent.replace(
      /(.*?)<\/li>(?:\s*
.*?<\/li>)*/g,
      "$&
"
    );

    formattedContent = formattedContent.replace(
      /^\s*\d+\.\s+(.*?)(?=\n|$)/gm,
      "
$1
"
    );
    formattedContent = formattedContent.replace(
      /(.*?)<\/li>(?:\s*.*?<\/li>)*/g,
      "$&
"
    );

    return { __html: formattedContent };
  };

  return (
    <div className="chat-container">
      <div className="chat-messages" id={`${agentType}-messages`}>
        {messages.map((message, index) => (
          <div
            key={index}
            className={`message ${
              message.isUser ? "user-message" : "agent-message"
            }`}
          >
            {!message.isUser && (
              <div className="message-avatar">
                <div className="avatar-placeholder">
                  {agentInitials || "AI"}
                div>
              div>
            )}
            <div className="message-content">
              <div dangerouslySetInnerHTML={renderContent(message.content)} />
            div>
          div>
        ))}
        {isLoading && (
          <div className="message agent-message">
            <div className="message-avatar">
              <div className="avatar-placeholder">{agentInitials || "AI"}div>
            div>
            <div className="message-content">
              <p className="loading-dots">Thinkingp>
            div>
          div>
        )}
        <div ref={messagesEndRef} />
      div>
      <div className="chat-input-container">
        <div className="chat-input-group">
          <input
            type="text"
            id={`${agentType}-input`}
            className="chat-input"
            placeholder="Type your message..."
            value={input}
            onChange={(e) => setInput(e.target.value)}
            onKeyPress={handleKeyPress}
          />
          <button
            id={`${agentType}-send`}
            className="chat-send-button"
            onClick={() => handleSendMessage()}
          >
            <i className="fa-solid fa-paper-plane mr-2">i>Send
          button>
        div>
      div>
    div>
  );
}

export default Chat;

The second part of the code mostly has the JSX for the components.

Right, next let’s do the Footer.jsx file by adding this code to the file:

function Footer() {
  return (
    <footer className="bg-dark text-white py-4">
      <div className="container">
        <div className="row">
          <div className="col-md-6">
            <h5>Portfolioh5>
            <p>Showcasing my work with the help of AI agentsp>
          div>
          <div className="col-md-6 text-md-end">
            <h5>Connecth5>
            <div className="social-links">
              <a href="#" className="text-white me-2">a>
              <a href="#" className="text-white me-2">a>
              <a href="#" className="text-white me-2">a>
            div>
          div>
        div>
        <div className="row mt-3">
          <div className="col-12 text-center">
            <p className="mb-0">
              © {new Date().getFullYear()} Portfolio. All rights reserved.
            p>
          div>
        div>
      div>
    footer>
  );
}

export default Footer;

The code is pretty much self-explanatory – it has some contact details which will show up at the bottom of your page in the footer section.

Now we can work on the Layout.jsx. I have also split it into two parts.

Add the first part of the codebase here:

import { Link, useLocation } from "react-router";
import { useState } from "react";

function Layout({ children }) {
  const location = useLocation();
  const [isMenuOpen, setIsMenuOpen] = useState(false);

  return (
    
      
        
          
            
              
                Portfolio
              
            
            
              
                
                  Home
                
                
                  Projects
                
                
                  Career
                
                
                  Services
                
                
                  Research
                
                
                  Contact

This part of the code has a lot of components, as expected for the layout.

Here is the second part of the code to be added to the file:

        {/* Mobile menu, show/hide based on menu state */}
        {isMenuOpen && (
          <div className="md:hidden">
            <div className="px-2 pt-2 pb-3 space-y-1 sm:px-3">
              <Link
                className={`block px-3 py-2 rounded-md text-base font-medium ${
                  location.pathname === "/"
                    ? "bg-gray-900 text-white"
                    : "text-gray-300 hover:bg-gray-700 hover:text-white"
                }`}
                to="/"
                onClick={() => setIsMenuOpen(false)}
              >
                Home
              Link>
              <Link
                className={`block px-3 py-2 rounded-md text-base font-medium ${
                  location.pathname === "/projects"
                    ? "bg-gray-900 text-white"
                    : "text-gray-300 hover:bg-gray-700 hover:text-white"
                }`}
                to="/projects"
                onClick={() => setIsMenuOpen(false)}
              >
                Projects
              Link>
              <Link
                className={`block px-3 py-2 rounded-md text-base font-medium ${
                  location.pathname === "/career"
                    ? "bg-gray-900 text-white"
                    : "text-gray-300 hover:bg-gray-700 hover:text-white"
                }`}
                to="/career"
                onClick={() => setIsMenuOpen(false)}
              >
                Career
              Link>
              <Link
                className={`block px-3 py-2 rounded-md text-base font-medium ${
                  location.pathname === "/services"
                    ? "bg-gray-900 text-white"
                    : "text-gray-300 hover:bg-gray-700 hover:text-white"
                }`}
                to="/services"
                onClick={() => setIsMenuOpen(false)}
              >
                Services
              Link>
              <Link
                className={`block px-3 py-2 rounded-md text-base font-medium ${
                  location.pathname === "/research"
                    ? "bg-gray-900 text-white"
                    : "text-gray-300 hover:bg-gray-700 hover:text-white"
                }`}
                to="/research"
                onClick={() => setIsMenuOpen(false)}
              >
                Research
              Link>
              <Link
                className={`block px-3 py-2 rounded-md text-base font-medium ${
                  location.pathname === "/contact"
                    ? "bg-gray-900 text-white"
                    : "text-gray-300 hover:bg-gray-700 hover:text-white"
                }`}
                to="/contact"
                onClick={() => setIsMenuOpen(false)}
              >
                Contact
              Link>
            div>
          div>
        )}
      

      <main className="flex-grow max-w-7xl w-full mx-auto px-4 sm:px-6 lg:px-8 py-8">
        {children}
      main>

      <footer className="bg-gray-800 text-white py-8">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="md:flex md:justify-between">
            <div className="mb-8 md:mb-0">
              <h5 className="text-lg font-semibold mb-2">Portfolioh5>
              <p className="text-gray-300">
                Showcasing my work with the help of AI agents
              p>
            div>
          div>
          <div className="mt-8 border-t border-gray-700 pt-8 text-center">
            <p className="text-gray-300">
              © 2025 Portfolio. All rights reserved.
            p>
          div>
        div>
      footer>
    
  );
}

export default Layout;

This code has more components, which completes the Layout component.

We’re almost done. Now for the last component, Navbar.jsx, before we move on to the pages.

This is the code you need for the file:

import { Link, useLocation } from 'react-router';

function Navbar() {
  const location = useLocation();

  return (
    <nav className="navbar navbar-expand-lg navbar-dark bg-dark">
      <div className="container">
        <Link className="navbar-brand" to="/">
          Portfolio
        Link>
        <button
          className="navbar-toggler"
          type="button"
          data-bs-toggle="collapse"
          data-bs-target="#navbarNav"
        >
          <span className="navbar-toggler-icon">span>
        button>
        <div className="collapse navbar-collapse" id="navbarNav">
          <ul className="navbar-nav ms-auto">
            <li className="nav-item">
              <Link
                className={`nav-link ${
                  location.pathname === '/' ? 'active' : ''
                }`}
                to="/"
              >
                Home
              Link>
            li>
            <li className="nav-item">
              <Link
                className={`nav-link ${
                  location.pathname === '/projects' ? 'active' : ''
                }`}
                to="/projects"
              >
                Projects
              Link>
            li>
            <li className="nav-item">
              <Link
                className={`nav-link ${
                  location.pathname === '/career' ? 'active' : ''
                }`}
                to="/career"
              >
                Career
              Link>
            li>
            <li className="nav-item">
              <Link
                className={`nav-link ${
                  location.pathname === '/services' ? 'active' : ''
                }`}
                to="/services"
              >
                Services
              Link>
            li>
            <li className="nav-item">
              <Link
                className={`nav-link ${
                  location.pathname === '/research' ? 'active' : ''
                }`}
                to="/research"
              >
                Research
              Link>
            li>
            <li className="nav-item">
              <Link
                className={`nav-link ${
                  location.pathname === '/contact' ? 'active' : ''
                }`}
                to="/contact"
              >
                Contact
              Link>
            li>
          ul>
        div>
      div>
    nav>
  );
}

export default Navbar;

The navbar component has your navigation links, which lets you navigate between pages using react-router.

Alright, the component codebase is ready! All that remains is the six page routes in our pages folder.

The first file we’ll work on will be the Career.jsx file. I will split the codebase for readability like before, so copy the different sections starting with the first part here:

import { useState } from "react";
import Chat from "../components/Chat";

function Career() {
  const initialMessage =
    "Hello! I'm CareerAgent, the career specialist. I can provide information about skills, experience, and professional background. What would you like to know?";

  const [currentQuestion, setCurrentQuestion] = useState("");

  const askCareerQuestion = (question) => {
    setCurrentQuestion(`${question} [${Date.now()}]`);

    setTimeout(() => {
      setCurrentQuestion("");
    }, 500);
  };

  return (
    
      
        
          Career
          
            Here you can find information about my professional background,
            skills, and experience. Feel free to ask CareerAgent for more
            details.
          
        
        
          
            
              
                Chat with CareerAgent
              
              
                Our career specialist can provide information about skills,
                experience, and professional background.
              
              
            
          
        
      

      
        
          Skills
        
        
          
            
              
                Frontend Development
              
              
                
                  React
                  
                    Expert
                  
                
                
                  Vue.js
                  
                    Advanced
                  
                
                
                  Angular
                  
                    Intermediate
                  
                
                
                  TypeScript
                  
                    Advanced
                  
                
                
                  CSS/SASS
                  
                    Expert

Like before, we have imports, states, and some components. Now for the second part, which is here:

 
          
          <div className="bg-white rounded-lg shadow-md overflow-hidden h-full">
            <div className="p-6">
              <h5 className="text-xl font-semibold mb-4">
                Backend Development
              h5>
              <ul className="divide-y divide-gray-200">
                <li className="py-3 flex justify-between items-center">
                  Node.js
                  <span className="px-2.5 py-0.5 bg-blue-500 text-white text-xs font-medium rounded-full">
                    Expert
                  span>
                li>
                <li className="py-3 flex justify-between items-center">
                  Python
                  <span className="px-2.5 py-0.5 bg-blue-500 text-white text-xs font-medium rounded-full">
                    Advanced
                  span>
                li>
                <li className="py-3 flex justify-between items-center">
                  Django
                  <span className="px-2.5 py-0.5 bg-blue-500 text-white text-xs font-medium rounded-full">
                    Intermediate
                  span>
                li>
                <li className="py-3 flex justify-between items-center">
                  Flask
                  <span className="px-2.5 py-0.5 bg-blue-500 text-white text-xs font-medium rounded-full">
                    Advanced
                  span>
                li>
                <li className="py-3 flex justify-between items-center">
                  SQL/NoSQL
                  <span className="px-2.5 py-0.5 bg-blue-500 text-white text-xs font-medium rounded-full">
                    Advanced
                  span>
                li>
              ul>
              <button
                className="mt-4 py-1.5 px-3 text-sm border border-blue-500 text-blue-500 rounded-md hover:bg-blue-50 transition-colors"
                onClick={() =>
                  askCareerQuestion(
                    "Tell me more about your backend development skills"
                  )
                }
              >
                Ask About Backend Skills
              button>
            div>
          div>
          <div className="bg-white rounded-lg shadow-md overflow-hidden h-full">
            <div className="p-6">
              <h5 className="text-xl font-semibold mb-4">Other Skillsh5>
              <ul className="divide-y divide-gray-200">
                <li className="py-3 flex justify-between items-center">
                  DevOps
                  <span className="px-2.5 py-0.5 bg-blue-500 text-white text-xs font-medium rounded-full">
                    Intermediate
                  span>
                li>
                <li className="py-3 flex justify-between items-center">
                  UI/UX Design
                  <span className="px-2.5 py-0.5 bg-blue-500 text-white text-xs font-medium rounded-full">
                    Advanced
                  span>
                li>
                <li className="py-3 flex justify-between items-center">
                  Project Management
                  <span className="px-2.5 py-0.5 bg-blue-500 text-white text-xs font-medium rounded-full">
                    Advanced
                  span>
                li>
                <li className="py-3 flex justify-between items-center">
                  Agile Methodologies
                  <span className="px-2.5 py-0.5 bg-blue-500 text-white text-xs font-medium rounded-full">
                    Expert
                  span>
                li>
                <li className="py-3 flex justify-between items-center">
                  Technical Writing
                  <span className="px-2.5 py-0.5 bg-blue-500 text-white text-xs font-medium rounded-full">
                    Intermediate
                  span>
                li>
              ul>
              <button
                className="mt-4 py-1.5 px-3 text-sm border border-blue-500 text-blue-500 rounded-md hover:bg-blue-50 transition-colors"
                onClick={() =>
                  askCareerQuestion("What other skills do you have?")
                }
              >
                Ask About Other Skills
              button>
            div>
          div>

There is a lot more component code here for the career page. Lastly, lets add the last part of the code for this page:

"mb-12">
        <div className="mb-6">
          <h2 className="text-2xl font-bold mb-4">Experienceh2>
        div>
        <div className="space-y-6">
          <div className="bg-white rounded-lg shadow-md overflow-hidden">
            <div className="p-6">
              <div className="flex justify-between items-start mb-2">
                <h5 className="text-xl font-semibold">
                  Senior Full-Stack Developer
                h5>
                <span className="text-gray-500 text-sm">2020 - Presentspan>
              div>
              <h6 className="text-gray-600 mb-3">Tech Innovations Inc.h6>
              <p className="text-gray-700 mb-4">
                Lead developer for multiple web and mobile applications,
                managing a team of 5 developers. Implemented CI/CD pipelines and
                improved development workflow efficiency by 30%.
              p>
              <button
                className="py-1.5 px-3 text-sm border border-blue-500 text-blue-500 rounded-md hover:bg-blue-50 transition-colors"
                onClick={() =>
                  askCareerQuestion(
                    "Tell me more about your experience at Tech Innovations Inc."
                  )
                }
              >
                More Details
              button>
            div>
          div>
          <div className="bg-white rounded-lg shadow-md overflow-hidden">
            <div className="p-6">
              <div className="flex justify-between items-start mb-2">
                <h5 className="text-xl font-semibold">Full-Stack Developerh5>
                <span className="text-gray-500 text-sm">2017 - 2020span>
              div>
              <h6 className="text-gray-600 mb-3">WebSolutions Co.h6>
              <p className="text-gray-700 mb-4">
                Developed and maintained multiple client websites and web
                applications. Specialized in React frontend development and
                Node.js backend services.
              p>
              <button
                className="py-1.5 px-3 text-sm border border-blue-500 text-blue-500 rounded-md hover:bg-blue-50 transition-colors"
                onClick={() =>
                  askCareerQuestion(
                    "Tell me more about your experience at WebSolutions Co."
                  )
                }
              >
                More Details
              button>
            div>
          div>
          <div className="bg-white rounded-lg shadow-md overflow-hidden">
            <div className="p-6">
              <div className="flex justify-between items-start mb-2">
                <h5 className="text-xl font-semibold">Junior Web Developerh5>
                <span className="text-gray-500 text-sm">2015 - 2017span>
              div>
              <h6 className="text-gray-600 mb-3">Digital Creations Ltd.h6>
              <p className="text-gray-700 mb-4">
                Worked on frontend development for e-commerce websites. Gained
                experience with JavaScript, CSS, and responsive design
                principles.
              p>
              <button
                className="py-1.5 px-3 text-sm border border-blue-500 text-blue-500 rounded-md hover:bg-blue-50 transition-colors"
                onClick={() =>
                  askCareerQuestion(
                    "Tell me more about your experience at Digital Creations Ltd."
                  )
                }
              >
                More Details
              button>
            div>
          div>
        div>
      

      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
        <div className="bg-white rounded-lg shadow-md overflow-hidden">
          <div className="p-6">
            <h5 className="text-xl font-semibold mb-4">Educationh5>
            <div className="mb-6">
              <div className="flex justify-between items-start mb-1">
                <h6 className="font-medium">
                  Master of Science in Computer Science
                h6>
                <span className="text-gray-500 text-sm">2013 - 2015span>
              div>
              <p className="text-gray-600">University of Technologyp>
            div>
            <div>
              <div className="flex justify-between items-start mb-1">
                <h6 className="font-medium">
                  Bachelor of Science in Software Engineering
                h6>
                <span className="text-gray-500 text-sm">2009 - 2013span>
              div>
              <p className="text-gray-600">State Universityp>
            div>
            <button
              className="mt-4 py-1.5 px-3 text-sm border border-blue-500 text-blue-500 rounded-md hover:bg-blue-50 transition-colors"
              onClick={() =>
                askCareerQuestion(
                  "Tell me more about your educational background"
                )
              }
            >
              Ask About Education
            button>
          div>
        div>
        <div className="bg-white rounded-lg shadow-md overflow-hidden">
          <div className="p-6">
            <h5 className="text-xl font-semibold mb-4">Certificationsh5>
            <ul className="divide-y divide-gray-200">
              <li className="py-3 flex justify-between items-center">
                AWS Certified Solutions Architect
                <span className="text-gray-500 text-sm">2022span>
              li>
              <li className="py-3 flex justify-between items-center">
                Google Cloud Professional Developer
                <span className="text-gray-500 text-sm">2021span>
              li>
              <li className="py-3 flex justify-between items-center">
                Microsoft Certified: Azure Developer Associate
                <span className="text-gray-500 text-sm">2020span>
              li>
              <li className="py-3 flex justify-between items-center">
                Certified Scrum Master
                <span className="text-gray-500 text-sm">2019span>
              li>
            ul>
            <button
              className="mt-4 py-1.5 px-3 text-sm border border-blue-500 text-blue-500 rounded-md hover:bg-blue-50 transition-colors"
              onClick={() =>
                askCareerQuestion("Tell me more about your certifications")
              }
            >
              Ask About Certifications
            button>
          div>
        div>
      div>
    
  );
}

export default Career;

And this completes our Career.jsx page: we have forms and more components in this part of the code.

Next is our Contact.jsx page. Like before, I will split the codebase for readability, so add the first part of this code to it:

import { useState } from "react";

function Contact() {
  const [formData, setFormData] = useState({
    name: "",
    email: "",
    subject: "",
    message: "",
  });
  const [formResponse, setFormResponse] = useState(null);

  const handleChange = (e) => {
    const { id, value } = e.target;
    setFormData((prevData) => ({
      ...prevData,
      [id]: value,
    }));
  };

  const handleSubmit = (e) => {
    e.preventDefault();

    setFormResponse({
      type: "success",
      message:
        "Thank you for your message! I'll get back to you as soon as possible.",
    });

    setFormData({
      name: "",
      email: "",
      subject: "",
      message: "",
    });

    document
      .getElementById("form-response")
      .scrollIntoView({ behavior: "smooth" });
  };

  return (
    
      
        
          Contact Me
          
            Have a question or want to discuss a potential project? Feel free to
            reach out using the form below or through any of my social media
            channels.
          
        
        
          
            
              Quick Links
              
                
                  View Projects
                
                
                  Services & Pricing
                
                
                  Research & Resources
                
              
            
          
        
      

      
        
          
            Contact Form
            
              
                
                  Name

We have our imports, functions, and part of the components here. Lastly, add the second part to complete this page:

"mb-4">
                <label
                  htmlFor="email"
                  className="block text-sm font-medium text-gray-700 mb-1"
                >
                  Email
                label>
                <input
                  type="email"
                  className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                  id="email"
                  placeholder="your.email@example.com"
                  required
                  value={formData.email}
                  onChange={handleChange}
                />
              
              <div className="mb-4">
                <label
                  htmlFor="subject"
                  className="block text-sm font-medium text-gray-700 mb-1"
                >
                  Subject
                label>
                <input
                  type="text"
                  className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                  id="subject"
                  placeholder="Subject"
                  required
                  value={formData.subject}
                  onChange={handleChange}
                />
              div>
              <div className="mb-4">
                <label
                  htmlFor="message"
                  className="block text-sm font-medium text-gray-700 mb-1"
                >
                  Message
                label>
                <textarea
                  className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                  id="message"
                  rows="5"
                  placeholder="Your message..."
                  required
                  value={formData.message}
                  onChange={handleChange}
                >textarea>
              div>
              <button
                type="submit"
                className="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 transition-colors"
              >
                Send Message
              button>
            
            <div
              id="form-response"
              className="mt-4"
              style={{ display: formResponse ? "block" : "none" }}
            >
              {formResponse && (
                <div
                  className={`p-4 ${
                    formResponse.type === "success"
                      ? "bg-green-100 text-green-700"
                      : "bg-red-100 text-red-700"
                  } rounded-md`}
                >
                  <i className="bi bi-check-circle-fill mr-2">i>
                  {formResponse.message}
                div>
              )}
            div>
          
        
        <div className="space-y-6">
          <div className="bg-white rounded-lg shadow-md overflow-hidden">
            <div className="p-6">
              <h5 className="text-xl font-semibold mb-4">
                Contact Information
              h5>
              <ul className="space-y-3">
                <li className="flex items-center">
                  <i className="bi bi-envelope mr-2">i>
                  <a
                    href="mailto:contact@example.com"
                    className="text-blue-500 hover:underline"
                  >
                    contact@example.com
                  a>
                li>
                <li className="flex items-center">
                  <i className="bi bi-geo-alt mr-2">i>
                  UK
                li>
              ul>
              <h5 className="text-xl font-semibold mt-6 mb-3">
                Connect on Social Media
              h5>
              <div className="flex flex-wrap gap-2">
                <a
                  href="#"
                  className="px-3 py-1.5 border border-gray-800 text-gray-800 rounded-md hover:bg-gray-100 flex items-center transition-colors"
                >
                  <i className="bi bi-github mr-1">i> GitHub
                a>
                <a
                  href="#"
                  className="px-3 py-1.5 border border-blue-500 text-blue-500 rounded-md hover:bg-blue-50 flex items-center transition-colors"
                >
                  <i className="bi bi-linkedin mr-1">i> LinkedIn
                a>
                <a
                  href="#"
                  className="px-3 py-1.5 border border-gray-800 text-gray-800 rounded-md hover:bg-gray-100 flex items-center transition-colors"
                >
                  <i className="bi bi-twitter mr-1">i> X
                a>
              div>
            div>
          div>
          <div className="bg-white rounded-lg shadow-md overflow-hidden">
            <div className="p-6">
              <h5 className="text-xl font-semibold mb-3">Availabilityh5>
              <p className="text-gray-700 mb-3">
                I'm currently available for freelance work and consulting. My
                typical response time is within 24 hours.
              p>
              <p className="text-gray-700">
                For urgent inquiries, please call the phone number listed above.
              p>
            div>
          div>
        div>
      
    
  );
}

export default Contact;

With that, this page is now done, and we have the rest of the components and form.

Ok just four pages left: let’s work on the home page first. The code is not that big so we can do it all at once.

This is the code to add to the Home.jsx page file:

import { Link } from 'react-router';
import Chat from '../components/Chat';

function Home() {
  const initialMessage =
    "Hello! I'm WelcomeAgent, the welcome specialist. I can help you navigate this portfolio website. Are you an employer, client, or fellow programmer?";

  return (
    <div>
      <div className="flex flex-col md:flex-row gap-8 mb-12">
        <div className="md:w-1/3">
          <h1 className="text-3xl font-bold mb-4">Welcome to my Portfolioh1>
          <p className="text-lg mb-4">
            This portfolio showcases my work and skills with the help of
            specialized AI agents. Each agent is designed to assist you with
            different aspects of my portfolio.
          p>
          <p className="text-gray-700">
            Feel free to interact with the WelcomeAgent to get personalized
            recommendations on which sections of the portfolio to explore based
            on your interests.
          p>
        div>
        <div className="md:w-2/3">
          <div className="bg-white rounded-lg shadow-md overflow-hidden">
            <div className="p-6">
              <h5 className="text-xl font-semibold mb-2">
                Chat with WelcomeAgent
              h5>
              <p className="text-gray-600 mb-4">
                Our welcome specialist can help you navigate this portfolio
                website.
              p>
              <Chat
                agentType="welcome"
                initialMessage={initialMessage}
                agentInitials="WA"
              />
            div>
          div>
        div>
      div>

      <div className="mb-12">
        <div className="mb-6">
          <h2 className="text-2xl font-bold mb-4">Meet the Agentsh2>
        div>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
          <div className="bg-white rounded-lg shadow-md overflow-hidden h-full">
            <div className="p-6 flex flex-col items-center">
              <div className="agent-avatar-placeholder mb-4">PAdiv>
              <h5 className="text-xl font-semibold mb-2">ProjectAgenth5>
              <p className="text-gray-600 mb-4 text-center">
                Provides detailed information about my projects, technologies
                used, and challenges overcome.
              p>
              <Link
                to="/projects"
                className="mt-auto py-2 px-4 border border-blue-500 text-blue-500 rounded-md hover:bg-blue-50 transition-colors"
              >
                View Projects
              Link>
            div>
          div>
          <div className="bg-white rounded-lg shadow-md overflow-hidden h-full">
            <div className="p-6 flex flex-col items-center">
              <div className="agent-avatar-placeholder mb-4">CAdiv>
              <h5 className="text-xl font-semibold mb-2">CareerAgenth5>
              <p className="text-gray-600 mb-4 text-center">
                Shares information about my skills, experience, and professional
                background.
              p>
              <Link
                to="/career"
                className="mt-auto py-2 px-4 border border-blue-500 text-blue-500 rounded-md hover:bg-blue-50 transition-colors"
              >
                View Career
              Link>
            div>
          div>
          <div className="bg-white rounded-lg shadow-md overflow-hidden h-full">
            <div className="p-6 flex flex-col items-center">
              <div className="agent-avatar-placeholder mb-4">BAdiv>
              <h5 className="text-xl font-semibold mb-2">BusinessAdvisorh5>
              <p className="text-gray-600 mb-4 text-center">
                Provides information about services, pricing, and client
                engagement process.
              p>
              <Link
                to="/services"
                className="mt-auto py-2 px-4 border border-blue-500 text-blue-500 rounded-md hover:bg-blue-50 transition-colors"
              >
                View Services
              Link>
            div>
          div>
        div>
      div>

      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
        <div className="bg-white rounded-lg shadow-md overflow-hidden h-full">
          <div className="p-6">
            <h5 className="text-xl font-semibold mb-2">Featured Projectsh5>
            <p className="text-gray-600 mb-4">
              Check out some of my recent work:
            p>
            <ul className="divide-y divide-gray-200">
              <li className="py-3 px-2">E-commerce Platformli>
              <li className="py-3 px-2">Task Management Applicationli>
              <li className="py-3 px-2">Data Visualization Dashboardli>
            ul>
            <div className="mt-4">
              <Link
                to="/projects"
                className="inline-block py-1.5 px-3 text-sm border border-blue-500 text-blue-500 rounded-md hover:bg-blue-50 transition-colors"
              >
                View All Projects
              Link>
            div>
          div>
        div>
        <div className="bg-white rounded-lg shadow-md overflow-hidden h-full">
          <div className="p-6">
            <h5 className="text-xl font-semibold mb-2">Research & Insightsh5>
            <p className="text-gray-600 mb-4">
              Explore my research on emerging technologies and industry trends:
            p>
            <ul className="divide-y divide-gray-200">
              <li className="py-3 px-2">AI in Web Developmentli>
              <li className="py-3 px-2">Modern Frontend Frameworksli>
              <li className="py-3 px-2">Cloud Architecture Patternsli>
            ul>
            <div className="mt-4">
              <Link
                to="/research"
                className="inline-block py-1.5 px-3 text-sm border border-blue-500 text-blue-500 rounded-md hover:bg-blue-50 transition-colors"
              >
                View Research
              Link>
            div>
          div>
        div>
      div>
    div>
  );
}

export default Home;

This has the code for our home page and WelcomeAgent.

Alright, now let's work on the Projects.jsx page. For readability it's easier to split the code in half again. So here is the first part:

import { useState } from "react";
import Chat from "../components/Chat";

function Projects() {
  const initialMessage =
    "Hello! I'm ProjectAgent, the project specialist. I can provide detailed information about projects, technologies used, and challenges overcome. What would you like to know?";

  const [currentQuestion, setCurrentQuestion] = useState("");

  const askProjectQuestion = (question) => {
    setCurrentQuestion(`${question} [${Date.now()}]`);

    setTimeout(() => {
      setCurrentQuestion("");
    }, 500);
  };

  return (
    
      
        
          Projects
          
            Here you can explore my portfolio of projects. Feel free to ask
            ProjectAgent for more details about any project.
          
        
        
          
            
              
                Chat with ProjectAgent
              
              
                Our project specialist can provide detailed information about
                projects, technologies, and challenges.
              
              
            
          
        
      

      
        
          Featured Projects
        
        
          
            E-commerce Platform
            
              
                E-commerce Platform
              
              
                A full-featured e-commerce platform with product management,
                shopping cart, and payment processing.
              
              
                
                  
                  
                
                2023
              
            
          
          
            Task Management App
            
              
                Task Management Application
              
              
                A collaborative task management application with real-time
                updates and team collaboration features.

As previously mentioned, we have our imports, functions, and some components. Complete the page with the second part of the code here:

 
                
                <span className="text-sm text-gray-500">2022span>
              
            
          
          <div className="bg-white rounded-lg shadow-md overflow-hidden">
            <div className="project-image-placeholder">Data Visualizationdiv>
            <div className="p-6">
              <h5 className="text-xl font-semibold mb-2">
                Data Visualization Dashboard
              h5>
              <p className="text-gray-600 mb-4">
                An interactive dashboard for visualizing complex datasets with
                customizable charts and filters.
              p>
              <div className="flex justify-between items-center">
                <div className="flex space-x-2">
                  <button
                    type="button"
                    className="py-1.5 px-3 text-sm border border-blue-500 text-blue-500 rounded-md hover:bg-blue-50 transition-colors"
                    onClick={() =>
                      askProjectQuestion(
                        "Tell me more about the Data Visualization Dashboard project"
                      )
                    }
                  >
                    View Details
                  button>
                  <button
                    type="button"
                    className="py-1.5 px-3 text-sm border border-gray-500 text-gray-500 rounded-md hover:bg-gray-50 transition-colors"
                    onClick={() =>
                      askProjectQuestion(
                        "What technologies were used in the Data Visualization Dashboard project?"
                      )
                    }
                  >
                    Technologies
                  button>
                div>
                <span className="text-sm text-gray-500">2021span>
              div>
            div>
          div>
        
      

      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
        <div className="bg-white rounded-lg shadow-md overflow-hidden">
          <div className="p-6">
            <h5 className="text-xl font-semibold mb-2">
              Technical Skills Showcase
            h5>
            <p className="text-gray-600 mb-4">
              These projects demonstrate proficiency in the following
              technologies:
            p>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div>
                <h6 className="font-semibold mb-2">Frontendh6>
                <ul className="list-disc pl-5 space-y-1">
                  <li>Reactli>
                  <li>Vue.jsli>
                  <li>Angularli>
                  <li>TypeScriptli>
                  <li>CSS/SASSli>
                ul>
              div>
              <div>
                <h6 className="font-semibold mb-2">Backendh6>
                <ul className="list-disc pl-5 space-y-1">
                  <li>Node.jsli>
                  <li>Pythonli>
                  <li>Djangoli>
                  <li>Flaskli>
                  <li>MongoDBli>
                ul>
              div>
            div>
            <button
              className="mt-4 py-1.5 px-3 text-sm border border-blue-500 text-blue-500 rounded-md hover:bg-blue-50 transition-colors"
              onClick={() =>
                askProjectQuestion(
                  "What other technologies are you proficient in?"
                )
              }
            >
              Ask About Other Skills
            button>
          div>
        div>
        <div className="bg-white rounded-lg shadow-md overflow-hidden">
          <div className="p-6">
            <h5 className="text-xl font-semibold mb-2">Project Inquiryh5>
            <p className="text-gray-600 mb-4">
              Interested in a specific type of project or technology? Ask
              ProjectAgent for more information.
            p>
            <div className="flex flex-col space-y-3">
              <button
                className="py-2 px-4 border border-blue-500 text-blue-500 rounded-md hover:bg-blue-50 transition-colors"
                onClick={() =>
                  askProjectQuestion(
                    "Do you have any projects involving machine learning or AI?"
                  )
                }
              >
                Ask About AI Projects
              button>
              <button
                className="py-2 px-4 border border-blue-500 text-blue-500 rounded-md hover:bg-blue-50 transition-colors"
                onClick={() =>
                  askProjectQuestion("What are your most challenging projects?")
                }
              >
                Ask About Challenging Projects
              button>
              <button
                className="py-2 px-4 border border-blue-500 text-blue-500 rounded-md hover:bg-blue-50 transition-colors"
                onClick={() =>
                  askProjectQuestion(
                    "Can you show me examples of your UI/UX work?"
                  )
                }
              >
                Ask About UI/UX Work
              button>
            div>
          div>
        div>
      div>
    
  );
}

export default Projects;

With the remaining components added, this page is now complete.

Its time to do the Research.jsx page, starting with the first half of the codebase:

import { useState } from "react";
import Chat from "../components/Chat";

function Research() {
  const initialMessage =
    "Hello! I'm ResearchAgent, the research specialist. I can provide information about technologies, trends, and industry news. What would you like to know?";
  const [searchQuery, setSearchQuery] = useState("");
  const [tech1, setTech1] = useState("");
  const [tech2, setTech2] = useState("");

  const [currentQuestion, setCurrentQuestion] = useState("");

  const askResearchQuestion = (question) => {
    setCurrentQuestion(`${question} [${Date.now()}]`);

    setTimeout(() => {
      setCurrentQuestion("");
    }, 500);
  };

  const handleSearch = (e) => {
    e.preventDefault();
    if (searchQuery.trim()) {
      askResearchQuestion(`Search for information about: ${searchQuery}`);
      setSearchQuery("");
    }
  };

  const handleCompare = (e) => {
    e.preventDefault();
    if (tech1.trim() && tech2.trim()) {
      askResearchQuestion(`Compare ${tech1} vs ${tech2}`);
      setTech1("");
      setTech2("");
    }
  };

  return (
    
      
        
          Research & Insights
          
            Here you can explore research on technologies, trends, and industry
            news. Feel free to ask ResearchAgent for more information.
          
        
        
          
            
              
                Chat with ResearchAgent
              
              
                Our research specialist can provide information about
                technologies, trends, and industry news.
              
              
            
          
        
      

      
        
          
            
              Search for Information
            
            
              Enter a topic to search for the latest information and insights.
            
            
              
                 setSearchQuery(e.target.value)}
                />
                
              
            
          
        
        
          
            Compare Technologies
            
              Compare two technologies to understand their pros, cons, and use
              cases.
            
            
              
                
                   setTech1(e.target.value)}
                  />

We have our imports, state, functions, and some components for the ResearchAgent, so it's pretty straightforward. Now, we can complete the page by finishing it with the rest of the code:


                  <input
                    type="text"
                    className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                    placeholder="Second technology"
                    value={tech2}
                    onChange={(e) => setTech2(e.target.value)}
                  />
                
              
              <button
                className="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 transition-colors"
                type="submit"
              >
                Compare
              button>
            
          
        
      

      <div className="mb-12">
        <div className="mb-6">
          <h2 className="text-2xl font-bold mb-4">Current Tech Trendsh2>
        div>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
          <div className="bg-white rounded-lg shadow-md overflow-hidden h-full">
            <div className="p-6 flex flex-col h-full">
              <h5 className="text-xl font-semibold mb-3">
                AI in Web Development
              h5>
              <p className="text-gray-600 mb-4 flex-grow">
                Exploring how artificial intelligence is transforming web
                development practices and tools.
              p>
              <button
                className="py-1.5 px-3 text-sm border border-blue-500 text-blue-500 rounded-md hover:bg-blue-50 transition-colors self-start"
                onClick={() =>
                  askResearchQuestion("Tell me about AI in web development")
                }
              >
                Learn More
              button>
            div>
          div>
          <div className="bg-white rounded-lg shadow-md overflow-hidden h-full">
            <div className="p-6 flex flex-col h-full">
              <h5 className="text-xl font-semibold mb-3">
                Modern Frontend Frameworks
              h5>
              <p className="text-gray-600 mb-4 flex-grow">
                Analysis of current frontend frameworks, their strengths, and
                ideal use cases.
              p>
              <button
                className="py-1.5 px-3 text-sm border border-blue-500 text-blue-500 rounded-md hover:bg-blue-50 transition-colors self-start"
                onClick={() =>
                  askResearchQuestion("Compare modern frontend frameworks")
                }
              >
                Learn More
              button>
            div>
          div>
          <div className="bg-white rounded-lg shadow-md overflow-hidden h-full">
            <div className="p-6 flex flex-col h-full">
              <h5 className="text-xl font-semibold mb-3">
                Cloud Architecture Patterns
              h5>
              <p className="text-gray-600 mb-4 flex-grow">
                Best practices and patterns for designing scalable cloud-based
                applications.
              p>
              <button
                className="py-1.5 px-3 text-sm border border-blue-500 text-blue-500 rounded-md hover:bg-blue-50 transition-colors self-start"
                onClick={() =>
                  askResearchQuestion("Explain cloud architecture patterns")
                }
              >
                Learn More
              button>
            div>
          div>
        div>
      div>

      <div className="mb-6">
        <div className="bg-white rounded-lg shadow-md overflow-hidden">
          <div className="p-6">
            <h5 className="text-xl font-semibold mb-3">Industry Trendsh5>
            <p className="text-gray-600 mb-4">
              Stay updated on the latest trends in software development and
              technology.
            p>
            <button
              className="py-2 px-4 border border-blue-500 text-blue-500 rounded-md hover:bg-blue-50 transition-colors"
              onClick={() =>
                askResearchQuestion(
                  "What are the current trends in software development and technology?"
                )
              }
            >
              Get Industry Trends
            button>
          div>
        div>
      div>
    
  );
}

export default Research;

The second half of the code has the remaining components, which complete the page.

Now for the final page which is for Services.jsx. The codebase is quite large so we will break it down.

And here's the first part of the codebase to add:

import { useState } from "react";
import axios from "axios";
import Chat from "../components/Chat";

function Services() {
  const initialMessage =
    "Hello! I'm BusinessAdvisor, the client specialist. I can provide information about services, pricing, and project details. What would you like to know?";
  const [projectDescription, setProjectDescription] = useState("");

  const [currentQuestion, setCurrentQuestion] = useState("");

  const askClientQuestion = (question) => {
    setCurrentQuestion(`${question} [${Date.now()}]`);

    setTimeout(() => {
      setCurrentQuestion("");
    }, 500);
  };

  const generateProposal = async () => {
    if (!projectDescription.trim()) return;

    try {
      const response = await axios.post("/api/client/proposal", {
        project_description: projectDescription,
      });

      if (response.data && response.data.proposal) {
        askClientQuestion(
          `Can you provide a proposal for this project: ${projectDescription}`
        );
      }
    } catch (error) {
      console.error("Error generating proposal:", error);
    }
  };

  return (
    
      
        
          Services
          
            Here you can find information about the services I offer. Feel free
            to ask BusinessAdvisor for more details about pricing, timelines,
            and project specifics.
          
        
        
          
            
              
                Chat with BusinessAdvisor
              
              
                Our client specialist can provide information about services,
                pricing, and project details.
              
              
            
          
        
      

      
        
          Services Offered
        
        
          
            
              Web Development
              
                Custom web application development using modern frameworks and
                best practices.
              
              Technologies
              
                React
                Vue.js
                Node.js
                Django
                Flask
              
              Details
              
                
                  Pricing Model: Project-based or hourly
                
                
                  Price Range: $5,000 - $50,000 depending on
                  complexity
                
                
                  Timeline: 4-12 weeks depending on scope

We have more import statements, state, and components for our BusinessAdvisor AI agent. Onto the next part of this codebase here:

 "bg-white rounded-lg shadow-md overflow-hidden h-full">
            <div className="p-6">
              <h5 className="text-xl font-semibold mb-2">
                Mobile App Development
              h5>
              <p className="text-gray-600 mb-4">
                Native and cross-platform mobile application development for iOS
                and Android.
              p>
              <h6 className="font-semibold mb-2">Technologiesh6>
              <ul className="list-disc pl-5 space-y-1 mb-4">
                <li>React Nativeli>
                <li>Flutterli>
                <li>Swiftli>
                <li>Kotlinli>
              ul>
              <h6 className="font-semibold mb-2">Detailsh6>
              <ul className="space-y-2 mb-4">
                <li>
                  <strong>Pricing Model:strong> Project-based
                li>
                <li>
                  <strong>Price Range:strong> $8,000 - $60,000 depending on
                  complexity
                li>
                <li>
                  <strong>Timeline:strong> 6-16 weeks depending on scope
                li>
              ul>
              <button
                className="mt-2 py-1.5 px-3 text-sm border border-blue-500 text-blue-500 rounded-md hover:bg-blue-50 transition-colors"
                onClick={() =>
                  askClientQuestion(
                    "Tell me more about your mobile app development services"
                  )
                }
              >
                Ask about Mobile Development
              button>
            div>
          
          <div className="bg-white rounded-lg shadow-md overflow-hidden h-full">
            <div className="p-6">
              <h5 className="text-xl font-semibold mb-2">
                Technical Consulting
              h5>
              <p className="text-gray-600 mb-4">
                Expert advice on architecture, technology stack, and development
                practices.
              p>
              <h6 className="font-semibold mb-2">Areas of Expertiseh6>
              <ul className="list-disc pl-5 space-y-1 mb-4">
                <li>System Architectureli>
                <li>Database Designli>
                <li>Performance Optimizationli>
                <li>Security Best Practicesli>
                <li>DevOps Implementationli>
              ul>
              <h6 className="font-semibold mb-2">Detailsh6>
              <ul className="space-y-2 mb-4">
                <li>
                  <strong>Pricing Model:strong> Hourly
                li>
                <li>
                  <strong>Price Range:strong> $150 - $250 per hour
                li>
                <li>
                  <strong>Timeline:strong> Ongoing or as needed
                li>
              ul>
              <button
                className="mt-2 py-1.5 px-3 text-sm border border-blue-500 text-blue-500 rounded-md hover:bg-blue-50 transition-colors"
                onClick={() =>
                  askClientQuestion(
                    "Tell me more about your technical consulting services"
                  )
                }
              >
                Ask about Consulting
              button>
            div>
          div>

We can expect to see lots of component code here for the page, so lets finish it off with the final part now:

 "mb-12">
        <div className="mb-6">
          <h2 className="text-2xl font-bold mb-4">Client Engagement Processh2>
        div>
        <div className="w-full">
          <div className="bg-white rounded-lg shadow-md overflow-hidden">
            <div className="p-6">
              <div className="grid grid-cols-1 md:grid-cols-4 gap-6">
                <div className="mb-6 md:mb-0">
                  <div className="flex flex-col items-center">
                    <div className="w-12 h-12 rounded-full bg-blue-500 text-white flex items-center justify-center text-xl font-bold mb-4">
                      1
                    div>
                    <h5 className="text-lg font-semibold mt-2 mb-1">
                      Initial Consultation
                    h5>
                    <p className="text-gray-600 text-center">
                      Understanding your requirements and project goals
                    p>
                  div>
                div>
                <div className="mb-6 md:mb-0">
                  <div className="flex flex-col items-center">
                    <div className="w-12 h-12 rounded-full bg-blue-500 text-white flex items-center justify-center text-xl font-bold mb-4">
                      2
                    div>
                    <h5 className="text-lg font-semibold mt-2 mb-1">
                      Proposal
                    h5>
                    <p className="text-gray-600 text-center">
                      Detailed quote and project plan preparation
                    p>
                  div>
                div>
                <div className="mb-6 md:mb-0">
                  <div className="flex flex-col items-center">
                    <div className="w-12 h-12 rounded-full bg-blue-500 text-white flex items-center justify-center text-xl font-bold mb-4">
                      3
                    div>
                    <h5 className="text-lg font-semibold mt-2 mb-1">
                      Development
                    h5>
                    <p className="text-gray-600 text-center">
                      Regular sprints with client feedback
                    p>
                  div>
                div>
                <div className="mb-6 md:mb-0">
                  <div className="flex flex-col items-center">
                    <div className="w-12 h-12 rounded-full bg-blue-500 text-white flex items-center justify-center text-xl font-bold mb-4">
                      4
                    div>
                    <h5 className="text-lg font-semibold mt-2 mb-1">
                      Delivery
                    h5>
                    <p className="text-gray-600 text-center">
                      Testing, deployment, and ongoing support
                    p>
                  div>
                div>
              div>
              <div className="flex justify-center mt-8">
                <button
                  className="py-2 px-4 border border-blue-500 text-blue-500 rounded-md hover:bg-blue-50 transition-colors"
                  onClick={() =>
                    askClientQuestion(
                      "Explain your client engagement process in detail"
                    )
                  }
                >
                  Learn More About the Process
                button>
              div>
            div>
          div>
        div>
      

      <div className="w-full">
        <div className="bg-white rounded-lg shadow-md overflow-hidden">
          <div className="p-6">
            <h5 className="text-xl font-semibold mb-2">Request a Proposalh5>
            <p className="text-gray-600 mb-4">
              Interested in working together? Describe your project below and
              BusinessAdvisor will generate a custom proposal for you.
            p>
            <div className="mb-4">
              <label
                htmlFor="project-description"
                className="block text-sm font-medium text-gray-700 mb-1"
              >
                Describe your project:
              label>
              <textarea
                id="project-description"
                className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                rows="5"
                placeholder="Enter project description..."
                value={projectDescription}
                onChange={(e) => setProjectDescription(e.target.value)}
              >textarea>
            div>
            <button
              className="py-2 px-4 bg-blue-500 text-white rounded-md hover:bg-blue-600 transition-colors"
              onClick={generateProposal}
            >
              Generate Proposal
            button>
          div>
        div>
      div>
    
  );
}

export default Services;

Our services page is complete, and so is the application!

Make sure that the Python backend server is running, and then start your React frontend with the usual Vite run script here inside the frontend folder:

npm run dev

You should see the website up and running on http://localhost:5173/ with working AI agents on all pages (apart from the contact page, which does not have one). Remember that every time you use one of the AI agents to ask a question, it will use 1 API call on Groq Cloud, so check the Rate Limits for the different LLMs.

Conclusion

Building a squad of AI agents for your website using platforms like Agno and Groq is a powerful way to showcase how innovative automated workflows can enhance user experience without spending a lot of money.

The combination of Agno and Groq provides a free route for exploring AI agents, which can be very beneficial. With Agno's no-code agent orchestration and Groq's super-fast inference, you can deploy AI-powered features that engage with visitors and make interactions easier.

So, whether it's a chatbot, content generator, or intelligent assistant, these tools are making it easier than ever to integrate AI into your brand. With the advancements that AI technology is making, being able to try out these free solutions will definitely keep you ahead and make your website truly shine as you continue to modernise your brand.

Stay up to date with tech, programming, productivity, and AI

If you enjoyed these articles, connect and follow me across social media, where I share content related to all of these topics 🔥

How to Build a Realtime Chart with React, HighCharts, and Pusher

Andrew Baisden — Thu, 02 May 2024 00:07:30 +0000

In today's tutorial, you are going to learn about WebSockets and how you can use them to create interactive realtime data applications.

To illustrate just how innovative real time technologies are, we will build a chart application which automatically updates with new dynamic online data.

This is going to be a really good example of how we can implement user data into useful commercial products such as sports leaderboards, social media analytics, financial money trackers, medical instruments, games and many more.

As you can see, there are numerous use cases for this technology. So let's get under way and first learn about the main platform that we will be using to create our realtime data: Pusher.

You can find the codebase online here.

Prerequisites

An IDE/code editor installed
Basic knowledge of JavaScript and React
An understanding of Node.js and npm
An account on Pusher

What are WebSockets?
What is Pusher?
What we will be building
How to Create an Account on Pusher
How to Build the Company Annual Income Application
Conclusion

What are WebSockets?

WebSockets are a communications protocol which allows for data to travel bidirectionally between a client and a server. This essentially means that it's possible for a client and server to simultaneously send data back and forth independently of each other.

Being able to send data this way brings many advantages, such as preventing blocking. This can occur if the system is only capable of either sending or receiving and not both at the same time.

Another advantage is the fact that the Transmission Control Protocol (TCP) connection remains long-lived and connected. This is a drawback of traditional Hypertext Transfer Protocol (HTTP) connections, as they are regularly opening and closing each time there is a request or a response. This prevents communication from being instant and realtime.

Not having to worry about the opening and closing of connections results in dramatically less network traffic – so in terms of speed and resources, this is a welcome bonus.

Now that you know why WebSockets are helpful, let's take a look at Pusher and see what the platform is capable of.

What is Pusher?

Pusher is an online platform you can use to build and develop applications that require real-time communication. These communications typically take place between web browsers, mobile phones, and other internet connected devices.

The platform is designed to make it easy to implement real-time communication systems which are nowhere near as complicated as raw WebSocket connections in terms of setup and management. This allows for better scaling and even a way to handle fallbacks for legacy environments that do not support WebSockets.

Pusher is capable of using numerous technologies such as WebSockets, HTTP fallbacks, and even its own propriety protocol called ws-longpolling. This enables the platform to work in places where WebSockets is not supported.

Pusher also has a lot of other useful features. For example, it fully supports WebSockets, so bidirectional communication works as you would expect. The platform also follows the publish-subscribe (Pub/Sub) pattern which is a popular messaging pattern used in the industry. It pretty much guarantees that anyone subscribed to any of the channels can receive the messages in realtime.

A good example of this would be everyone getting the latest news notification who is subscribed to that social media channel. Subscriptions can be public and private, which requires authentication to gain access to those messages.

There's also wide platform support, as the Pusher SDK is available in different programming languages like JavaScript, Python, iOS, Android and many others. It's available as a service online, so all of the scaling and communications infrastructure is already handled. This means one less system for developers to handle when building an application.

Pusher is a great option, as I hope you can tell. But there are other tools out there that do similar things:

Ok, you've learned quite a lot about WebSockets and Pusher. Now, we'll take a look at the application that we are going to build.

What We Will Be Building

To help you learn how Pusher works, we are going to build a Company Annual Income dashboard application. The application has a graph, a 3D Mode toggle, and three buttons.

We'll build our application using Next.js, Pusher, and HighCharts (the tool that we'll use to create our graph component). This will be a full stack application with one API endpoint for our Pusher REST API. We just need one GET endpoint which will connect to the Pusher API.

The graph data will come directly from Pusher, and the 3D Mode toggle essentially lets us switch our chart between 2D and 3D mode. The buttons let us change the type of chart that is displayed on screen, and all 3 charts can work in 2D and 3D mode. The chart has some starting data, and new data is automatically added to the end for each new year.

Here you can see our Company Annual Income Application in 2D Graph Mode.

Company Annual Income Application 2D Mode

And here you can see our Company Annual Income Application in 3D Graph Mode.

Company Annual Income Application 3D Mode

As you can see, the HighCharts library is very good when it comes to building applications that require data visualisation. If you are interested in other libraries which work just as well, I have put together a list of some of them here. Each one has its own unique benefits and it's possible to use more than one library if you want to:

Alright, we know what we are going to build. In the next section, we will quickly go through how to create an account on Pusher followed by actually building our application afterwards.

How to Create an Account on Pusher

Creating an account on Pusher only requires a few steps. Depending on when you follow this tutorial, the website might look a bit different – but the sign up process should be the same.

Start by going to the Pusher website as shown below:

Pusher website home page

Click on either the Get your free account button in the middle of the page, or the Sign up button in the top right hand corner.

You should now be on the Sign up page as shown here:

Pusher website sign up for account page

Either use your GitHub, Google, or email to create an account.

The next page to load should be your main dashboard after you have completed the sign up as shown in the image below:

Pusher website main dashboard page

Click on the Manage button in the Channels section in the image shown above to get to the Channels page.

The Channels page can be seen below which displays all of the data for our app.

Pusher website Channels page

We need to create an app, so click on the Create app button in the top right hand corner.

Clicking on the button should give you this Create your Channels app box shown here:

Pusher website Create your channels app page

Give your app a name and then choose React for the front end and Node.js for the back end. Then click the Create app button at the bottom of the form.

That's it – you should now see the main screen for your app as shown in the example image below (with data for connections and messages shown in the middle). The sidebar on the left has the features and App keys which we need to use later.

Pusher website app page

Great! Up next we will start building our app...so lets get to it.

How to Build the Company Annual Income Application

The first thing we have to do is setup our project architecture and the folder structure so let's start with that. Create a folder on your computer called realtime-chart-pusher and then cd into it.

Create a Next.js project by running the usual install and setup command here:

npx create-next-app .

On the configuration screen, our project needs to use Tailwind CSS for styling and its recommended that you use the App Router. The other defaults should be fine.

Now we have to install our dependencies for the project. Go ahead and do that with this command:

npm i axios highcharts-react-official pusher pusher-js

Here is a quick breakdown of the purpose of each package we are installing:

Axios: for making API requests to our backend API which is connected to the Pusher API
highcharts-react-official: for building our realtime chart
pusher and pusher-js: for connecting to our Pusher account and the Pusher API

Right, with that done, we just have to setup our project files. You can use this run script in your terminal while still in the project root folder:

touch .env.local
cd src/app
mkdir -p api/pusher components/ChartButton components/CompanyIncomeChart components/Toggle3DButton
touch api/pusher/route.js
touch components/ChartButton/ChartButton.js components/CompanyIncomeChart/CompanyIncomeChart.js components/Toggle3DButton/Toggle3DButton.js

This script creates a .env.local file for our Pusher App keys. It also creates files and folders for our backend and frontend.

Before we begin adding the code to our codebase, we need to get our Pusher App Keys. You can find them on your Pusher account as shown in this example below:

Pusher website App keys page

Add your app keys to the .env.local file like in this code example here:

NEXT_SECRET_PUSHER_APP_ID = "yourid"
NEXT_SECRET_PUSHER_KEY = "yourkey"
NEXT_SECRET_PUSHER_SECRET = "yoursecret"
NEXT_SECRET_PUSHER_CLUSTER = "yourlocation"

We just added NEXT_SECRET at the start of all of the variables because it is a Next.js convention and ensures that the variables work properly.

Now we can start with the bulk of our codebase. First we will do the route.js file inside of the api/route folder. This is the code needed for the file:

import Pusher from 'pusher';

const pusher = new Pusher({
  appId: process.env.NEXT_SECRET_PUSHER_APP_ID,
  key: process.env.NEXT_SECRET_PUSHER_KEY,
  secret: process.env.NEXT_SECRET_PUSHER_SECRET,
  cluster: process.env.NEXT_SECRET_PUSHER_CLUSTER,
  useTLS: true,
});

export async function GET() {
  // Define the initial value
  const value = Math.random() * 800000 + 200000;

  setInterval(() => {
    pusher.trigger('company-income', 'new-price', {
      value: value,
    });

    return Response.json({ value: value }, { status: 200 });
    // Every ten seconds, the setInterval method will get data from the API because its value is set to ten seconds. Pusher's free plans are limited to 200,000 messages a day, so be careful while reducing the interval or you risk exceeding your limit too soon.
  }, 10000);
  return Response.json({ value: value }, { status: 200 });
}

The code in this file lets us connect to Pusher using our App Keys. The value is a randomly generated number that gets sent as JSON to our Pusher channel. This number is what we use to show the company income in each new year which is automatically generated in our chart.

This update occurs every 10 seconds and can be changed in the setInterval function. Pusher's free plans are limited to 200,000 messages a day, so be careful while reducing the interval or you risk exceeding your limit too soon.

The next file we will work on is the ChartButton.js file which you can find inside its folder ChartButton.

Add this code to the file:

export default function ChartButton({ chartRef, type, name }) {
  const switchToLineChart = () => {
    chartRef.current.update({
      chart: {
        type: type,
      },
    });
  };

  return (
    <button
      onClick={() => switchToLineChart()}
      className="bg-indigo-500 hover:bg-indigo-700 p-2 rounded text-white shadow-md"
    >
      {name}
    button>
  );
}

Our chart application has three buttons for Area Chart, Bar Chart, and Line Chart. This is basically just the component that creates the buttons.

Good, up next will be our CompanyIncomeChart.js file which you can find in the CompanyIncomeChart folder. This file will be taking this code here:

'use client';

import { useEffect, useRef, useState } from 'react';
import axios from 'axios';
import ChartButton from '../ChartButton/ChartButton';
import Toggle3DButton from '../Toggle3DButton/Toggle3DButton';

export default function CompanyIncome() {
  const initialData = [
    [1965, 360202],
    [1966, 400123],
    [1967, 460331],
    [1968, 460346],
    [1969, 460339],
    [1970, 460370],
  ];

  const chartRef = useRef(null);
  const [chartData, setChartData] = useState([...initialData]);
  const [toggle3D, setToggle3D] = useState(false);

  useEffect(() => {
    // Dynamically import Highcharts and its 3D module
    import('highcharts/highcharts-3d').then((Highcharts3D) => {
      import('highcharts').then((Highcharts) => {
        Highcharts3D.default(Highcharts.default);

        chartRef.current = Highcharts.default.chart('chart-container', {
          colors: ['#F3F7FB', '#F3F7FB'],
          chart: {
            style: {
              fontFamily: ['Prompt', 'sans-serif'],
              fontSize: '16px',
            },
            type: 'column',
            options3d: {
              enabled: toggle3D,
              alpha: 10,
              beta: 25,
              depth: 70,
              viewDistance: 25,
            },
            backgroundColor: {
              linearGradient: [0, 0, 500, 500],
              stops: [
                [0, 'rgb(128, 130, 221)'],
                [1, 'rgb(128, 130, 221)'],
              ],
            },
          },
          title: {
            text: 'COMPANY ANNUAL INCOME',
            style: {
              fontSize: '27px',
            },
          },
          xAxis: {
            title: {
              text: 'Year',
              style: {
                color: 'white',
              },
            },
            labels: {
              style: {
                color: 'white',
              },
            },
            type: 'category',
          },
          yAxis: {
            title: {
              text: 'Income',
              style: {
                color: 'white',
              },
            },
            labels: {
              style: {
                color: 'white',
              },
            },
            min: 0,
          },
          credits: {
            text: '',
          },
          series: [
            {
              name: 'Income',
              data: chartData,
            },
          ],
          animation: {
            duration: 100,
          },
        });
      });
    });

    const interval = setInterval(async () => {
      try {
        const response = await axios.get('/api/pusher');
        const newDataPoint = [
          chartData[chartData.length - 1][0] + 1,
          response.data.value,
        ];
        chartRef.current.series[0].addPoint(newDataPoint, true, true);
        setChartData((prevData) => [...prevData, newDataPoint]);
      } catch (error) {
        console.error('Error fetching data:', error);
      }
      // Every ten seconds, the setInterval method will get data from the API because its value is set to ten seconds. Pusher's free plans are limited to 200,000 messages a day, so be careful while reducing the interval or you risk exceeding your limit too soon.
    }, 10000);
    return () => {
      clearInterval(interval);
    };
  }, [toggle3D]);

  return (
    <div>
      <div id="chart-container" className="w-full h-96">div>
      <div className="border-solid border-2 border-indigo-500 m-10">
        <div className="grid justify-center mt-5 text-center">
          <p>3D Modep>
          <div className="w-20">
            <Toggle3DButton toggle3D={toggle3D} setToggle3D={setToggle3D} />
          div>
        div>
        <div className="grid gap-4 justify-center mt-5 xl:grid-cols-3 p-4">
          <ChartButton chartRef={chartRef} type={'area'} name={'Area Chart'} />
          <ChartButton chartRef={chartRef} type={'bar'} name={'Bar Chart'} />
          <ChartButton chartRef={chartRef} type={'line'} name={'Line Chart'} />
        div>
      div>
    div>
  );
}

This component creates our Company Income Chart and is already set with some initial loading data so that the chart loads some data when it first starts.

The file contains our chart configuration settings. There is a function that does a GET request to our Next.js backend which then connects to our Pusher account. This is how the data is retrieved for our chart file. Like on the backend, there is a setInterval function that runs every 10 seconds to get the latest data from our backend (we we can increase or decrease).

Next is the Toggle3DButton.js file in the Toggle3DButton folder. Here is the code for the file:

export default function Toggle3DButton({ toggle3D, setToggle3D }) {
  const toggle3DMode = () => {
    setToggle3D(!toggle3D);
  };

  return (
    <label className="flex items-center cursor-pointer border border-gray-400 rounded-full p-1 relative">
      <input
        type="checkbox"
        className="hidden"
        checked={toggle3D}
        onChange={toggle3DMode}
      />
      <span
        className={`toggle__line w-full h-4 bg-gray-400 rounded-full shadow-inner ${
          toggle3D ? 'bg-green-500' : 'bg-gray-400'
        }`}
      >span>
      <span
        className={`toggle__dot absolute w-6 h-6 bg-white rounded-full shadow inset-y-0 ${
          toggle3D ? 'right-0' : 'left-0'
        }`}
      >span>
    label>
  );
}

Our application has a 3D Mode toggle and this component is used to create it.

The main files are completed – we just have three left and then we're done. Next is the globals.css file which needs this code to replace the existing code:

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Prompt:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;

body {
  font-family: 'Prompt', sans-serif;
  font-weight: 400;
  font-style: normal;
}

We just imported the Prompt font to use in our application.

Continuing on from before, now we have to update the layout.js file so that it also uses the Prompt font. Add this code:

import { Prompt } from 'next/font/google';
import './globals.css';

const prompt = Prompt({ subsets: ['latin'], weight: '400' });

export const metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
};

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body className={prompt.className}>{children}body>
    html>
  );
}

Now we can access the Prompt font throughout our application with this import and update.

All that remains is our page.js file which is the main entry point for all of our components. Replace all the code in that file with this final code shown here:

import CompanyIncomeChart from './components/CompanyIncomeChart/CompanyIncomeChart';

export default function Home() {
  return <CompanyIncomeChart />;
}

Alright all done – our project codebase is complete!

Just return to the root project folder and run the command below. Your application should be up and running in a web browser.

npm run dev

Everything should be working, and now you should have a realtime chart with live random dates.

Conclusion

Realtime communication platforms are essential for all of the tech that we use. Today you learned about Pusher and how it can help you build realtime data applications that can integrate with a chart library like HighCharts.

There are lots of potential applications you can build with these tools. Today's introduction should open the door and give you many ideas for future projects.

How to Deploy a Next.js App Using Fly.io and Tigris

Andrew Baisden — Wed, 17 Apr 2024 21:24:00 +0000

In this tutorial, you're going to learn about the app deployment platform Fly.io and the globally distributed S3-compatible object storage service Tigris.

Both platforms are deeply connected, which makes them a great choice for your projects. You get the app deployment experience from Fly.io and the object storage features from Tigris.

App deployment is pretty self-explanatory, so let's first get a quick introduction into bucket storage, which Tigris uses.

Prerequisites

An IDE/Code editor installed like Visual Studio Code
Node.js and npm installed
Next.js installed or setup
A free account on Fly.io
A free account on Tigris

What is Bucket Storage?
What We'll Be Building
How to Create an Account on Fly.io and Tigris
How to Set Up the User Database Project
How to Build the User Database Application
How to Create the User Database UI
How to Deploy Your App to Fly.io
Conclusion

What is Bucket Storage?

An Amazon S3 bucket is a resource for public cloud storage that is accessible via the Simple Storage Service (S3) platform of Amazon Web Services (AWS).

Low-latency storage is a feature that the globally distributed, S3-compatible object storage service Tigris uses. This means that you can access Amazon's S3 buckets on Tigris for your storage needs.

Tigris has also been fully integrated directly with Fly.io and is also completely integrated with flyctl which operates on hardware from Fly.io. Fly.io's command-line interface, flyctl, allows you to deal with the platform from account creation to application deployment.

What We'll Be Building

To learn the fundamentals of these platforms, we'll build a user database application. It's pretty straightforward: essentially we can perform full CRUD requests which means being able to read, add, update, and delete our user data.

Next.js will be our main framework because it allows us to build full-stack apps without having to create a separate server.

User Database application home screen

You can learn more about Fly.io and Tigris from their documentation. We will need to create an account on both platforms for this project, which I'll walk you through in a minute.

So now, with the theory out of the way, let's get started.

For this project, you can find the codebase on my GitHub here.

How to Create an Account on Fly.io and Tigris

Just follow these steps to get up and running on both platforms:

Firstly you need to create an account on Fly.io, because to utilise Tigris you'll need a Fly.io account.
Next, install the flyctl command line tool on your computer which is essential for setting up your account to deploy your applications.

Ok, let's move on to the next stage which is where we will set up our project as well as our Tigris bucket storage.

How to Set Up the User Database Project

Start by navigating to a directory on your computer where you plan to create the project. Then create a folder called fly-tigris-user-database and cd into it. Now run the command to setup a Next.js project inside of that folder:

npx create-next-app .

All we are doing is setting up our Next.js project and it's important that for the configuration you select yes for Tailwind CSS and the App router because we will need them in this project.

Now run this command to install the AWS SDK:

npm install @aws-sdk/client-s3

We just have one package to install (@aws-sdk/client-s3) which we need for connecting to our bucket.

Ok, good – now it is time to create a bucket for the project we just created. You can refer to their official documentation here.

Just run this command to create a bucket:

fly storage create

Now on the setup screen, choose a name for your bucket. The name should be unique, so you can't use a name that someone else has chosen.

Alright now for the most important stage: you should have your AWS and bucket secrets like the example here:

AWS_ACCESS_KEY_ID: yourkey
AWS_ENDPOINT_URL_S3: https://fly.storage.tigris.dev
AWS_REGION: auto
AWS_SECRET_ACCESS_KEY: your secret access
BUCKET_NAME: your bucket name

Create a .env.local file inside the root of your Next.js project and copy and paste all of those secret environment variables.

To get these environment variables to work properly inside our Next.js application, we need to adjust their names by making them public. See the example below and make the change to your .env.local file.

NEXT_PUBLIC_SECRET_AWS_ACCESS_KEY_ID: yourkey
NEXT_PUBLIC_SECRET_AWS_ENDPOINT_URL_S3: https://fly.storage.tigris.dev
NEXT_PUBLIC_SECRET_AWS_REGION: auto
NEXT_PUBLIC_SECRET_AWS_SECRET_ACCESS_KEY: your secret access
NEXT_PUBLIC_SECRET_BUCKET_NAME: your bucket name

Right now on the Tigris documentation page, if you click on the dashboard button and sign into your account you should see your newly created bucket like in my example shown here:

Tigris website buckets management page

Great! That's the first phase done. We now have a bucket to store our app data online, so we can get started creating our application in the next section.

How to Build the User Database Application

I'll split this part into two sections. First, we'll get our server built and running so that we can test out the CRUD endpoints. Then we'll finish off by building our front end.

How to Create the User Database Server

To begin with, let's create our backend architecture. We are going to be creating four endpoints, so one for each CRUD request. We also need a helper file which will have some functions for getting users from our object storage.

If you have not already done so, cd into the root of the project and run the commands below. They will set up all of our files and folders quickly:

cd src/app
mkdir api
mkdir api/deleteuser api/getusers api/postuser api/updateuser
touch api/deleteuser/route.js
touch api/getusers/route.js
touch api/postuser/route.js
touch api/updateuser/route.js
mkdir helpers
touch helpers/getUsers.js

Good, that was quick. Now we just have to add the code to our five files and our backend API will be ready to test.

Let's do the helpers file first. The code in this file allows us to collect and access the user data stored in our S3 bucket on Tigris.

Put the below code inside of helpers/getUsers.js:

import {
  S3Client,
  ListObjectsV2Command,
  GetObjectCommand,
} from '@aws-sdk/client-s3';

const streamToString = (stream) =>
  new Promise((resolve, reject) => {
    const chunks = [];
    stream.on('data', (chunk) => chunks.push(chunk));
    stream.on('error', reject);
    stream.on('end', () => resolve(Buffer.concat(chunks).toString('utf8')));
  });

export async function fetchAllUsersFromS3() {
  try {
    const s3 = new S3Client({
      region: process.env.NEXT_PUBLIC_SECRET_AWS_REGION,
      endpoint: process.env.NEXT_PUBLIC_SECRET_AWS_ENDPOINT_URL_S3,
      credentials: {
        accessKeyId: process.env.NEXT_PUBLIC_SECRET_AWS_ACCESS_KEY_ID,
        secretAccessKey: process.env.NEXT_PUBLIC_SECRET_AWS_SECRET_ACCESS_KEY,
      },
    });

    const commandDetails = new ListObjectsV2Command({
      Bucket: process.env.NEXT_PUBLIC_SECRET_BUCKET_NAME,
      MaxKeys: 10,
    });
    const { Contents } = await s3.send(commandDetails);
    console.log('List Result', Contents);
    if (!Contents) {
      console.log('no users');
    } else {
      const users = await Promise.all(
        Contents.map(async (item) => {
          const getObject = new GetObjectCommand({
            Bucket: process.env.NEXT_PUBLIC_SECRET_BUCKET_NAME,
            Key: item.Key,
          });

          const { Body } = await s3.send(getObject);
          const data = await streamToString(Body);
          const userObject = JSON.parse(data);
          console.log('Data', data);
          return userObject;
        })
      );
      return users;
    }
  } catch (e) {
    console.error(e);
    throw e;
  }
}

export async function getUserById(users, userId) {
  if (!users) {
    console.log('no users');
  } else {
    return users.find((user) => user.id === userId);
  }
}

export async function getUserByIdEmail(users, email) {
  if (!users) {
    console.log('no users');
  } else {
    return users.find(
      (user) => user.email.toLowerCase() === email.toLowerCase()
    );
  }
}

The main function is fetchAllUsersFromS3(), which basically creates the S3 client with the credentials and configuration that we need. It uses the GetObjectCommand to get the objects contents which are then converted from a stream to a string using the streamToString function. The JSON data is then parsed with the user objects returned.

The other two function calls, getUserById(users, userId) and getUserByIdEmail(users, email), are helper functions that allow us to search for people in our S3 bucket based on their ID or email address. The code stores the essential AWS configuration parameters in environment variables, including the region, endpoint URL, access key, and secret access key, as well as the S3 bucket name.

Alright, just the routes left now.

Start by putting this code into getusers/route.js:

import {
S3Client,
ListObjectsV2Command,
GetObjectCommand,
} from '@aws-sdk/client-s3';

export async function GET() {
const streamToString = (stream) =>
new Promise((resolve, reject) => {
const chunks = [];
stream.on('data', (chunk) => chunks.push(chunk));
stream.on('error', reject);
stream.on('end', () => resolve(Buffer.concat(chunks).toString('utf8')));
});

try {
const s3 = new S3Client({
region: process.env.NEXT_PUBLIC_SECRET_AWS_REGION,
endpoint: process.env.NEXT_PUBLIC_SECRET_AWS_ENDPOINT_URL_S3,
credentials: {
accessKeyId: process.env.NEXT_PUBLIC_SECRET_AWS_ACCESS_KEY_ID,
secretAccessKey: process.env.NEXT_PUBLIC_SECRET_AWS_SECRET_ACCESS_KEY,
},
});

const listParams = {
Bucket: process.env.NEXT_PUBLIC_SECRET_BUCKET_NAME,
MaxKeys: 10,
};

const list = new ListObjectsV2Command(listParams);
const { Contents } = await s3.send(list);

console.log('List Result', Contents);

if (!Contents || Contents.length === 0) {
console.log('No users found');
return new Response(JSON.stringify({ error: 'No users found' }), {
status: 404,
});
}

const users = await Promise.all(
Contents.map(async (item) => {
const getObjectParams = {
Bucket: process.env.NEXT_PUBLIC_SECRET_BUCKET_NAME,
Key: item.Key,
};

const getObject = new GetObjectCommand(getObjectParams);
const { Body } = await s3.send(getObject);
const data = await streamToString(Body);
console.log('Backend API GET Data:', data);
return JSON.parse(data);
})
);

return new Response(JSON.stringify(users), { status: 200 });
} catch (e) {
console.error('Error:', e);
return new Response(
JSON.stringify({ error: e.message || 'Unknown error' }),
{ status: 500 }
);
}
}

In the code for this file, we retrieve the user data from our Tigris S3 bucket and send it back as a JSON response via the Next.js API route handler function.

The function also imports the AWS SDK clients required to communicate with our S3 bucket on Tigris. When the API route is requested, the main entry point, the GET function, is called. Using environment variables, the GET method first establishes an S3 client with the required setup for region, endpoint, and credentials.

After that, a ListObjectsV2Command is created to retrieve the user data list of items from the designated S3 bucket. The method then iterates through the object list, retrieving each object's data with the GetObjectCommand.

The streamToString method is used to convert each object's contents from a stream to a string.

Following parsing of the JSON input, user objects are sent out as a JSON response. A 404 error response is returned if no users are detected, and the function provides a 500 error response with the error message if there are any issues during the process.

Up next is the POST route, so put this code in postuser/route.js:

import { fetchAllUsersFromS3, getUserByIdEmail } from '../../helpers/getUsers';

import { S3Client, PutObjectCommand } from '@aws-sdk/client-s3';

export async function POST(req) {
  try {
    const { firstname, lastname, email, password } = await req.json();
    const id = crypto.randomUUID();
    const data = { firstname, lastname, email, password, id };
    console.log('Request body data', data);
    const allUsers = await fetchAllUsersFromS3();
    console.log('all users', allUsers);
    const existingUser = await getUserByIdEmail(allUsers, email);
    console.log(existingUser, email);
    if (existingUser) {
      return Response.json({
        error: 'Email address already in use',
      });
    }

    const s3 = new S3Client({
      region: process.env.NEXT_PUBLIC_SECRET_AWS_REGION,
      endpoint: process.env.NEXT_PUBLIC_SECRET_AWS_ENDPOINT_URL_S3,
      credentials: {
        accessKeyId: process.env.NEXT_PUBLIC_SECRET_AWS_ACCESS_KEY_ID,
        secretAccessKey: process.env.NEXT_PUBLIC_SECRET_AWS_SECRET_ACCESS_KEY,
      },
    });

    const commandDetails = new PutObjectCommand({
      Body: JSON.stringify(data),
      Bucket: process.env.NEXT_PUBLIC_SECRET_BUCKET_NAME,
      Key: email,
    });

    await s3.send(commandDetails);

    return Response.json({ message: 'User added' });
  } catch (e) {
    console.error(e);
    return Response.json({ error: 'Failed to create user' });
  }
}

This code manages user registration and saves user information in our Tigris S3 bucket. The two helper functions which are needed to communicate with the S3 bucket and collect user data are imported by the function fetchAllUsersFromS3 and getUserByIdEmail. The initial entry point, which is triggered when a POST request is made to access the API route, is the POST function.

The user's information (first and last name, email address, and password) is initially taken from the request body via the POST function. It then uses crypto.randomUUID() to create a unique user ID. To obtain all of the current user data from the S3 bucket, the method then invokes the fetchAllUsersFromS3 helper function.

The code uses the getUserByIdEmail helper function to determine whether the email address supplied in the request already exists in the user data. If the email address already exists, the method provides a JSON response including an error message. If the email address is unique, the method uses environment variables to generate an S3 client with the required setup with the region, endpoint, and credentials.

It then generates a PutObjectCommand that uploads the new user data (as a JSON string) to the S3 bucket, with the email address as the key. Finally, the method produces a JSON response confirming that the user has been successfully added. If an error occurs during the process, the function provides a JSON response including an error message.

Follow that up with our UPDATE route and this is the code which goes into updateuser/route.js:

import { getUserById, fetchAllUsersFromS3 } from '../../helpers/getUsers';

import {
  S3Client,
  DeleteObjectCommand,
  PutObjectCommand,
} from '@aws-sdk/client-s3';

export async function PUT(req) {
  try {
    const { firstname, lastname, email, originalEmail, id } = await req.json();
    console.log('request data', firstname, lastname, email, originalEmail, id);
    const allUsers = await fetchAllUsersFromS3();
    console.log('all users', allUsers);
    const userToUpdate = await getUserById(allUsers, id);
    console.log('user to update', userToUpdate);
    const user = allUsers.find((user) => user.id === id);
    const userEmail = user ? user.email : null;
    console.log('User Email', userEmail);
    if (!userToUpdate) {
      return Response.json({ error: 'User not found' });
    }

    if (!originalEmail || !email) {
      return Response.json({
        error: 'Both originalEmail and email are required for update',
      });
    }

    const data = { firstname, lastname, email, id };

    console.log('Updated data', data);

    const s3 = new S3Client({
      region: process.env.NEXT_PUBLIC_SECRET_AWS_REGION,
      endpoint: process.env.NEXT_PUBLIC_SECRET_AWS_ENDPOINT_URL_S3,
      credentials: {
        accessKeyId: process.env.NEXT_PUBLIC_SECRET_AWS_ACCESS_KEY_ID,
        secretAccessKey: process.env.NEXT_PUBLIC_SECRET_AWS_SECRET_ACCESS_KEY,
      },
    });

    console.log('Original email', originalEmail);
    console.log('New email', email);

    if (userEmail === originalEmail) {
      console.log('The emails are the same so its a match');
      const deleteCommand = new DeleteObjectCommand({
        Bucket: process.env.NEXT_PUBLIC_SECRET_BUCKET_NAME,
        Key: originalEmail,
      });

      await s3.send(deleteCommand);
      const putCommand = new PutObjectCommand({
        Body: JSON.stringify(data),
        Bucket: process.env.NEXT_PUBLIC_SECRET_BUCKET_NAME,
        Key: email,
      });

      await s3.send(putCommand);

      return Response.json({ message: 'User updated successfully' });
    } else {
      console.log('Error: The emails do not match');
      return Response.json({ error: 'Failed to update user' });
    }
  } catch (e) {
    console.error(e);
  }
}

The code includes the same helper functions from earlier, getUserById and fetchAllUsersFromS3, that are used to connect with the S3 bucket and obtain user data. The primary entry point is the PUT function, which is invoked anytime a PUT request is made to the API route. The PUT function first pulls user data (firstname, lastname, email, originalEmail, and id) from the request body.

It then invokes the fetchAllUsersFromS3 helper function, which retrieves all existing user data from the S3 bucket. The code then locates the user to be updated by invoking the getUserById helper function with the specified user ID. If the user cannot be found, the method provides a JSON response with an error message.

If the originalEmail or email is absent, the function provides a JSON response including an error message. The method then builds an updated user data object based on the information given. In addition the code can use environment variables to generate an S3 client with the required settings (region, endpoint, and credentials).

Assuming the initial email address matches the current user's, the function updates the user's information, but if the original email and the current user's email address do not match, the method provides a JSON response including an error message. Like before if an error is detected during the process, then the function will create a log without sending a response.

All thats left is our DELETE route. Add this code to deleteuser/route.js:

import { S3Client, DeleteObjectCommand } from '@aws-sdk/client-s3';

import { fetchAllUsersFromS3, getUserById } from '../../helpers/getUsers';

export async function DELETE(req) {
  try {
    const id = await req.json();
    console.log('Id', id.id);
    const allUsers = await fetchAllUsersFromS3();
    console.log('all users', allUsers);
    const userToDelete = await getUserById(allUsers, id.id);
    console.log('user to delete', userToDelete);

    if (!userToDelete) {
      return Response.json({ error: 'User not found' });
    }

    const userEmail = userToDelete.email;
    const s3 = new S3Client({
      region: process.env.NEXT_PUBLIC_SECRET_AWS_REGION,
      endpoint: process.env.NEXT_PUBLIC_SECRET_AWS_ENDPOINT_URL_S3,
      credentials: {
        accessKeyId: process.env.NEXT_PUBLIC_SECRET_AWS_ACCESS_KEY_ID,
        secretAccessKey: process.env.NEXT_PUBLIC_SECRET_AWS_SECRET_ACCESS_KEY,
      },
    });

    const deleteCommand = new DeleteObjectCommand({
      Bucket: process.env.NEXT_PUBLIC_SECRET_BUCKET_NAME,
      Key: userEmail,
    });

    await s3.send(deleteCommand);
    return Response.json({ message: 'User deleted successfully' });
  } catch (e) {
    console.error(e);
    return Response.json({ error: 'Failed to delete user' });
  }
}

This is used for removing data from our bucket. The code includes the same AWS SDK clients required for communicating with S3, as well as the two helper functions fetchAllUsersFromS3 and getUserById (which are used for getting user data from the S3 bucket). The key entry point is the DELETE function, which is called when a DELETE request is made to the API route.

In the DELETE function, the user ID is initially extracted from the request body. It then invokes the fetchAllUsersFromS3 helper method, which retrieves all existing user data from the S3 bucket. The code then locates the user to be removed by invoking the getUserById helper function with the specified user ID. If the client cannot be found, the method provides a JSON response with an error message.

It then generates a DeleteObjectCommand that deletes the item from the S3 bucket, with the user's email address as the key. Finally, the method produces a JSON response confirming that the user has been successfully erased. Once again errors are logged to the console.

Ok, good that's it – we're done with the backend. Start the server with the usual run code and test out those routes to make sure that you can connect to your bucket and use all of the CRUD requests:

npm run dev

To test the backend, you can use an API testing tool like Postman. Take a look at the example screenshots for reference:

Doing GET Requests

Using the Postman API app to do GET requests for our Tigris bucket

GET requests are pretty easy. Just go to http://localhost:3000/api/getusers.

Doing POST Requests

Using the Postman API app to do POST requests for our Tigris bucket

POST requests can be done here: http://localhost:3000/api/postuser.

Doing PUT Requests

Using the Postman API app to do PUT requests for our Tigris bucket

For PUT requests, go to this route: http://localhost:3000/api/updateuser. It's important to note that you MUST put the original email address for that ID, otherwise it's not going to work. And remember this for the front end, too, because we've only implemented basic error handling.

Doing DELETE Requests

Using the Postman API app to do DELETE requests for our Tigris bucket

DELETE requests can be done here: http://localhost:3000/api/deleteuser.

Great, our backend should be fully working. Now we just have the frontend left. Then we can deploy our app online to fly.io.

How to Create the User Database UI

Now for the front end, we need to create four components and four custom hooks to integrate with them, and each one is self-explanatory. The component files hold our form and table data whereas the hook files perform our CRUD requests and that's all.

Other than that we need to modify a few files so that we get our Tailwind CSS styles working – then we can finish with building our frontend components.

Before we start, run this script from the root project folder so we can set the project folder structure for our components and custom hooks:

cd src/app
mkdir -p components/AddUserForm
touch components/AddUserForm/AddUserForm.js
mkdir -p components/DeleteUserForm
touch components/DeleteUserForm/DeleteUserForm.js
mkdir -p components/UpdateUserForm
touch components/UpdateUserForm/UpdateUserForm.js
mkdir -p components/UserDatabaseTable
touch components/UserDatabaseTable/UserDatabaseTable.js
mkdir -p hooks
touch hooks/useDelete.js
touch hooks/useFetch.js
touch hooks/usePost.js
touch hooks/useUpdate.js

Now that the folders are done, let's quickly do some setup for Tailwind CSS and styling before we complete our codebase.

Replace all of the code in the globals.css file with this code which just sets a background colour for our app:

@tailwind base;
@tailwind components;
@tailwind utilities;

body {
  background: #eeeff1;
  font-size: 16px;
  color: #0e0e0e;
}

Now do the same for layout.js – we are just adding the Arsenal font to our project:

import { Arsenal } from 'next/font/google';
import './globals.css';

const arsenal = Arsenal({
  weight: '400',
  subsets: ['latin'],
});

export const metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
};

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body className={arsenal.className}>{children}body>
    html>
  );
}

Ok moving on, let's get these hooks done.

Up first is useFetch.js which we use for getting data out of our S3 bucket. Give the useFetch.js file this code:

import { useState, useEffect } from 'react';

export function useFetch(url) {
  const [data, setData] = useState([]);
  const [error, setError] = useState(null);
  const [isLoading, setIsLoading] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const json = await fetch(url).then((r) => r.json());
        setIsLoading(false);
        setData(json);
      } catch (error) {
        setError(error);
        setIsLoading(false);
      }
    };

    fetchData();

    const pollInterval = setInterval(() => {
      fetchData();
    }, 5000);

    return () => {
      clearInterval(pollInterval);
    };
  }, [url]);

  return { data, error, isLoading };
}

Let's take a look at this file and see how it works.

We have three state variables: one for our fetched data, another to take care of errors during the fetch process, and our loading state which indicates if our data is being fetched or not. The fetchData method is asynchronous and utilises the fetch API to retrieve data from the specified URL. It then adjusts the state variables accordingly.

If the fetch is successful, isLoading is changed to false, and the data state is updated with the retrieved JSON data. If an error occurs, it assigns error to the error object and sets isLoading to false.

There is also a function for polling set up at the end which is set to 5 seconds. Basically all it does is run the fetch function every 5 seconds, so if there is any new data in the API then the page will automatically be updated.

You can customise this so that it does it more frequently, less frequently, or not at all. If you disable this code, then you have to manually refresh your page to see new changes to the API.

Lastly, the useFetch function returns an object with the data, error, and isLoading state variables, which we can use in the component that calls this custom hook.

Now for the usePost.js file, add this code to the usePost.js file:

import { useState } from 'react';

export function usePost() {
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState(null);
  const [response, setResponse] = useState(null);

  const postRequest = async (url, formData) => {
    setIsLoading(true);
    setError(null);
    setResponse(null);

    try {
      const response = await fetch(url, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },

        body: JSON.stringify(formData),
      });

      const responseData = await response.json();

      if (response.ok) {
        setResponse(responseData);
      } else {
        setError(responseData);
      }
    } catch (error) {
      setError(error);
    } finally {
      setIsLoading(false);
    }
  };

  return { isLoading, error, response, postRequest };
}

Let's run through the code to see how this custom hook works. Like our previous file, this file has state variables setup to check loading and error states. But this time, we also have a response state used to save the return data from the successful POST request.

The postRequest method is asynchronous and accepts a URL and formData as inputs. This function is responsible for performing the POST request and changing the state variables. It collects the form data from the frontend which would be a new entry for our API in the S3 bucket on Tigris. This is sent as JSON and saved in our S3 bucket.

Next is useUpdate.js, so now you can add this code to the useUpdate.js file:

import { useState } from 'react';

export function useUpdate() {
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState(null);
  const [response, setResponse] = useState(null);
  const updateRequest = async (url, formData) => {
    setIsLoading(true);
    setError(null);
    setResponse(null);

    try {
      const response = await fetch(url, {
        method: 'PUT',
        headers: {
          'Content-Type': 'application/json',
        },

        body: JSON.stringify(formData),
      });

      const responseData = await response.json();

      if (response.ok) {
        setResponse(responseData);
      } else {
        setError(responseData);
      }
    } catch (error) {
      setError(error);
    } finally {
      setIsLoading(false);
    }
  };

  return { isLoading, error, response, updateRequest };
}

Just like our previous custom hooks, this file can track our loading and error states. It's quite similar to our POST custom hook, but it's now doing a PUT request and updating existing data in our S3 bucket as opposed to creating brand new entries.

And lastly it's time for the useDelete.js file. Add this code to our useDelete.js file:

import { useState } from 'react';

export function useDelete() {
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState(null);
  const [response, setResponse] = useState(null);
  const deleteRequest = async (url, formData) => {
    setIsLoading(true);
    setError(null);
    setResponse(null);

    try {
      const response = await fetch(url, {
        method: 'DELETE',
        headers: {
          'Content-Type': 'application/json',
        },

        body: JSON.stringify(formData),
      });

      const responseData = await response.json();

      if (response.ok) {
        setResponse(responseData);
      } else {
        setError(responseData);
      }
    } catch (error) {
      setError(error);
    } finally {
      setIsLoading(false);
    }
  };

  return { isLoading, error, response, deleteRequest };
}

First, we will have an overview of how this custom hook works. We use this file for making delete requests, so essentially removing data from our S3 bucket.

Like our other custom hooks, it contains the same state for checking loading and errors. The response state gives us the data from a successful or bad DELETE request.

The file uses the fetch API to send a DELETE request to the specified URL. The request body contains the formData object with its response.

Our hook files are done, so we just need to finish with our component and page file and our application is good to go!

Ok our component files have the same name as their folder, which makes them easy to find.

First up is our AddUserForm.js file, and here is the code for our file:

import { useState } from 'react';
import { usePost } from '../../hooks/usePost';

export default function AddUserForm() {
  const API = 'http://localhost:3000/';

  // POST form input state
  const [firstname, setFirstname] = useState('');
  const [lastname, setlastname] = useState('');
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const handlePostForm = async (e) => {
    e.preventDefault();

    if (
      firstname === '' ||
      lastname === '' ||
      email === '' ||
      password === ''
    ) {
      console.log('The form needs all fields to be filled in');
    } else {
      try {
        const user = {
          firstname: firstname,
          lastname: lastname,
          email: email,
          password: password,
        };
        // POST Route
        postRequest(`${API}/api/postuser`, user);
        console.log(`User ${user}`);
        setFirstname('');
        setlastname('');
        setEmail('');
        setPassword('');

        setAddUserMessage();
      } catch (error) {
        console.log(error);
      }
    }
  };

  // CRUD message box state
  const useToggleMessage = (initialState = 'hidden') => {
    const [message, setMessage] = useState(initialState);

    const toggleMessage = () => {
      setMessage('');

      setTimeout(() => {
        setMessage('hidden');
      }, 3000);
    };

    return [message, toggleMessage];
  };

  const [addUserMessage, setAddUserMessage] = useToggleMessage();
  const { postRequest } = usePost();

  return (
    <div className="bg-white p-4 rounded drop-shadow-md">
      <h1 className="text-2xl mb-4">ADD Userh1>
      <form onSubmit={(e) => handlePostForm(e)}>
        <div className="flex flex-wrap items-center mb-2">
          <label className="p-2 w-36 border-solid border-2">Firstnamelabel>
          <input
            type="text"
            value={firstname}
            onChange={(e) => setFirstname(e.target.value)}
            className="grow p-2 border border-2"
            required
          />
        div>

        <div className="flex flex-wrap items-center mb-2">
          <label className="p-2 w-36 border-solid border-2">Lastnamelabel>
          <input
            type="text"
            value={lastname}
            onChange={(e) => setlastname(e.target.value)}
            className="grow p-2 border border-2"
            required
          />
        div>
        <div className="flex flex-wrap items-center mb-2">
          <label className="p-2 w-36 border-solid border-2">Emaillabel>
          <input
            type="email"
            value={email}
            onChange={(e) => setEmail(e.target.value)}
            className="grow p-2 border border-2"
            required
          />
        div>
        <div className="flex flex-wrap items-center mb-2">
          <label className="p-2 w-36 border-solid border-2">Passwordlabel>
          <input
            type="password"
            value={password}
            onChange={(e) => setPassword(e.target.value)}
            className="grow p-2 border border-2"
            required
          />
        div>
        <div>
          <button
            type="submit"
            className="bg-slate-600 hover:bg-slate-400 p-2 text-white cursor-pointer font-bold rounded-lg"
          >
            Add User
          button>
        div>
        <div>
          <p className={`bg-amber-100 p-2 mt-4 rounded ${addUserMessage}`}>
            User added
          p>
        div>
      form>
    div>
  );
}

This component has a form which sends a POST request to our server. We are adding new users by sending the request body data for the state variables (Firstname, Lastname, Email and Password) to our backend server which then saves them to our S3 bucket on Tigris. The form uses the usePost hook we created to send the POST request to our server.

Alright next is the DeleteUserForm.js file. Here is the code needed for the file:

import { useState } from 'react';
import { useDelete } from '../../hooks/useDelete';

export default function DeleteUserForm() {
  const API = 'http://localhost:3000/';

  // DELETE form input state
  const [deleteId, setDeleteId] = useState('');
  const { deleteRequest } = useDelete();

  // CRUD message box state
  const useToggleMessage = (initialState = 'hidden') => {
    const [message, setMessage] = useState(initialState);

    const toggleMessage = () => {
      setMessage('');

      setTimeout(() => {
        setMessage('hidden');
      }, 3000);
    };

    return [message, toggleMessage];
  };

  const [deleteUserMessage, setDeleteUserMessage] = useToggleMessage();

  const handleDeleteForm = async (e) => {
    e.preventDefault();
    if (deleteId === '') {
      console.log('Form needs an id to be submitted');
    } else {
      try {
        const userId = {
          id: deleteId,
        };

        console.log('User ID', userId);
        // DELETE Route
        deleteRequest(`${API}/api/deleteuser`, userId);
        console.log(`User ${deleteId} deleted`);
        console.log(`UserId ${userId}`);
        setDeleteId('');

        setDeleteUserMessage();
      } catch (error) {
        console.log(error);
      }
    }
  };

  return (
    <div className="bg-white p-4 rounded drop-shadow-md mb-4 mt-4">
      <h1 className="text-2xl mb-4">DELETE Userh1>
      <form onSubmit={(e) => handleDeleteForm(e)}>
        <div className="flex flex-wrap items-center mb-2">
          <label className="p-2 w-36 border-solid border-2">IDlabel>
          <input
            type="text"
            value={deleteId}
            onChange={(e) => setDeleteId(e.target.value)}
            className="grow p-2 border border-2"
            required
          />
        div>
        <div>
          <button
            type="submit"
            className="bg-slate-600 hover:bg-slate-400 p-2 text-white cursor-pointer font-bold rounded-lg"
          >
            Delete User
          button>
        div>
        <div>
          <p className={`bg-amber-100 p-2 mt-4 rounded ${deleteUserMessage}`}>
            User deleted
          p>
        div>
      form>
    div>
  );
}

This one is pretty straightforward: it just has a form for deleting users from the database. Essentially, the logic searches for a user by its ID in the database. If it finds a match, then it sends a DELETE request to the server which removes that entry from our S3 bucket. Like our previous component, this uses a useDelete hook to perform the action.

Right, on to the UpdateUserForm.js file now. This is the code for our form, so go ahead and add it in:

import { useState } from 'react';
import { useUpdate } from '../../hooks/useUpdate';

export default function UpdateUserForm() {
  const API = 'http://localhost:3000/';

  // UPDATE/PUT form input state
  const [updateId, setUpdateId] = useState('');
  const [updateFirstname, setUpdateFirstname] = useState('');
  const [updateLastname, setUpdateLastname] = useState('');
  const [updateEmail, setUpdateEmail] = useState('');
  const [originalemail, setOriginalemail] = useState('');
  const [updatePassword, setUpdatePassword] = useState('');

  // CRUD message box state
  const useToggleMessage = (initialState = 'hidden') => {
    const [message, setMessage] = useState(initialState);

    const toggleMessage = () => {
      setMessage('');

      setTimeout(() => {
        setMessage('hidden');
      }, 3000);
    };

    return [message, toggleMessage];
  };

  const [updateUserMessage, setUpdateUserMessage] = useToggleMessage();
  const { updateRequest } = useUpdate();

  const handleUpdateForm = async (e) => {
    e.preventDefault();

    if (
      updateId === '' ||
      updateFirstname === '' ||
      updateLastname === '' ||
      originalemail === '' ||
      updateEmail === '' ||
      updatePassword === ''
    ) {
      console.log('The form needs all fields to be filled in');
    } else {
      try {
        const user = {
          id: updateId,
          firstname: updateFirstname,
          lastname: updateLastname,
          originalEmail: originalemail,
          email: updateEmail,
          password: updatePassword,
        };

        console.log(`User: ${user}`);
        // UPDATE Route
        updateRequest(`${API}/api/updateuser`, user);

        setUpdateId('');
        setUpdateFirstname('');
        setUpdateLastname('');
        setOriginalemail('');
        setUpdateEmail('');
        setUpdatePassword('');

        setUpdateUserMessage();
      } catch (error) {
        console.log(error);
      }
    }
  };

  return (
    <div className="bg-white p-4 rounded drop-shadow-md mb-4 mt-4">
      <h1 className="text-2xl mb-4">UPDATE Userh1>
      <form onSubmit={(e) => handleUpdateForm(e)}>
        <div className="flex flex-wrap items-center mb-2">
          <label className="p-2 w-36 border-solid border-2">IDlabel>
          <input
            type="text"
            value={updateId}
            onChange={(e) => setUpdateId(e.target.value)}
            className="grow p-2 border border-2"
            required
          />
        div>
        <div className="flex flex-wrap items-center mb-2">
          <label className="p-2 w-36 border-solid border-2">Firstnamelabel>
          <input
            type="text"
            value={updateFirstname}
            onChange={(e) => setUpdateFirstname(e.target.value)}
            className="grow p-2 border border-2"
            required
          />
        div>

        <div className="flex flex-wrap items-center mb-2">
          <label className="p-2 w-36 border-solid border-2">Lastnamelabel>
          <input
            type="text"
            value={updateLastname}
            onChange={(e) => setUpdateLastname(e.target.value)}
            className="grow p-2 border border-2"
            required
          />
        div>
        <div className="flex flex-wrap items-center mb-2">
          <label className="p-2 w-36 border-solid border-2">
            Original Email
          label>
          <input
            type="email"
            value={originalemail}
            onChange={(e) => setOriginalemail(e.target.value)}
            className="grow p-2 border border-2"
            required
          />
        div>
        <div className="flex flex-wrap items-center mb-2">
          <label className="p-2 w-36 border-solid border-2">Emaillabel>
          <input
            type="email"
            value={updateEmail}
            onChange={(e) => setUpdateEmail(e.target.value)}
            className="grow p-2 border border-2"
            required
          />
        div>
        <div className="flex flex-wrap items-center mb-2">
          <label className="p-2 w-36 border-solid border-2">Passwordlabel>
          <input
            type="password"
            value={updatePassword}
            onChange={(e) => setUpdatePassword(e.target.value)}
            className="grow p-2 border border-2"
            required
          />
        div>
        <div>
          <button
            type="submit"
            className="bg-slate-600 hover:bg-slate-400 p-2 text-white cursor-pointer font-bold rounded-lg"
          >
            Update User
          button>
        div>
        <div>
          <p className={`bg-amber-100 p-2 mt-4 rounded ${updateUserMessage}`}>
            User updated
          p>
        div>
      form>
    div>
  );
}

The form in this component uses the useUpdate hook to send a PUT request to our backend server. The form takes state variables for ID, Firstname, Lastname, Original Email, Email and Password.

Most of the fields are easy to interpret – let's take note of the Original Email form field. You have to put in the current email address for the user, otherwise you will be unable to update the user because it will fail the check. The ID also needs to match, otherwise the form won't work.

Good, now we just have two files remaining – starting with the UserDatabaseTable.js file which requires this code:

import { useEffect } from 'react';
import { useFetch } from '../../hooks/useFetch';

export default function UserDatabaseTable() {
  const API = 'http://localhost:3000/';

  const { data, error, isLoading } = useFetch(`${API}/api/getusers`);
  if (error) return <div>An error has occurred.div>;
  if (isLoading) return <div>Loading...div>;

  useEffect(() => {
    console.log('Client API GET Data:', data);
  }, [data]);

  return (
    <div>
      <h1 className="text-4xl mb-2 text-center uppercase">User Databaseh1>
      <div className="bg-gray-900 text-white p-4 rounded flex justify-center">
        <table className="table-auto border border-slate-500">
          <thead>
            <tr>
              <th className="border border-slate-600 p-2 text-2xl">IDth>
              <th className="border border-slate-600 p-2 text-2xl">
                Firstname
              th>
              <th className="border border-slate-600 p-2 text-2xl">Lastnameth>
              <th className="border border-slate-600 p-2 text-2xl">Emailth>
            tr>
          thead>

          {data === 0 ? (
            <tbody>tbody>
          ) : (
            <tbody>
              {data.map((user) => (
                <tr key={user.id}>
                  <td className="border border-slate-600 p-2 bg-gray-800 hover:bg-gray-600">
                    {user.id}
                  td>
                  <td className="border border-slate-600 p-2 bg-gray-800 hover:bg-gray-600">
                    {user.firstname}
                  td>
                  <td className="border border-slate-600 p-2 bg-gray-800 hover:bg-gray-600">
                    {user.lastname}
                  td>
                  <td className="border border-slate-600 p-2 bg-gray-800 hover:bg-gray-600">
                    {user.email}
                  td>
                tr>
              ))}
            tbody>
          )}
        table>
      div>
    div>
  );
}

In this file, we are using the hook useFetch to do a GET request to our S3 bucket. That's how we retrieve the data that is inside of it. Then all we are doing is data.map to loop through the array of data and render it in a table on our screen.

Almost there – we have one file left: our page.js file in the root folder. Just add this code and let's get it completed:

'use client';
import UserDatabaseTable from './components/UserDatabaseTable/UserDatabaseTable';
import AddUserForm from './components/AddUserForm/AddUserForm';
import UpdateUserForm from './components/UpdateUserForm/UpdateUserForm';
import DeleteUserForm from './components/DeleteUserForm/DeleteUserForm';

export default function Home() {
  return (
    <div className="container mx-auto mt-4">
      <UserDatabaseTable />
      <div className="bg-slate-100 rounded p-10 drop-shadow-lg">
        <AddUserForm />
        <UpdateUserForm />
        <DeleteUserForm />
      div>
    div>
  );
}

All this file does is act as a main entry point for all of the components we created so that they render on our screen and complete the front end.

And we are done! Now you can run the app with npm run dev (if it's not running already) and give it a try.

Just a quick reminder: when using the UPDATE User form, you need to be sure that you are using the Original Email, otherwise it won't update.

Also, be careful of the white space when copying the ID because it will also stop the updates from going through. Feel free to implement better error handling and checking if you want to ;)

Our app should be fully working so now. We just need to deploy it online in the final section.

How to Deploy Your App to Fly.io

Deployment is the final part of this process, and it only takes a few simple steps to deploy your application online.

Firstly, you should be in the root of the fly-tigris-user-database project folder. Run the following command from your project's source directory to start a new Fly.io app:

fly launch

This command will create a fly.toml file and configure our project by setting up our project name, deployment region and other settings.

Now run the command below to deploy your application to Fly.io:

fly deploy

The fly deploy flyctl command creates your Fly App and launches it on one or more Fly Machines, using the parameters supplied in the local fly.toml file.

Now when you go to the dashboard on your Fly.io account, you will see your app like in the screenshot here:

Fly.io website apps dashboard screen

Our app is now online but it won't work until we have added our environment variables from the .env.local file to the Secrets page for our app on Fly.io. We will also need to update our API route variable next so that it is using our Fly.io route and not localhost.

First lets do the secrets so use this example secrets page as a reference for your own app:

Fly.io website secrets screen

Secrets are staged for the next release. To trigger a deploy, run fly deploy from a terminal. Remember that your app won't work online until you update the API variable for the components inside of the components folder. Locally we use http://localhost:3000 and online we will ue the url that is automatically generated by fly.io.

The API variable is near the top inside of these files which you will need to update:

components/AddUserForm/AddUserForm.js
components/DeleteUserForm/DeleteUserForm.js
components/UpdateUserForm/UpdateUserForm.js
components/UserDatabaseTable/UserDatabaseTable.js

See the example code here for the API variable:

const API = 'https://your-online-url.fly.dev/';

When your app is deployed online, you will get a URL. Just replace the value for the variable API with your Fly.io online URL. The routes in our application are now coming from our app on Fly.io and not our localhost app in the development test environment.

Don't forget to run the command fly deploy again (and every time you make a change to your local codebase or the secrets) so that your app on Fly.io gets the latest changes.

You can read the documentation here for more info on how deployment its done.

That's it! Deployment should be done as well, and we can access our application online.

Conclusion

So today we learned how to build a full-stack application using Next.js and deploy it online to the app hosting platform Fly.io. We also utilised Tigris for storing our user data in an AWS bucket online.

The combination of both platforms makes them a very useful and powerful tool for getting our apps online. Both platforms offer many different features so it's worth playing around with them and seeing how they can be beneficial for your projects.

Andrew Baisden - freeCodeCamp.org

How to Build a CRUD App with TanStack Start and TanStackDB (with RxDB Integration)

Table of Contents

Prerequisites

What is TanStack Start?

What is TanStack DB (with RxDB Integration)?

Setting Up Our Project

Creating the Database Client

Understanding Local Persistence with RxDB

Creating a Todo Collection

Creating Our CRUD Actions

Creating the Frontend Page

TanStack CRUD (RxDB)

How Does TanStack Start Compare to Next.js and Remix?

When Should You Use TanStack Start, Next.js, or Remix?

When to use TanStack Start

When to use Next.js

When to use Remix.js

Conclusion

Clerk vs Kinde vs Better Auth: How to Choose the Right Next.js Authentication Library

Table of Contents

What are Clerk, Kinde and Better Auth?

Prerequisites

How to Set Up Authentication Using Clerk

Dashboard Page

How to Set Up Authentication Using Kinde

How to Set Up Authentication Using Better Auth

"text-3xl font-bold mb-6">Access Required

"text-xl font-semibold mb-4 text-black"> Sign In Options

"text-lg font-semibold text-green-800"> Welcome, {user.isAnonymous ? 'Anonymous User' : user.name}!

"text-3xl font-bold mb-6">Dashboard

"font-semibold mb-2 text-black">Debug Info:

When To Use Each Library

When to Use Clerk

When to Use Kinde

When to Use Better Auth

Conclusion

How to Build a Team of AI Agents for Your Website for Free Using Agno and Groq

Table of Contents

Prerequisites

What Are AI Agents?

What are Agno and Groq Cloud?

What You Will Be Building

Building Our Python Backend

Creating An Account On Groq Cloud

Setting Up Our Python Project

Working On The Python Codebase

Running Our Python Backend

Building Our React Frontend

$1

$1

$1

$1

$1

$1

Career

Chat with CareerAgent

Skills

Frontend Development

Contact Me

Quick Links

Contact Form

Projects

Chat with ProjectAgent

Featured Projects

E-commerce Platform

Task Management Application

Research & Insights

Chat with ResearchAgent

Search for Information

Compare Technologies

Services

Chat with BusinessAdvisor

Services Offered

Web Development

Technologies

Details

Conclusion

Stay up to date with tech, programming, productivity, and AI

How to Build a Realtime Chart with React, HighCharts, and Pusher