DEV Community: 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.

Resources and References

Top React Form Libraries for Efficient Form Creation

Femi Akinyemi — Wed, 08 Mar 2023 11:18:56 +0000

Introduction

As front-end developers, forms play a crucial role in our daily work. Rather than reinventing the wheel and writing forms from scratch every time, it's important to understand the various libraries available to streamline and simplify the form-building process.

In this article, we will explore top React form libraries that can help us create efficient and user-friendly forms with ease.

1. SurveyJS React Form Library

SurveyJS React Form Library is a tool for React applications that helps create dynamic forms on the client side. It uses JSON objects to define the structure and behaviour of forms.

It's one of the popular open-source form libraries, with 3.9k stars on GitHub and 17.4k user downloads on npm.

Features:

Dynamic forms for JavaScript application
20+ built-in question types and support for custom question types
Built-in themes and CSS customization
Answer validation
TypeScript support
Integration with any backend framework (examples for PHP, - NodeJS, and ASP.NET included)
Compatibility with any server + database combination Third-party component integration

How to use

Here are the steps to add a React Survey form to a React application:

This will result in a form similar to this one:



import { useCallback } from "react";

import "survey-core/defaultV2.min.css";
import { Model } from "survey-core";
import { Survey } from "survey-react-ui";

const surveyJson = {
  elements: [
    {
      name: "FirstName",
      title: "Enter your first name:",
      type: "text",
    },
    {
      name: "LastName",
      title: "Enter your last name:",
      type: "text",
    },
  ],
};

function App() {
  const survey = new Model(surveyJson);
  survey.focusFirstQuestionAutomatic = false;

  const alertResults = useCallback((sender) => {
    const results = JSON.stringify(sender.data);
    alert(results);
  }, []);

  survey.onComplete.add(alertResults);

  return <Survey model={survey} />;
}

export default App;

2. React Hook Form

React Hook Form - Performant, flexible and extensible forms with easy-to-use validation. It's one of the most popular form libraries, with 33.5k stars on GitHub and 3.1 million user downloads on npm.

Features:

Performance: Minimizes the number of re-renders, reduces validation computation, and faster mounting.
Super Light: Package size matters. React Hook Form is a tiny library without any dependencies.
HTML standard: Embraces native HTML form validation
Adoptable: it can be easily adopted without other dependencies.
Support Yup, Zod, AJV, Superstruct, Joi and others

How to Install:

npm i react-hook-form

How to use:

    import { useForm } from 'react-hook-form';
    function App() {
      const {
        register,
        handleSubmit,
        formState: { errors },
      } = useForm();

      return (
        <form onSubmit={handleSubmit((data) => console.log(data))}>
          <input {...register('firstName')} />
          <input {...register('lastName', { required: true })} />
          {errors.lastName && <p>Last name is required.</p>}
          <input {...register('age', { pattern: /\d+/ })} />
          {errors.age && <p>Please enter number for age.</p>}
          <input type="submit" />
        </form>
      );
    }

The code above is an example usage of the useForm hook from the react-hook-form library in a React component.

The useForm hook is used to manage form state and validation.

In the example, the register function is used to register the input fields in the form, and returns the necessary props for each input. The handleSubmit function is passed to the onSubmit prop of the form and it is responsible for handling the form submission.

The formState object returned by useForm includes the current state of the form, including any errors that have been detected during validation.

The example defines a form with three input fields; first name, last name, and age. The last name input is required, and the age input requires a numeric value.
If the user leaves the last name field empty or enters a non-numeric value for the age field, an error message is displayed.

When the form is submitted, the handleSubmit function logs the form data to the console.

3. Formik

Formik allows us to build complex forms easily. It's also one of the most popular open-source form libraries for React and React Native. It has 32k stars on GitHub and 2.4 million user downloads on npm.

Features:

Declarative: Formik handles the repetitive and annoying stuff—keeping track of values/errors/visited fields, orchestrating validation, and handling submission.
Intuitive: Formik makes debugging, testing, and reasoning about our forms a breeze by staying within the core React framework and away from magic.
Adoptable: Formik does not use external state management libraries like Redux or MobX.

How to Install:

    npm i formik

