DEV Community: Derick Zihalirwa

How to Host Multiple Next.js Applications on a Single AWS ECR Instance Using Kamal 2.4

Derick Zihalirwa — Mon, 06 Jan 2025 15:47:55 +0000

Introduction

Hey! If you’ve already followed my guide on deploying Next.js to AWS ECR using Kamal 2.4, you’re in the right place. If not, you might want to check that out first before diving in here.

Let’s set the stage.

Imagine your team manages multiple applications—each with its own staging and production environment. Sounds familiar?

Here’s a typical setup:

Company Setup:

App 1: Marketing Site
- Production Server
- Staging Server
App 2: Service 1
- Production Server
- Staging Server
App 3: Service 2
- Production Server
- Staging Server

As you can guess, all those servers start racking up costs fast. But there’s a smarter way to handle staging environments—and that’s what we’ll cover here.

Why Consolidate Staging Environments?

Running a separate staging server for each app is like giving every roommate their own apartment—it’s nice, but overkill. What if they could all just share a well-organized house?

By consolidating staging environments onto a single server, you cut down on infrastructure costs and simplify management. Plus, you make better use of your server’s resources, instead of leaving them sitting idle.

Of course, there are trade-offs. Apps will share CPU and memory, and if the server goes down, all your staging apps go with it. But for many teams, especially smaller ones, the benefits outweigh the risks.

Before You Start: A Quick Checklist

Before moving all your staging apps to one server, make sure:

Your server has enough CPU, RAM, and disk space to comfortably support multiple apps.
You don’t cram together resource-heavy services that could clash.
You’re using a tool like Kamal (formerly MRSK) to handle deployments cleanly.

Deploying Multiple Next.js Apps to One Server (with Docker + Kamal)

We'll use Docker to containerize each app and Kamal to deploy them onto a single staging server.

Here’s how to do it step-by-step:

1. Dockerize Each App

Make sure every app has a valid Dockerfile in its root directory. This is what Kamal will use to build your app into a container.

2. Configure Kamal for Each App

In each app’s repository, update the config/deploy.staging.yml (or .env equivalent) so all apps point to the same staging server—but with different ports.

Example Configs:

App 1: Marketing Site

service: app-1
image: example/web-app

servers:
  web:
    - 0.0.0.0  # Your staging server IP

proxy:
  ssl: false
  host: stagingmarketing.example.com
  app_port: 3000
  healthcheck:
    path: /
    interval: 3
    timeout: 30

App 2: Service 1

service: app-2
image: example/web-app-2

servers:
  web:
    - 0.0.0.0

proxy:
  ssl: false
  host: staging-service-1.example.com
  app_port: 3001
  healthcheck:
    path: /
    interval: 3
    timeout: 30

App 3: Service 2

service: app-3
image: example/web-app-3

servers:
  web:
    - 0.0.0.0

proxy:
  ssl: false
  host: staging-service-2.example.com
  app_port: 3002
  healthcheck:
    path: /
    interval: 3
    timeout: 30

How It All Comes Together

Think of your server like a building, and each app as a different apartment inside. Everyone shares the same address (IP), but has their own door (port) and mailbox (domain).

By assigning different ports and subdomains, Kamal keeps everything isolated and easy to manage. You still get individual health checks, separate logs, and independent deployments—just without the headache of spinning up separate servers for each app.

Final Thoughts

Consolidating your staging environments is one of those small moves that pays off quickly—especially when you’re juggling multiple projects. Kamal makes the deployment process clean, and with Docker handling your app containers, it's both flexible and scalable.

Just be mindful of your server's capacity and isolate noisy apps when needed. Otherwise, you're set.

Have questions or want to see this in action with real infra? Hit me up or drop a comment.

How to deploy a Nextjs app with Kamal 2.4, AWS ECR, and Github Actions

Derick Zihalirwa — Tue, 15 Oct 2024 08:55:47 +0000

Why Use Kamal for Deployment?

So, why pick Kamal for your deployments?

Simple: it makes the process smooth, fast, and reliable—without locking you into a complicated toolchain. Here’s what makes Kamal shine:

Readable YAML configs: Easy to write, easy to understand.
First-class Docker support: Get consistent builds wherever you deploy.
Rolling deployments: No downtime. No late-night fire drills.
Built-in health checks: Kamal keeps an eye on your app so you don’t have to.

Whether you're shipping fast or scaling up, Kamal helps you stay in control.

What You’ll Need Before You Start

Before jumping in, make sure your dev environment’s good to go:

An AWS account, with the CLI set up
Docker installed (and basic CLI comfort)
Kamal version 2.4 or higher
A working Next.js app
Some GitHub Actions knowledge

Step 1: Initialize Kamal in Your Project

Start by initializing Kamal in your app repo. Run:

kamal init

This sets up a .kamal directory with the core config files you’ll customize next.

Project Structure Overview

Here’s what your project directory should look like after setup:

project-root/
├── .kamal/                   # Kamal deployment config
│   ├── deploy.yml            # Main deployment settings
│   └── secrets               # Environment secrets
├── .github/workflows/        # CI/CD pipelines
│   └── release-deploy.yml    # GitHub Actions workflow
├── Dockerfile                # Production build setup
├── package.json              # Dependencies
├── yarn.lock                 # Lockfile
├── .env                      # Local environment variables
├── public/                   # Static assets
└── .next/                    # Compiled Next.js output

Example `deploy.yml` for Kamal

Here’s a sample deploy.yml config tuned for staging:

defaults:
  service: web-app
  image: example/web-app

servers:
  web:
    - 192.168.1.1  # Replace with your staging server IP

ssh:
  user: ubuntu
  keys: ["~/.ssh/example-key.pem"]

proxy:
  ssl: false
  app_port: 3000
  host: stagingapp.example.io
  healthcheck:
    path: /
    interval: 3
    timeout: 30

registry:
  server: 123456789012.dkr.ecr.us-west-1.amazonaws.com
  username: AWS
  password: <%= %x(aws ecr get-login-password) %>

builder:
  arch: amd64
  context: .

env:
  clear:
    NEXT_PUBLIC_APP_BACKEND_URL: https://staging.api.example.io
    NEXT_PUBLIC_APP_PUBLIC_IP_API: https://pro.ip-api.com/json/?key=dummykey

Building a Dockerfile for Next.js

Here’s a lean, production-ready Dockerfile for a Next.js app:

FROM node:lts-bookworm-slim AS base

FROM base AS deps
WORKDIR /app
COPY package.json yarn.lock ./
RUN yarn install --frozen-lockfile
ARG NEXT_PUBLIC_APP_BACKEND_URL
ARG NEXT_PUBLIC_APP_PUBLIC_IP_API
ENV NEXT_PUBLIC_APP_BACKEND_URL=$NEXT_PUBLIC_APP_BACKEND_URL
ENV NEXT_PUBLIC_APP_PUBLIC_IP_API=$NEXT_PUBLIC_APP_PUBLIC_IP_API

COPY . .
RUN yarn run build

FROM base AS release
WORKDIR /app
ENV NEXT_TELEMETRY_DISABLED=1
COPY --from=deps /app/node_modules ./node_modules
COPY --from=deps /app/package.json ./package.json
COPY --from=deps /app/.next ./.next
COPY --from=deps /app/public ./public

