DEV Community: Femi Akinyemi

What AI Still Misses in Production Next.js Apps

Femi Akinyemi — Mon, 22 Jun 2026 07:10:47 +0000

Introduction

You ask AI to fix a fetch. It does. Types pass. The component renders. You push.

Then dev crawls to a stop. Or prod serves a blank page. Or GitHub says conflict on a file you never touched. The model did its job inside the file. It did not see the repo around it.

That gap is where most Next.js pain actually lives. Not broken JSX. Wrong root folder. Wrong env layer. Wrong deploy model. Stale git ref on the remote.

This list is the stuff that keeps surviving AI refactors, green CI, and clean local merges.

1. Next dev watching the whole monorepo

The problem

Your app sits inside a bigger repo. There is another lockfile above it. You run next dev, see a warning about multiple lockfiles, and keep going.

Compile gets slow. CPU stays high. Sometimes the machine feels stuck for no clear reason. AI will suggest faster imports or smaller components. It will not notice Next is indexing the wrong tree.

The fix

Pin Turbopack to the app folder in next.config.ts:


import path from "node:path";
import { fileURLToPath } from "node:url";

const appRoot = path.dirname(fileURLToPath(import.meta.url));

export default {
  turbopack: { root: appRoot },
};

This applies to certain monorepo/workspace setups.
It is not the solution for every slow Next.js dev environment.

If that lockfile warning shows up, treat it as a bug, not noise.

2. Putting server secrets in `NEXT_PUBLIC_*`

The problem

AI puts API URLs and tokens in NEXT_PUBLIC_* because that is what client fetch examples use. Those values ship in the browser bundle. Anyone can read them in the built JS.

Or the opposite: server route handlers need an upstream URL that only exists as a public var pointing somewhere else. Local dev works with a hack. Prod does not.

The fix

Split by runtime:

Browser code → NEXT_PUBLIC_* only
Route handlers / server code → server env vars (no NEXT_PUBLIC_ prefix)

Upstream URLs and service tokens stay on the server. Client calls your BFF or the public API surface. Never both through one env var.

3. API address missing or duplicating `/api/v1`

The problem

One backend expects calls to https://api.example.com. Another expects https://api.example.com/api/v1. Your code adds paths on top of the base address. Get it wrong by one segment and every request 404s.

This often happens when you copy .env.local from another app in the same repo. AI copies the fetch code correctly. It does not check whether the base address matches this app.

The fix

Open that app's .env.example. See exactly how it builds URLs. Match that. Do not assume all apps in one company use the same address format.

4. Adding server API files to an app that deploys as static `HTML`

The problem

Some Next apps are built with output: "export". That means the output is plain HTML, CSS, and JS files uploaded to static hosting (like S3 or Amplify static). There is no Node server running your app in production.

You can add files under app/api/ and they may work in local dev. They will not exist after a static build. The hosting serves files, not your API routes.

AI often suggests "add an API route to hide the token" without checking how the app is deployed.

The fix

If you deploy as static files, the browser calls your backend directly and your backend must allow that origin (CORS).

If you need a server middle layer to hide tokens, you cannot deploy as a pure static export. You need hosting that runs Next.js server code.

Pick one. Mixing both without knowing it is a common break.

5. Local proxy setup that does not exist in production

The problem

In local dev, teams often add a proxy in next.config so calls to /api/v1/... get forwarded to a real server. Same website address, no cross-origin browser errors. Works great on your machine.

A static production build does not include that proxy. The browser still calls /api/v1/... on your static site address. Those requests never reach your backend.

AI adds the proxy config. It rarely asks how you deploy.

The fix

Use different setup for dev and prod:

Dev: proxy in next.config if you want
Prod: full backend URL in env, CORS enabled on the backend

Run next build the same way CI does before you call it done. next dev alone is not enough.

6. Server-only code imported in a client component

The problem

Next has a hard line between server code and client code. Files marked "use client" run in the browser. Things like reading request headers or secret env vars only work on the server.

One shared lib/api.ts file often gets imported everywhere. AI merges duplicate files and accidentally puts server code inside a client component. Build fails or you get strange runtime errors.

The fix

Keep two files:

One for the browser (simple fetch, public env only)
One for the server (secret env, used only in app/api routes or server components)

If it reads cookies, headers, or private env, it never goes in a "use client" file.

7. Login token is valid but for the wrong app

The problem

Some apps check two things: is the user logged in, and does their role match this specific product. You paste a login token into .env.local. It is not expired. The app still sends you back to the login page.

The token belongs to a different dashboard or role. AI tries to fix the redirect logic. The check is working. Your token is for the wrong app.

The fix

Make sure three things match: the role setting in env, the role inside the token, and what the app's auth guard expects. When testing locally, use a token created for this app specifically.

8. Fake login still turned on while shipping real auth

The problem

Many teams add a dev-only flag that skips real login so they can build UI faster. Useful. Easy to forget about.

You say auth is done. But callback, token refresh, sign out, and role redirect were never tested with real login. AI sees a user object in state and assumes auth works.

The fix

Use the skip-login flag only for UI work. Before merging: turn it off, log in for real, open a protected page, sign out.

9. Old dev server still running on the port

The problem

You run pnpm dev again without closing the last one. Port 3000 is busy. Next starts on 3001. You keep refreshing 3000 and see the wrong app or nothing useful.

AI will debug your React code. It will not check which process owns the port.

The fix


lsof -i :3000

Kill the old process. Start fresh. Confirm which port the terminal says before debugging anything else.

10. No conflict on your machine, conflict on GitHub

The problem

You updated your branch with the latest main locally. Merge looks clean. The pull request on GitHub still shows conflicts.

Your local branch and the copy on GitHub are not the same history anymore. GitHub compares the remote branch to main, not your rebased local copy.

AI says "pull main again." You already did. On your machine only.

The fix

After rebasing locally, update GitHub:

git push --force-with-lease origin your-branch

Only use this when you intentionally rebased or rewrote branch history.

Check they match:

git log origin/your-branch..HEAD

No output means local and remote are in sync.

11. Expired login token in your env file

The problem

For local development, some apps read a login token from .env.local and attach it to server-side API calls. Tokens expire. Handlers return 401 Unauthorized. The UI shows empty data or error states.

Looks like the API is broken. AI rewrites error handling. The token is just old.

The fix

Decode the token and check the expiry time. Get a fresh one from a real login. Treat dev tokens like passwords with an expiration date.

12. Public env vars set after the build, not during it

The problem

NEXT_PUBLIC_ values are written into the JavaScript at build time.

If you set them in your hosting dashboard after the build already ran, the live site still has the old values baked in.

Works on your machine with .env.local. Wrong API address or app setting in production.

The fix

Make sure public env vars exist before next build runs in CI. Some teams write a .env.production file in the build step. Check build logs, not just runtime settings in the host UI.

13. Copied env from the wrong app in the same repo

The problem

Two Next apps in one repo look similar. Same folders, same tools. Different env needs. Copy .env.local from one app into another.

The shell loads. The first API call or redirect fails. AI assumes env is fine because the file is there.

The fix

Every app has its own .env.example. Start from that file every time.

Env is per app, not per repo.

14. Login page and dashboard on the same local port

The problem

Login usually lives on one app. The dashboard on another. In local dev that means different ports (for example 3001 for login, 3000 for dashboard).

If both URLs in env point to the same port, redirects get confused. Loops, wrong landing page, sign out going nowhere useful.

The fix

Write down the flow: login address → callback → dashboard address.

Set env to match separate apps, even on localhost.

15. Green code review, nobody ran a production build

The problem

AI fixed the component in the prompt. Types pass. Review looks good. Nobody ran a full production build with real login and a real API call.

The fix

Before merge:

next dev starts without warnings
next build passes with the same config CI uses
One real login (skip-login flag off)
One API call that returns real data

Conclusion

AI is strong inside a single file. It is weak on repo layout, env setup, static vs server deploy, and whether your GitHub branch matches your local branch.

Those live outside the chat window. Check them yourself and a lot of "random" Next.js bugs stop being random.

Need Help With Your Next.js or AWS Project?

Over the last 5+ years, I've helped build and maintain production systems used by businesses across different industries. If you're looking for help with:

Next.js applications
React architecture
AWS deployments
AI integrations
Performance optimization

feel free to reach out.

LinkedIn: Femi Akinyemi
DEV: dev.to/femi_akinyemi
Portfolio: Femi Akinyemi

Wedding Memories: The Collaborative Wedding Album!

Femi Akinyemi — Fri, 11 Oct 2024 15:28:15 +0000

Wedding Memories

This is a submission for the The Pinata Challenge

What I Built

Wedding Memories is an app designed to capture, share, and cherish every unforgettable moment from your special day! It allows wedding guests to easily upload photos, creating a collaborative album that captures the essence of the celebration. By using Pinata's Files API, the app provides a seamless experience for secure and efficient media uploads and storage.

Demo

Check out the live version of the app here: Wedding Memories

Screenshots:

Upload Section - A user-friendly interface for selecting and uploading media files:

Gallery View - Displays all uploaded memories in a responsive layout:

Mobile-Optimized Design - Ensures smooth user experience across all devices:

Download Options - Guests can download their favourite moments to keep memories forever.

My Code

You can explore the full code for this project on GitHub:

More Details

Wedding Memories leverages Pinata’s Files API to build secure and efficient file uploads. Below is a brief breakdown of the integration:

File Uploads: Guests can easily upload images directly from their devices. This is accomplished using the pinata.upload.file, which uses JWT-based authentication to ensure secure file handling. Once uploaded, the files are securely stored, and their unique identifiers (CIDs) are generated for retrieval.
Local Previews Before Upload: To enhance the guest experience, wedding memories generate local previews of images before uploading them. This feature allows guests to confirm their selections and make adjustments, ensuring only their desired image is submitted.

After successful uploads, the files are rendered using the file API. This guarantees rapid access to the content, providing guests with a seamless experience when viewing shared memories.

Download Feature: Guests can now download their favourite photos directly from the app, making it easy to save cherished memories to their devices. The app includes an API route that facilitates the secure downloading of files.

API Integration Breakdown:

The building includes several key API routes, each designed to handle specific functionalities:

File Upload Endpoint

This accepts file uploads and stores them using Pinata’s upload function. It then generates a signed URL for easy access to the uploaded file.

import { NextResponse, NextRequest } from "next/server";
import { pinata } from "../../../../utils/config";


export async function POST(request: NextRequest) {
  try {
    const data = await request.formData();
    const file: File | null = data.get("file") as unknown as File;
    const uploadData = await pinata.upload.file(file)
    const url = await pinata.gateways.createSignedURL({
        cid: uploadData.cid,
        expires: 3600,
    });
    return NextResponse.json(url, { status: 200 });
  } catch (e) {
    console.log(e);
    return NextResponse.json(
      { error: "Internal Server Error" },
      { status: 500 }
    );
  }
}

API Key Generation (/api/key/route.ts):

Creates a temporary API key with permissions to pin files to IPFS.


/* eslint-disable @typescript-eslint/no-unused-vars */
import { NextResponse } from "next/server";
import { pinata } from "../../../../utils/config";