How to use:

    // Render Prop
    import React from 'react';
    import { Formik, Form, Field, ErrorMessage } from 'formik';

    const Basic = () => (
      <div>
        <h1>Any place in your app!</h1>
        <Formik
          initialValues={{ email: '', password: '' }}
          validate={values => {
            const errors = {};
            if (!values.email) {
              errors.email = 'Required';
            } else if (
              !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(values.email)
            ) {
              errors.email = 'Invalid email address';
            }
            return errors;
          }}
          onSubmit={(values, { setSubmitting }) => {
            setTimeout(() => {
              alert(JSON.stringify(values, null, 2));
              setSubmitting(false);
            }, 400);
          }}
        >
          {({ isSubmitting }) => (
            <Form>
              <Field type="email" name="email" />
              <ErrorMessage name="email" component="div" />
              <Field type="password" name="password" />
              <ErrorMessage name="password" component="div" />
              <button type="submit" disabled={isSubmitting}>
                Submit
              </button>
            </Form>
          )}
        </Formik>
      </div>
    );

    export default Basic;

The usage example above defines a component that renders a form with an email and password input, and a submit button.
The Formik component wraps the form and provides functionality for handling form state, validation, and submission.

The initialValues prop defines the initial values for the form inputs, and the validate function is used for form validation. If any errors are detected, they are returned as an object.

The onSubmit function is called when the form is submitted, and it can be used to perform any necessary actions, such as sending data to a server or updating the application state.

The Formik component takes a render prop that is used to define the form fields and error messages. The Field component is used to define the form input fields, and the ErrorMessage component is used to display any validation errors.

Finally, the submit button is disabled when the form is submitting to prevent multiple submissions.
This is just one example of how Formik can be used in a React application to manage forms with complex validation and submission logic.

React Hook Forms Vs Formik

	React Hook Form	Formik
Component	Uncontrolled & Controlled	Controlled
API	Hooks	Components + Hooks
Package size	Small `react-hook-form@7.27.0` `8.5KB`	Medium `formik@2.1.4` `15KB`
Validation	Built-in, Yup, Zod, Joi, Superstruct and allow custom validation.	Custom or Yup
Learning curve	Low to Medium	Medium

4. rc-field-form

rc-field-form- React Performance First Form Component. It has 783 stars on GitHub and 885k user downloads on npm.

Features:

Support react.js and even react-native
Validate fields with async-validator

How to Install:

 npm i rc-field-form

How to Use:


    import Form, { Field } from 'rc-field-form';

    const Input = ({ value = "", ...props }) => <input value={value} {...props} />;

    const Demo = () => {
      return (
        <Form
          onFinish={(values) => {
            console.log("Finish:", values);
          }}
        >
          <Field name="username">
            <Input placeholder="Username" />
          </Field>
          <Field name="password">
            <Input placeholder="Password" />
          </Field>

          <button>Submit</button>
        </Form>
      );
    };

    export default Demo;

The usage example above defines a component called Demo that renders a form with two input fields for a username and password.

The Form component wraps the form and provides functionality for handling form state, validation, and submission. The onFinish prop is called when the form is submitted and receives an object with the form values.

The Field component is used to define the form fields and provide validation rules. The name prop is used to define the name of the field, and any custom validation rules can be defined using the rules prop.

The Input component is a custom input field that receives the value prop and any additional props. It is used to define the input fields for the form.
Finally, the submit button is defined outside of the Field components and is used to trigger the form submission.

This is just one example of how rc-field-form can be used in a React application to manage form fields and handle the form submission.

5. React Final Form

React Final Form - High-performance subscription-based form state management for React. It follows the observer design pattern in which components subscribe to events as they occur. It does not re-render the entire form, only the fields that have subscribed to re-render. It has 7.2k stars on GitHub and 364k user downloads on npm.

Features:

Zero dependencies (that affect the bundle size)
Only peer dependencies: React and React Final Form
Opt-in subscriptions - only update on the state we need!

How to Install:

    npm i react-final-form

How to Use:


    import { Form, Field } from 'react-final-form'

    const MyForm = () => (
      <Form
        onSubmit={onSubmit}
        validate={validate}
        render={({ handleSubmit }) => (
          <form onSubmit={handleSubmit}>
            <h2>Simple Default Input</h2>
            <div>
              <label>First Name</label>
              <Field name="firstName" component="input" placeholder="First Name" />
            </div>

            <h2>An Arbitrary Reusable Input Component</h2>
            <div>
              <label>Interests</label>
              <Field name="interests" component={InterestPicker} />
            </div>

            <h2>Render Function</h2>
            <Field
              name="bio"
              render={({ input, meta }) => (
                <div>
                  <label>Bio</label>
                  <textarea {...input} />
                  {meta.touched && meta.error && <span>{meta.error}</span>}
                </div>
              )}
            />

            <h2>Render Function as Children</h2>
            <Field name="phone">
              {({ input, meta }) => (
                <div>
                  <label>Phone</label>
                  <input type="text" {...input} placeholder="Phone" />
                  {meta.touched && meta.error && <span>{meta.error}</span>}
                </div>
              )}
            </Field>

            <button type="submit">Submit</button>
          </form>
        )}
      />
    )