EXPOSE 3000
CMD ["yarn", "start"]

This sets you up for reproducible builds and fast deployment.

Automating Deployments with GitHub Actions

Want your app to deploy automatically when a new release is published? Here’s a GitHub Actions workflow that gets the job done:

name: Release Deploy

on:
  release:
    types: [published]

permissions:
  contents: read
  packages: write
  id-token: write

env:
  ECR_REPOSITORY: example/web-app

jobs:
  package:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout Repo
        uses: actions/checkout@v4
        with:
          fetch-depth: 0

      - name: Create .env file
        run: |
          echo "${{ secrets.PROD_ENV_FILE }}" > .env

      - name: Configure AWS
        uses: aws-actions/configure-aws-credentials@v4
        with:
          role-to-assume: ${{ secrets.AWS_ROLE_TO_ASSUME }}
          aws-region: us-west-1

      - name: Login to ECR
        uses: aws-actions/amazon-ecr-login@v2

      - name: Build & Push Docker Image
        uses: docker/build-push-action@v5
        with:
          context: .
          file: ./Dockerfile
          platforms: linux/amd64
          push: true
          tags: |
            ${{ steps.login-ecr.outputs.registry }}/${{ env.ECR_REPOSITORY }}:${{ github.sha }}

This pipeline checks out your code, configures AWS credentials, builds the Docker image, and pushes it straight to your ECR registry—all triggered by a GitHub release.

Wrapping Up

And there you have it: a solid deployment workflow using Kamal 2.4, Docker, and GitHub Actions.

You’ve got:

A clean, reproducible setup
Auto-deployments on release
A scalable, self-hosted Next.js app on AWS

No vendor lock-in. No drama. Just fast, predictable deployments.

Learn How to Easily Style Your App for Multiple Users with Tailwind CSS

Derick Zihalirwa — Wed, 09 Oct 2024 12:18:37 +0000

If you're building an app that serves multiple tenants, like different clients or domains, you might want each one to have its own unique look. A simple way to achieve this is by combining Tailwind CSS with CSS variables to easily switch colors and styles depending on the tenant.

UI screenshots:

Steps to follow:

Tailwind Configuration:

First, you'll configure Tailwind to use CSS variables for colors. This allows you to change styles dynamically based on the tenant.

In your tailwind.config.js, add the following code to set up the colors:

theme: {
  extend: {
    colors: {
      primary: 'var(--primary-color)',
      secondary: 'var(--secondary-color)',
    },
  },
},

Global CSS:

Next, define the colors for each tenant in your global CSS file (globals.css). Here's an example where Tenant A and Tenant B have different color schemes:

body.tenantA {
  --primary-color: #1D4ED8;
  --secondary-color: #64748B;
}
body.tenantB {
  --primary-color: #EF4444;
  --secondary-color: #F97316;
}

Detecting the Tenant:

To apply the correct tenant class to the <body>, you’ll need to detect which tenant is being used, usually based on the domain or headers. Then, add a class like tenantA or tenantB dynamically to the body (I leave that to you).

In your layout component, you might do something like this:

export default function RootLayout({ children }) {
 // Logic based on headers or host
  const tenant = determineTenant();
  return <body className={tenant}>{children}</body>;
}

Using Tailwind Classes:

Now, you can use Tailwind’s utility classes like bg-primary and text-secondary in your components. Tailwind will automatically apply the right colors based on the tenant.

Here's an example for a homepage component:

export default function HomePage() {
  return <div className="bg-primary text-white p-4">Welcome!</div>;
}

Why This Works:

By combining Tailwind CSS and CSS variables, you can easily switch themes depending on which tenant is using the app. This gives you flexibility without repeating a lot of code, making your app easier to maintain as it grows.

If you want to dive deeper into more advanced techniques for multi-tenant UIs, check out this article: Designing Multi-Tenant UI with Tailwind CSS.

Conclusion:

This approach allows you to manage multiple tenants with different themes effortlessly, using Tailwind CSS. It’s simple, effective, and perfect for apps that need different looks for different clients.

Learn How to Upload Files to Google Cloud Storage Bucket with Nextjs

Derick Zihalirwa — Sun, 13 Aug 2023 05:33:48 +0000

INTRODUCTION

Shifting from cloudinary to gcs to upload my files in my nextjs application using the power of nextjs api route wasn't an easy task until I found this article

In this article we will try to explore the tread-offs of this implementation and offer insights into the necessary code updates to ensure seamless functionality in both developmental and production environments.

1 GCS Credentials

import { Storage } from "@google-cloud/storage";

const storage = new Storage({
    keyFilename: "KEY_FILENAME.json",
});

...

The code Above suggest we use keyFilename which expose our file for anyone that has access to the repository.

make this change:

import { Storage } from "@google-cloud/storage";

const storage = new Storage({
projectId: "your-project-id",
credentials: {
client_email: process.env.GCS_CLIENT_EMAIL,
private_key: process.env.GCS_PRIVATE_KEY?.split(String.raw`\n`).join("\n"),
},
});

This code has the same functionality as the one provided above, as you can see the only difference is that this one does not access any json file but uses env to store the credentials.

The second code is more convenient if you already have Application Default Credentials set up for your project.

2 UPLOADING FILES

When it came to uploading files to GCS, I introduced a fresh function named method3. As part of this update, I removed the old formidable-serveless.js and parseForm.ts files, opting for a simpler setup. This involved directly weaving the power of the formidable library into my code. The result? Files now take a direct path to the cloud. Let's take a peek at how the code transformation looks:

export const method3 = async (req: NextApiRequest, res: NextApiResponse) => {

// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
const form = formidable({ fileWriteStreamHandler: uploadStream });
};

if your are using a private bucket configuration and try to use the secured_url to display the image in your application, you won't be able to do so.

Here is what you need to do to solve this:

First we need to add few lines of code in gsc.ts
Go ahead and add this just below createWriteStream function:

export const getSecuredUrl = async (filename: string) => {
const now = Date.now();
const expires = new Date(now + 24 * 60 * 60 * 1000);
const url = await bucket.file(filename).getSignedUrl({
expires: expires.getTime(),
version: "v4",
action: "read",
});
return url;
};

The function first gets the current time in milliseconds. Then, it creates a new Date object that is 24 hours in the future. This will be the expiration time for the signed URL.

Next, the function calls the bucket.file() method to get a reference to the file that we want to create a signed URL for. The file() method takes the filename as its argument.

Finally, the function calls the getSignedUrl() method to generate the signed URL. The getSignedUrl() method takes the following arguments:

expires: The expiration time for the signed URL in milliseconds.
version: The version of the Cloud Storage API to use.
action: The action that is allowed to be performed on the file. In this case, we are only allowing the file to be read.

The function then returns the signed URL.

Next, go and update the method3 function in upload.ts