export const dynamic = "force-dynamic";

export async function GET() {
    try {
        const uuid = crypto.randomUUID();
        const keyData = await pinata.keys.create({
            keyName: uuid.toString(),
            permissions: {
                endpoints: {
                    pinning: {
                        pinFileToIPFS: true,
                    },
                },
            },
            maxUses: 1,
        })
        return NextResponse.json(keyData, { status: 200 });
    } catch (error) {
        console.log(error);
        return NextResponse.json({ text: "Error creating API Key:" }, { status: 500 });
    }
}

List Files (/api/listfiles/route.ts):

Retrieves a list of uploaded files from Pinata, allowing users to view all shared content in the gallery

import { NextResponse } from "next/server";
import { env } from "process";


export const dynamic = "force-dynamic";

export async function GET() {
  try {
    const options: RequestInit = {
      method: 'GET',
      headers: {
          Authorization: `Bearer ${process.env.NEXT_PUBLIC_PINATA_JWT}`,
      },
      cache: 'no-cache'
    };

    const response = await fetch('https://api.pinata.cloud/v3/files', options);

    if (!response.ok) {
      return NextResponse.json({ text: "Error listing files" }, { status: response.status });
    }

    const { data } = await response.json();
    return NextResponse.json(data, { status: 200 });
  } catch (error) {
    console.log(error, "Error listing files");
    return NextResponse.json({ text: "Error listing files" }, { status: 500 });
  }
}

Image Proxy (/api/proxy/route.ts):

Acts as a proxy for fetching images from external sources, ensuring users can easily access and download their images.

import { NextResponse } from 'next/server';


export async function GET(request: Request) {
  const { searchParams } = new URL(request.url);
  const imageUrl = searchParams.get('url'); // Get the image URL from the query string

  if (!imageUrl) {
    return NextResponse.json({ error: 'Image URL is required' }, { status: 400 });
  }

  try {
    const response = await fetch(imageUrl);

    if (!response.ok) {
      return NextResponse.json({ error: 'Failed to fetch image' }, { status: response.status });
    }

    const contentType = response.headers.get('content-type') || 'application/octet-stream';
    const imageBuffer = await response.arrayBuffer();

    return new NextResponse(imageBuffer, {
      headers: {
        'Content-Type': contentType,
        'Content-Disposition': 'attachment; filename="downloaded_image"',
      },
    });
  } catch (error) {
    console.error('Error fetching image:', error);
    return NextResponse.json({ error: 'Error fetching image' }, { status: 500 });
  }
}

Signed URL Creation (/api/sign/route.ts):

Generates signed URLs for uploaded files.


import { type NextRequest, NextResponse } from "next/server";
import { pinata } from "../../../../utils/config";

export const dynamic = "force-dynamic";

export async function POST(req: NextRequest) {
  try {
    const data = await req.json();
    const mimeType = data.mime_type;

    let url;

    if (mimeType === 'video/mp4') {
      url = await pinata.gateways.createSignedURL({
        cid: data.cid,
        expires: 7776000,
      })
    } else {
      url = await pinata.gateways.createSignedURL({
        cid: data.cid,
        expires: 7776000,
      }).optimizeImage({
        width: 300,
        height: 300,
        format: "webp",
        fit: "contain",
        quality: 90,
        dpr: 2,
        sharpen: 1,

      });
    }

    return NextResponse.json(url, { status: 200 });
  } catch (error) {
    console.log(error);
    return NextResponse.json({ text: "Error creating signed URL:" }, { status: 500 });
  }
}

The app is built with:

Pinata: File API
Frontend: React, Next.js, Framer Motion
Styling: Tailwind CSS for responsive, beautiful layouts.
Hosting: Amplify for deployment.

Conclusion

Weddings are joyous occasions filled with love, laughter, and countless memorable moments. Capturing these precious memories is essential, and with the Wedding Memories app, it's now easier than ever!

This application allows every guest to take lovely pictures on the event day and share them seamlessly, ensuring that no moment is missed and everyone has access to the collective memories of the celebration.

The app harnesses the power of Pinata's Files API to provide a secure and efficient way for guests to upload and share their photos and videos, creating a collaborative album that beautifully encapsulates the essence of the day.

For more details on how the app integrates with Pinata and to explore its capabilities, please refer to the Pinata documentation.

Thank you.

How to Upload Files to Amazon S3 with React and AWS SDK

Femi Akinyemi — Mon, 04 Mar 2024 15:54:14 +0000

INTRODUCTION

Have you ever needed to upload files from your React application to the cloud?

Amazon S3 (Simple Storage Service) provides a robust and scalable solution for storing and managing various file types.

Using the AWS SDK, this article shows how to build a React application that allows users to upload files to S3.

In the article, you'll learn how to handle file selection, validate file types, and handle the upload process with error handling.

By the end, you'll have a basic understanding of integrating file uploads to S3 with React and AWS.

Prerequisite:

Basic understanding of React and JavaScript.
An AWS account and access credentials to configure the S3 connection.

Getting Started

Creating S3 Bucket

The first thing to do is start by creating an S3 bucket. Log in to the AWS S3 console and follow the instructions to create a new bucket, as shown in the image below.

Making the files publicly accessible

Next is to edit the bucket policy to make the file publicly accessible.

Here's how:

Open the bucket: Go to the AWS S3 console and navigate to your specific bucket.
Access permissions: Click on the 'Permissions' tab.
Edit policy: Locate the 'Bucket policy' section and click the 'Edit Policy' button.
Paste JSON code: Copy and paste the following JSON code into the policy editor.

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicListGet",
            "Effect": "Allow",
            "Principal": "*",
            "Action": [
                "s3:List*",
                "s3:Get*"
            ],
            "Resource": [
                "arn:aws:s3:::YOUR_BUCKET_NAME",
                "arn:aws:s3:::YOUR_BUCKET_NAME/*"
            ]
        }
    ]
}

Save changes: Review the policy and click 'Save'.

The policy above makes all objects in the S3 bucket named YOUR_BUCKET_NAME publicly accessible. Anyone online can list and download all files in the bucket and its subfolders.

The policy should be used cautiously as it can be a security risk.

Editing CORS Policy

Now, you must enable Cross-origin resource sharing (CORS).
The CORS configuration, written in JSON, allows clients to access resources in a different domain from applications within the same domain.

Scroll down a bit more, and you will see a section where you can edit CORS settings.

Paste the below JSON into it to enable the upload of files from the front end, or you will receive a CORS error while uploading files.


[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "PUT",
            "POST",
            "DELETE",
            "GET"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": []
    }
]

Uploading files to your AWS S3 bucket is now possible.

Next, we'll talk about the front end.

Run the command below to Scaffold your react application.


npx create-react-app filestorage
cd filestorage
npm start

Installing AWS SDK for JavaScript

You must install the AWS SDK for JavaScript, allowing your React JS application to communicate with S3.

Run the command below to install AWS SDK

npm install aws-sdk

Next is to replace the default code in the App.js file with the code below

import React, { useState } from 'react';
// Uncomment one of the following import options:
import AWS from 'aws-sdk'; // Import entire SDK (optional)
// import AWS from 'aws-sdk/global'; // Import global AWS namespace (recommended)
import S3 from 'aws-sdk/clients/s3'; // Import only the S3 client

import './App.css';

function App() {
  const [file, setFile] = useState(null);
  const [uploading, setUploading] = useState(false)

  const allowedTypes = [
    'image/jpeg',
    'image/png',
    'application/pdf',
    'video/mp4',
    'video/quicktime',
    'audio/mpeg',
    'audio/wav',
    // Add more supported types as needed
  ];

  const handleFileChange = (event) => {
    const selectedFile = event.target.files[0];
    if (allowedTypes.includes(selectedFile.type)) {
      setFile(selectedFile);
    } else {
      alert('Invalid file type. Only images and PDFs are allowed.');
    }
  };

  const uploadFile = async () => {
    setUploading(true)
    const S3_BUCKET = "your_bucket_name"; // Replace with your bucket name
    const REGION = "your_region"; // Replace with your region

    AWS.config.update({
      accessKeyId: "your_accesskeyID",
      secretAccessKey: "your_secretAccessKey",
    });

    const s3 = new S3({
      params: { Bucket: S3_BUCKET },
      region: REGION,
    });

    const params = {
      Bucket: S3_BUCKET,
      Key: file.name,
      Body: file,
    };

    try {
      const upload = await s3.putObject(params).promise();
      console.log(upload);
      setUploading(false)
      alert("File uploaded successfully.");

    } catch (error) {
      console.error(error);
      setUploading(false)
      alert("Error uploading file: " + error.message); // Inform user about the error
    }
  };

  return (
    <>
      <div className="">
        <input type="file" required onChange={handleFileChange} />
        <button onClick={uploadFile}>{uploading ? 'Uploading...' : 'Upload File'}</button>
      </div>
    </>
  );
}

export default App;

The React code above creates a simple file uploader app. Users can select a file that is uploaded to an Amazon S3 bucket.

Here's a brief breakdown:

State Management: It uses React's useState hook to manage the selected file and uploading state.
Allowed File Types: Defines an array of allowed file types.
File Change Handler: When a file is selected, it checks if the file type is allowed and updates the state with the selected file.
Upload Function: Constructs S3 parameters and uploads the file to the specified S3 bucket. It handles success and error cases, providing feedback to the user.
User Interface: Provides a file input field and a button for uploading—the button text changes based on the uploading state.
AWS SDK: Imports necessary modules from the AWS SDK to interact with S3 and configures it with credentials and region.

The code offers a basic file uploading functionality to S3 from a React app.

Conclusion

You've successfully uploaded a file to your S3 bucket with these steps! You can consult the documentation for tailored options that suit your specific requirements.

Build a simple project management app with Neon, PostgREST, and DigitalOcean

Femi Akinyemi — Tue, 27 Feb 2024 16:29:41 +0000

Introduction

Neon s erverless Postgres stands out in the world of databases. It provides a fully managed service for PostgreSQL with unique features like autoscaling, branching, and a great serverless experience. Its architecture makes Neon serverless Postgres different from how users set up Postgres databases by separating storage and compute.

In this guide, we'll leverage the strengths of Neon serverless Postgres to establish a PostgREST API on DigitalOcean. With PostgREST, a PostgreSQL database is turned into a RESTful API.

As a practical illustration, we’ll walk through creating a mini project management application with complete create, read, update, and delete (CRUD) functionality. This application will allow users to create new projects, view existing details, update information, and delete projects as needed.

Ultimately, you’ll have a fully functional PostgREST API powered by Neon serverless Postgres, seamlessly incorporated into your DigitalOcean environment.

Prerequisites

To fully grasp the concepts presented in this tutorial, you’ll need the following:

A Neon account
A DigitalOcean account
A basic understanding of PostgreSQL and REST APIs
Node.js installed on your local machine

Create a Neon project

To set up a Neon project, let’s begin by registering for an account, assuming you don't have one already. With that done, we’ll create a new project by selecting a Project Name. We will use (Project Management), Database name (managementdata), and Postgres version. For this demonstration, we’ll opt for 16 as the Postgres version and choose the region closest to where we would like to deploy our app.