The code above is an example of using React Final Form library to create a form with various types of fields such as text input, reusable custom component, and render functions. The form component takes in an onSubmit function and a validate function to handle form submission and validation respectively. The Field component is used to create each field, and it can accept a component prop to render the field with a custom component or a render prop to render the field with a custom function. The input value and state are managed by the library, and any validation errors are displayed when the user interacts with the form.

rc-field-form Vs React Final Form

	rc-field-form	React Final Form
Component	A component library for building forms in React.	A library for building forms in React.
API	It provides Form, FormItem, and other form components that can be used to build a form.	It provides a `<Form>` component and a `<Field>` component that can be used to build a form.
Package size	The package size of RC-Field-Form is around 105 KB.	The package size of React Final Form is around 38 KB.
Validation	It provides built-in validation rules, such as required, pattern, and maxLength. It also allows custom validation rules.	It provides validation through a validation function, which can be passed as a prop to the `<Field>` component. It also allows custom validation functions.
Learning curve	It provides good documentation and examples to get started.	It also has good documentation and examples to get started.

6. react-credit-cards

react-credit-cards- A sleek credit card component for React. It has 2.4k stars on GitHub and 27.9k user downloads on npm.

Features:

react-credit-cards support all credit card issuers available in Payment plus Hipercard (a Brazilian credit card).

How to Install:

npm i react-credit-cards

How to Use:


    import React from 'react';
    import Cards from 'react-credit-cards';

    export default class PaymentForm extends React.Component {
      state = {
        cvc: '',
        expiry: '',
        focus: '',
        name: '',
        number: '',
      };

      handleInputFocus = (e) => {
        this.setState({ focus: e.target.name });
      }

      handleInputChange = (e) => {
        const { name, value } = e.target;

        this.setState({ [name]: value });
      }

      render() {
        return (
          <div id="PaymentForm">
            <Cards
              cvc={this.state.cvc}
              expiry={this.state.expiry}
              focused={this.state.focus}
              name={this.state.name}
              number={this.state.number}
            />
            <form>
                <input
                type="tel"
                name="number"
                placeholder="Card Number"
                onChange={this.handleInputChange}
                onFocus={this.handleInputFocus}
              />
              ...
            </form>
          </div>
        );
      }
    }

The code above is an example of a simple credit card payment form in React, using the react-credit-cards library to display the credit card as it's being filled out. The form includes inputs for the card number, expiration date, cardholder name, and CVC code. The state of the form is managed in the component's state object, with handleInputFocus and handleInputChange methods to update the state and keep track of the currently focused input field. When the form is submitted, the data can be sent to a backend for processing.

7. formsy-react

formsy-react- A form input builder and validator for React. It has 761 stars on GitHub and 25k user downloads on npm.

Features:

Build any form element components. Not just traditional inputs, but anything we want, and get that validation for free
Add validation rules and use them with simple syntax
Use handlers for different states of our form. (onSubmit, onValid, etc.)
Pass external errors to the form to invalidate elements (E.g. a response from a server)
Dynamically add form elements to our form, and they will register/unregister to the form

How to Install:

 npm i formsy-react

How to Use:


    // MyInput.js
    import { withFormsy } from 'formsy-react';
    import React from 'react';

    class MyInput extends React.Component {
      constructor(props) {
        super(props);
        this.changeValue = this.changeValue.bind(this);
      }

      changeValue(event) {
        // setValue() will set the value of the component, which in
        // turn will validate it and the rest of the form
        // Important: Don't skip this step. This pattern is required
        // for Formsy to work.
        this.props.setValue(event.currentTarget.value);
      }

      render() {
        // An error message is passed only if the component is invalid
        const errorMessage = this.props.errorMessage;

        return (
          <div>
            <input onChange={this.changeValue} type="text" value={this.props.value || ''} />
            <span>{errorMessage}</span>
          </div>
        );
      }
    }

    export default withFormsy(MyInput);

The code above defines a custom input component MyInput using formsy-react library. The withFormsy higher-order component is used to wrap the input component to enable it to work with formsy-react.
The component defines a changeValue method that sets the value of the input component and triggers the form validation. The render method returns the input element along with an error message, which is displayed only when the component is invalid.
This code can be used to create custom input components with validation capabilities using formsy-react.