export const method3 = async (req: NextApiRequest, res: NextApiResponse) => {

const form = formidable({ fileWriteStreamHandler: uploadStream });

try {
        form.parse(req, async (err, fields, files) => {
    const getFile = files.file as any;
    const file = Array.isArray(getFile)
    ? getFile.map((f) => f)
    : getFile.originalFilename ??
    getFile.newFilename;
    const signedUrl = await
    gcs.getSecuredUrl(file);
//add this line to avoid Content-type error in production
res.setHeader("Content-Type", "application/json");
res.status(200).json(signedUrl[0]);
}
});
} catch (error) {
    res.status(500).json(error);
}
};

This line tries to get a signed URL for the file. If the getSecuredUrl() function returns an error, the function sends an error message back to the client. Otherwise, the function sends the signed URL back to the client.

CONCLUSION

In this article, we learned how to upload files to Google Cloud Storage Bucket using Next.js API Route. We also discussed some of the trade-offs of using different methods for storing credentials and uploading files.

Here are the key takeaways from this article:

Using keyFilename to store credentials is not secure, as it exposes your file to anyone that has access to the repository. Instead,we opted for env to store your credentials.
You can use the formidable library to directly upload files to GCS without having to create separate files for parsing the form.
If you are using a private bucket configuration, you need to use a signed URL to access the file in your application. You can generate a signed URL using the getSignedUrl() method from the gsc.ts file.

Feel free to drop your comments in the dedicated section below. Remember, we're all on this learning journey together, and your insights are highly valued!

Learn How to Implement Custom File Validation in React Dropzone

Derick Zihalirwa — Fri, 09 Jun 2023 06:11:30 +0000

Introduction

The well-known tool React Dropzone enables users to drag and drop files for upload in React applications. It offers simple file validation by default, including file type and size limitations.

To enforce additional requirements, you might occasionally need to develop your own custom validation logic.
In this article, we'll look at how to leverage the React Dropzone component's built-in validation method to set file size limitations based on the sorts of files that they can accept.

Prerequisites

To follow along with this tutorial, you should have a basic understanding of React and have React Dropzone installed in your project. If you haven't done so already, you can install it by running the following command:



npm install react-dropzone

Implementing Custom Validation Logic:

Let's say we want to limit video files to a maximum size of 10MB and image files to a maximum size of 3MB. To achieve this, we will create a custom validation function called typeValidator that accepts a File object as a parameter and returns an error object if the file exceeds the specified limits.



const typeValidator = (file) => {
  if (file.type.startsWith("video/")) {
    if (file.size > 10 * 1024 * 1024) {
      // 10MB limit
      return {
        code: "size-too-large",
        message: "Video file is larger than 10MB",
      };
    }
  } else if (file.type.startsWith("image/")) {
    if (file.size > 3 * 1024 * 1024) {
      // 3MB limit
      return {
        code: "size-too-large",
        message: "Image file is larger than 3MB",
      };
    }
  }
  return null;
};

The typeValidator function determines whether the file type is image/ or video/ by examining the extension. If they do, the file size is then checked against the appropriate restrictions. It returns an error object with a code and a related error message if the file goes over the limitations. If not, null is returned to show that the file is valid.

Using the Custom Validation Function in React Dropzone:

Let's add the custom validation function into the React Dropzone component now that we have it. For further information, see the React Dropzone doc.



import React from "react";
import { useDropzone } from "react-dropzone";

const MyDropzone = () => {
  const onDrop = (acceptedFiles, rejectedFiles) => {
    // Handle the accepted files
    console.log("Accepted files:", acceptedFiles);

    // Handle the rejected files
    console.log("Rejected files:", rejectedFiles);
  };

  const { getRootProps, getInputProps } = useDropzone({
    onDrop,
    validator: typeValidator,
  });

  return (
    <div {...getRootProps()}>
      <input {...getInputProps()} />
      <p>Drag and drop files here, or click to select files</p>
    </div>
  );
};

export default MyDropzone;

In the code above, we import the necessary dependencies and define our MyDropzone component. Inside the component, we use the useDropzone hook provided by the React Dropzone library to configure the Dropzone behavior.

By passing the validator prop with the typeValidator function, we instruct the Dropzone component to apply our custom validation logic. When files are dropped or selected, the onDrop function is called, receiving two arrays: acceptedFiles and rejectedFiles. The accepted files are the ones that passed the validation, while the rejected files are the ones that exceeded the specified limits.

Conclusion

In this blog post, we explored how to implement custom file validation in a React Dropzone component.

By creating a custom validation function and integrating it with the Dropzone component, we were able to enforce size restrictions based on file types. This approach allows for flexible and tailored file validation within your React applications.

Feel free to extend the provided example to suit your specific requirements and build robust file upload functionality.

If you have any questions or need further assistance, feel free to connect with me on twitter

Happy coding, fellow adventurer!

Learn How to Internationalize your NextJS App with Next-Translate

Derick Zihalirwa — Wed, 05 Apr 2023 09:15:22 +0000

Dive into Nextjs's internationalized routing

Are you planning to add multi-language support for your website?

In this article, we'll guide you through the steps to translate website content using Next.js 12 internationalization and next-i18next.

What is Next.js Internationalization?

A built-in feature of Next.js Internationalization enables you to develop a website with content in various languages. The routing and rendering of several language versions of your website are handled automatically by Next.js. The user's preferred language can be determined using Next.js, which can then offer the appropriate content.

Why next-i18next?

You may quickly add internationalization (i18n) to your website by applying the next-i18next package in a Next.js project. This means that you can offer translations of the information on your website into several languages, making it accessible to a broader audience.

Folder Structure

├── public
│   ├── locales
│   │   ├── en
│   │   │   ├── common.json
│   │   │   └── blog.json
│   │   └── fr
│   │       ├── common.json
│   │       └── blog.json
├── pages
│   ├── _app.tsx
│   └── index.tsx
├── next.config.js
└── next-i18next.config.js

Get Started

Navigate to your project directory in the terminal run the following command:

npm install next-i18next

Adding Translation Support

You need to create a translation file to add translation support to your Next.js application. These files will contain the translated strings for different languages (next-i18next uses json)
Create a new folder named public/locales/ and create a separate folder for each locale. For example, create en/blog.json, and fr/blog.json for English, and French translations, respectively.

public/locales
├── en
│   ├── common.json
│   └── blog.json
└── fr
    ├── common.json
    └── blog.json

common.json is the default json file that next-i18next will look into if no existing translation file.

Here's an example of what a translation file might look like:

//locale/en/blog.json
{
  "welcome": "Welcome to my blog!"
}

//locale/fr/blog.json
{
  "welcome": "Bienvenue sur mon blog!"
}

⚠️The keys must match both json files for the translation to work. The example above both use "welcome" as key

Configure next-i18next

Next, configure next-i18next to work with the translation files. Create a next-i18next.config.js file in the root of your project and add the following configuration:

// next-i18next.config.js
module.exports = {
  i18n: {
    defaultLocale: "en", //default locale
    locales: ["en", "fr"] // list of supported locales
  },
};

Now import i18n in next.config.js file in the root of your project

/** @type {import('next').NextConfig} */
const { i18n } = require("./next-i18next.config");
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  i18n,
};

module.exports = nextConfig;

Wrap Your Next.js App with appWithTranslation

Now in _app inside pages folder:

import '../styles/globals.css'
import { appWithTranslation } from 'next-i18next'

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export default appWithTranslation(MyApp)