Upon successfully creating the project, we will get a connection string for connecting to our database.

Project directory

To organize our project files and resources, let's create a new project directory using the following terminal command:

    mkdir neonprojectappfolder

Loading demo data into the database

With the project directory in place, follow these steps to load the demo data into the database.

To connect to our database, we will use the connection string provided by Neon and run it in the terminal:

    psql 'postgresql://xxx:xxxx@ep-xxx-xxx-01196450.us-east-2.aws.neon.tech/xxx?sslmode=require'

The command connects to the database using the provided connection string.

Now that we’re connected to the database, let’s upload our demo data by running the command below in the terminal:

    psql 'postgresql://xxx:xxxx@ep-xxx-xxx-01196450.us-east-2.aws.neon.tech/xxx?sslmode=require < projects.sql

The demo data (projects.sql) can be downloaded here.

The demo data must be downloaded in our project directory before running the command above.

Upon successfully loading demo data into the database, we’ll see a response like the image below:

The output CREATE SEQUENCE, CREATE TABLE, and INSERT 0 5 indicate that the sequence, the table, and five rows were inserted into the table, respectively.

Next, we verify the demo data is present using the following steps:

First, connect to the database again by running the command below:

    psql 'postgresql://xxx:xxxx@ep-xxx-xxx-01196450.us-east-2.aws.neon.tech/xxx?sslmode=require'

(Just a note that we’re connecting to the database again because we exited the database when we loaded the demo data into the database.)

Now, let us run the command below in our terminal:

    select * FROM projects LIMIT 1

The SQL command SELECT * FROM projects LIMIT 1 retrieves data from the "projects" table.

We should get a response like the one in the image below.

As a result, our demo data has been successfully uploaded to our database.

PostgREST setup

Now that we have set up our database, the next step involves setting up PostgREST. First, we install PostgREST by following this installation guide.

After a successful installation, we can confirm everything works perfectly by typing postgrest -e in the terminal. We should see a response similar to the image below, indicating a successful operation.

Granting CRUD access to a database user

Now, we can connect to the database using the connection string above.

(We’re connecting again because checking the PostgREST installation disconnected us from the database.)

After a successful connection, execute the command below:

    GRANT SELECT, INSERT, UPDATE, DELETE ON TABLE public.projects TO femakin

The command grants femakin user permissions for SELECT, INSERT, UPDATE, and DELETE operations (CRUD) on the projects table in the public schema.

PostgREST connection setup

The next step is to establish a PostgREST connection. To do this, exit the database terminal by typing \q and then enter the following command: vi projects.config.

The command vi projects.config opens the projects.config file using the vi text editor.

We then edit the projects.config file by pasting the command below.

    db-uri = psql 'postgresql://xxx:xxxx@ep-xxx-xxx-01196450.us-east-2.aws.neon.tech/xxx?sslmode=require'
    db-schema = "public"
    db-anon-role = "femakin"

This configuration specifies a PostgreSQL database connection string URI with credentials and connection details. It also defines the default database schema as public and the anonymous role as femakin for authentication purposes.

To ensure the proper setup of the PostgREST connection, we can run postgrest projects.config in the terminal. This command should yield a response similar to the image below.

Testing the API routes

Now, let us employ a tool such as Postman to conduct tests. In the browser, navigate to the URL localhost:3000/projects.

The connection is working if we find something like this in the browser.

Otherwise, we must review all the steps and ensure everything is present.

Bootstrapping VueJS application

The quickest approach to get started with our VueJS application is to clone this Git H ub repository :

    git clone https://github.com/femakin/Neo-Demo-PostgREST-DigitalOcean-App

Follow the instructions in the README file: Run npm install to install dependencies and npm run dev to start the application.

The application will appear like this in the browser:

The code in the src/App.vue is a project management app using VueJS. It handles project data, loading status, and user interactions. It fetches project data and lets users view, add, update, and delete projects. The focus is on simplicity for managing projects in a web app.

Deploying to Digital Ocean

Thus far, we’ve created our database, set up PostgREST, and got our mini-application running in VueJS. Now, we need to deploy everything to DigitalOcean. To do this, log into the DigitalOcean dashboard and create a Droplet by following this guide.

DigitalOcean Droplets are Linux-based virtual machines (VMs) that operate on virtualized hardware.

Now, let’s access our droplet. First, copy the created droplet's IP address, as shown in the image below, and then use it to SSH into the droplet.

Note: Keep this IP address handy; we’ll need it for future steps.

Next, log into the droplet by using the copied droplet's IP and running the command below in the terminal:

    ssh root@copied_droplet_IP

This will prompt us to enter a passphrase for the key.

Next, we will update the apt cache to get the latest packages by running the below command:

    sudo apt update

A runtime library, an essential component of the PostgreSQL database system, must be installed. This library is a connection and communication interface for PostgreSQL database servers.

Let’s run the following command in the terminal to install the PostgreSQL runtime library, libpq5:

    sudo apt install libpq5

This command will ensure that the necessary runtime components for PostgreSQL are installed on the system.

Now, we’ll install PostgREST from the release page available here. Choose a version compatible with your operating system; for example, we will install postgrest-v11.2.0-linux-static-x64.tar.xz.

    wget 'https://github.com/PostgREST/postgrest/releases/download/v11.2.0/postgrest-v11.2.0-linux-static-x64.tar.xz'

Next is to extract the compressed file to obtain the executable. Run the command below in the terminal:

    root@project-management:~# tar vxf postgrest-v11.2.1-linux-static-x64.tar.xz
    postgrest

To ensure everything works, let's run the following command:

    ./postgrest -e

We should expect a response similar to the image below.

Configuring PostgREST on Droplet

Let us configure PostgREST by following the steps below.

Move PostgREST to usr/bin by executing the following command:

    sudo mv postgrest /usr/bin

Navigate to /usr/bin using the command

    cd /usr/bin

Confirm that everything is in order by running

    ./postgrest -e

Now, create a directory using the command

    mkdir projectsmanagement

Let's return to our local machine within the project directory and copy the config file using:

    cat projects.config

We previously created the config file in the section above. We’ll see a configuration similar to the one below:

    db-uri = psql 'postgresql://xxx:xxxx@ep-xxx-xxx-01196450.us-east-2.aws.neon.tech/xxx?sslmode=require'
    db-schema = "public"
    db-anon-role = "femakin"

Then, return to our droplet and create a new config using:

    vi projects.config

Paste the copied projects.config, and save the file.

Now, we can connect to our database using postgrest postgrest.config.

You should now see a response stating that the connection is successful, as shown in the image below:

Now, we can test the API using the command curl localhost:3000/projects, and observe a response from our database, like the illustration below.

Creating systemd

Now, let's create a system service for a PostgREST. We need to go back to PostgREST documentation here.

We can now go back to our droplet and create the system file using the command below:

vi /etc/systemd/system/postgrest.service and paste the code below:

    [Unit]
    Description=REST API for any PostgreSQL database
    After=postgresql.service

    [Service]
    ExecStart=/usr/bin/postgrest /usr/bin/postgrest.config
    ExecReload=/bin/kill -SIGUSR1 $MAINPID
    User=nobody
    Group=nogroup

    [Install]
    WantedBy=multi-user.target

Here, we’ll reload, start, and check the status of the systemd using the command below.

     sudo systemctl daemon-reload
     sudo systemctl start postgrest
     sudo systemctl status postgrest

Testing the API using curl localhost:3000/projects gives us our expected response, as shown below:

Uploading the Vue app into Droplet

It's time to upload our project management application into the droplet. Return to your local machine to upload the application into the droplet and run npm run build inside the project directory.

Now that we have our production Vue App, we can copy it into the droplet using the command below:

    scp -r dist root@copied_droplet_IP:/usr/bin/vueapp

Next is to install a web server to serve the files.

    sudo apt install nginx

Next is to create a virtual host using:

    sudo vi /etc/nginx/sites-available/copied_droplet_IP

Paste the code below and save.

We can now create a link using.

    sudo ln -s /etc/nginx/sites-available/copied_droplet_IP  /etc/nginx/sites-enabled/

Then reload nginx using

    sudo systemctl reload nginx

Testing deployment

We can now go to the browser and paste the copied_droplet_IP. We should see our project management app on the page.

However, we will see an error if we look at the console. This error is there because we have not set up the API server.

To take care of this, we must use nginx to proxy /API to the PostgREST instance running on our droplet, as described in this PostgREST documentation.

We can now edit our nginx configuration using

    sudo vi /etc/nginx/sites-available/Copied_IP

Then, update the configuration with the command below.

     location /api/ {
          default_type  application/json;
          proxy_hide_header Content-Location;
          add_header Content-Location  /api/$upstream_http_content_location;
          proxy_set_header  Connection "";
          proxy_http_version 1.1;
          proxy_pass http://localhost:3000/;
        }

Then reload nginx using:

    sudo systemctl reload nginx

We can now return to the browser and paste the copied Droplet IP. Now, we can see our application without any errors.

Congratulations! You successfully created a mini-project management application by seamlessly integrating PostgREST and DigitalOcean, backed by Neon serverless Postgres.

Here are a few recommendations to take it further.

Add a domain to the Droplet
Configure HTTPS
Add more features to the applications

The possibilities are endless when it comes to Neon serverless Postgres.

Conclusion

We covered a lot in this tutorial. Let’s recap! You accomplished the following:

Leveraged Neon serverless Postgres to establish a PostgREST API on DigitalOcean.
Transformed a PostgreSQL database into a functional RESTful API using PostgREST.
Created a mini-project management application as a practical illustration using VueJS.
Demonstrated seamless integration between Neon serverless Postgres, PostgREST, and DigitalOcean.

References

Understanding AWS Amplify Monitoring Metrics Definitions

Femi Akinyemi — Thu, 08 Feb 2024 12:52:21 +0000

One of the App settings provided by AWS Amplify is Monitoring, which allows us to monitor metrics like site traffic, configure alarms, and access logs for our Amplify applications in nearly real time.

In this article, we will look at the definitions of CloudWatch metrics in the AWS/AmplifyHosting namespace for monitoring our app traffic, errors, data transfer, and latency.

When we decide to monitor our app hosted on AWS Amplify, we navigate to the app settings sidebar and click on the Monitoring tab, which takes us to the monitoring page, as shown in the image below.

So, what do all these terms mean?

According to the Monitoring and CloudWatch section of the AWS Amplify Hosting, Here is what they mean.

Requests: This is the total number of viewer requests Amplify Hosting receives for all HTTP methods and HTTP and HTTPS requests, which means it is how often people visit our website hosted on Amplify, including all types of requests like clicking links or loading pages with HTTP or HTTPS.

Bytes downloaded: The total amount of data transferred out of our app (downloaded) in bytes by viewers for GET, HEAD, and OPTIONS requests, which means it shows the total data sent from our app to users when they download something, like images or files, through actions like clicking links or accessing pages.

BytesUploaded: This is the total amount of data transferred into our app (uploaded) in bytes using POST and PUT requests. Therefore, it represents the complete data our app receives when users upload files or submit forms, typically through actions like posting comments or uploading images.