react-credit-cards Vs formsy-react

	react-credit-cards	formsy-react
Component	A component library for displaying credit card input fields and validating credit card information.	A library for building forms in React.
API	It provides a single `<Cards>` component that can be used to display credit card input fields. It also provides props for customization.	It provides a `<Form>` component and a `<Field>` component that can be used to build a form.
Package size	The package size of React Credit Cards is around 14 KB.	The package size of Formsy React is around 25 KB.
Validation	It provides built-in validation rules for credit card number, expiration date, and security code. It also allows custom validation rules.	It provides validation through a validation function, which can be passed as a prop to the `<Field>` component. It also allows custom validation functions.
Learning curve	good documentation and examples to get started.	It also has good documentation and examples to get started.

8. react-form

react-form- Hooks for managing form state and validation in React. It has 2.5k stars on GitHub and 14.3k user downloads on npm.

Features:

Built with React hooks for React hooks
Highly practical validation API with 1st-class asynchronous support
Built-in validation debouncing with auto cancellation for stale validations
Field Scoping for deeply nested form values
No-nonsense meta-management for both forms and form fields
Fully memorized for frequent and fast rerenders
Flexible form API at the field, scope, and form levels

How to Install:


    npm i react-form

How to Use:



    import React from "react";
    import ReactDOM from "react-dom";

    import { useForm, useField } from "react-form";

    async function sendToFakeServer(values) {
      await new Promise(resolve => setTimeout(resolve, 1000));
      return values;
    }

    function validateAddressStreet(value) {
      if (!value) {
        return "A street is required";
      }
      return false;
    }

    async function validateName(name, instance) {
      if (!name) {
        return "A name is required";
      }

      return instance.debounce(async () => {
        console.log("checking name");
        await new Promise(resolve => setTimeout(resolve, 1000));
        // All names are valid, so return a false error
        return false;
      }, 500);
    }

    function NameField() {
      const {
        meta: { error, isTouched, isValidating },
        getInputProps
      } = useField("name", {
        validate: validateName
      });

      return (
        <>
          <input {...getInputProps()} />{" "}
          {isValidating ? (
            <em>Validating...</em>
          ) : isTouched && error ? (
            <em>{error}</em>
          ) : null}
        </>
      );
    }

    function AddressStreetField() {
      const {
        meta: { error, isTouched, isValidating },
        getInputProps
      } = useField("address.street", {
        validate: validateAddressStreet
      });

      return (
        <>
          <input {...getInputProps()} />{" "}
          {isValidating ? (
            <em>Validating...</em>
          ) : isTouched && error ? (
            <em>{error}</em>
          ) : null}
        </>
      );
    }

    function MyForm() {
      // Use the useForm hook to create a form instance
      const {
        Form,
        meta: { isSubmitting, canSubmit }
      } = useForm({
        onSubmit: async (values, instance) => {
          // onSubmit (and everything else in React Form)
          // has async support out-of-the-box
          await sendToFakeServer(values);
          console.log("Huzzah!");
        },
        debugForm: true
      });

      return (
        <Form>
          <div>
            <label>
              Name: <NameField />
            </label>
          </div>
          <div>
            <label>
              Address Street: <AddressStreetField />
            </label>
          </div>

          <div>
            <button type="submit" disabled={!canSubmit}>
              Submit
            </button>
          </div>

          <div>
            <em>{isSubmitting ? "Submitting..." : null}</em>
          </div>
        </Form>
      );
    }

    function App() {
      return <MyForm />;
    }

    const rootElement = document.getElementById("root");
    ReactDOM.render(<App />, rootElement);

The usage example above is a React code that uses the react-form library to handle form validation and submission. It creates a form instance using the useForm hook and defines two form fields (NameField and AddressStreetField) using the useField hook, each with its own validation function.

The MyForm component renders the form and handles submission. When the form is submitted, it sends the form data to a fake server using sendToFakeServer function. It also displays an error message if the form data is invalid, and displays a "Submitting..." message while the form is being submitted. Finally, the **App** component renders the MyForm component.

9. uniforms

uniforms- A React library for building forms from any schema. It has 1.7k stars on GitHub and 13.9k user downloads on npm.

Features:

Automatic forms generation
Fields capable of rendering every schema
Helper with creating custom fields with one line
Inline and asynchronous form validation
Integrations with various schemas
Wide range of themes:

How to Install:


    npm i uniforms