This wraps your Next.js application with the necessary context and translation functionality provided by next-i18next. This enables translation support throughout your application.

ServerSideTranslations

This is an async function that you need to include on your page-level components via either getStaticProps or getServerSideProps. (depending on the use case)

// pages/index
import { serverSideTranslations } from "next-i18next/serverSideTranslations";
import { useTranslation } from 'next-i18next'

function Home() {
  const { t } = useTranslation('blog')
  return (
    <div>
      <h1>{t('welcome')}</h1>
    </div>
  )
}

//getServeSideProps works too
export const getStaticProps = async ({ locale }) => {
  return {
    props: {
      ...(await serverSideTranslations(locale, ["blog"])),
    },
  };
};

Conclusion

That's it! You've now learned how to translate website content using Next.js internationalization and next-i18next.

Happy coding!

Learn How to Connect your Nextjs App to Sanity.io (Typescript)

Derick Zihalirwa — Sat, 05 Nov 2022 06:55:22 +0000

Hello my gorgeous friend from the Internet, today in this tutorial we will learn how to connect a minimalistic e-commerce web app to a CMS (Content Management System) that going to be used as a dashboard whenever you want to add a new item to your store.

Whenever you need to update your content in a non-developer mode, or maybe you are building an application for a non-developer and you don't want to hardcode and re-deployed every single time you make changes.

What You will learn

Sanity.io (CMS)
Groq query
Connect your Nextjs frontend to Sanity.io

Prerequisite

Clone the repo and have it running on your local machine
Solid understanding of Nextjs -TailwindCss

What is Sanity?

Sanity.io is a managed content management system (CMS) for creating websites. It features a modern interface, easy installation, and a built-in developer mode with live reloading.

Sanity is a versatile content management platform. It markets itself as flexible and can be used for much more than conventional web experiences. You can use Sanity with the NextJS framework to power simple marketing websites through an entire suite of web applications.

Installation

We assume that your application is running on your local machine, mine looks something like this:

Next we need to connect our Sanity CMS to our application.
before doing that let's install some dependencies:
In your terminal run this command:
npm i -g @sanity/cli

Next run :
sanity init

then you will have to follow the steps bellow to login to your sanity account.

Go ahead and follow the instructions to create your project.

after the installation is completed, navigate into your directory and run sanity start the server will start on port:3333

Sanity.io

If you already working with firebase or any databases you might have an idea of what is going on here. We Have a list of documents.
Let's add a document to our application.

Inside our Sanity directory, we have a schemas folder where the shape of our application is implemented.

Go ahead and create a file name 'clients.js'

export default {
  name: "clients",
  title: "Clients",
  type: "document",
  fields: [
    {
      name: "name",
      title: "Name",
      type: "string",
    },
    {
      name: "bio",
      title: "Bio",
      type: "text",
    },
  ],
};

Explanation

We created a document gave it a name, title, and type, and then we specified the fields that the document will have.

Let's proceed, in Schema.js import the document we just created import clients from ./clients.js
To allow sanity to be aware of our Schema let's put it in the builder like this:

...
import clients from "./clients";

export default createSchema({
  name: "default",
  types: schemaTypes.concat([
    // The following are document types which will appear
    // in the studio.
    ...
    clients,
  ]),
});

Now save all files and the result should be reflected in our sanity studio.

How to reference another document

Let's say we want to reference a product to its vendor
this code snippet shows how to do that:

{
      name: "products",
      title: "Products",
      type: "array",
      of: [
        {
          type: "reference",
          to: { type: "vendor" },
        },
      ],
    },

Now my friend you know how to create a document in Sanity.
let's go ahead and create products, vendors, and categories by following the same structure we did earlier.

products document:

export default {
  name: "product",
  title: "Product",
  type: "document",
  fields: [
    {
      name: "title",
      title: "Title",
      type: "string",
    },
    {
      name: "slug",
      title: "Slug",
      type: "slug",
      options: {
        source: "title",
        maxLength: 96,
      },
    },
    {
      title: "Size",
      name: "size",
      type: "array",
      of: [
        {
          type: "string",
        },
      ],
      options: {
        layout: "tags",
      },
    },
    {
      name: "categories",
      title: "Categories",
      type: "array",
      of: [
        {
          type: "reference",
          to: { type: "category" },
        },
      ],
    },
    {
      name: "description",
      title: "Description",
      type: "text",
      options: {
        maxLength: 120,
      },
    },
{
      title: "Price",
      name: "price",
      type: "number",
    },
    {
      name: "vendor",
      title: "Vendor",
      type: "reference",
      to: {
        type: "vendor",
      },
    },
  ],
  preview: {
    select: {
      title: "title",
      manufactor: "manufactor.title",
      media: "defaultProductVariant.images[0]",
    },
  },
};

vendors document:


export default {
  name: "vendor",
  title: "Vendor",
  type: "document",
  fields: [
    {
      name: "title",
      title: "Title",
      type: "string",
    },
    {
      name: "slug",
      title: "Slug",
      type: "slug",
      options: {
        source: "title",
        maxLength: 96,
      },
    },
    {
      name: "logo",
      title: "logo",
      type: "image",
    },
    {
      name: "description",
      title: "Description",
      type: "text",
    },
  ],
  preview: {
    select: {
      title: "title",
      media: "logo",
    },
  },
};

categories document:

export default {
  name: "category",
  title: "Category",
  type: "document",
  fields: [
    {
      name: "title",
      title: "Title",
      type: "string",
    },
    {
      name: "slug",
      title: "Slug",
      type: "slug",
      options: {
        source: "title",
        maxLength: 96,
      },
    },
    {
      name: "description",
      title: "Description",
      type: "text",
    },
  ],
};

Go ahead and save all files, Go to your sanity studio and add content to each collection.

Deploying to sanity.io

to deploy your sanity project to sanity.io so it can be available remotely you need to deploy it by running the command sanity deploy click the link provide after the deployment is complete.

Now if you try to add an item to your store locally, the changes will be reflected on Sanity.io and vis-versa.

Groq query

GROQ is Sanity's open-source query language. It's a powerful and intuitive language that's easy to learn. With GROQ you can describe exactly what information your application needs, join information from several sets of documents, and stitch together a very specific response with only the exact fields you need.

Run some groq query

//Querying everthing with _type products
*[_type == "products"]{
  ...,
}

Use this cheat sheet to learn more about Groq query.

Pull data from Sanity backend to our frondend

Let's start by installing some dependencies:
run this commande in the terminal:
npm i next-sanity @portabletext/react @sanity/image-url

next add a Sanity.ts to the root of your app, inside we will create the config for the frontend to use.

inside Sanity.ts write the code below:

import { createClient } from "next-sanity";
import createImageUrlBuilder from "@sanity/image-url";

export const config = {
  dataset: process.env.NEXT_PUBLIC_SANITY_DATASET || "production",
  projectId: process.env.NEXT_PUBLIC_SANITY_PROJECT_ID!,
  apiVersion: "2022-03-25",
  useCdn: true,
};
export const sanityClient = createClient(config);

export const urlFor = (source: any) =>
  createImageUrlBuilder(config).image(source);