4XXErrors: The number of requests that returned an error in the HTTP status code 400-499 range. This metric counts the requests that encountered errors on the user's end, like entering incorrect information or trying to access restricted content, resulting in an error response from the server.

5XXErrors: The number of requests that returned an error in the HTTP status code 500-599 range. This metric counts the requests that encountered errors on the user's end, like entering incorrect information or trying to access restricted content, resulting in an error response from the server.

Latency: This metric measures how quickly Amplify Hosting responds to a request, from when it receives it until it sends the first byte of data back to the network. It excludes the time the response travels to the viewer's device.
Key statistics include the average, maximum, minimum, and various percentiles (p10, p50, p90, p95, p100), providing insights into response times across different scenarios.

For more details about the metrics, we can access the CloudWatch metrics in the AWS Management Console here.

How to add Astro social share to your Astro application

Femi Akinyemi — Mon, 08 Jan 2024 05:44:36 +0000

Introduction

Astr o is a modern web framework that combines the best features of static site generators (SSGs) and server-side rendering (SSR) frameworks. It is designed to be fast, flexible, and easy to use, making it an excellent choice for building various websites, including blogs, portfolios, e-commerce sites, and more.

Astro offers several benefits, including:

Speed: Astro websites are typically very fast, thanks to server-side rendering and component islands.
SEO: Astro websites are also well-suited for SEO, as they are static and can be pre-rendered.
Flexibility: Astro is a very flexible framework, and many websites can be built.
User-friendliness: Astro is beginner-friendly and offers a gentle learning curve, making it accessible even for those new to web development.

One of the benefits of using Astro is that it makes it easy to add social sharing buttons to your website. Social sharing is essential because social sharing is a great way to increase traffic to your website and promote your content.

Social sharing is essential for web applications because it can help to:

Boost website traffic
Content promotion
Establish brand presence
Lead generation and sales

This article explains how to add social sharing buttons to your Astro application.

In this article, you will build an application that displays random jokes using the random dad joke API with a social share button using Astro social share.

The source code for the application is readily available here on GitHub.

By the end of this article, you will have a better understanding of:

What is Astro social share?
How to install Astro social share
How to use Astro social share # Understanding Astro social share

Astro social share is your Astro site's social media share button. It's also one of the recently added Astro integrations.

Astro social share comes with some good features, which are:

No dependencies or external scrips
Share buttons for:
- Facebook
- Hacker News
- LinkedIn
- Reddit
- Twitter
Icons included from https://simpleicons.org/ # Prerequisites

To fully grasp the concepts presented in this article, the following are required:

Basic understanding of JavaScript
Node.js installed, version v18.14.1 or later.
Code Editor - Preferably VS Code or another code editor. # Bootstrapping Astro application

To bootstrap your Astro application, you will use the create astro setup wizard following the steps below:

Install Astro by running the following command in your terminal:

npm create astro@latest

Confirm your choice by typing 'y' to install the create-astro package.
When prompted to specify the location for your new project, enter the folder name where you'd like to create a new project directory. For example, you can type. /Astro-Social-Share.
You'll be presented with a list of starter templates. Use the arrow keys (up and down) to navigate to the "Empty" template, and then press the Return or Enter key to select it.
When asked if you want to install project dependencies, type y.
If you are asked whether you plan on using TypeScript, type n.
When prompted about initializing a new git repository, type y.

Now, you can navigate to your Astro-Social-Share directory to begin and preview your application by running the command below in your terminal:

cd cd Astro-Social-Share

npm run dev

Click the localhost link within your terminal window to view a real-time preview of your brand-new Astro website!

This is how the browser preview of the Astro 'Empty Project' starter website should appear:

Setting up API page

Now, you need to set up the Home Page. The home page will be the entry point for your application's home page. In the src/pages/index.astro, paste the code below:


    ---
    import {GET} from "../pages/api/fetchdata";

    import { TwitterShareButton, SocialShare } from "astro-social-share";
    const TwitterBUTTON = [TwitterShareButton];

    let response = await GET();
    const data = await response.json();
    ---

    <html lang="en">
      <body>
        <div class="h-screen flex flex-col items-center">
          <h1 class="text-3xl font-bold mt-12 mb-12">Share Your Daily Joke on X</h1>

          <p
            id="joke-btn"
            class="bg-blue-500 hover-bg-blue-700 text-white font-bold py-2 px-4 rounded">
            Click on the X icon below to share your daily joke
          </p>

          <div class="mt-12" id="joke-container">{data.joke}</div>

          <SocialShare
            buttons={TwitterBUTTON}
            description={data?.joke}
            via="akinyemi_t"
            title={data.joke}
          />
        </div>
      </body>
    </html>

Here is the explanation of the code provided above:

The first line imports the GET function from a file at ../pages/api/fetchdata. It suggests that you are making a GET request to fetch some data.
Next, you import components related to social sharing using Astro. Specifically, you import the TwitterShareButton and SocialShare components from the astro-social-share library.
You define TwitterBUTTON as an array containing the TwitterShareButton. This variable plays a role later when configuring social sharing.
The code then awaits the result of the GET request, assigns it to the response variable, and parses the JSON content from the response into the data variable.
The HTML section starts with the opening <html> tag and defines the web page's structure.
Inside the <body> tag, the content of the web page looks as follows:
- A <div> element with the class h-screen flex flex-col items-center is used to center the content vertically in the viewport.
- An <h1> element with the text Share Your Daily Joke on X is displayed at the top of the page.
- A <p> element with the ID joke-btn displays a message encouraging the user to click an X icon below to share a daily joke.
- Another <div> element with the ID joke-container displays the content of the data.joke property, which contains the daily joke fetched from the API.
- The <SocialShare> component enables sharing on social media. Configured with the buttons prop set to TwitterBUTTON (likely to display a Twitter share button), the description assigned to the data.joke set to akinyemi_t (the Twitter username), and the joke's title. Text.

Testing and debugging

Follow the steps below to test your application:

Navigate into your directory and run

npm run dev

Your application is now running at localhost:4321

To view your homepage, visit localhost:4321 in your browser. You should see the homepage.

Now, you can share your joke on social media by clicking the X icon.

What's next?

There are so many other things you can do with Astro social share. You can integrate other social buttons, like

Facebook
Hacker News
LinkedIn
Reddit
Twitter

Also, you can make the application more interactive by adding more features like changing the jokes.

Conclusion

Astro is a fast and flexible web framework suitable for various website types. Adding social sharing buttons to your Astro application enhances traffic, content promotion, brand presence, and lead generation.

This article has shown how to integrate social sharing buttons using the Astro social share component, using a random joke application as an example.

The provided GitHub source code serves as a practical reference.

By following the article, you've gained the ability to empower your web applications with Astro social share, making your content more shareable and engaging.

How to Prevent Unnecessary React Component Re-Rendering

Femi Akinyemi — Sat, 08 Jul 2023 05:48:48 +0000

Understanding how React renders components is essential for building efficient and performant applications. When a component’s state or props change, React automatically updates the User Interface(UI) to reflect those changes. As a result, React calls the component's render method again to generate the updated UI representation.

In this article, we will explore three React Hooks and how they prevent unnecessary renderings in React

These tools allow us to optimize our code by avoiding unnecessary re-renders, improving performance, and storing values efficiently.

By the end of this article, we'll better understand how to make our React applications faster and more responsive using these handy React hooks.

Using React's useMemo

In React, useMemo can prevent unnecessary re-renderings and optimize performance.

Let's explore how the useMemo hook can prevent unnecessary re-renders in our React components.

By memorizing the result of a function and tracking its dependencies, useMemo ensures that the process is recomputed only when necessary.

Consider the following example:

    import { useMemo, useState } from 'react';

    function Page() {
      const [count, setCount] = useState(0);
      const [items] = useState(generateItems(300));

      const selectedItem = useMemo(() => items.find((item) => item.id === count), [
        count,
        items,
      ]);

      function generateItems(count) {
        const items = [];
        for (let i = 0; i < count; i++) {
          items.push({
            id: i,
            isSelected: i === count - 1,
          });
        }
        return items;
      }

      return (
        <div className="tutorial">
          <h1>Count: {count}</h1>
          <h1>Selected Item: {selectedItem?.id}</h1>
          <button onClick={() => setCount(count + 1)}>Increment</button>
        </div>
      );
    }

    export default Page;

The code above is a React component called Page that uses useMemo to optimize the selectedItem calculation.

Here's the explanation:

The component maintains a state variable count using the useState hook.
The items state is initialized using the useState hook with the result of the generateItemsfunction.
The selectedItem is calculated using useMemo, which memorizes the result of the items.find operation. It only re-calculates when either count or items change.
The generateItems function generates an array of items based on the given count.
The component renders the current **count** value, the selectedItem id, and a button to increment the count.

Using useMemo optimizes performance by memoizing the result of the items.find operation. It ensures that the calculation of selectedItem is only performed when the dependencies (count or items) change, preventing unnecessary re-calculations on subsequent renders.

Memoization should be employed selectively for computationally intensive operations, as it introduces additional overhead to the rendering process.

Using React's useCallback

The useCallback hook in React allows for the memoization of functions, preventing them from being recreated during each component render. By utilizing useCallback. a part is created only once and reused in subsequent renders as long as its dependencies remain unchanged.

Consider the following example:

    import React, { useState, useCallback, memo } from 'react';

    const allColors = ['red', 'green', 'blue', 'yellow', 'orange'];

    const shuffle = (array) => {
      const shuffledArray = [...array];
      for (let i = shuffledArray.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        [shuffledArray[i], shuffledArray[j]] = [shuffledArray[j], shuffledArray[i]];
      }
      return shuffledArray;
    };

    const Filter = memo(({ onChange }) => {
      console.log('Filter rendered!');

      return (
        <input
          type='text'
          placeholder='Filter colors...'
          onChange={(e) => onChange(e.target.value)}
        />
      );
    });

    function Page() {
      const [colors, setColors] = useState(allColors);
      console.log(colors[0])

      const handleFilter = useCallback((text) => {
        const filteredColors = allColors.filter((color) =>
          color.includes(text.toLowerCase())
        );
        setColors(filteredColors);
      }, [colors]);


      return (
        <div className='tutorial'>
        <div className='align-center mb-2 flex'>
          <button onClick={() => setColors(shuffle(allColors))}>
            Shuffle
          </button>
          <Filter onChange={handleFilter} />
        </div>
        <ul>
          {colors.map((color) => (
            <li key={color}>{color}</li>
          ))}
        </ul>
      </div>
      );
    }

    export default Page;

The code above demonstrates a simple color filtering and shuffling functionality in a React component. Let's go through it step by step:

The initial array of colors is defined as allColors.
The shuffle function takes an array and shuffles its elements randomly. It uses the Fisher-Yates algorithm to achieve shuffling.
The Filter component is a memoized functional component that renders an input element. It receives an onChange prop and triggers the callback function when the input value changes.
The Page component is the main component that renders the color filtering and shuffling functionality.
The state variable colors are initialized using the useState hook, with the initial value set to allColors. It represents the filtered list of colors.
The handleFilter function is created using the useCallback hook. It takes a text parameter and filters the allColors array based on the provided text. The filtered colors are then set using the setColors function from the useState hook. The dependency array [colors] ensures that the handleFilter function is only recreated if the colors state changes, optimizing performance by preventing unnecessary re-renders.
Inside the Page component is a button for shuffling the colors. When the button clicks, it calls the setColors function with the shuffled array of allColors.
The Filter component is rendered with the onChange prop set to the handleFilter function.
Finally, the colors array is mapped to render the list of color items as <li> elements.

The useCallback hook is used to memoize the handleFilter function, which means the function is only created once and reused on subsequent renders if the dependencies (in this case, the colors state) remain the same.

This optimization prevents unnecessary re-renders of child components that receive the handleFilter function as a prop, such as the Filter component.
It ensures that the Filter component is not re-rendered if the colors state hasn't changed, improving performance.

Using React's useRef

Another approach to enhance performance in React applications and avoid unnecessary re-renders is using the useRef hook. Using useRef, we can store a mutable value that persists across renders, effectively preventing unnecessary re-renders.

This technique allows us to maintain a reference to a value without triggering component updates when that value changes. By leveraging the mutability of the reference, we can optimize performance in specific scenarios.

Consider the following example:

    import React, { useRef, useState } from 'react';

    function App() {
      const [name, setName] = useState('');
      const inputRef = useRef(null);

      function handleClick() {
        inputRef.current.focus();
      }

      return (
        <div>
          <input
            type="text"
            value={name}
            onChange={(e) => setName(e.target.value)}
            ref={inputRef}
          />
          <button onClick={handleClick}>Focus</button>
        </div>
      );
    }

The example above has a simple input field and a button. The useRef hook creates a ref called inputRef. As soon as the button is clicked, the handleClick function is called, which focuses on the input element by accessing the current property of the inputRef ref object. As such, it prevents unnecessary rerendering of the component when the input value changes.

To ensure optimal use of `useRef,` reserve it solely for mutable values that do not impact the component's rendering. If a mutable value influences the component's rendering, it should be stored within its state instead.

Conclusion

Throughout this tutorial, we explored the concept of React re-rendering and its potential impact on the performance of our applications. We delved into the optimization techniques that can help mitigate unnecessary re-renders. React offers a variety of hooks that enable us to enhance the performance of our applications. We can effectively store values and functions between renders by leveraging these hooks, significantly boosting React application performance.

References

How To Stop React Components From Re-Rendering
Methods Of Improving And Optimizing Performance In React Apps

Build A Reusable Carousel With React And Splide.js

Femi Akinyemi — Tue, 13 Jun 2023 22:23:42 +0000

In today's rapidly evolving web development landscape, the importance of creating reusable components cannot be overstated. These components play a vital role in enhancing efficiency and ensuring maintainability. Carousels are a popular choice among the widely utilized components in web design. A carousel enables users to navigate seamlessly through a collection of images or items in a sliding manner.

In this article, you will build a reusable carousel component using React and Splide.Js — a lightweight and versatile slider library.

By following a systematic approach, you will cover the installation of necessary dependencies and the implementation of fundamental functionalities. Upon concluding this article, you will comprehensively understand crafting a fully functional and reusable carousel component with React and Splide.js.

This accomplishment will equip you to integrate the carousel into your future web projects effortlessly.

Why Splide?

Splide.js is a lightweight, flexible, and accessible slider and carousel library for creating web-based sliders and carousels.

It’s written in TypeScript and supports various features, such as:

Autoplay with a progress bar and a play-pause toggle button
Multiple slides
Slide or fade transition by CSS
Flexible and extensible
Protected by 400+ test cases
Lightweight, 29kB (12kB gzipped)
No dependencies

And many others.

Splide installation

To install Splide into your project, you can choose one of the four options listed below:

NPM

It is recommended to install Splide using NPM. To install the latest version, use the following command to do so:

npm install @splidejs/splide

Hosting Files

You can download the Splide package from the following link:
Download

Then, Go to the dist/js directory, and import the splide.min.js file by the <script> tag:

<script src="path-to-the-file/splide.min.js"></script>

CDN

You can also include this library from CDN:

jsDelivr

It is recommended to use a specific version number instead of the "latest" keyword for production to avoid unexpected breakage from the further update.

Integration

Integration packages are available for React, Vue and Svelte.

React Splide
Vue Splide
Svelte Splide

Integrating Splide with React

To Integrate Splide with React, you will use the recommended installation method, NPM, to install React Splide, a React component for a Splide slider/carousel.

Installation

First, you must create a React.js starter project by navigating to your desired directory and running the command below in your terminal.

npx create-react-app splidereacttutorial && cd splidereacttutorial

The command creates a React.js project called splidereacttutorial and navigates into the project directory.

Next, you need to Install Splide by running the following command in your terminal:

$ npm install @splidejs/splide

Usage

In the src directory, create a folder with the name components. The directory will contain all the reusable components for the carousel.

Carousel Component

In the src directory, create the file src/components/Carousel and add the following code:

import React from "react";
import { Splide, SplideSlide } from "@splidejs/react-splide";
import "@splidejs/react-splide/css";

function Carousel({ props }) {
  return (
    <div
      style={{
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
      }}
    >
      <Splide
        aria-label="My Favorite Images"
        style={{
          display: "flex",
          justifyContent: "center",
          alignItems: "center",
        }}
        options={{
          width: "50%",
        }}
      >
        <SplideSlide>
          <img src={props.img_one} alt={props.img_alt} style={props.style} />
        </SplideSlide>
        <SplideSlide>
          <img src={props.img_two} alt={props.img_alt} style={props.style} />
        </SplideSlide>
      </Splide>
    </div>
  );
}

export default Carousel;

The code above implements a React functional component called Carousel. It uses the Splide and SplideSlide components from the @splidejs/react-splide library to render a carousel with two slides that contain images. The component accepts image URLs, alternate text, and styling as props and displays the images within the carousel.

Also, In the src/App.css file, replace the code with the following code:

.App {
  display: flex;
  justify-content: center;
  align-items: center;
}

The code above uses CSS to style the .App class, making it a flex container that horizontally and vertically centers its child elements.

Now, n the src/App.js replace the code with the following code:


import "./App.css";
import Carousel from "./components/Carousel";

function App() {

const props = {

  img_one: 'https://images.creativefabrica.com/products/previews/2023/05/11/zZEZKFvQo/2Pdr8is8AS0vymhPaFPB1WOZ7DF-desktop.jpg',
  img_two: 'https://iso.500px.com/wp-content/uploads/2016/03/stock-photo-142984111-1500x1000.jpg',
  img_alt: 'image_alt',
  style: {
    width: "100%",
    height: "400px",
    objectFit: 'cover',


  }
}

  return (
    <>
      <h1
        style={{
          textAlign: "center",
        }}
      >
        Basic Carousel
      </h1>

      <div className="App">
        <Carousel props={props} />
      </div>
    </>
  );
}

export default App;

The code above imports a CSS file named App.css and a component called Carousel from ./components/Carousel.
Inside the App function component, an object named props is defined, which contains properties for two images (img_one and img_two), an alternate text for the images (img_alt), and styling information.

The component returns JSX elements, including a <h1> heading with the text Basic Carousel centered using inline styles.
Within an <div> element with the class App, the Carousel component is rendered with the props object passed as a prop.

Testing the Carousel component

To test the Carousel component, Navigate into your splidereacttutorial directory and run:

npm start

Your Carousel component is now running at localhost:3000
To view the Carousel, visit localhost:3000 in your browser. You should see the component rendered.

Creating Auto-scroll Carousel

To create an auto-scroll carousel, you will use The Auto Scroll extension that continuously scrolls the carousel, which goes well with "Drag Free" mode.

To Install The Auto Scroll extension, run the command below in your terminal:

npm install @splidejs/splide-extension-auto-scroll

Now, In the src/components/Carousel file, Replace the code with the following code:

import React from "react";
import { Splide, SplideSlide } from "@splidejs/react-splide";
import { AutoScroll } from "@splidejs/splide-extension-auto-scroll";
import "@splidejs/react-splide/css";

function Carousel({ props }) {
  return (
    <div>
      <Splide

        // ...

        options={{
          width: "100%",
          rewind: true,
          autoplay: "true",
          perPage: 2,
          perMove: "1",
          gap: "2rem",
          height: "15rem",
          type: "loop",
          rewindSpeed: "3000",
          arrows: "true",
          pagination: "false",
          extensions: { AutoScroll },
          autoScroll: {
            speed: 3,
            pauseOnHover: true,
            pauseOnFocus: false,
          },
          breakpoints: {
            1000: {
              perPage: 1,
            },
          },
        }}

        // ...

      >

        {/* ... */}

      </Splide>
    </div>
  );
}

export default Carousel;

The code above sets various options for the Splide carousel component. It configures properties such as width, rewind behavior, autoplay, slide count, spacing, height, looping, rewind speed, navigation arrows, pagination, extensions, auto-scrolling behavior, and responsive breakpoints. These options define the carousel's appearance, behavior, and responsiveness.

To test the Auto Scroll extension, visit localhost:3000 in your browser. You should see the component rendered below the Basic Carousel.

Creating a Thumbnail Carousel

To create a Thumbnail Carousel, In the src directory, create a file with the name Thumbnail.js and paste the following code:

import "../App.css";
import { Splide, SplideSlide } from "@splidejs/react-splide";
import "@splidejs/react-splide/css";
import p1 from "./firstimage.jpeg";
import p2 from "./secondimage.jpeg";
import p3 from './thirdimage.jpeg';
import p4 from './fourthimage.jpeg'
import { useRef } from "react";

export default function Thumbnail() {
  const thumbsImages = [p1, p2, p3, p4];

  const mainOptions = {
    type: "loop",
    perPage: 1,
    perMove: 1,
    gap: "1rem",
    pagination: false,
    height: "27.8125rem",
  };

  const style = {
    width: "100%",
    height: "400px",
    objectFit: "cover",
  };

  const generalStyle = {
    margin: '0 auto',
    width: '50%'
  }

  const btn_img = {
      width: "70px",
      height: "70px",
      overflow: "hidden",
      listStyle: "none",
      margin: "0 0.2rem",
      cursor: "pointer"
  }

const thumbnailsstyle = {
  display: "flex",
  justifyContent: "center",
  alignItems: "center",
  listStyle: "none"
}

  const mainRef = useRef(null);

  const handleThumbs = (id) => {
    if (mainRef.current) {
      mainRef.current.go(id);
    }
  };

  return (
    <>
      <div className="App_" style={generalStyle}  >
        <div>
          <Splide options={mainOptions} ref={mainRef} style={{}}>
            <SplideSlide>
              <img src={p1} alt="product imag 1" style={style} />
            </SplideSlide>
            <SplideSlide>
              <img src={p2} alt="product imag 2" style={style} />
            </SplideSlide>

            <SplideSlide>
              <img src={p3} alt="product imag 2" style={style} />
            </SplideSlide>

            <SplideSlide>
              <img src={p4} alt="product imag 2" style={style} />
            </SplideSlide>
          </Splide>

          <ul style={thumbnailsstyle } >
            {thumbsImages?.map((thumbnail, index) => (
              <li key={thumbnail}>
                <button onClick={() => handleThumbs(index)}>
                  <img
                    src={thumbnail}
                    alt="product thumbnail"
                    style={btn_img}
                  />
                </button>
              </li>
            ))}
          </ul>
        </div>
      </div>
    </>
  );
}