How to Use:


    import React from 'react';
    import { AutoForm } from 'uniforms-semantic';

    import { bridge as schema } from './GuestSchema';

    export function GuestFormBasic() {
      return <AutoForm schema={schema} onSubmit={console.log} />;
    }

The code above creates a basic form using the **uniforms-semantic** library with a predefined schema and a console log statement to display the form data when it is submitted.

react-form Vs uniforms

	react-form	uniforms
Component	Built with React hooks for React hooks	A library for building forms in React.
API	Flexible form API at the field, scope, and form levels	It provides a set of components that can be used to build a form, including `<AutoForm>`, `<LongTextField>`, `<SelectField>`, and more.
Package size	The package size of React Form is around 14 KB.	The package size of Uniforms is around 72 KB.
Validation	Built-in validation debouncing with auto cancellation for stale validations	It provides a simple schema-based validation system, which can be used to validate form inputs. It also allows custom validation functions.
Learning curve	good documentation and examples to get started.	good documentation and examples to get started.

10. MobX React Form

MobX React Form- Reactive MobX Form State Management. It has 1.1k stars on GitHub and 7.2k user downloads on npm.

Features:

Extensible Validation Plugins.
Sync & Async Validation (w/ Promises & automatic errors).
Nested Fields (w/ Serialization & Validation).
Nested Forms (w/ Nested Submission & Validation Hooks).
Event Hooks, Event Handlers & Validation Hooks
Observers & Interceptors
Bindings for custom Components.
Support for Material UI, React Widgets, React Select & more.
Dedicated DevTools Package.

How to Install:

    npm i mobx-react-form

How to Use:


    import React from 'react';
    import { observer } from 'mobx-react';

    export default observer(({ myForm }) => (
      <form onSubmit={myForm.onSubmit}>
        <label htmlFor={myForm.$('email').id}>
          {myForm.$('email').label}
        </label>
        <input {...myForm.$('email').bind()} />
        <p>{myForm.$('email').error}</p>

        {/* ... other inputs ... */}

        <button type="submit" onClick={myForm.onSubmit}>Submit</button>
        <button type="button" onClick={myForm.onClear}>Clear</button>
        <button type="button" onClick={myForm.onReset}>Reset</button>

        <p>{myForm.error}</p>
      </form>
    ));

The code above creates a form component using React and the mobx-react library. The observer function is used to make the component reactive to changes in the form state managed by MobX.

The form component renders a form element with input fields generated based on the myForm object passed as a prop. The myForm object is expected to have methods and properties provided by MobX to handle form validation, submission, clearing, and resetting.

The input fields are generated using the bind method of the $ object which generates the necessary properties and handlers for the input field to be reactive to changes.

The form also includes buttons for submission, clearing, and resetting the form. The myForm.onSubmit, myForm.onClear, and myForm.onReset methods are called respectively when the buttons are clicked.

11. HouseForm

HouseForm - Field-First React Form Validation, where our form validation and UI code live harmoniously. It has 173 stars on GitHub and 191 user downloads on npm.

Features:

Field First: Consolidate our UI and validation logic in one location - our fields.
Headless & runtime agnostic: Use HouseForm in any React-supported environment, from native apps to the CLI.
Zod Powered: Easily set up complex validations for our form fields.
Flexible API: Mix and match which validation methods work best per field.
Lightweight: HouseForm has a smaller bundle of less than 4KB GZIP.
Fast: Our benchmarks have us on par or faster than common alternatives.

How to Install:


    npm i houseform

How to Use:


    import {Form} from 'houseform';

    const App = () => (
        <Form onSubmit={() => {}}>
            {({submit}) => <button onClick={submit}>Submit</button>}
        </Form>
    )

The App component renders the Form component with an onSubmit prop set to an empty arrow function.
The Form component accepts a function as a child with a submit argument provided. This function returns a button element with an onClick event handler set to the submit function.
When the button is clicked, it triggers the submit function provided by the Form component to handle the form submission logic.

HouseForm Vs MobX React Form

	HouseForm	MobX React Form
Component	HouseForm uses uncontrolled components	Uncontrolled & Controlled
API	Flexible API	It provides a set of components that can be used to build a form, including `<Form>`, `<Field>`, and `<Errors>`
Package size	HouseForm is 13.5kb unminified without GZIP	110.6 kB Minified and 28.7kb Minified + GZIPPED
Validation	HouseForm uses Zod for validation	Extensibles Validation Plugins.
Learning curve	good documentation and examples to get started.	good documentation and examples to get started.

Conclusion

Thanks for checking out this piece! Hope it was helpful for your coding journey. Keep on coding, and have fun!