next, create an .env.local file to store our credentials
⚠️do not forget to add this file in .gitignore so you won't accidentally push the file to GitHub.

NEXT_PUBLIC_SANITY_DATASET=production
NEXT_PUBLIC_SANITY_PROJECT_ID=[your project_id]

to get this information log in to https://sanity.io with your account, and select your project in the top corner you will see the information you need for instance "the project id"

Next add util folder to the root of your app inside create a file called fetchProductData.ts and past this code in:

import { groq } from "next-sanity";
import { sanityClient } from "sanity";
export const fetchProducts = async () => {
  const query = groq`
*[_type=="product"]{
    ...,
    vendors->{...,title,logo,description},
    categories[]->{slug,title},
  }
`;
  const res = await sanityClient.fetch(query);
  return res;
};

Let's console.log the function in one of your components and see if we are getting the data from our backend but before doing that we are going to do something called static page rendering into our Nextjs application when we update our page it will revalidate the page so the page will have fresh data every 10 seconds, it will rebuild the static page and prepare it on the server.

The way to get this working we go to our page in index.ts
write this code at the bottom of your code:

import type { GetStaticProps } from "next";
import { Product } from "typings";
interface SanityBody {
  _createAt: string;
  _id: string;
  _rev: string;
  _updateAt: string;
}

interface Product extends SanityBody {
  _type: "product";
  title: string;
  categories: "Category[]";
  color: "string[]";
  defaultProductVariant: DefaultProductVariant;
  description: string;
  size: string[];
  slug: SlugT;
  tags: string[];
  title: string;
  vendor: Vendor;
}
...
const Home = ({ products }: Props) => {
//Console log to see if we got the data
console.log("data",products)
return(
...
)
}
export default Home;
export const getStaticProps: GetStaticProps<Props> = async () => {
  const products: Product[] = await fetchProducts();
  return {
    props: {
      products,
    },
    revalidate: 20,
  };
};

if we successfully get the data, now the last step left is to replace all our dummy data with fresh new data coming from Sanity.io I let you do that. Let me know in the comment section if you were able to pass the values got from the response.

All you need to do now is to deploy your application to Vercel. if you already deployed it all you need to do is push the changes to GitHub and Vercel will re-deploy your application automatically.

See the demo of my e-commerce application here.
Learn how to deploy your application to vercel here

Conclusion

Well my friend you've reached the end of the article,
I will advise you to go and put all that you've learned so far into practice and if you find something missing go and search more about it until your individual best pattern is formed.

👋 see you for the next one.

Monkeytype clone using Nextjs and TailwindCSS

Derick Zihalirwa — Sun, 09 Oct 2022 18:50:36 +0000

Overview

I noticed many people enjoy testing their typing speed, so I decided to create a fun side project inspired by monkeytype.com. After a few days of work, I’m excited to introduce 'kindaTyping' (thanks to my younger brother for the name). This app builds on monkeytype.com with some cool new features.

Technologies Used

ReactJS for the framework
TailwindCSS for styling

What's New?

In kindaTyping, you must type each word correctly before moving on. This feature helps you practice tricky words more effectively.

What's Next?

The project is still in beta. If you'd like to contribute, just DM me on Twitter. twitter

monkeytype

kindatyping

Demo

feel free to test the live demo here demo

Leave your feedback in the comments or reach out to me on twitter

happy coding 👋

Introduction to JSON Server (part II)

Derick Zihalirwa — Sat, 03 Sep 2022 19:16:02 +0000

As a frontend developer, when prototyping you need to know how to fetch data from your JSON Server, in this last part we are going to learn just that.Check out the first part

Prerequisite

To follow this article along, prior knowledge of React Hook,React Suspense API and JSON Server is essential.
Here is the GitHub repo (instructions are in the readme file)

Introduction

In this part, we are going to put into practice some request types (POST, GET, PUT, PATCH, and DELETE).
Before we start, in part 1 we were able to fetch data inside our database.json by playing with the URL, It will be the same but instead of making changes to the URL, we will write some codes.

Side note: we are using react Suspense API for data fetching. You can read more about it here as it is not under the scope of this article.

GET request

The application is running on localhost:3000
and the server on port localhost:7000;

GET ALL ITEMS
In your project repo navigate to fetchFici.js under web-client/src/page/

We are going to create a fetch function to get our data from JSON server.
in the first line above wrapPromise type enter this code:



const readAllFici = () => {
    return fetch("http://localhost:7000/data")
        .then(res => res.json())
        .catch(err => console.log(err))
}

In createRousource file add readAllFici() in wrapPromise like this:



export const createResource = () => {
    return {
        data: wrapPromise(ReadAllFici())
    }
}

In the first snippet we created a function and named it
readAllFici, we passed the json server url in the first parameter, we then got back a response from the server.

Next snippet we are passing fetch function to createResource which is part of the structure of using react Suspense.

Next, still in the same folder navigate to index.jsx
we will import createResource and it in our Screen component like this:



import { createResource } from './fetchFici';

const resource = createResource();
return (
   <Suspense fallback={<Spinner />}>
      <Screen resource={ressource} />
   </Suspense>
);

In screen.jsx add this snippet:



const Screen = ({ resource }) => {
    const ficiData = resource.data.read()

    const displayFici = ficiData.map((item, index) => {
        return (
             ...
       )
...

The above snippet we are getting the data sent by the server.
to see the result in your browser, refresh the page.

We received all the items from the server and passed them inside the component.

GET A SINGLE ITEM
To get a single element we are going to change the fetch url to "/{the id of our item}"
Let's implement that.

First, create a new function to fetch item based on the id:



const readOneItem = (id) => {
    return fetch(`http://localhost:7000/data/${id}`)
        .then(res => res.json())
        .catch(err => console.log(err))
}

Next, bellow createResource we create a new arrow function, the same as createResource but with a parameter, and that parameter will be received by readOneItem.



export const createResourceOnePost = (id) => {
    return {
        data: wrapPromise(readOneItem(id))
    }
}

Next in singlePost.jsx we have two components one that receives the data and passes it through the component and one that displays it. Before that, we need to get the id of a single element. For our case, we used react-router-dom (you can check in App.jsx how we set up the routing).
In the second component we are going to get the id param from the URL, for that let's import useParams() and get the id:



import { useParams } from 'react-router-dom'

const { id } = useParams()

Let's import createResourceOnePost and call the first component inside Suspense which takes ressource as parameter.



import { createResourceOnePost } from './fetchFici'
const resource = createResourceOnePost(id)
 return (
        <div className='border rounded-md bg-zinc-800 border-white p-4'>
            <p className='text-center text-3xl font-mono'>Fici Game</p>
            <Suspense fallback={<Spinner />}>
                <LoadData resource={resource} />
            </Suspense>
        </div>
    )

Inside the child component let use the data passed in the parent component.



const LoadData = ({ resource }) => {
    const ficiData = resource.data.read()

    return (
        <div className='border bg-gray-900 flex flex-col space-y-4 justify-center items-center border-white h-80 m-4'>
            <p className="p-4 font-mono text-lg">{ficiData.name}</p>
            <span className='text-9xl shadow-2xl rounded-full'>{ficiData.symbol}</span>
        </div>
    )
    }

The last thing we need to do is to navigate to the specific item.
In screen.jsx create a onClick inside displayFici



import { useNavigate } from 'react-router-dom';

const navigate = useNavigate()
const displayFici = ficiData.map((item, index) => {
        return (

            <tr className='border-b border-gray-500 cursor-pointer' onClick={() => {
                navigate(`/${item.id}`)
            }} key={index}>
                <td className='p-2'>{item.id}</td>
                <td className='p-2 text-center'>{item.name}</td>
                <td className='p-2'>
                    <span className='text-xl'>{item.symbol}</span>
                </td>
            </tr>

        )
    })

Output

POST METHOD

Let's add a third element to our list of items.
to do that we need to create a function, the same way we did for get request but instead of getting it, we will post (send) data to our JSON server.
so let's create that in fetchFici.js



export const postItem = () => {
    const doc = {
        name: 'Tornado',
        symbol: '🌪️'
    }
    return fetch('http://localhost:7000/data', {
        method: "POST",
        body: JSON.stringify(doc),
        headers: { 'content-Type': 'application/json' }
    })
}

We created a doc object where we passed manually the item we want to add to our list, then to add that item inside our database.json we need to fetch, the first parameter is the URL this time it will receive a second parameter which is an object inside we pass the method which is POST for our case, the body, and the headers.

we do the same as we did for get request.
We import the function in screen.jsx component and it will be executed once a button is clicked.



import { postItem } from './fetchFici';

<div>
     <p className='text-center p-2'>➕</p>
     <div className='text-center'>
        <button className='bg-sky-700 rounded-lg w-20 p-2' onClick={() => { postItem() }}>🌪️</button>
        <p className='font-mono'>Tornado</p>

     </div>
</div>

Now if you click to the button and refresh the page, you will see an item have been added(read more about useEffecf here

if you check in our database.json instead of having 4 we now have 5 items. So far so good, now you know how to get and post data from the JSON server, next let's see how to Update and delete data.

UPDATE AND DELETE DATA

Update is almost the same thing as other types of requests, we are just changing the method to PUT or PATCH instead of POST.
side note: The difference between PUT and PATCH is that when you use PUT you have to specify all the properties inside your object body, if you need to update only one property you can make use of PATCH request.

So go ahead and create a new function and call it updatItem in fetchFici.js



export const updateItem = (id, body) => {
    return fetch(`http://localhost:7000/data/${id}`, {
        method: "PATCH",
        body: JSON.stringify(body),
        headers: { 'content-Type': 'application/json' }

    })
}

In the code above we passed two parameters: the id for the item we want to update and the new name.

Now in singlePost.jsx let's add some lines of code.



import { updateItem } from './fetchFici'
import React, { useState } from 'react'


const LoadData = ({ resource }) => {
    const { id } = useParams();
   const [text, setText] = useState('');
    return (
   ...
            <span></span>
            <form onSubmit={updateHandler} className="flex flex-col">
                <input className='text-gray-700 text-center rounded-lg p-1' type="text" placeholder={ficiData?.name} value={text} onChange={(e) =>
                    setText(e.target.value)
                } />
                <button type='submit' className='p-4 bg-zinc-800 rounded-b-lg'>UPDATE</button>
            </form>
    )
}

Output

Now if you change the name and click update, then refresh the page you should see the changes; in my case i updated Air to Vortex

DELETE ITEM

Now let's see how to delete an item.
You already know how to create a query function,
go ahead and create a function similar to updateItem
then remove all the object body as it is not needed, then change the request method to DELETE, don't forget to pass the id parameter, you need to know which item you want to delete from the list of items



import { deleteItem } from './fetchFici';

export const deleteItem = (id) => {
    return fetch(`http://localhost:7000/data/${id}`, {
        method: "DELETE"
    })
}

Next let's add some code in screen.jsx



  <td>
      <button className='p-1' onClick={() => {
                        deleteItem(item.id)
                    }}><TbTrash className='text-red-600'/>
     </button>
</td>

We imported deleteItem, inside displayFici we added a new td tag with a button, passed the deleteItem in onClick.

Output

Click to one item then refresh the page you will see the item has been deleted.

Conclusion

We have reached the end of our tutorial, We saw some types of requests that are useful for testing endpoints when prototyping.
For those types seen in the first part, I highly recommend you to go and try to implement them, and let me know in the comment if you encounter any challenges implementing them, I will be glad to help.
If you find this article helpful, don't forget to share it with your friends.

full source code GitHub repo
Learn more about React Suspense API here

Until next time, take care.

Introduction to JSON Server (Beginner) part I

Derick Zihalirwa — Thu, 25 Aug 2022 07:17:00 +0000

This First Part is beginner friendly (zero coding)

For a frontend developer, going through the configuration process of a full rest API, managing databases, and Express is time-consuming and hard to do. Json API works as a fake Rest API where developers can create a server that will serve json files on the go, in other words, Json server reduces the time complexity for the developers to set a whole bunch of backend servers.

In this article, we are going to look at different features that JSON server has to offer. As a frontend developer by the end of this article , you will be able to use this package in your projects to save a lot of time when prototyping.

Prerequisites

Basic understanding of JSON format
Basic knowledge of how APIs are consumed in frontend apps.
This first part is beginner friendly (zero code)
NodeJs install on your computer

What is Json Server?
Json server is an apm package that lets you create fake Rest API with minimum effort.

When to use it?
Json API is best for prototyping front end components, and Testing endpoints.

Installing JSON Server

Let's see how to install and run JSON server in your computer.

Step 1: Create a package.json in your project folder
In your terminal run the command npm init -y and click enter.
you should have a package.json file created in your project repository.

Step 2: Install the json-server package

again in your terminal run the command npm i json-server
(You should see it listed as a dependency in package.json file).

Step 3: Add a new script to start the server.

Still in your package.json under scripts insert this line:

"serve-json":"json-server --watch database.json"

Configuration

By default, json-serve runs on port 3000 but you can have a different app running on the same port, in such cases we can specify the port option when starting json-server by
adding --port 7000 to the below script in package.json

"serve-json":"json-server --port 7000 --watch database.json"

Now our json-server will be served at localhost:7000

if you try to run the app you may run into errors because we are watching a file that doesn't exist yet, so let's add a database.json file to the project repository.
you can find database.json setup in this GitHub repo

Let's now run the script, and see if it works.
if no errors, navigate tolocalhost:7000, you should see this:

SENDING REQUESTS

Let's send some requests to our server.

GET REQUEST
Inside your database.json you have 2 arrays companies and orders.

the JSON server exposes the endpoints for us to make request from the client.

To get the data for the first array companies , in the url navigate to localhost:7000/companies
This will serve an array:

if you want a specific item, with json we just append the id to the url. So if you want the first item, navigate to localhost:7000/companies/1.

Output
and similary with orders.

FILTERING
Let's say you are building your application and you want the user to have an option to filter the list of specific products. For our example let's ask JSON server to give us only companies with "technology" sector. To the URL we are going to append a query parameter, at the end of localhost:7000/companies we pass the property we want to filter by ("sector" in our case ), to this we assign a filter value which is technology.
localhost:7000/companies?sector=technology

output We get back all companies whose sector is technology

SORTING
Another common requirement is the possibility of users to sort elements in a specific way.
For our scenario let's filter our list of companies to be sorted by quantity. In the URL let's add ?_sort=quantity localhost:7000/companies?_sort=quantity

By default the sort order is ascending, to make it descending we need to append &_order=descto our Url like this localhost:7000/companies?_sort=quantity&_order=desc

output:

FULL TEXT SEARCH
To perform a full text search in our database.json we specify "q=" followed by our search string like this localhost:7000/companies?q=an

Output
It returns a list of items that contain "an".

Conclusion

This is pretty it for this first part of our series,
with zero coding we successfully set up a REST API.

If you are a frontend developer I hope you found a tool that you can start using for most of your side projects or even when you are prototyping something at your work.

In the next part (Intermediate level) we will learn more about JSON server, and how to send Post, Delete, and Update requests, with examples using React JS.

If you have any questions don't hesitate to ask in the comment section.
Or you can send me a message on Twitter.

Until next time, take care. 👋

Real-time Updates with ShadCN UI Charts in Nextjs 15

Derick Zihalirwa — Wed, 17 Aug 2022 18:51:00 +0000

Introduction

In today's trading websites, animated charts displaying real-time data are common. In this tutorial, you'll learn how to implement the same functionality in your React project using ShadCN UI's chart components instead of ApexCharts.

check out: Live Demo

Implementing the Real-time Chart

We'll generate real-time data directly within the React component. Below is the complete implementation using ShadCN UI's chart components:

"use client";

import { useEffect, useState, useRef } from "react";
import { Area, AreaChart, CartesianGrid, Line, LineChart, XAxis, YAxis } from "recharts";
import { ChartContainer, ChartTooltip, ChartTooltipContent } from "@/components/ui/chart";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Switch } from "@/components/ui/switch";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";

// Mock initial data
const initialData = Array.from({ length: 20 }, (_, i) => ({
  time: new Date(Date.now() - (19 - i) * 1000).toISOString(),
  price: 100 + Math.random() * 10,
  isNew: false,
}));

export default function RealTimeChart() {
  const [data, setData] = useState(initialData);
  const [darkMode, setDarkMode] = useState(true);
  const [isRunning, setIsRunning] = useState(true);
  const prevDataRef = useRef([...initialData]);

  useEffect(() => {
    if (!isRunning) return;

    const interval = setInterval(() => {
      setData((currentData) => {
        prevDataRef.current = [...currentData];
        const lastPrice = currentData[currentData.length - 1].price;
        const newPrice = lastPrice + (Math.random() - 0.5) * 2;
        const newDataPoint = {
          time: new Date().toISOString(),
          price: newPrice,
          isNew: true,
        };
        const updatedData = currentData.map((point) => ({ ...point, isNew: false }));
        return [...updatedData.slice(1), newDataPoint];
      });
    }, 1000);

    return () => clearInterval(interval);
  }, [isRunning]);

  const formatTime = (time) => new Date(time).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit", second: "2-digit" });

  return (
    <div className={darkMode ? "dark" : ""}>
      <div className="bg-background min-h-screen p-4">
        <Card className="w-full max-w-4xl mx-auto">
          <CardHeader className="flex flex-row items-center justify-between">
            <div>
              <CardTitle>BTC/USD Real-Time Chart</CardTitle>
              <CardDescription>Live price updates every second</CardDescription>
            </div>
            <div className="flex items-center space-x-4">
              <span className="text-sm text-muted-foreground">Dark Mode</span>
              <Switch checked={darkMode} onCheckedChange={() => setDarkMode(!darkMode)} />
              <span className="text-sm text-muted-foreground">Live Updates</span>
              <Switch checked={isRunning} onCheckedChange={() => setIsRunning(!isRunning)} />
            </div>
          </CardHeader>
          <CardContent>
            <Tabs defaultValue="line">
              <TabsList>
                <TabsTrigger value="line">Line</TabsTrigger>
                <TabsTrigger value="area">Area</TabsTrigger>
              </TabsList>
              <TabsContent value="line">
                <ChartContainer config={{ price: { label: "Price", color: "hsl(var(--chart-1))" } }}>
                  <LineChart data={data} margin={{ top: 10, right: 10, left: 10, bottom: 0 }}>
                    <CartesianGrid strokeDasharray="3 3" vertical={false} stroke="var(--border)" />
                    <XAxis dataKey="time" tickFormatter={formatTime} tick={{ fontSize: 12 }} />
                    <YAxis tickFormatter={(value) => `$${value.toFixed(2)}`} />
                    <ChartTooltip content={<ChartTooltipContent formatter={(value) => `$${Number(value).toFixed(2)}`} />} />
                    <Line type="monotone" dataKey="price" stroke="var(--color-price)" strokeWidth={2} />
                  </LineChart>
                </ChartContainer>
              </TabsContent>
              <TabsContent value="area">
                <ChartContainer config={{ price: { label: "Price", color: "hsl(var(--chart-1))" } }}>
                  <AreaChart data={data} margin={{ top: 10, right: 10, left: 10, bottom: 0 }}>
                    <CartesianGrid strokeDasharray="3 3" vertical={false} stroke="var(--border)" />
                    <XAxis dataKey="time" tickFormatter={formatTime} tick={{ fontSize: 12 }} />
                    <YAxis tickFormatter={(value) => `$${value.toFixed(2)}`} />
                    <ChartTooltip content={<ChartTooltipContent formatter={(value) => `$${Number(value).toFixed(2)}`} />} />
                    <Area type="monotone" dataKey="price" stroke="var(--color-price)" fillOpacity={0.2} />
                  </AreaChart>
                </ChartContainer>
              </TabsContent>
            </Tabs>
          </CardContent>
        </Card>
      </div>
    </div>
  );
}

Conclusion

With ShadCN UI's chart components, you can easily create a responsive and visually appealing real-time chart

For a live demo, check out: Live Demo.

If you want to customize your chart, check the documentation.
Do you have any questions? Leave a comment below or chat with me on X

Learn how to use React Suspense for data fetching (part 2)

Derick Zihalirwa — Sat, 13 Aug 2022 12:49:00 +0000

Here's a refined version of your article to make it more understandable and engaging:

React Suspense for Data Fetching: Part 2

Hello 👋,

In the first part of this series, we explored the React Suspense API, its functionality, and how it works with lazy-loaded components. If you missed that, click here to read Part 1.

In this second part, we’ll dive into how React Suspense can be used when fetching data. When an app is waiting for data to load, the user needs to see something on the screen to indicate the process. React Suspense handles this well by providing a fallback option, which displays a placeholder while the data is being fetched in the background.

Prerequisites

Part 1: It's recommended to read Part 1 for a foundational understanding of Suspense.
JSON Server: You should have a basic understanding of how a JSON server works. If not, I’ve written an article with examples that you can check out here.
Code: The code for this article is available on GitHub. You can find it here.

Step-by-Step Guide

1. Clone the Repository

Start by cloning the repo to your local machine, and open it in your favorite text editor (I’ll be using VS Code).

The repository contains two main folders: web-client and server. In VS Code, open the terminal (Ctrl + J for Windows or Cmd + J for Mac) and navigate to the following structure:

2. Install Dependencies

You’ll need two terminal windows for this. In the first terminal, navigate to the web-client folder and run:



npm install

Do the same in the server folder using the second terminal.

3. Start the Servers

Once all dependencies are installed, start the servers:

In the server folder, run: ```bash

npm run serve-json

  This will start a JSON server on `http://localhost:7000`.

- In the `web-client` folder, run: 
  ```bash


  npm run dev

Your app will now be live on http://localhost:3000.

Fetching Data from a Fake REST API

Now, let’s fetch data from our fake REST API running on http://localhost:7000/data.

Create a New File: Inside web-client/src/page/FiciGame/, create a file named fetchFici.js.
Add the Code: Paste the following code:



const fetchFici = (search) => {
    return fetch(`http://localhost:7000/data?q=${search}`)
        .then(res => res.json())
        .catch(err => console.log(err));
};

const wrapPromise = (promise) => {
    let status = 'pending';
    let result;
    let suspender = promise.then(
        res => {
            status = 'success';
            result = res;
        },
        err => {
            status = 'error';
            result = err;
        }
    );
    return {
        read() {
            if (status === 'pending') throw suspender;
            if (status === 'error') throw result;
            return result;
        }
    };
};

export const createResource = (search) => {
    return {
        data: wrapPromise(fetchFici(search))
    };
};

How This Works

fetchFici(search): This function fetches data based on the provided search parameter.
wrapPromise(promise): It wraps the promise and tracks its status (pending, success, or error). React Suspense requires us to throw the promise while it's pending, and this function helps us manage that.
createResource(search): This exports the result, making it ready for Suspense to consume.

Implementing the Suspense Component

Now that we have the data-fetching logic, let’s implement it in our component.

Update FiciGame Component:



import React, { Suspense, useState } from 'react';
import Spinner from '../../layout/Spinner';
import { createResource } from './fetchFici';
import Screen from './Screen';

const FiciGame = () => {
    const [fici, setFici] = useState('Fire');
    const resource = createResource(fici);

    return (
        <div className='border rounded-md bg-zinc-800 border-white p-4'>
            <p className='text-center text-3xl font-mono'>Fici Game</p>
            <Suspense fallback={<Spinner />}>
                <Screen resource={resource} />
            </Suspense>
            <ul className='flex justify-center gap-2 items-center'>
                <li onClick={() => setFici('Fire')} className='p-4 border text-2xl shadow-lg bg-gray-900 border-white'>Fire</li>
                <li onClick={() => setFici('Rock')} className='p-4 border text-2xl shadow-lg bg-gray-900 border-white'>Rock</li>
                <li onClick={() => setFici('Water')} className='p-4 border text-2xl shadow-lg bg-gray-900 border-white'>Water</li>
                <li onClick={() => setFici('Air')} className='p-4 border text-2xl shadow-lg bg-gray-900 border-white'>Air</li>
            </ul>
        </div>
    );
};

export default FiciGame;

Create the Screen Component:

Inside the same folder, create Screen.jsx:



import React from 'react';

const Screen = ({ resource }) => {

    const ficiData = resource.data.read();

    const { name: ficiName, symbol: ficiSymbol } = ficiData[0];

<span class="k">return </span><span class="p">(</span>
    <span class="o">&lt;</span><span class="nx">div</span> <span class="nx">className</span><span class="o">=</span><span class="dl">'</span><span class="s1">border bg-gray-900 flex flex-col justify-center items-center h-80 m-4</span><span class="dl">'</span><span class="o">&gt;</span>
        <span class="o">&lt;</span><span class="nx">p</span> <span class="nx">className</span><span class="o">=</span><span class="dl">"</span><span class="s2">p-4 font-mono text-lg</span><span class="dl">"</span><span class="o">&gt;</span><span class="p">{</span><span class="nx">ficiName</span><span class="p">}</span><span class="o">&lt;</span><span class="sr">/p</span><span class="err">&gt;



            <span className='text-9xl'>{ficiSymbol}</span>

        </div>

    );

};

export default Screen;

Explanation:

resource.data.read(): This function either throws a promise (while data is loading) or returns the fetched data.
Once the data is available, the component displays the element's name and symbol.

Testing

To see this in action, open your browser’s DevTools, go to the Network tab, and select “Fast 3G” under throttling options. Then refresh the page to see how the fallback spinner appears while data is being fetched.

Conclusion

Congratulations! 🎉 You’ve now mastered the basics of using React Suspense for data fetching and lazy loading components. While it may seem complex initially, with more practice, it becomes second nature.

Feel free to experiment and leave your thoughts in the comments or connect with me on Twitter.

DEV Community: Derick Zihalirwa

How to Host Multiple Next.js Applications on a Single AWS ECR Instance Using Kamal 2.4

Introduction

Why Consolidate Staging Environments?

Before You Start: A Quick Checklist

Deploying Multiple Next.js Apps to One Server (with Docker + Kamal)

1. Dockerize Each App

2. Configure Kamal for Each App

Example Configs:

How It All Comes Together

Final Thoughts

How to deploy a Nextjs app with Kamal 2.4, AWS ECR, and Github Actions

Why Use Kamal for Deployment?

What You’ll Need Before You Start

Step 1: Initialize Kamal in Your Project

Project Structure Overview

Example deploy.yml for Kamal

Building a Dockerfile for Next.js

Automating Deployments with GitHub Actions

Wrapping Up

Learn How to Easily Style Your App for Multiple Users with Tailwind CSS

UI screenshots:

Steps to follow:

Tailwind Configuration:

Global CSS:

Detecting the Tenant:

Using Tailwind Classes:

Why This Works:

Conclusion:

Learn How to Upload Files to Google Cloud Storage Bucket with Nextjs

INTRODUCTION

1 GCS Credentials

2 UPLOADING FILES

CONCLUSION

Learn How to Implement Custom File Validation in React Dropzone

Introduction

Prerequisites

Implementing Custom Validation Logic:

Using the Custom Validation Function in React Dropzone:

Conclusion

Learn How to Internationalize your NextJS App with Next-Translate

What is Next.js Internationalization?

Why next-i18next?

Folder Structure

Get Started

Adding Translation Support

Configure next-i18next

Wrap Your Next.js App with appWithTranslation

ServerSideTranslations

Conclusion

Learn How to Connect your Nextjs App to Sanity.io (Typescript)

What You will learn

Prerequisite

What is Sanity?

Installation

Sanity.io

Explanation

How to reference another document

Deploying to sanity.io

Groq query

Run some groq query

Pull data from Sanity backend to our frondend

Conclusion

Monkeytype clone using Nextjs and TailwindCSS

Overview

Technologies Used

What's New?

What's Next?

Demo

Introduction to JSON Server (part II)

Introduction

GET request

POST METHOD

UPDATE AND DELETE DATA

Conclusion

Introduction to JSON Server (Beginner) part I

This First Part is beginner friendly (zero coding)

Installing JSON Server

SENDING REQUESTS

Conclusion

Example `deploy.yml` for Kamal