The code above is a React component that displays a main image carousel/slider and thumbnail images. It uses the Splide component from @splidejs/react-splide to create the carousel and handles thumbnail clicks to update the main carousel. The component defines image paths, carousel options, and styling objects. It renders the main carousel and thumbnail buttons using the map function.

Now, In the src/App.js file, Replace the code with the following code:

import "./App.css";
import Thumbnail from "./components/Thumbnail";

function App() {

  return (
    <>
      <h1
        style={{
          textAlign: "center",
        }}
      >
        Thumbnail Carousel
      </h1>
      <div className="App">
        <Thumbnail />
      </div>
    </>
  );
}

export default App;

This code above is a component that serves as the application's main entry point. It imports the Thumbnail component and the App.css file for styling.

Inside the App component, it renders a heading with the text Thumbnail Carousel centered using inline styling. It also renders a <div> with the class name App and includes the Thumbnail component.

To test the Thumbnail Carousel, visit localhost:3000 in your browser.

Creating a Video Carousel

To create the Video Carousel, you will use The Video extension

To Install The Video Carousel extension, run the command below in your terminal:

npm install @splidejs/splide-extension-video

Now, In the src directory, create a file with the name VideoCarousel.js and paste the following code:


import React, { useRef } from "react";
import { Splide, SplideSlide } from "@splidejs/react-splide";
import { Video } from "@splidejs/splide-extension-video";
import "@splidejs/splide-extension-video/dist/css/splide-extension-video.min.css";

const VideoCarousel = () => {
  const options = {
    rewind: true,
    autoPlay: true,
    perPage: 2,
    gap: 10,
  };

  const videos = ["iRmx-btWrFk", "liJVSwOiiwg", "hAAZx5fHMZY"];

  const slideImageStyle = {
    maxWidth: "100%",
    height: "auto",
  };

  const mainRef = useRef(null);

  return (
    <div>
      <Splide options={options} extensions={Video} ref={mainRef}>
        {videos.map((id, index) => (
          <SplideSlide key={id} data-splide-youtube={id}>
            <iframe
              style={slideImageStyle}
              width="900"
              title={`YouTube Sample ${index + 1}`}
              src={`https://www.youtube.com/embed/${id}`}
            ></iframe>
          </SplideSlide>
        ))}
      </Splide>
    </div>
  );
};

export default VideoCarousel;

The code above uses the Splide library and the Splide Video extension in React to set up a video carousel. It defines the VideoCarousel component, configures the carousel options, and specifies an array of video IDs. The component renders a Splide component with SplideSlide components inside, each containing an embedded iframe with a YouTube video. The ref attribute is used to access the Splide instance. It creates a functional video carousel component using Splide and Splide Video extensions.

Now, In the src/App.js file, Replace the code with the following code:

import "./App.css";
import VideoCarousel from "./components/VideoCarousel";

function App() {

  return (
    <>
      <h1
        style={{
          textAlign: "center",
        }}
      >
      Video Carousel
      </h1>
      <div >
        <VideoCarousel/>
      </div>
    </>
  );
}

export default App;

This code above is a component that serves as the application's main entry point. It imports the VideoCarousel component and the App.css file for styling.

To test the Video Carousel, visit localhost:3000 in your browser.

Conclusion

Creating reusable components is vital to web development. A reusable carousel component can significantly enhance web projects' efficiency and maintainability. You used React and Splide.js in the article to construct a versatile and adaptable carousel component that seamlessly integrates into any web project.

Following a systematic approach, you demonstrated how to implement fundamental functionality, customize the styling, and incorporate additional features like autoplay and navigation. The result is a dynamic and flexible carousel component that enhances the user experience and adds visual appeal to web projects.

With the knowledge gained from this article, you can now create your reusable carousel component using React and Splide.js, elevating your web development skills to the next level.

References

How to Build and Publish Your First React NPM Package

Femi Akinyemi — Fri, 09 Jun 2023 18:47:29 +0000

Building and publishing your first Node Package Manager(NPM) is an exciting milestone in your journey as a developer. NPM has revolutionized how you share and reuse code in the JavaScript ecosystem, empowering developers to contribute to the open-source community and enhance the efficiency of their projects.

Whether you want to create a reusable library, a command-line tool, or any other piece of code that can be easily installed and integrated into projects, this article will guide you through the essential steps of building and publishing your first NPM package.

Prerequisites

To fully grasp the concepts presented in this tutorial, the following are required:

A GitHub account
Node.js ( v10+) installed
NPM account created
Basic understanding of JavaScript

What is NPM

NPM is a powerful tool transforming how developers share and manage JavaScript code. It is the default package manager for Node .js, a popular runtime environment for executing JavaScript code outside a web browser. NPM is a vast repository of over a million packages, offering developers access to a wide range of open-source libraries, frameworks, and tools.

With NPM, developers can easily install, update, and manage dependencies for their projects, streamlining the development process and saving valuable time. Whether you need to integrate third-party libraries or share your code with the community, NPM provides a centralized platform for discovering, distributing, and collaborating on JavaScript packages.

What are you building

This article explains the process of building and publishing a React NPM package rather than creating an elaborate or complex package. Following the steps outlined in a simple example like the one you'll build, you'll develop a solid foundation to apply the same principles to more advanced packages.

In this article, you will build a package called capitalizefirstletterofastring. As the name suggests, this package capitalizes the first letter in a string. It is an excellent place to understand the essential steps in building and publishing an NPM package. So let's dive in and explore the process of creating and publishing your capitalizefirstletterofastring package.

Getting Started

To begin, you need to prepare your environment. A few ways to build a React package include tools like Bit, Storybook, Lerna, and TSDX. However, for this tutorial, you will use a zero-configuration bundler for tiny modules called Microbundle.

Why microbundle?

With Microbundle, tiny modules can be bundled without any configuration, and it offers the following features:

Single dependency for bundling with just a package.json
ESnext & async/await support through Babel and async-promises
Produce highly optimized code for all inputs
Zero-configuration TypeScript support
Includes built-in Terser compression and tracks gzipped bundle size
Creates multiple output formats for each entry (CJS, UMD & ESM)
Supports multiple entry modules (*cli.js* + *index.js*, etc) # Building the package ## Install microbundle

To use microbundle, run the command below in your terminal.

npm i -D microbundle

The command generates a node_modules folder in your terminal and a package.json file.

In the package.json, replace the existing code with the code below.

    {
      "name": "capitalizefirstletterofastringpkg",
      "version": "1.0.0",                     
      "type": "module",
      "source": "src/index.js",            
      "main": "dist/index.js",
      "module": "dist/index.module.js",
      "unpkg": "dist/index.umd.js",
      "scripts": {
        "build": "microbundle",           
        "dev": "microbundle watch"        
      },
      "devDependencies": {
        "microbundle": "^0.15.1"
      },
      "repository": {
        "type": "git",
        "url": "git+https://github.com/femakin01/CapitalizeFirstLetterofaString.git"
      }
    }

The provided package.json code is a configuration file used in Node.js projects. Here's an explanation of each key-value pair in the code:

"name": "capitalizefirstletterofastringpkg" Specifies the name of the package
"version": "1.0.0": Indicates the version of the package
"type": "module": Indicates that the project uses ECMAScript modules
"source": "src/index.js": Specifies the entry file for the source code
"main": "dist/index.js": Indicates the main file that will be used when importing the package
"module": "dist/index.module.js": Specifies the module file that will be used in ECMAScript module systems
"unpkg": "dist/index.umd.js": Specifies the file to be used in the UMD (Universal Module Definition) format
"scripts"
- "build": "microbundle": Executes the microbundle command to build the package.
- "dev": "microbundle watch": Executes the microbundle watch command to start a development server that watches for changes
"devDependencies": Lists the development dependencies required for the project. In this case, it includes "microbundle": "^0.15.1"
"repository": Specifies the repository type and URL of the project

This package.json file is specifically configured for the capitalizefirstletterofastring package, utilizing the microbundle package for building and watching the code.

At this point, your new package.json file should resemble this screenshot and is all set up for local development.

Package Development

To create the package that capitalizes the first letter of a string, In the src/index.js file, paste the code below:

    export const Capitalize = ({ str }) => {
      return str.charAt(0).toUpperCase() + str.slice(1)
    }

The code above exports a concise function named Capitalize that takes a string input and returns the same string with the first character capitalized. It achieves this by using str.charAt(0).toUpperCase() + str.slice(1)

Next, try it out and build the package by running

    npm run build

Microbundle produces esm, cjs, umd bundles with your code compiled to syntax that works everywhere.

Publishing the package

To publish your package, run the following command to authenticate yourself:

    npm login

You will be prompted to provide your details, provide the required details and hit enter. To test the login's success, enter the command:

    npm whoami

Your username should be logged into the CLI.

Now, you can proceed to publish your package by running the command below:

    npm publish

Note that you may not be able to publish the random-number-package if someone else already has a package with the same name in the registry. You can change the package's name to something unique to make it publishable. Check here for guides on naming a package.

After the publication is done without error, you can visit your account in the NPM registry to see the package.

Testing the Package

To test the package, bootstrap a Next.js application by running the command below:

    npx create-next-app@latest

On installation, you'll see the following prompts:

    What is your project named? my-app
    Would you like to use TypeScript with this project? No / Yes
    Would you like to use ESLint with this project? No / Yes
    Would you like to use Tailwind CSS with this project? No / Yes
    Would you like to use `src/` directory with this project? No / Yes
    Use App Router (recommended)? No / Yes
    Would you like to customize the default import alias? No / Yes

After the prompts, create-next-app will create a folder with your project name and install the required dependencies. Next, navigate to the project directory and install the published package by running the command below:

    npm i capitalizefirstletterofastringpkg

Next, in the src/app/page.js replace the content with the following code:

    import React from 'react'
    import { Capitalize } from 'capitalizefirstletterofastringpkg'
    function    page() {
      return (
        <div>  `This is  a Sample Usuage {<Capitalize str={'example'} />}`</div>
      )
    }
    export default page

If you navigate to localhost:3000, you will see the first letter of the string in your package capitalized.

Congratulations! You have just successfully created your first React NPM package professionally.

Conclusion

Creating your React component library is a valuable investment for teams or individuals seeking to streamline their development process and ensure project consistency. Following the steps detailed in this guide, you can effortlessly build a library of reusable components that can be shared and utilized across various projects.
Leveraging the capabilities of React and the flexibility of custom components, the possibilities are endless in terms of what you can create and achieve.
Begin constructing your component library today and experience its positive influence on your development workflow!

References

How to Deploy a Next.js 13 App to AWS with Amplify Hosting

Femi Akinyemi — Thu, 04 May 2023 07:14:00 +0000

Introduction

AWS Amplify Hosting - the ultimate solution for fast, secure, and scalable web app deployment. Whether you're building a static or server-side rendered app, a mobile app landing page, or a web app, Amplify Hosting's fully managed Continuous Integration and Continuous Deployment (CI/CD) service has everything you need.
You can quickly deploy web content with support for modern web frameworks like React, Angular, Vue, Next.js, Gatsby, Hugo, Jekyll, and more.

AWS Amplify Hosting now supports Next.js 12 and 13, enabling your app to leverage Next.js features like server-side rendering, API routes, middleware, incremental static regeneration, and image optimization.

With faster builds, seamless integration with Amplify back-ends, and fully managed-to-host infrastructure, Amplify Hosting takes your Next.js apps to the next level.

In this tutorial, you will learn how to create and deploy your Next.js app to AWS with Amplify Hosting and experience firsthand benefits.

Prerequisites

To follow along, you will need the following:

AWS account created
Basic knowledge of JavaScript and working in the terminal, and using Git.
Next.js 13 installed
Node.js ( v16+) installed

Create a Next.js app

Let’s get started by bootstrapping a Nextjs project using Create Next App.

On your terminal, create a new project by running


    npx create-next-app@latest my-next-amplify-app

    cd my-next-amplify-app

In this tutorial, you will create two pages demonstrating static site generation (SSG) and server-side rendering (SSR).

In your editor, replace the contents of the pages/index.js file with the code below. The change creates a static page that displays the last time the page was updated.


    export default function About({ formattedDate }) {
      return (
        <>
          <h1>About page</h1>
          <p>This is the about page. It was last updated on {formattedDate}.</p>
          <p>
            <a href="/products">View a server-side rendered page.</a>
          </p>
        </>
      );
    }

    export async function getStaticProps() {
      const lastUpdateDate = new Date(2022, 9, 1); // Set the last update date
      const formattedDate = new Intl.DateTimeFormat("en-US", {
        dateStyle: "long",
        timeStyle: "long",
      }).format(lastUpdateDate);

      return { props: { formattedDate } };
    }

Now create a new pages/products.js file containing the code below.

    // pages/products.js
    export default function Products({ productList }) {
        return (
            <>
                <h1>Our Products</h1>
                <ul>
                    {productList.map((product) => (
                        <li key={product.id}>
                            {product.name} - ${product.price}
                        </li>
                    ))}
                </ul>
                <p>
                    <a href="/">View our home page.</a>
                </p>
            </>
        );
    }

    export async function getServerSideProps() {
        const productList = [
            { id: 1, name: "Product 1", price: 10 },
            { id: 2, name: "Product 2", price: 20 },
            { id: 3, name: "Product 3", price: 30 },
        ];
        return { props: { productList } };
    }

The code creates a Products page that displays a list of products and their prices. The products are hardcoded as an array of objects in the getServerSideProps function. The page also includes a link back to the home page. The getServerSideProps function is used to generate the props for the page.

Before starting the section below, Ensure you have created and pushed your code to GitHub or your preferred Git provider.

Deploy to Amplify Hosting

Once you have pushed your application to a Git provider, you can deploy it to Amplify Hosting.

In AWS Amplify Hosting, click the Host web app button, which takes you to the corresponding page.

Choose your Git provider (in this case, Github) and click on the "Connect branch" button. Make sure to authorize and install AWS Amplify to access your repositories.

After clicking the Next button, you will be redirected to a page where you can configure your build settings.

Click on Next. On the Review page, select Save and deploy.

Your app will be created and you will be taken to the app’s page in the Amplify Console.
Amplify Hosting will set up a separate hosting and build environment for your project and deploy it. This process generally takes 2-3 minutes, and you can keep track of the progress by selecting the Provision, Build, or Deploy links as illustrated below.

After the deployment phase is marked complete, you can now view your app.

Now, you can click on the deployed app link and check if all the features are working correctly.

Conclusion

Now, you’ve successfully deployed a Next.js 13 application to Amplify Hosting. Amplify Hosting offers various features, such as custom domain names, and web previews for pull requests and feature branches, that you can explore and utilize for your project's success. For more information, please visit docs.aws.amazon.com.

Resources and References

How to Deploy Medusa Server to Render

Femi Akinyemi — Mon, 10 Apr 2023 06:17:27 +0000

Introduction

Medusa is an open source Node.js-based composable commerce engine that offers a flexible and modular solution for ecommerce businesses. Its architecture consists of three essential components: the Medusa server, the admin dashboard, and the storefront.

You can host Medusa’s server on any of your preferred hosting choices, and one way to host it is using Render.

What is Render

Render is a unified cloud to build and run all apps and websites with free TLS certificates, a global CDN, DDoS protection, a private network, and auto-deploy from Git.

Render makes deploying your application as easy as pushing your code to source control. Once you connect your GitHub or GitLab account to your Render account, Render will automatically build and deploy your services with every push.

Prerequisites

To follow along with this tutorial, you need

A working Medusa server application. You can follow the quickstart guide to getting started.
GitHub account that needs to be linked with a Render account, so you can pull your code to make the deployments.

Furthermore, you should configure Medusa to work with PostgreSQL and Redis. You can follow the Configure your Server documentation to learn how to do that.

Setting up a Project on Render

Let’s begin by setting up the project on Render.

Create the Postgres Database

After clicking this, you'll be redirected to the next page, where you can name and create the database.

By clicking the create the database, you will be redirected to the POSTGRESQL general page, where you will see the newly-created database.

You’ll use the database Url in the next section.

Create the Redis Database

The second step is to add a Redis database to handle the event queues of your Medusa server.

On your render dashboard, click the New+ button and the Redis button.

After clicking this, you'll be redirected to the next page, where you can name and create the Redis.

By clicking the create the Redis, you will be redirected to the Redis general page, where you will see the newly-created Redis.

You’ll use the Redis Url in the next section.

Deploy Medusa Server

The next step is to prepare the Medusa server to deploy. Navigate to your Medusa server directory and open the medusa-config.js file. Ensure that you have configured your database to use PostgreSQL. Within the exported object of the medusa-config.js file, make the following changes:

module.exports = {
  projectConfig: {
    redis_url: REDIS_URL,
    database_url: DATABASE_URL,
    database_type: "postgres",
    store_cors: STORE_CORS,
    admin_cors: ADMIN_CORS,
  },
  plugins,
};

Next, remove the Dockerfile file from your repository's root directory. If it exists, render searches for this file automatically and use it to deploy your server. However, you will not be using docker in the deployment process.

Commit your changes, and push them to your remote GitHub repository. Once your repository is ready on GitHub, return to your Render dashboard to proceed with the deployment.

On your render dashboard, click the New+ button, then click on the Web Service button.

Connect your Medusa server repo

Select or search for your repository and click the connect button.

You will be redirected to the settings page when clicking the connect button.

Here, you must provide a unique name for your project, specify the region in which your web service will run, the repository branch to be used for your web service, the root directory, the runtime, the build command, and the start command.

Please note that you should replace the original start command with the following:

medusa migrations run && medusa develop.

This particular start command enables you to create and execute your migrations or update the Medusa backend. Additionally, it ensures that these migrations are executed before the backend starts, guaranteeing their completion.

Add Environment Variable.

To add an environment variable, click the Advanced button above the Create Web Service button on the settings page and select Add Environment Variable with the following variables:


PORT=9000
JWT_SECRET=something
COOKIE_SECRET=something
DATABASE_URL=<<DATABASE_URL>>
REDIS_URL=<<REDIS_URL>>

It’s recommended to use other values for JWT_SECRET and COOKIE_SECRET than something for better security.

The last properties are the URLs to connect to the databases. You need to add the database URLs you got when you created the Postgres and Redis databases earlier.

Scroll to the bottom of the settings page and click Create Web Service button.

Upon successful deployment, you will observe a status message indicating that the deployment has been successful with the text deploy succeeded.

Test the Backend

Once the backend has been successfully deployed, you can access the app in your browser using the domain name. For instance, entering the URL <YOUR_APP_URL>/store/products will display the currently available products on your backend.

Conclusion

Deploying a Medusa server on Render is an effortless and prompt process. Upon completion, you can direct your efforts toward augmenting your Medusa server with novel functionalities, such as custom endpoints, services, or plugins.

To update your server with the latest changes, push them to your GitHub repository. Render's automated system will detect the updates and commence a fresh deployment, incorporating the new features into your application.

For further information regarding the customization of your store or the linkage of a storefront to your store, you can check out Medusa's documentation.

If you have any issues or questions related to Medusa, then feel free to reach out to the Medusa team via Discord.

How to Build a Job Board With AWS Amplify and Nextjs

Femi Akinyemi — Fri, 07 Apr 2023 09:31:43 +0000

In today's fast-paced digital world, job boards have become a vital resource for job seekers and recruiters of all levels. Building a job board can be challenging, especially for those without a technical background. However, with AWS Amplify and Next.js, we can create a professional and functional job board website quickly.

In this article, we will walk through the step-by-step process of building a job board using these tools, from setting up the AWS Amplify backend to designing the user interface using Next.js.

The source code for the job board tutorial is readily available on GitHub.

Project Goal

Here's what we'll accomplish by the end of this tutorial:

By the end of the article, readers will have gained valuable skills in serverless application development, data modeling, and user authentication.
Integrating AWS Amplify DataStore client into the frontend
Handling user authentication and authorization with AWS Amplify Auth # Prerequisites

To follow along, we will need the following:

AWS a ccount created
Basic knowledge of JavaScript and Nextjs
Node.js ( v18+) installed
Npm (v9+) installed
AWS Amplify CLI (v10+) installed. Check official documentation for a guide

Project Demo

Here is a brief preview of the application.

Why AWS Amplify

AWS Amplify is a tool that helps web and mobile developers create and manage entire applications on AWS. It allows developers to use a wide range of AWS services without requiring extensive specialized knowledge of the cloud. With AWS Amplify, developers can quickly build, deploy and host their applications, adapting to different needs and use cases.
AWS Amplify provides the following services.

Amplify CLI - Local toolchain to configure and manage an app backend with just a few commands.
Amplify Studio - Point-and-click environment to build and deploy a full-stack app in minutes, including frontend UI and backend.
Amplify UI Components - Open-source design system with cloud-connected components for building feature-rich apps fast.
Amplify Web Hosting - Fully managed CI/CD and hosting for fast, secure, and reliable static and server-side rendered apps.
Amplify Libraries - Open-source client libraries to build cloud-powered mobile and web apps.

Setting Up Backend

First, we type the amplify version command in our terminal to confirm that the Amplify CLI is installed. AWS provides a video guide to installing and configuring the Amplify CLI in their official documentation.
We can begin setting up the backend as soon as these are complete.

Creating an application on AWS Amplify

Log in to the AWS console
In the console search bar, type in amplify and click on the AWS Amplify from the research result
On the Amplify page, we need to create a new app. Click the New App drop-down and select build an app.
Enter the app name and click the confirm deployment button
Wait while AWS setup the app environment
Once completed, click the Launch Studio button to open the amplify studio

Upon launching the studio, a screen similar to the image below should appear.

Here we will be configuring the backend features, so we need to be familiar with this interface.

Creating the Data Model

Models in Amplify are similar to creating a database table (DynamoDB table).
In this project, we will be creating two models (table).

JobList - To store jobs information
ApplicantList - To store applicant's information

Also, we will create our users in the User management table.

To get started, click the Create data model in the Amplify Studio.

Next, click on Add model

Next, Create ApplicantList and JobList Models that should look like the image below.

Now, we can click on save and deploy our models.

After successful deployment, we should have something like this

Setting Up Authentication With AWS Amplify

The authentication feature will help us manage login, signup, forget passwords, and verify OTP. Here is where we will configure the login and registration processes. To set up:

Click the Authentication tab on the side menu.
Click on Password protection settings.
For a simple password, set the maximum number of characters to 6 and uncheck all checkboxes.
Leave everything else as default.
Click the Deploy button and confirm the deployment.
Wait while AWS deploys the authentication.
Once deployment is complete, we'll already have an authentication flow available for consumption. Successful deployment should display as shown below.

Setting Up Storage With AWS Amplify

Here we will manage our resources for file storage (images, audio, video, etc.) and data storage backend by Amazon S3. To set up:

At the left panel of the amplify studio, click on Storage
In Authorization settings, check the Upload box, View box, and Delete box under Signed-in users

Click the Create bucket button
Wait while AWS deploys and syncs the S3 bucket to the project.
Once deployment is completed, we have straightforward access to our S3 bucket.

Setting up Frontend

Bootstrapping Next.JS Application

Next, let's create a Next project by running the following command in our terminal:


    npx create-next-app@latest awsjobboard
    cd awsjobboard

Pull configuration files

To pull the configuration files into our front end, click the Local setup instructions and copy the configuration files as shown in the image below.

Before executing the command we just copied, in the awsjobboard directory, create a folder with the name Backend. This folder will contain all the backend configs of the project.
Now, we can execute the command we just copied from the Amplify Studio in our terminal inside the Backend folder we created. It will get the latest client configuration files for our Next.js project.
This will prompt us to log in to the Amplify CLI. We should click Yes and return to the terminal to continue configuring the Amplify app. We will be asked to select our code editor, the type of project that we are building, and the JavaScript framework that we are using. We can press enter to select the default values for these. We should then set the rest of the wizard options manually, as shown below:

Setting up Components

In the src directory, we will create a folder with the name components. This is the directory that will contain all the reusable components for the project.

Navbar Component

In the src directory, create the file src/components/Navbar.jsand add the following code:

The code above imports necessary dependencies from AWS Amplify, Next.js, and React, and also imports awsconfig which is a configuration file for the AWS Amplify SDK.
The component displays a header containing a logo and a button for sign-up or login. The button's text is dynamically set based on whether the user is authenticated or not. Clicking the logo or the button triggers navigation to either the home page or the authentication page using the Next.js useRouter hook.

The component also authenticates the user on page load or when the asPath property from the Next.js router changes using the Auth.currentAuthenticatedUser() method from the AWS Amplify Auth library.

Jobdetails Component

In the src directory, create the file src/pages/Jobdetails.js and add the following code:

The component above imports a custom getData function from an API route file. The component renders a hero section with a welcome message, a recent jobs section that displays job details fetched from the server with the getData function, and a button to apply for a job.
Clicking the apply button triggers navigation to the applicant page with the job details stored in local storage using the Next.js useRouter hook.
The data prop passed to the component is an array of job objects fetched from the server.

Setting up the APIs

In this section, we will create all our Apis which are getdata.js to get all JobList, apply.js to apply for a job as an applicant, and addnewJob.js for admin to add a new Job.

getData API

In the src/pages/api directory, create the file src/pages/api/getdata.js and add the following code:

This code above exports an asynchronous function called getData which uses Amplify's DataStore API to query job data from the JobList ***model.*

apply API

In the src/pages/api directory, create the file src/pages/api/apply.js and add the following code:

The function takes in two parameters, data, and jobdetails, which are objects containing applicant details and job details, respectively. The function attempts to save the applicant details in the Datastore by creating a new instance of the ApplicantList model and setting its properties to the values from the data object and the \[jobdetails.id\](<http://jobdetails.id>) property. If the save operation is successful, the function returns an object with a success property set to true. If there is an error during the save operation, the function returns an object with a success property set to false and an error property containing the error object.

addnewjob API

In the src/pages/api directory, create the file src/pages/api/addnewjob.js and add the following code:

The function above takes in an object parameter data containing job details, and it saves the job details in the Datastore by creating a new instance of the JobList model and setting its properties to the values from the data object. If the save operation is successful, the function returns an object with a success property set to true. If there is an error during the save operation, the function returns an object with a success property set to false and an error property containing the error object. The JobList model is defined in a file located at ../../../Backend/Backend/models.

Designing the pages

The next step is to design our project pages. Here, we will create the Home page, the Applicant page, and the Admin page. A landing page will be the home page. An applicant page will be the application page. An admin page will be where administrators can create vacancies and approve or reject applicant applications.
In order to use AWS Amplify with a Next.js application, several dependencies need to be installed. First, we need the @aws-amplify/ui-react and aws-amplify packages to enable authentication and API services. We also require sweetalert2 for creating user-friendly alerts. To install these dependencies, let us run the below command in our terminal.

npm i @aws-amplify/ui-react aws-amplify sweetalert2

Now we can create the Home page, the Applicant page, and the Admin page.

Home Page

In the src/pages directory, create the file src/pages/home.js and add the following code:

The code above imports Amplify from AWS Amplify library, awsconfig from a configuration file for AWS services, styles, useEffect and useState from React, Navbar and Jobdetails from their respective components, and getData function from a local API file. The useEffect hook is used to fetch the job data from the API and set the state with the fetched data. The return statement renders the Navbar component and, if there is data, the Jobdetails method is used to configure AWS Amplify with the awsconfig object and ssr property set to true, which enables server-side rendering.

Applicants Page

In the src/pages directory, create the file src/pages/applicant.js and add the following code:

This code above handles the form submission of a job application for a user. It uses AWS Amplify for authentication and imports the necessary packages for the authentication flow. The component displays a form for the user to fill out and submit their job application details, and it also displays the job details they are applying for. Upon successful submission, it displays a success message and redirects the user to the home page. The code also handles user authentication and redirects the user to the appropriate page based on their user type.

Admin Page

In the src/pages directory, create the file src/pages/admin.js and add the following code:

The code above displays a form for adding a new job and a list of job applications. It uses AWS Amplify and DataStore to interact with an AWS backend. The component is wrapped with the withAuthenticator HOC to enable authentication with Amazon Cognito.

The useEffect hook is used to fetch the authenticated user and redirect them to the appropriate page based on their attributes. It also fetches the list of job applications from the database and updates the data state.

The form inputs are stored in state using the useState hook. The handleInputChange function updates the state with the values entered by the user. When the form is submitted, the handleSubmit function calls the addnewjob function to add the job to the database. If successful, a success message is displayed and the user is redirected to the home page. If there is an error, it is logged to the console.

The list of job applications is displayed using the data state. Each job application is displayed as a card with an image, the job ID, the applicant's email, name, portfolio link, and a cover letter message. The map function is used to iterate over the data array and display each application.

Auth page

In the src/pages directory, create the file src/pages/auth.js and add the following code:

This code imports and configures the necessary dependencies for authenticating users via AWS Amplify. It defines a function named Authaccount that uses React's useEffect hook to check whether a user is authenticated and redirects them to either an admin or applicant page based on their user attributes. Finally, it exports the Authaccount function wrapped with the withAuthenticator higher-order component provided by AWS Amplify, which adds authentication UI components to the page.

Index page

In the src/pages/index.js file , replace the existing code with the code below:

The code above defines a default export function named page in the index.js file. It returns a JSX element containing a Home component.

_app page

In the src/pages/_app.js file , replace the existing code with the code below:

Testing the Job board

For us to test our project, there are a few steps we need to take:

Click the User management tab on the side menu in the Amplify studio.
Click Create User to create a new user with a temporary password.

Now, navigate to the root of the project on the terminal and run npm run dev

Our job board is now up and running at localhost:3000. To view the homepage, we can visit localhost:3000 in our preferred web browser. We should be able to see the homepage, which will resemble the image below.

Next, we log in using the email and password we created, which takes us to the change password page, where we can now change and update our password. After we log in, we move to the admin page, where the admin can create and approve or reject jobs.

Immediately the Admin adds the Job, the details get uploaded into our JobList model in the Amplify studio and the Job board homepage as shown below

Conclusion

In this tutorial, we walked through the step-by-step process of creating a professional job board, from setting up the backend with AWS Amplify to designing the user interface using Next.js. With the knowledge gained from this tutorial, anyone can now create a job board website that is efficient and easy to use.

DEV Community: Femi Akinyemi

What AI Still Misses in Production Next.js Apps

Introduction

1. Next dev watching the whole monorepo

2. Putting server secrets in NEXT_PUBLIC_*

3. API address missing or duplicating /api/v1

4. Adding server API files to an app that deploys as static HTML

5. Local proxy setup that does not exist in production

6. Server-only code imported in a client component

7. Login token is valid but for the wrong app

8. Fake login still turned on while shipping real auth

9. Old dev server still running on the port

10. No conflict on your machine, conflict on GitHub

11. Expired login token in your env file

12. Public env vars set after the build, not during it

14. Login page and dashboard on the same local port

15. Green code review, nobody ran a production build

Conclusion

Need Help With Your Next.js or AWS Project?

Wedding Memories: The Collaborative Wedding Album!

Wedding Memories

What I Built

Demo

My Code

More Details

API Integration Breakdown:

Conclusion

How to Upload Files to Amazon S3 with React and AWS SDK

INTRODUCTION

Prerequisite:

Getting Started

Creating S3 Bucket

Making the files publicly accessible

Editing CORS Policy

Installing AWS SDK for JavaScript

Conclusion

Build a simple project management app with Neon, PostgREST, and DigitalOcean

Introduction

Prerequisites

Create a Neon project

Project directory

Loading demo data into the database

PostgREST setup

Granting CRUD access to a database user

PostgREST connection setup

Testing the API routes

Bootstrapping VueJS application

Deploying to Digital Ocean

Configuring PostgREST on Droplet

Creating systemd

Uploading the Vue app into Droplet

Testing deployment

Conclusion

References

Understanding AWS Amplify Monitoring Metrics Definitions

How to add Astro social share to your Astro application

Introduction

Setting up API page

Testing and debugging

What's next?

Conclusion

How to Prevent Unnecessary React Component Re-Rendering

Using React's useMemo

Using React's useCallback

Using React's useRef

Conclusion

References

Build A Reusable Carousel With React And Splide.js

Why Splide?

Splide installation

Integrating Splide with React

Installation

Usage

Carousel Component

Testing the Carousel component

Creating Auto-scroll Carousel

Creating a Thumbnail Carousel

Creating a Video Carousel

Conclusion

References

2. Putting server secrets in `NEXT_PUBLIC_*`

3. API address missing or duplicating `/api/v1`

4. Adding server API files to an app that deploys as static `HTML`

What is Render