Forem: Willochs Ojigbo

Chart.js in Next.js 15: Create Dynamic Data Visualizations

Willochs Ojigbo — Wed, 26 Mar 2025 14:25:52 +0000

This tutorial focuses on integrating Chart.js with Next.js, a powerful React framework. Readers will learn how to create dynamic, interactive charts that can be easily integrated into their Next.js applications. The tutorial will cover installation, configuration, and practical examples to illustrate how to leverage Chart.js for data visualization. By the end of the tutorial, readers will be equipped with the skills to implement various types of charts, customize them, and understand best practices for performance optimization.

In this tutorial, we will cover the following main topics:

Introduction to Chart.js and Next.js
Creating Your First Chart
Customizing and Optimizing Charts in Next.js

In this tutorial, we will create a chart that visualizes diagnosis history, as illustrated in the following figure:

Fig 1: Chart Showing Diagnosis History

Introduction to Chart.js in Next.js

Data visualization is an important part of modern web applications. Whether you're displaying sales data, user analytics, or financial reports, showing numbers in a well-structured chart helps users understand data quickly.

In this section, we will introduce Chart.js, a JavaScript library that makes it easy to create interactive and beautiful charts. You will learn why Chart.js is a great choice for data visualization and how to integrate it into a Next.js application.

By the end of this section, you’ll have a solid understanding of:

What Chart.js is and why it is useful.
How to install and set up Chart.js in a Next.js project.
How Next.js’s rendering methods impact Chart.js and how to use it properly in a React-based framework.

What is Chart.js?

Chart.js is a popular JavaScript library used for creating beautiful and interactive charts. It supports various chart types, such as line, bar, pie, and more. Developers appreciate Chart.js for its simplicity and flexibility, making it easy to visualize data in web applications. The library is lightweight and can be easily integrated into different frameworks, including React.

Why Use Chart.js in Next.js Applications?

Next.js is a powerful React framework that enables server-side rendering, static site generation, and easy routing. Integrating Chart.js into a Next.js application allows you to leverage these features while creating dynamic, data-driven visualizations. By using Chart.js in Next.js, you can:

Improve Performance: Server-side rendering can speed up initial load times, making charts appear faster for users.
Enhance User Experience: Interactive charts provide a better way to present information, allowing users to gain insights quickly.
Simplify Data Fetching: Next.js makes it easy to fetch data from APIs, which can then be visualized using Chart.js.

Installing Chart.js and Dependencies

To get started with Chart.js in a Next.js project, you first need to set up your Next.js environment. Here’s how to do it:

Step 1: Open your terminal and run the following command:

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

Replace my-chart-app with your preferred project name. This command will create a new directory with all the necessary files to start a Next.js application.

or you clone the repo:

git clone https://github.com/Willochs316/chart-app.git

Step 2: Navigate to Your Project Directory:

cd my-chart-app

Step 3: Install Chart.js and React-Chartjs-2:
React-Chartjs-2 is a wrapper for Chart.js that makes it easier to use within React applications. Install both libraries using:

npm install chart.js react-chartjs-2

Once installed, you can check your package.json file to confirm that both dependencies have been added:

  "dependencies": {
    "chart.js": "^4.4.8",
    "next": "15.2.3",
    "react": "^19.0.0",
    "react-chartjs-2": "^5.3.0",
    "react-dom": "^19.0.0"
  },

Understanding Next.js’s Rendering Methods and How They Affect Chart.js

Next.js provides different ways to render components:

Server-Side Rendering (SSR) – Renders pages on the server before sending them to the browser.
Static Site Generation (SSG) – Pre-builds pages at build time.
Client-Side Rendering (CSR) – Renders components on the client side after the page loads.

Since Chart.js runs in the browser (it requires window and document objects), we cannot use it directly in server-rendered pages. If we try to import Chart.js in a page that is server-rendered, it may cause errors like:

ReferenceError: window is not defined

Solution

"use client"

Summary of What You Have Learned

In this section, you learned:

What Chart.js is and why it’s a great tool for data visualization.
Why Next.js is a good choice for integrating Chart.js.
How to install Chart.js and react-chartjs-2 in a Next.js project.
How Next.js’s rendering methods affect Chart.js and how to prevent errors using dynamic imports.

What’s Next?

Now that we have installed Chart.js and understand its role in a Next.js application, it’s time to create our first charts!

Creating Your First Chart with Chart.js and JSON Server

Now that we have Chart.js set up in our Next.js project, it’s time to create our first chart! But instead of using static data, we’ll take a real-world approach and fetch our data from an API.

To do this, we’ll use JSON Server, a simple tool that allows us to create a REST API using a local db.json file. This will help us understand how to fetch and display real-time data inside a Chart.js chart in a Next.js application.

By the end of this section, you’ll learn:

How to structure and configure data for Chart.js.
How to use the react-chartjs-2 wrapper to integrate Chart.js with React components in Next.js.
How to fetch data from a REST API (JSON Server) and use it in a chart.

Setting Up JSON Server

First, we need to set up JSON Server to serve our mock data. Follow these steps:

Step 1: Install JSON Server

Open your terminal and install JSON Server globally:

npm install -g json-server

You can check if the installation was successful by running:

json-server --version

Step 2: Create a Folder and a db.json File
Inside your Next.js project, create a folder named _data, then inside that folder, create a file called db.json.

my-chart-app/
│-- _data/
│   ├── db.json
│-- pages/
│-- components/
│-- package.json
│-- ...

Fig 2: _data Folder and db.json file

Now, open db.json and add the following sample medical diagnosis history data:

{
  "diagnosis": [
    {
      "month": "March",
      "year": 2024,
      "blood_pressure": {
        "systolic": {
          "value": 160,
          "levels": "Higher than Average"
        },
        "diastolic": {
          "value": 78,
          "levels": "Lower than Average"
        }
      },
      "heart_rate": {
        "value": 78,
        "levels": "Lower than Average"
      },
      "respiratory_rate": {
        "value": 20,
        "levels": "Normal"
      },
      "temperature": {
        "value": 98.6,
        "levels": "Normal"
      }
    }
  ]
}

app/types/diagnosis.ts

export type DiagnosisEntry = {
    month: string;
    year: number;
    blood_pressure: {
      systolic: {
        value: number;
        levels: string;
      };
      diastolic: {
        value: number;
        levels: string;
      };
    };
    heart_rate: {
      value: number;
      levels: string;
    };
    respiratory_rate: {
      value: number;
      levels: string;
    };
    temperature: {
      value: number;
      levels: string;
    };
  };

Step 3: Start JSON Server
Now click the plus icon on your code editor (vscode) to add a new terminal to your existing terminal, start the JSON Server by running:

json-server --watch _data/db.json --port 4000

This will create a local API Endpoints at:

http://localhost:4000/diagnosis

Fig 3: JSON Server Running
You can test it by opening your browser and visiting http://localhost:4000/diagnosis. You should see the JSON data displayed.

Fetching Data in Next.js

Now that we have our API running, let’s fetch the data in Next.js.

Step 1: Create a Function to Fetch Data
Inside your app folder in your Next.js project, create a file called api.ts inside a folder named utils/. This file will contain a function to fetch data from the JSON server.

app/utils/api.ts

export async function getDiagnosis() {
    try {
      const res = await fetch("http://localhost:4000/diagnosis");
      if (!res.ok) throw new Error("Failed to fetch data");

      const data = await res.json();

      // Get today's date
      const currentDate = new Date();
      const currentMonth = currentDate.getMonth() + 1; // Months are 0-based in JS
      const currentYear = currentDate.getFullYear();

      // Convert month names to numbers for easy filtering
      const monthMap: { [key: string]: number } = {
        January: 1, February: 2, March: 3, April: 4, May: 5, June: 6,
        July: 7, August: 8, September: 9, October: 10, November: 11, December: 12
      };

      // Get the last 6 months of data
      const last6Months = data.filter((entry: any) => {
        const entryMonth = monthMap[entry.month];
        const entryYear = entry.year;

        const monthDiff = (currentYear - entryYear) * 12 + (currentMonth - entryMonth);
        return monthDiff >= 0 && monthDiff < 6; // Only last 6 months
      });

      return last6Months;
    } catch (error) {
      console.error("Error fetching diagnosis history:", error);
      return [];
    }
  }

Creating a Chart Component in Next.js

Now, let’s create a Chart.js component to display the blood pressure levels from our API.

Step 1: Create a Chart Component
Inside your app folder in your Next.js project, create a folder named components/, and inside it, create a file called chart.tsx.

app/components/chart.tsx

"use client";
import React from "react";
import dynamic from "next/dynamic";
import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend,
} from "chart.js";
import Image from "next/image";
import ArrowDown from "@/public/icons/arrow-down.svg";
import ArrowUp from "@/public/icons/arrow-up.svg";
import { DiagnosisEntry } from "@/app/types/diagnosis";
import ExpandMore from "@/public/icons/expand-more.svg";

// Register the components
ChartJS.register(
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend
);

// Dynamically import Line from react-chartjs-2
const LineChart = dynamic(
  () => import("react-chartjs-2").then((mod) => mod.Line),
  { ssr: false }
);

type MyChartProps = {
  diagnosis: DiagnosisEntry[];
};

export function MyChart({ diagnosis }: MyChartProps) {
  // Sort data by date to ensure correct order
  diagnosis.sort((a: DiagnosisEntry, b: DiagnosisEntry) => {
    const monthOrder: { [key: string]: number } = {
      January: 1,
      February: 2,
      March: 3,
      April: 4,
      May: 5,
      June: 6,
      July: 7,
      August: 8,
      September: 9,
      October: 10,
      November: 11,
      December: 12,
    };

    return a.year - b.year || monthOrder[a.month] - monthOrder[b.month];
  });

  // Extract labels and data
  const labels = diagnosis.map(
    (entry: DiagnosisEntry) => `${entry.month.slice(0, 3)}, ${entry.year}`
  );
  const systolicData = diagnosis.map(
    (entry: DiagnosisEntry) => entry.blood_pressure.systolic.value
  );
  const diastolicData = diagnosis.map(
    (entry: DiagnosisEntry) => entry.blood_pressure.diastolic.value
  );

  return (
    <>
      <div className="flex items-start mt-[40px] bg-[#fff] p-[19px] rounded-[12px] w-1/2 h-auto mx-auto">
        <div className="w-[418px]">
          <div className="flex items-center justify-between w-full">
            <h2 className="text-[#072635] text-[18px] font-bold">
              Diagnosis History
            </h2>

            <button className="flex items-center justify-between w-[119px]">
              <span className="text-[14px] text-[#072635] font-light">
                Last 6 months
              </span>

              <Image src={ExpandMore} alt="" />
            </button>
          </div>

          <div className="mt-[20px] w-full">
            <LineChart
              data={{
                labels: labels,
                datasets: [
                  {
                    label: "Systolic",
                    data: systolicData,
                    backgroundColor: "#5FC3D6",
                    borderColor: "#5FC3D6",
                    borderWidth: 1,
                  },
                  {
                    label: "Diastolic",
                    data: diastolicData,
                    backgroundColor: "#EC5252",
                    borderColor: "#EC5252",
                    borderWidth: 1,
                  },
                ],
              }}
              options={{
                responsive: true,
                maintainAspectRatio: true,
                scales: {
                  x: {
                    beginAtZero: true,
                  },
                  y: {
                    beginAtZero: false,
                    min: 60,
                  },
                },
              }}
            />
          </div>
        </div>

        <div className="w-[208px] flex flex-col items-start justify-center ml-[39.05px]">
          <div className="flex flex-col items-start justify-center w-full">
            <div className="flex items-center w-full">
              <span className="w-[14px] h-[14px] rounded-full bg-[#5FC3D6] border border-[#FFFFFF]"></span>
              <span className="text-[#072635] ml-[4px] text-[14px] font-normal">
                Systolic
              </span>
            </div>

            <h2 className="text-[#072635] text-[22px] font-bold mt-[8px]">
              {diagnosis[5].blood_pressure.systolic.value}
            </h2>

            <div className="flex items-center w-full mt-[8px]">
              <Image
                className="w-[10px] h-[5px]"
                width={10}
                height={5}
                src={ArrowUp}
                alt=""
              />
              <span className="text-[#072635] text-[14px] ml-[8px] font-light">
                Higher than Average
              </span>
            </div>

            <hr className="w-full h-[1px] mt-[16px] bg-[#CBC8D4]" />

            <div className="flex items-center w-full mt-[19px]">
              <span className="w-[14px] h-[14px] rounded-full bg-[#EC5252] border border-[#FFFFFF]"></span>
              <span className="text-[#072635] ml-[4px] text-[14px] font-normal">
                Diastolic
              </span>
            </div>
            <h2 className="text-[#072635] text-[22px] font-bold mt-[8px]">
              {diagnosis[5].blood_pressure.diastolic.value}
            </h2>

            <div className="flex items-center w-full mt-[8px]">
              <Image
                className="w-[10px] h-[5px]"
                width={10}
                height={5}
                src={ArrowDown}
                alt=""
              />
              <span className="text-[#072635] text-[14px] ml-[8px] font-light">
                Lower than Average
              </span>
            </div>
          </div>
        </div>
      </div>
    </>
  );
}

page.tsx

import { getDiagnosis } from "@/app/utils/app";
import { MyChart } from "@/app/components/chart";

export default async function Home() {
  const diagnosis = await getDiagnosis();

  return (
    <div className="max-w-full w-full">
      <MyChart diagnosis={diagnosis} />
    </div>
  );
}

Follow me

Fixing Absolute Path Issues Made Easy: Vite, React, TS

Willochs Ojigbo — Tue, 11 Jul 2023 12:37:43 +0000

Introduction

When working on a Vite React TypeScript project, you might encounter difficulties when trying to set up and use absolute path imports. In this article, we will address the common challenges faced and provide possible solutions to help you overcome this struggle

Understanding the Issue

The problem typically arises when attempting to import modules using absolute paths instead of relative paths. Absolute paths provide a cleaner and more intuitive way to import files, making the project structure more manageable. However, setting up and configuring absolute path imports in a Vite React TypeScript project requires some additional steps.

Quick and Easy Setup: Building a Vite Project with React and TypeScript

Open your command line interface (CLI) and navigate to the directory where you want to create your Vite project.
Run the following command to create a new Vite project with the react-ts template:



npx create-vite my-vite-app --template react-ts

Once the project creation is complete, navigate into the project directory:



cd my-vite-app

Install project dependencies by running:



npm install

Start the development server:



npm run dev

After setting up the necessary configurations for absolute path imports in my Vite React TypeScript project, including the following in my tsconfig.json:



"compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "@components/*": ["components/*"],
      "@layouts/*": ["layouts/*"],
      "@pages/*": ["pages/*"]
    },

Followed by adding the following code to the SignUp component inside the components directory;



const SignUp = () => {
  return <div className="signup-container">This is a signup page!!</div>;
};

export default SignUp;

I attempted to import the SignUp component in the App.tsx file. However, I encountered an issue where the absolute path import was not working as expected.



import SignUp from "components/SignUp/SignUp";

Go to the App.tsx component and add the following;



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

const App = () => {
  return (
    <div className="App">
      <SignUp />
    </div>
  );
};

export default App;

I get this error;

whereas if I use relative path, the app works in dev & build mode without any error:



import SignUp from "./components/SignUp/SignUp";

How To Make Absolute Path Work in Vite React TypeScript project?

Here are some solutions to help you get absolute path imports working in your Vite React TypeScript project:

In the tsconfig.json file, we have defined the necessary compiler options and path aliases for absolute imports. After setting the "baseUrl" option to "./src" to specify the base directory for resolving module paths.

In order to support the path aliases defined in your tsconfig.json file, you need to make changes to your vite.config.ts file. You should update the alias configuration in your vite.config.ts to align with the aliases defined in tsconfig.json.

Update vite.config.ts file with this code;



import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      components: "/src/components",
      layouts: "/src/layouts",
      pages: "/src/pages",
    },
  },
});

You can import path like this (or any module under ./src):



import SignUp from "components/SignUp/SignUp";
import Header from "layouts/Header/Header";

To achieve the import statements with the @ symbol, you can modify the alias configuration in your vite.config.ts file as follows:



import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      "@components": "/src/components",
      "@layouts": "/src/layouts",
      "@pages": "/src/pages",
    },
  },
});

Once you've set up absolute imports, you can start using them in your project. Here's an example of how to import a component using absolute import:



import SignUp from "@components/SignUp/SignUp";

Follow me

Creating GIFs with Giphy API and ReactJS: A Beginner's Guide.

Willochs Ojigbo — Tue, 06 Jun 2023 13:37:14 +0000

Introduction

Do you find yourself continually browsing Giphy in search of the ideal GIF to convey your thoughts? Ever thought you could make your own original GIFs to express your distinct personality and sense of style? You don't need to look any farther because the Giphy API and ReactJS make it simple to realize your creative concept.

In this beginner's guide, I will walk you through the simple steps to creating your very own GIFs using Giphy API and ReactJS. Whether you're a seasoned developer or a coding newbie, I've got you covered. All you need is a little bit of creativity and a desire to learn.

This is an illustration of how our project will be structured:

First, we'll start with the basics;

What is Giphy API?

Giphy API is a database of GIFs that allows developers to access and display GIFs on their web applications. With Giphy API, you can easily integrate GIFs into your projects, making your web applications more engaging and fun.

Getting Started

Before we begin building our web application, you must first set up a basic ReactJS development environment. I'll be using create-react-app as the initial project template for this tutorial.

In order to use the Giphy API, you must first register a Giphy account. Don't worry, it's a simple and free procedure. Simply go to the Giphy website and click on the Create button in the upper right corner of the screen. After you've completed the basic steps to create your account, you'll be able to use the Giphy API and begin developing your web application.

Once you've created your account on Giphy, you'll be directed to the Giphy dashboard. To create an app, simply click on the Create an App button within the dashboard. You can choose a suitable name for your app, such as "React Project". During the app creation process, you'll be presented with the option to use either the Giphy SDK or the Giphy API. For the purpose of this tutorial, we'll be selecting the GIPHY API option.

After successfully creating your app, you will be given an API key. This API key is required to use the Giphy API. Keep your API key private and secure.

You can now access the Giphy API endpoint using your API key. The API_URL variable in the provided code sample represents the endpoint URL for fetching trending GIFs. In the URL, replace "abcd1234" with your actual API key.

By the end of this tutorial, you will not only have a functional web application that shows random GIFs, but you will also have the knowledge and skills to develop your own GIFs and integrate them into your projects. So, let's get started and bring out your inner GIF master!

How to Set Up a React Project

Type the following command in your terminal:



npx create-react-app giphy-api

This will create a new React project named giphy-api in the current directory.

In this project, we will utilize various tools and libraries to enhance our development process. We'll leverage Axios for making API calls, React Icons for adding stylish icons, React Infinite Scroll Component for seamless scrolling functionality, React Router DOM for handling routing, and SCSS as our CSS library for flexible styling options.

We would install the following dependencies using the Node Package Manager (NPM) in your command prompt or terminal. Here are the steps:

Open your command prompt or terminal,
Navigate to your project directory using the 'cd' command.
Type the following command and press enter:



cd giphy-api



npm install axios react-icons react-infinite-scroll-component react-router-dom

Start the development server by running the following command:



npm start

After running the command, the application will be launched and can be accessed at localhost:3000. This is the default local development server URL where the application is hosted.

Remove the default App.test.js, logo.svg, reportWebVitals.js, setUpTests.js and index.css you have already created.

Notice, you'll come across an error on your local server:

A simple way to handle this error is basically to navigate to the index.js file and remove the index.css and reportWebVitals(). You will notice another compilation error at App.js because the compiler is trying to import logo.svg which we no longer have.

Setting Up The App File and Folder Structure

For this tutorial, we'll follow the standard file and folder structure for ReactJS projects. Start by navigating to the src directory and create two separate new folder named components and also pages. Inside the components folder, create subfolders called NavBar, SearchBar, and Spinner.

In addition, you will need to create a .env file in the project's root directory where you will store your API key. Whatever name you give your variable, you must add REACT_APP in front of it, as in the following example:



REACT_APP_API_KEY = your-api-key-goes-here

In your code, you can access this environment variable using the process.env object. For example, if your API key is stored in an environment variable called REACT_APP_API_KEY, you can access it like this:



const API_KEY = process.env.REACT_APP_API_KEY;

Navigate to the src directory and create a subdirectory called commons. Inside the "commons" directory, create two files: Icons.js and Input.js.

Inside the Icons.js file add the following code;



const UserIcons = ({ icons: Icons, className, id, onClick = () => {} }) => {
  return (
    <>{Icons && <Icons className={className} id={id} onClick={onClick} />}</>
  );
};
export default UserIcons;

Navigate to Input.js and add;



const Input = ({
  type,
  className,
  name,
  placeholder,
  onChange = () => {},
  onBlur = () => {},
  onFocus = () => {},
  value,
}) => {
  return (
    <>
      <input
        type={type}
        className={className}
        name={name}
        placeholder={placeholder}
        required
        onChange={onChange}
        onBlur={onBlur}
        onFocus={onFocus}
        value={value}
      />
    </>
  );
};
export default Input;

Exploring The Giphy API: Making API Calls

To prepare for displaying GIFs data, let's navigate to the pages directory. Inside the pages directory, create a sub-directory called Giphy. Within the Giphy directory, create a component named GifGallery.js. Before rendering the GIFs, we'll start by making an API request.

Navigate to the root component App.js and add the following code;



import React, { useEffect, useState } from "react";
import axios from "axios";
import GifGallery from "./pages/Giphy/GifGallery";
import "./App.css";

// API key and URL
const API_KEY = process.env.REACT_APP_API_KEY;
const API_URL = "https://api.giphy.com/v1/gifs/";

const App = () => {
  // State variables
  const [giphyData, setGiphyData] = useState([]);

  // Fetch data on mount
  useEffect(() => {
    // Function to fetch GIFs data
    const fetchGifs = async () => {
      try {
        let endpoint = "";

        // Construct the API endpoint with required parameters
        endpoint = `${API_URL}trending?api_key=${API_KEY}&limit=25&offset=0&rating=Y&lang=en`;

        // Send API request to fetch GIFs data
        const results = await axios.get(endpoint);

        // Set the retrieved GIFs data to the state variable
        setGiphyData(results.data.data);
      } catch (error) {
        console.error(error);
      }
    };

    // Call the fetchGifs function when the component mounts
    fetchGifs();
  }, []);

  return (
    <div className="giphy-container">
      {/* Render the GifGallery component and pass the GIFs data as props */}
      <GifGallery giphyData={giphyData} />
    </div>
  );
};

export default App;

Navigate to the App.css file and add the following styles:



* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  background-color: #121212;
  font-family: interface, "Helvetica Neue", helvetica, sans-serif;
}

body::-webkit-scrollbar {
  display: none;
}

.giphy-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  width: 847px;
  margin: 0 auto;
  overflow: hidden;
}

.error-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.error-icon {
  font-size: 32px;
  color: red;
}

.error-message {
  color: rgb(255, 255, 255);
  font-size: 18px;
  margin-left: 8px;
}

/* Media Query */

@media only screen and (min-width: 614px) and (max-width: 844px) {
  body {
    width: 100%;
  }

  body::-webkit-scrollbar {
    display: none;
  }

  .giphy-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
  }
}

@media only screen and (min-width: 321px) and (max-width: 613px) {
  body {
    width: 100%;
  }

  body::-webkit-scrollbar {
    display: none;
  }

  .giphy-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    max-width: 321px;
    margin: 0 auto;
    overflow: hidden;
  }
}

Navigate to GifGallery.js and add the following code;



import React from "react";
import PropTypes from "prop-types";
import "./GifGallery.css";

// GifGallery component displays a gallery of GIF images
const GifGallery = ({ giphyData }) => {
  return (
    <div className="gif">
      {giphyData.map((gif, index) => (
        <div className="gif__image-container" key={index}>
          <img
            className="gif__image"
            src={gif.images.fixed_height.url}
            alt="gif"
          />
        </div>
      ))}
    </div>
  );
};

// Define the prop types for GifGallery component
GifGallery.propTypes = {
  giphyData: PropTypes.array.isRequired, // giphyData prop should be an array and is required
};

export default GifGallery;

Navigate to the GifGallery.css file and add the following styles:



.gif {
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgb(255, 255, 255);
  border-radius: 0px;
  outline: none;
  margin: 0px;
  padding: 0px;
  border: 0px;
  font: inherit;
  position: relative;
  width: 870px;
  flex-wrap: wrap;
  overflow: hidden;
}
.gif__image-container {
  margin: 8px;
  cursor: pointer;
  color: rgb(255, 255, 255);
  position: relative;
  vertical-align: baseline;
  position: relative;
}
.gif__image {
  color: rgb(255, 255, 255);
  border-radius: 8px;
  height: 200px;
  width: 200px;
}

@media only screen and (min-width: 614px) and (max-width: 844px) {
  .gif {
    display: flex;
    align-items: center;
    justify-content: center;
    font: inherit;
    position: relative;
    width: 100%;
    max-width: 614px;
    flex-wrap: wrap;
    overflow: hidden;
  }
  .gif__image-container {
    margin: 8px;
    cursor: pointer;
    color: rgb(255, 255, 255);
    position: relative;
    vertical-align: baseline;
    position: relative;
  }
  .gif__image {
    color: rgb(255, 255, 255);
    border-radius: 8px;
    height: 188px;
    width: 188px;
  }
}
@media only screen and (min-width: 321px) and (max-width: 613px) {
  .gif {
    display: flex;
    align-items: center;
    justify-content: center;
    font: inherit;
    position: relative;
    width: 100%;
    max-width: 321px;
    flex-wrap: wrap;
    overflow: hidden;
  }
  .gif__image-container {
    margin: 8px;
    cursor: pointer;
    color: rgb(255, 255, 255);
    position: relative;
    vertical-align: baseline;
    position: relative;
  }
  .gif__image {
    color: rgb(255, 255, 255);
    border-radius: 8px;
    height: 144px;
    width: 144px;
  }
}

Searching for Gifs

First, we need to navigate to the components directory located inside the src directory. Once there, we can create a NavBar directory. Inside the NavBar directory, we should create two files: NavBar.js, which will contain the code for the NavBar component, and NavBar.css, which will hold the styles for the NavBar.

Inside the NavBar.js add the following lines of code:



import UserIcons from "commons/Icons";
import { FaEllipsisV } from "react-icons/fa";
import Button from "commons/Button";
import SearchBar from "components/SearchBar/SearchBar";
import GiphyLogo from "assets/gif/giphy-logo.gif";
import Svgs from "assets/svgs";
import { Link, useLocation, useNavigate } from "react-router-dom";
import "./NavBar.css";

const NavBar = ({ searchTerm, setSearchTerm, handleSubmit, handleClick }) => {
  const menuItems = [
    { title: "Reactions", path: "/" },
    { title: "Entertainment", path: "/" },
    { title: "Sports", path: "/" },
    { title: "Stories", path: "/" },
    { title: "Artists", path: "/" },
    {
      title: <UserIcons icons={FaEllipsisV} />,
      className: "navigation__menu-ellipsis-container",
    },
  ];

  // React Router hooks
  let navigate = useNavigate();
  let location = useLocation();

  // Handle navigation to the home page
  const handleHomeNavigation = () => {
    setSearchTerm("");
    if (location.pathname !== "/") {
      navigate("/");
    }
  };

  return (
    <header className="navigation">
      <nav className="navigation__content">
        {/* Giphy logo */}
        <div
          className="navigation__logo-container"
          onClick={handleHomeNavigation}
        >
          <Svgs.GiphyLogo className="navigation__giphy-logo" />
        </div>

        {/* Small Giphy logo */}
        <img
          className="navigation__gif-small-logo"
          src={GiphyLogo}
          alt="giphy-logo.gif"
          onClick={handleHomeNavigation}
        />

        {/* Menu items */}
        <div className="navigation__menu-container">
          <ul className="navigation__menu-list">
            {menuItems.map((item, index) => (
              <li
                className={
                  item === "UserIcons"
                    ? "navigation__menu-ellipsis-container"
                    : "navigation__menu-list-item"
                }
                key={index}
              >
                <Link
                  className="navigation__menu-link"
                  to={item.path}
                  onClick={item.path ? handleHomeNavigation : null}
                >
                  {item.title}
                </Link>
              </li>
            ))}
          </ul>
        </div>

        {/* Buttons */}
        <div className="navigation__gif--sticker-btn-container">
          <span className="navigation__stickers-container">
            <Button className="navigation__stickers-btn" title="stickers" />
          </span>

          <span
            className="navigation__stickers-container"
            onClick={() => {
              navigate("/");
            }}
          >
            <Button className="navigation__stickers-btn" title="GIFs" />
          </span>
        </div>
      </nav>

      {/* SearchBar component */}
      <SearchBar
        searchTerm={searchTerm}
        setSearchTerm={setSearchTerm}
        handleSubmit={handleSubmit}
        handleClick={handleClick}
      />

      {/* Explore section */}
      <div className="navigation__explore-container">
        <p className="navigation__explore-content">
          Explore <span className="navigation__explore-gif-text">explore</span>{" "}
          GIFs
        </p>
      </div>
    </header>
  );
};

export default NavBar;

Navigate to NavBar.css and add the following code;



.navigation {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  color: rgb(255, 255, 255);
  letter-spacing: 0px;
  text-align: left;
  margin: 0px;
  border: 0px;
  padding: 10px 0 0 0;
  justify-content: center;
  width: 100%;
  position: relative;
  z-index: 499;
  overflow: hidden;
}
.navigation__content {
  display: flex;
  color: rgb(255, 255, 255);
  letter-spacing: 0px;
  text-align: left;
  list-style: none;
  border-radius: 0px;
  outline: none;
  text-decoration: none;
  -webkit-font-smoothing: antialiased;
  margin: 0px;
  border: 0px;
  font: inherit;
  width: 100%;
  height: 70px;
  padding: 10px 0px 0px;
  position: relative;
  z-index: 499;
}
.navigation__logo-container {
  border-radius: 0px;
  outline: none;
  margin: 0px;
  padding: 0px;
  border: 0px;
  color: rgb(255, 255, 255);
  display: flex;
  align-items: center;
  margin-top: 12px;
  transform: translate3d(0px, 0px, 0px);
  transition: transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
  cursor: pointer;
}
.navigation__giphy-logo {
  letter-spacing: 0px;
  color: rgb(255, 255, 255);
  border: 0px;
  outline: none;
  width: 164px;
}
.navigation__gif-small-logo {
  display: none;
}
.navigation__menu-container {
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgb(255, 255, 255);
  letter-spacing: 0px;
  text-align: left;
  list-style: none;
  outline: none;
  text-decoration: none;
  padding: 0px;
  border: 0px;
  font: inherit;
  margin: 10px 0px 0px 14px;
  width: 58.559%;
}
.navigation__menu-list {
  color: rgb(255, 255, 255);
  letter-spacing: 0px;
  text-align: left;
  outline: none;
  text-decoration: none;
  padding: 0px;
  border: 0px;
  font-size: 15px;
  vertical-align: baseline;
  list-style: none;
  margin: 0px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  transform: translateZ(0px);
  background-position-x: 219px;
  width: 100%;
  cursor: pointer;
}
.navigation__menu-list::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4px;
  width: 99.2%;
  background: linear-gradient(
      to right,
      rgb(0, 204, 255),
      rgb(153, 51, 255) 31%,
      rgb(230, 70, 182) 52%,
      rgb(255, 249, 170) 77%,
      rgb(0, 255, 153),
      rgb(0, 204, 255)
    )
    0% 50%/200% 50%;
}
.navigation__menu-list-item {
  color: rgb(255, 255, 255);
  letter-spacing: 0px;
  list-style: none;
  border-radius: 0px;
  outline: none;
  text-decoration: none;
  -webkit-font-smoothing: antialiased;
  margin: 0px;
  padding: 0px;
  border: 0px;
  font: inherit;
  cursor: pointer;
  height: 36px;
  border-right: 4px solid rgb(18, 18, 18);
  position: relative;
  display: flex;
  align-items: center;
  flex-grow: 1;
  align-items: center;
  text-transform: capitalize;
}
.navigation__menu-list-item:hover {
  background: #3167b7;
}
.navigation__menu-link {
  letter-spacing: 0px;
  list-style: none;
  text-transform: capitalize;
  border-radius: 0px;
  outline: none;
  text-decoration: none;
  margin: 0px;
  padding: 0px;
  border: 0px;
  font: inherit;
  vertical-align: baseline;
  width: 100%;
  text-align: center;
  font-weight: 600;
  color: rgb(255, 255, 255);
  height: 100%;
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}
.navigation__menu-ellipsis-container {
  letter-spacing: 0px;
  list-style: none;
  cursor: pointer;
  text-transform: capitalize;
  border-radius: 0px;
  outline: none;
  text-decoration: none;
  margin: 0px;
  padding: 0px;
  border: 0px;
  font: inherit;
  vertical-align: baseline;
  font-family: interface;
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  color: rgb(255, 255, 255);
  height: 100%;
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}
.navigation__gif--sticker-btn-container {
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgb(255, 255, 255);
  letter-spacing: 0px;
  text-align: left;
  list-style: none;
  border-radius: 0px;
  outline: none;
  text-decoration: none;
  -webkit-font-smoothing: antialiased;
  margin: 0px;
  padding: 0px;
  border: 0px;
  font: inherit;
  vertical-align: baseline;
  display: flex;
  margin-top: 10px;
  margin-left: 14px;
}
.navigation__stickers-container {
  letter-spacing: 0px;
  text-align: left;
  list-style: none;
  outline: none;
  text-decoration: none;
  -webkit-font-smoothing: antialiased;
  margin: 0px;
  border: 0px;
  font: inherit;
  vertical-align: baseline;
  color: rgb(255, 255, 255);
  padding: 8.5px 16px;
  display: inline-block;
  border-radius: 2px;
  background-size: 400% !important;
  background: linear-gradient(
    263.31deg,
    rgb(153, 51, 255) -97.49%,
    rgb(97, 87, 255) 94.14%
  );
  margin-right: 4px;
  background-position-x: -108px;
}
.navigation__stickers-btn {
  letter-spacing: 0px;
  text-align: left;
  list-style: none;
  border-radius: 0px;
  outline: none;
  text-decoration: none;
  margin: 0px;
  padding: 0px;
  border: 0px;
  font: inherit;
  color: rgb(255, 255, 255);
  font-size: 15px;
  font-weight: 600;
  background: 0 0;
  text-transform: capitalize;
  cursor: pointer;
}
.navigation__explore-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: rgb(255, 255, 255);
  text-align: left;
  text-decoration: none;
  padding: 0px;
  font-size: inherit;
  margin: 10px 0 15px 0;
  position: relative;
  width: 100%;
}
.navigation__explore-content {
  text-align: left;
  font: inherit;
  color: #fff;
  font-size: 36px;
  font-weight: 800;
  display: block;
}
.navigation__explore-gif-text {
  text-align: left;
  margin: 0px;
  padding: 0px;
  font: inherit;
  vertical-align: baseline;
  color: #00e6cc;
}

@media only screen and (min-width: 614px) and (max-width: 844px) {
  .navigation {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0 0 0;
    justify-content: center;
    width: 100%;
    max-width: 614px;
    position: relative;
    z-index: 499;
    overflow: hidden;
  }
  .navigation__content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: rgb(255, 255, 255);
    width: 100%;
  }
  .navigation__logo-container {
    color: rgb(255, 255, 255);
    display: flex;
    align-items: center;
    margin-top: 12px;
    transform: translate3d(0px, 0px, 0px);
    transition: transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
    cursor: pointer;
  }
  .navigation__giphy-logo {
    color: rgb(255, 255, 255);
    border: 0px;
    outline: none;
    width: 164px;
  }
  .navigation__gif-small-logo {
    display: none;
  }
  .navigation__menu-container {
    display: none;
  }
  .navigation__gif--sticker-btn-container {
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(255, 255, 255);
    margin: 0px;
    padding: 0px;
    border: 0px;
    font-size: 15px;
    margin-top: 10px;
    margin-left: 14px;
  }
  .navigation__stickers-container {
    margin: 0px;
    border: 0px;
    font-size: 15px;
    color: rgb(255, 255, 255);
    padding: 8.5px 16px;
    display: inline-block;
    border-radius: 2px;
    background-size: 400% !important;
    background: linear-gradient(
      263.31deg,
      rgb(153, 51, 255) -97.49%,
      rgb(97, 87, 255) 94.14%
    );
    margin-right: 4px;
    background-position-x: -108px;
  }
  .navigation__stickers-btn {
    font-size: 15px;
    color: rgb(255, 255, 255);
    font-weight: 600;
    background: 0 0;
    text-transform: capitalize;
    cursor: pointer;
  }
  .navigation__explore-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: rgb(255, 255, 255);
    text-align: left;
    text-decoration: none;
    padding: 0px;
    font-size: inherit;
    margin: 10px 0 15px 0;
    position: relative;
    width: 100%;
  }
  .navigation__explore-content {
    display: block;
    font-size: 32px;
  }
  .navigation__explore-gif-text {
    text-align: left;
    margin: 0px;
    padding: 0px;
    font: inherit;
    vertical-align: baseline;
    color: #00e6cc;
  }
}
@media only screen and (min-width: 321px) and (max-width: 613px) {
  .navigation {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    color: rgb(255, 255, 255);
    padding: 10px 0 0 0;
    justify-content: center;
    width: 100%;
    max-width: 321px;
    position: relative;
    z-index: 499;
    overflow: hidden;
  }
  .navigation__content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }
  .navigation__logo-container {
    display: none;
  }
  .navigation__gif-small-logo {
    display: flex;
    border: 0px;
    outline: none;
    width: 140px;
    cursor: pointer;
  }
  .navigation__menu-container {
    display: none;
  }
  .navigation__gif--sticker-btn-container {
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(255, 255, 255);
    margin: 0px;
    padding: 0px;
    border: 0px;
    font-size: 13px;
    margin-top: 10px;
    margin-left: 14px;
  }
  .navigation__stickers-container {
    margin: 0px;
    border: 0px;
    font-size: 13px;
    color: rgb(255, 255, 255);
    padding: 6.5px 14px;
    display: inline-block;
    border-radius: 2px;
    background-size: 400% !important;
    background: linear-gradient(
      263.31deg,
      rgb(153, 51, 255) -97.49%,
      rgb(97, 87, 255) 94.14%
    );
    margin-right: 4px;
    background-position-x: -108px;
  }
  .navigation__stickers-btn {
    font-size: 13px;
    color: rgb(255, 255, 255);
    font-weight: 600;
    background: 0 0;
    text-transform: capitalize;
    cursor: pointer;
  }
  .navigation__explore-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: rgb(255, 255, 255);
    text-align: left;
    text-decoration: none;
    padding: 0px;
    font-size: inherit;
    margin: 10px 0 15px 0;
    position: relative;
    width: 100%;
  }
  .navigation__explore-content {
    display: block;
    font-size: 28px;
  }
  .navigation__explore-gif-text {
    text-align: left;
    margin: 0px;
    padding: 0px;
    font: inherit;
    vertical-align: baseline;
    color: #00e6cc;
  }
}

Create a sub-directory called SearchBar inside the components directory. Within the SearchBar directory, generate two files: SearchBar.js and SearchBar.css.

Navigate to the SearchBar.js file and the following code;



import React, { useEffect, useState } from "react";
import Input from "commons/Input";
import "./SearchBar.css";

const SearchBar = ({
  searchTerm,
  setSearchTerm,
  handleSubmit,
  handleClick,
}) => {
  const [currentPlaceholder, setCurrentPlaceholder] = useState(0);
  const placeholders = [
    "Search for GIFs",
    "Find your favorite GIFs",
    "Discover trending GIFs",
  ];

  useEffect(() => {
    const interval = setInterval(() => {
      setCurrentPlaceholder((prev) => (prev + 1) % placeholders.length);
    }, 2000);

    return () => clearInterval(interval);
  }, [placeholders.length]);

  return (
    <div className="search">
      <form className="search__form" onSubmit={handleSubmit}>
        <Input
          id="search"
          className="search__input"
          type="text"
          value={searchTerm}
          name="search-input"
          onChange={(event) => setSearchTerm(event.target.value)}
          placeholder={placeholders[currentPlaceholder]}
        />

        <button className="search__button-container" onClick={handleClick}>
          <img
          className='search__search-icon'
            src="https://giphy.com/static/img/search-icon.svg"
            width="30"
            alt=""
          />
        </button>
      </form>
    </div>
  );
};

export default SearchBar;

Navigate to SearchBar.css and add the following;



.search {
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgb(255, 255, 255);
  border-radius: 0px;
  outline: none;
  margin: 0px;
  padding: 0px;
  border: 0px;
  font: inherit;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  transition: width 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
  width: 100%;
  height: 45px;
  margin: 12px 0px 0px 0px;
}
.search__form {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 52px;
  position: relative;
}
.search__input {
  font-family: inherit;
  line-height: normal;
  color: rgb(0, 0, 0);
  outline: none;
  padding: 0px 17px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 0px;
  font-weight: normal;
  width: 100%;
  border: 0px;
  margin: 0px;
  z-index: 2;
  position: relative;
  height: 52px;
  letter-spacing: 1px;
  font-size: 18px;
  border-radius: 4px;
  background-color: #ffffff;
}
.search__input::-moz-placeholder {
  text-align: left;
  list-style: none;
  color: rgb(166, 166, 166);
  letter-spacing: 1px;
  -moz-user-select: none;
  user-select: none;
  border-radius: 0px;
  outline: none;
  margin: 0px;
  padding: 0px;
  border: 0px;
  font: inherit;
  transform: translateY(0px);
  animation: 5s ease 0s infinite normal none running gVMIwq;
}
.search__input::placeholder {
  text-align: left;
  list-style: none;
  color: rgb(166, 166, 166);
  letter-spacing: 1px;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  border-radius: 0px;
  outline: none;
  margin: 0px;
  padding: 0px;
  border: 0px;
  font: inherit;
  transform: translateY(0px);
  animation: 5s ease 0s infinite normal none running gVMIwq;
}
.search__button-container {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: left;
  border-radius: 0px;
  outline: none;
  margin: 0px;
  padding: 0px;
  border: 0px;
  font: inherit;
  color: rgb(255, 255, 255);
  width: 52px;
  height: 52px;
  animation: 2s linear 0s infinite normal none running CNual;
  background-image: linear-gradient(
    45deg,
    rgb(153, 51, 255) 0%,
    rgb(255, 102, 102) 50%,
    rgb(153, 51, 255) 100%
  );
  background-size: 400%;
  background-position: 0% 100%;
  inset: 0px;
  border-radius: 4px;
  position: absolute;
  left: 795px;
  z-index: 1000;
  cursor: pointer;
}

@media only screen and (min-width: 614px) and (max-width: 844px) {
  .search {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    transition: width 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    width: 100%;
    max-width: 614px;
    height: 45px;
    margin: 12px 0px 0px 0px;
  }
  .search__form {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 52px;
    position: relative;
  }
  .search__input {
    font-family: inherit;
    line-height: normal;
    color: rgb(0, 0, 0);
    outline: none;
    padding: 0px 17px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0px;
    font-weight: normal;
    width: 100%;
    border: 0px;
    margin: 0px;
    z-index: 2;
    position: relative;
    height: 52px;
    letter-spacing: 1px;
    font-size: 18px;
    border-radius: 4px;
    background-color: #ffffff;
  }
  .search__input::-moz-placeholder {
    text-align: left;
    list-style: none;
    color: rgb(166, 166, 166);
    letter-spacing: 1px;
    -moz-user-select: none;
    user-select: none;
    border-radius: 0px;
    outline: none;
    margin: 0px;
    padding: 0px;
    border: 0px;
    font: inherit;
    transform: translateY(0px);
    animation: 5s ease 0s infinite normal none running gVMIwq;
  }
  .search__input::placeholder {
    text-align: left;
    list-style: none;
    color: rgb(166, 166, 166);
    letter-spacing: 1px;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    border-radius: 0px;
    outline: none;
    margin: 0px;
    padding: 0px;
    border: 0px;
    font: inherit;
    transform: translateY(0px);
    animation: 5s ease 0s infinite normal none running gVMIwq;
  }
  .search__button-container {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: left;
    border-radius: 0px;
    outline: none;
    margin: 0px;
    padding: 0px;
    border: 0px;
    font: inherit;
    color: rgb(255, 255, 255);
    width: 52px;
    height: 52px;
    animation: 2s linear 0s infinite normal none running CNual;
    background-image: linear-gradient(
      45deg,
      rgb(153, 51, 255) 0%,
      rgb(255, 102, 102) 50%,
      rgb(153, 51, 255) 100%
    );
    background-size: 400%;
    background-position: 0% 100%;
    inset: 0px;
    border-radius: 4px;
    position: absolute;
    left: 562px;
    z-index: 1000;
    cursor: pointer;
  }
}
@media only screen and (min-width: 321px) and (max-width: 613px) {
  .search {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    transition: width 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    width: 100%;
    max-width: 321px;
    height: 45px;
    margin: 12px 0px 0px 0px;
  }
  .search__form {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 45px;
    position: relative;
  }
  .search__input {
    font-family: inherit;
    line-height: normal;
    color: rgb(0, 0, 0);
    outline: none;
    padding: 0px 17px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0px;
    font-weight: normal;
    width: 100%;
    border: 0px;
    margin: 0px;
    z-index: 2;
    position: relative;
    height: 45px;
    letter-spacing: 1px;
    font-size: 16px;
    border-radius: 4px;
    background-color: white;
  }
  .search__input::-moz-placeholder {
    text-align: left;
    list-style: none;
    color: rgb(166, 166, 166);
    letter-spacing: 1px;
    -moz-user-select: none;
    user-select: none;
    border-radius: 0px;
    outline: none;
    margin: 0px;
    padding: 0px;
    border: 0px;
    font: inherit;
    transform: translateY(0px);
    animation: 5s ease 0s infinite normal none running gVMIwq;
  }
  .search__input::placeholder {
    text-align: left;
    list-style: none;
    color: rgb(166, 166, 166);
    letter-spacing: 1px;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    border-radius: 0px;
    outline: none;
    margin: 0px;
    padding: 0px;
    border: 0px;
    font: inherit;
    transform: translateY(0px);
    animation: 5s ease 0s infinite normal none running gVMIwq;
  }
  .search__button-container {
    display: flex;
    align-items: center;
    justify-content: center;
    font: inherit;
    color: rgb(255, 255, 255);
    width: 45px;
    height: 45px;
    animation: 2s linear 0s infinite normal none running CNual;
    background-image: linear-gradient(
      45deg,
      rgb(153, 51, 255) 0%,
      rgb(255, 102, 102) 50%,
      rgb(153, 51, 255) 100%
    );
    background-size: 400%;
    background-position: 0% 100%;
    inset: 0px;
    border-radius: 4px;
    position: absolute;
    left: 276px;
    z-index: 1000;
    cursor: pointer;
  }
  .search__search-icon {
    width: 25px;
  }
}

Update App.js with the following code;



import React, { useEffect, useState } from "react";
import axios from "axios";
import GifGallery from "pages/Giphy/GifGallery";
import NavBar from "components/NavBar/NavBar";
import "./App.css";

// API key and URL
const API_KEY = process.env.REACT_APP_API_KEY;
const API_URL = "https://api.giphy.com/v1/gifs/";

const App = () => {
  // State variables
  const [giphyData, setGiphyData] = useState([]);
  const [searchTerm, setSearchTerm] = useState("");

  // Fetch data on mount
  useEffect(() => {
    const fetchGifs = async () => {
      try {
        let endpoint = "";

        endpoint = `${API_URL}trending?api_key=${API_KEY}&limit=25&offset=0&rating=Y&lang=en`;

        const results = await axios.get(endpoint);
        setGiphyData(results.data.data);
      } catch (error) {
        console.error(error);
      }
    };

    fetchGifs();
  }, [searchTerm]);

  // Handle search input and submit
  const handleSearch = async () => {
    try {
      const endpoint = `${API_URL}search?api_key=${API_KEY}&q=${searchTerm}&_limit=25&rating=Y&lang=en`;

      const results = await axios.get(endpoint);

      setGiphyData(results.data.data);
    } catch (error) {
      console.error(error);
    }
  };

  const handleSubmit = async (event) => {
    event.preventDefault();
    handleSearch();
  };

  const handleClick = async () => {
    handleSearch();
  };

  return (
    <div className="giphy-container">
      {/* Render the NavBar component and pass necessary props */}
      <NavBar
        searchTerm={searchTerm}
        setSearchTerm={setSearchTerm}
        handleSubmit={handleSubmit}
        handleClick={handleClick}
        API_KEY={API_KEY}
      />

      {/* Render the GifGallery component and pass the GIFs data as props */}
      <GifGallery giphyData={giphyData} />
    </div>
  );
};

export default App;

Implement a Loading Function and Error Handling

It is necessary to implement a loading function. This function will display a spinner at the top of the screen while retrieving the data. Once the data is successfully obtained, the spinner will disappear. To accomplish this, a two-state variable will be utilized. One state will indicate when the application is actively loading, while the other will signify when the loading process is complete.

To proceed, navigate to the components directory and create a subdirectory named "Spinner". Inside this subdirectory, create two files: Spinner.js and Spinner.css.

Inside Spinner.js add the following code;



/* eslint-disable jsx-a11y/heading-has-content */
import React from "react";
import "./Spinner.css";

const Spinner = () => {
  return (
    <div className="loader">
      <div className="circle yellow"></div>
      <div className="circle red"></div>
      <div className="circle blue"></div>
      <div className="circle violet"></div>
    </div>
  );
};

export default Spinner;

Inside the Spinner.css add this;



.loader {
  display: flex;
  align-items: center;
  justify-content: center;
}
.loader .circle {
  width: 3vw;
  height: 3vw;
  border-radius: 100%;
  margin: 2vw;
  background-image: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.5) 0%,
    rgba(0, 0, 0, 0) 100%
  );
  animation: bounce 1.5s 0.5s linear infinite;
}
.loader .yellow {
  background-color: yellow;
}
.loader .red {
  background-color: red;
  animation-delay: 0.1s;
}
.loader .blue {
  background-color: blue;
  animation-delay: 0.2s;
}
.loader .violet {
  background-color: violet;
  animation-delay: 0.3s;
}
@keyframes bounce {
  0%,
  50%,
  100% {
    transform: scale(1);
    filter: blur(0px);
  }
  25% {
    transform: scale(0.6);
    filter: blur(3px);
  }
  75% {
    filter: blur(3px);
    transform: scale(1.4);
  }
}

In case of any errors, such as failure to retrieve data or inability to connect to the API server, it is important to provide the user with an appropriate error message or notification.

Update the App.js file with the following code;



import React, { useEffect, useState } from "react";
import axios from "axios";
import GifGallery from "pages/Giphy/GifGallery";
import NavBar from "components/NavBar/NavBar";
import Spinner from "components/Spinner/Spinner";
import UserIcons from "commons/Icons";
import { FaRegWindowClose } from "react-icons/fa";
import "./App.css";

// API key and URL
const API_KEY = process.env.REACT_APP_API_KEY;
const API_URL = "https://api.giphy.com/v1/gifs/";

// App Component
const App = () => {
  // State variables
  const [giphyData, setGiphyData] = useState([]);
  const [isLoading, setIsLoading] = useState(false);
  const [isError, setIsError] = useState(false);
  const [searchTerm, setSearchTerm] = useState("");

  // Fetch data on mount
  useEffect(() => {
    const fetchGifs = async () => {
      setIsError(false);

      try {
        let endpoint = "";

        // Fetch trending gifs
        endpoint = `${API_URL}trending?api_key=${API_KEY}&limit=25&offset=0&rating=Y&lang=en`;

        const results = await axios.get(endpoint);
        setGiphyData(results.data.data);
      } catch (error) {
        setIsError(true);
        console.error(error);
      }
    };

    fetchGifs();
  }, [searchTerm]);

  // Handle search input and submit
  const handleSearch = async () => {
    setIsError(false);
    setIsLoading(true);

    try {
      // Fetch gifs based on search term
      const endpoint = `${API_URL}search?api_key=${API_KEY}&q=${searchTerm}&_limit=25&rating=Y&lang=en`;

      const results = await axios.get(endpoint);

      setGiphyData(results.data.data);
    } catch (error) {
      console.error(error);
      setIsError("Oops! Something went wrong. Please try again later.");
    }

    setIsLoading(false);
  };

  const handleSubmit = async (event) => {
    event.preventDefault();
    handleSearch();
  };

  const handleClick = async () => {
    handleSearch();
  };

  return (
    <div className="giphy-container">
      {/* Render the NavBar component and pass necessary props */}
      <NavBar
        searchTerm={searchTerm}
        setSearchTerm={setSearchTerm}
        handleSubmit={handleSubmit}
        handleClick={handleClick}
        API_KEY={API_KEY}
        setIsError={setIsError}
        setIsLoading={setIsLoading}
      />

      {/* Conditional rendering based on isLoading and isError */}
      {isLoading ? (
        <Spinner />
      ) : isError ? (
        <div className="error-container">
          <UserIcons className="error-icon" icons={FaRegWindowClose} />
          <p className="error-message">
            Oops! Something went wrong. Please try again later.
          </p>
        </div>
      ) : (
        <GifGallery giphyData={giphyData} />
      )}
    </div>
  );
};

export default App;

Infinite Scroll: Implementing a Load More Function for Seamless Content Loading

By adding a Load More function, users can seamlessly retrieve and display additional content without interruptions.

Update the App.js file with this code;



import React, { useEffect, useState } from "react";
import axios from "axios";
import GifGallery from "pages/Giphy/GifGallery";
import NavBar from "components/NavBar/NavBar";
import Spinner from "components/Spinner/Spinner";
import UserIcons from "commons/Icons";
import { FaRegWindowClose } from "react-icons/fa";
import "./App.css";

// API key and URL
const API_KEY = process.env.REACT_APP_API_KEY;
const API_URL = "https://api.giphy.com/v1/gifs/";

// App Component
const App = () => {
  // State variables
  const [giphyData, setGiphyData] = useState([]);
  const [isLoading, setIsLoading] = useState(false);
  const [isError, setIsError] = useState(false);
  const [searchTerm, setSearchTerm] = useState("");
  const [currentPage, setCurrentPage] = useState(1);

  // Fetch data on mount
  useEffect(() => {
    const fetchGifs = async () => {
      setIsError(false);

      try {
        let endpoint = "";

    // Fetch trending gifs
        endpoint = `${API_URL}trending?api_key=${API_KEY}&limit=25&offset=0&rating=Y&lang=en`;

        const results = await axios.get(endpoint);
        setGiphyData(results.data.data);
      } catch (error) {
        setIsError(true);
        console.error(error);
      }
    };

    fetchGifs();
  }, [searchTerm]);

  // Handle search input and submit
  const handleSearch = async () => {
    setIsError(false);
    setIsLoading(true);

    try {
 // Fetch gifs based on search term
      const endpoint = `${API_URL}search?api_key=${API_KEY}&q=${searchTerm}&_limit=25&rating=Y&lang=en`;

      const results = await axios.get(endpoint);

      setGiphyData(results.data.data);
    } catch (error) {
      console.error(error);
      setIsError("Oops! Something went wrong. Please try again later.");
    }

    setIsLoading(false);
  };

  const handleSubmit = async (event) => {
    event.preventDefault();
    handleSearch();
  };

  const handleClick = async () => {
    handleSearch();
  };

  // Function to load more data from Giphy API
  const loadMoreData = async () => {
    try {
      let endpoint = "";

      // Determine the API endpoint based on whether a search term is present or not
      if (searchTerm) {
        endpoint = `${API_URL}search?q=${searchTerm}&api_key=${API_KEY}&limit=25&offset=${
          currentPage * 25
        }&rating=Y&lang=en`;
      } else {
        endpoint = `${API_URL}trending?api_key=${API_KEY}&limit=25&offset=${
          currentPage * 25
        }&rating=Y&lang=en`;
      }

      // Make a GET request to the API endpoint
      const results = await axios.get(endpoint);
      const newData = results.data.data;

      // Update the state with the new data
      setGiphyData((prevData) => [...prevData, ...newData]);
      setCurrentPage((prevPage) => prevPage + 1);
    } catch (error) {
      // Handle errors by resetting the data and logging the error
      setGiphyData([]);
      console.log(error);
    } finally {
      // Reset the loading and error states
      setIsLoading(false);
      setIsError(false);
    }
  };

  return (
    <div className="giphy-container">
      {/* Render the NavBar component and pass necessary props */}
      <NavBar
        searchTerm={searchTerm}
        setSearchTerm={setSearchTerm}
        handleSubmit={handleSubmit}
        handleClick={handleClick}
        API_KEY={API_KEY}
        setIsError={setIsError}
        setIsLoading={setIsLoading}
      />

      {/* Conditional rendering based on isLoading and isError */}
      {isLoading ? (
        <Spinner />
      ) : isError ? (
        <div className="error-container">
          <UserIcons className="error-icon" icons={FaRegWindowClose} />
          <p className="error-message">
            Oops! Something went wrong. Please try again later.
          </p>
        </div>
      ) : (
        <GifGallery giphyData={giphyData} loadMoreData={loadMoreData} />
      )}
    </div>
  );
};

export default App;

Update GifGallery.js with the following code;



import React from "react";
import PropTypes from "prop-types";
import InfiniteScroll from "react-infinite-scroll-component";
import Spinner from "components/Spinner/Spinner";
import "./GifGallery.css";

// GifGallery component that renders a gallery of GIF images with infinite scroll
const GifGallery = ({ giphyData, loadMoreData }) => {
  return (
    // InfiniteScroll component from react-infinite-scroll-component library
    <InfiniteScroll
      dataLength={giphyData.length} // Current length of giphyData array
      next={loadMoreData} // Function to load more data
      hasMore={true} // Indicates whether there is more data to load
      loader={<Spinner />} // Component to display while loading more data
    >
      <div className="gif">
        {/* Render each GIF image in the giphyData array */}
        {giphyData.map((gif, index) => (
          <div
            className="gif__image-container"
            key={index}
            onClick={() => window.open(gif.images.preview_gif.url)}
          >
            <img
              className="gif__image"
              src={gif.images.fixed_height.url}
              alt="gif"
            />
          </div>
        ))}
      </div>
    </InfiniteScroll>
  );
};

// PropTypes for type checking the props
GifGallery.propTypes = {
  giphyData: PropTypes.array.isRequired, // Array of GIF data
  loadMoreData: PropTypes.func.isRequired, // Function to load more data
};

export default GifGallery;

Fetching Stickers

Prior to implementing the sticker fetching function, it is essential to incorporate routes for seamless navigation between GIFs and stickers, eliminating the need for page refresh.

An error page will be created to handle situations when a user accesses a route that does not exist. Navigate to the components directory and locate the pages directory, inside the pages directory, create a file named ErrorPage.js.

Add the following code to ErrorPage.js;



import React from "react";

const ErrorPage = () => {
  return (
    <div
      style={{
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
        marginTop: "24px",
        fontSize: "24px",
        color: "white",
        fontWeight: "bold",
      }}
    >
      404 Error: Page Not Found.
    </div>
  );
};

export default ErrorPage;

Go to the components directory and create a file named GifRoute we are going keep the empty for now with just our standard dummy React snippets.

Go to back to the root file App.js and update the codes;



import React, { useEffect, useState } from "react";
import axios from "axios";
import NavBar from "components/NavBar/NavBar";
import Spinner from "components/Spinner/Spinner";
import UserIcons from "commons/Icons";
import { FaRegWindowClose } from "react-icons/fa";
import GifRoute from "components/GifRoute";
import "./App.css";

// API key and URL
const API_KEY = process.env.REACT_APP_API_KEY;
const API_URL = "https://api.giphy.com/v1/gifs/";

// App Component
const App = () => {
  // State variables
  const [giphyData, setGiphyData] = useState([]);
  const [stickerData, setStickerData] = useState([]);
  const [isLoading, setIsLoading] = useState(false);
  const [isError, setIsError] = useState(false);
  const [searchTerm, setSearchTerm] = useState("");
  const [currentPage, setCurrentPage] = useState(1);

  // Fetch data on mount
  useEffect(() => {
    const fetchGifs = async () => {
      setIsError(false);

      try {
        let endpoint = "";

        // Fetch trending gifs
        endpoint = `${API_URL}trending?api_key=${API_KEY}&limit=25&offset=0&rating=Y&lang=en`;

        const results = await axios.get(endpoint);
        setGiphyData(results.data.data);
      } catch (error) {
        setIsError(true);
        console.error(error);
      }
    };

    fetchGifs();
  }, [searchTerm]);

  // Handle search input and submit
  const handleSearch = async () => {
    setIsError(false);
    setIsLoading(true);

    try {
      // Fetch gifs based on search term
      const endpoint = `${API_URL}search?api_key=${API_KEY}&q=${searchTerm}&_limit=25&rating=Y&lang=en`;

      const results = await axios.get(endpoint);

      setGiphyData(results.data.data);
    } catch (error) {
      console.error(error);
      setIsError("Oops! Something went wrong. Please try again later.");
    }

    setIsLoading(false);
  };

  const handleSubmit = async (event) => {
    event.preventDefault();
    handleSearch();
  };

  const handleClick = async () => {
    handleSearch();
  };

  // Function to load more data from Giphy API
  const loadMoreData = async () => {
    try {
      let endpoint = "";

      // Determine the API endpoint based on whether a search term is present or not
      if (searchTerm) {
        endpoint = `${API_URL}search?q=${searchTerm}&api_key=${API_KEY}&limit=25&offset=${
          currentPage * 25
        }&rating=Y&lang=en`;
      } else {
        endpoint = `${API_URL}trending?api_key=${API_KEY}&limit=25&offset=${
          currentPage * 25
        }&rating=Y&lang=en`;
      }

      // Make a GET request to the API endpoint
      const results = await axios.get(endpoint);
      const newData = results.data.data;

      // Update the state with the new data
      setGiphyData((prevData) => [...prevData, ...newData]);
      setCurrentPage((prevPage) => prevPage + 1);
    } catch (error) {
      // Handle errors by resetting the data and logging the error
      setGiphyData([]);
      console.log(error);
    } finally {
      // Reset the loading and error states
      setIsLoading(false);
      setIsError(false);
    }
  };

  return (
    <div className="giphy-container">
      {/* Render the NavBar component and pass necessary props */}
      <NavBar
        searchTerm={searchTerm}
        setSearchTerm={setSearchTerm}
        handleSubmit={handleSubmit}
        handleClick={handleClick}
        setStickerData={setStickerData}
        API_KEY={API_KEY}
        setIsError={setIsError}
        setIsLoading={setIsLoading}
      />

      {/* Conditional rendering based on isLoading and isError */}
      {isLoading ? (
        <Spinner />
      ) : isError ? (
        <div className="error-container">
          <UserIcons className="error-icon" icons={FaRegWindowClose} />
          <p className="error-message">
            Oops! Something went wrong. Please try again later.
          </p>
        </div>
      ) : (
        <GifRoute
          giphyData={giphyData}
          loadMoreData={loadMoreData}
          stickerData={stickerData}
          API_KEY={API_KEY}
          searchTerm={searchTerm}
          currentPage={currentPage}
          setStickerData={setStickerData}
          setCurrentPage={setCurrentPage}
          setIsLoading={setIsLoading}
          setIsError={setIsError}
        />
      )}
    </div>
  );
};

export default App;

Update the file NavBar.js with the following code;



import axios from "axios";
import UserIcons from "commons/Icons";
import { FaEllipsisV } from "react-icons/fa";
import Button from "commons/Button";
import SearchBar from "components/SearchBar/SearchBar";
import GiphyLogo from "assets/gif/giphy-logo.gif";
import Svgs from "assets/svgs";
import { Link, useLocation, useNavigate } from "react-router-dom";
import "./NavBar.css";

const STICKER_URL = "https://api.giphy.com/v1/stickers/search";

const NavBar = ({
  searchTerm,
  setSearchTerm,
  handleSubmit,
  handleClick,
  setStickerData,
  API_KEY,
  setIsError,
  setIsLoading,
}) => {
  const menuItems = [
    { title: "Reactions", path: "/" },
    { title: "Entertainment", path: "/" },
    { title: "Sports", path: "/" },
    { title: "Stories", path: "/" },
    { title: "Artists", path: "/" },
    {
      title: <UserIcons icons={FaEllipsisV} />,
      className: "navigation__menu-ellipsis-container",
    },
  ];

  // React Router hooks
  let navigate = useNavigate();
  let location = useLocation();

  // Handle navigation to the home page
  const handleHomeNavigation = () => {
    setSearchTerm("");

    if (location.pathname !== "/") {
      navigate("/");
    }
  };

  // Handle search input and submit for stickers
  const handleStickerSearch = async () => {
    setIsError(false);
    setIsLoading(true);

    try {
      let endpoint = "";

      // the if condition only make a request to the endpoint if searchTerm is truthy
      if (searchTerm) {
        endpoint = `${STICKER_URL}?api_key=${API_KEY}&q=${searchTerm}&_limit=25&rating=Y&lang=en`;
        const results = await axios.get(endpoint);
        setStickerData(results.data.data);
        navigate("/sticker"); // add this line to navigate to the "/sticker" route
      }
    } catch (error) {
      console.error(error);
      setIsError("Oops! Something went wrong. Please try again later.");
    }

    setIsLoading(false);
  };

  return (
    <header className="navigation">
      <nav className="navigation__content">
        {/* Giphy logo */}
        <div
          className="navigation__logo-container"
          onClick={handleHomeNavigation}
        >
          <Svgs.GiphyLogo className="navigation__giphy-logo" />
        </div>

        {/* Small Giphy logo */}
        <img
          className="navigation__gif-small-logo"
          src={GiphyLogo}
          alt="giphy-logo.gif"
          onClick={handleHomeNavigation}
        />

        {/* Menu items */}
        <div className="navigation__menu-container">
          <ul className="navigation__menu-list">
            {menuItems.map((item, index) => (
              <li
                className={
                  item === "UserIcons"
                    ? "navigation__menu-ellipsis-container"
                    : "navigation__menu-list-item"
                }
                key={index}
              >
                <Link
                  className="navigation__menu-link"
                  to={item.path}
                  onClick={item.path ? handleHomeNavigation : null}
                >
                  {item.title}
                </Link>
              </li>
            ))}
          </ul>
        </div>

        {/* Buttons */}
        <div className="navigation__gif--sticker-btn-container">
          <span
            className="navigation__stickers-container"
            onClick={handleStickerSearch}
          >
            <Button className="navigation__stickers-btn" title="stickers" />
          </span>

          <span
            className="navigation__stickers-container"
            onClick={() => {
              navigate("/");
            }}
          >
            <Button className="navigation__stickers-btn" title="GIFs" />
          </span>
        </div>
      </nav>

      {/* SearchBar component */}
      <SearchBar
        searchTerm={searchTerm}
        setSearchTerm={setSearchTerm}
        handleSubmit={handleSubmit}
        handleClick={handleClick}
      />

      {/* Explore section */}
      <div className="navigation__explore-container">
        <p className="navigation__explore-content">
          Explore <span className="navigation__explore-gif-text">explore</span>{" "}
          GIFs
        </p>
      </div>
    </header>
  );
};

export default NavBar;

To complete the task, navigate to the components directory, locate the pages directory, and create a new directory named Sticker inside it. Within the Sticker directory, create two files: Sticker.js and Sticker.css.

Inside the Sticker.js add this code;



import { useState } from "react";
import axios from "axios";
import PropTypes from "prop-types";
import InfiniteScroll from "react-infinite-scroll-component";
import Spinner from "components/Spinner/Spinner";
import "./Sticker.css";

const STICKER_URL = "https://api.giphy.com/v1/stickers/search";

// Sticker component that displays sticker images with infinite scroll
const Sticker = ({
  stickerData,
  API_KEY,
  searchTerm,
  currentPage,
  setStickerData,
  setCurrentPage,
  setIsLoading,
  setIsError,
}) => {
  const [hasMoreData, setHasMoreData] = useState(true);

  // Function to load more sticker data
  const loadMoreStickerData = async () => {
    try {
      let endpoint = "";

      if (searchTerm) {
        endpoint = `${STICKER_URL}?api_key=${API_KEY}&q=${searchTerm}&limit=25&offset=${
          currentPage * 25
        }&rating=Y&lang=en`;
      }

      const results = await axios.get(endpoint);
      const newData = results.data.data;

      setStickerData((prevData) => [...prevData, ...newData]);

      // Check if there is more data to load
      if (newData.length < 25) {
        setHasMoreData(false);
      }

      setCurrentPage((prevPage) => prevPage + 1);
    } catch (error) {
      setStickerData([]);
      console.log(error);
    } finally {
      setIsLoading(false);
      setIsError(false);
    }
  };

  return (
    <InfiniteScroll
      dataLength={stickerData.length} // Current length of stickerData array
      next={loadMoreStickerData} // Function to load more sticker data
      hasMore={hasMoreData} // Indicates if there is more sticker data to load
      loader={<Spinner />} // Component to display while loading sticker data
    >
      <div className="sticker">
        {/* Render each sticker image in the stickerData array */}
        {stickerData.map((sticker, index) => (
          <div
            className="sticker__image-container"
            key={index}
            onClick={() => window.open(sticker.images.preview_gif.url)}
          >
            <img
              className="sticker__image"
              src={sticker.images.fixed_height.url}
              alt="gif"
            />
          </div>
        ))}
        {/* Display a message when there are no more stickers to load */}
        {!hasMoreData && (
          <p className="sticker__message">No more stickers to load...</p>
        )}
      </div>
    </InfiniteScroll>
  );
};

// PropTypes for type checking the stickerData prop
Sticker.propTypes = {
  stickerData: PropTypes.array.isRequired, // Array of sticker data
};

export default Sticker;

and inside the Sticker.css add this style;



.sticker {
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(255, 255, 255);
    border-radius: 0px;
    outline: none;
    margin: 0px;
    padding: 0px;
    border: 0px;
    font: inherit;
    position: relative;
    width: 870px;
    flex-wrap: wrap;
    overflow: hidden;
  }
  .sticker__image-container {
    margin: 8px;
    cursor: pointer;
    color: rgb(255, 255, 255);
    position: relative;
    vertical-align: baseline;
    position: relative;
  }
  .sticker__image {
    color: rgb(255, 255, 255);
    border-radius: 8px;
    height: 200px;
    width: 200px;
  }
  .sticker__message {
    color: rgb(255, 255, 255);
    font-size: 24px;
  }

  @media only screen and (min-width: 614px) and (max-width: 844px) {
    .sticker {
      display: flex;
      align-items: center;
      justify-content: center;
      font: inherit;
      position: relative;
      width: 100%;
      max-width: 614px;
      flex-wrap: wrap;
      overflow: hidden;
    }
    .sticker__image-container {
      margin: 8px;
      cursor: pointer;
      color: rgb(255, 255, 255);
      position: relative;
      vertical-align: baseline;
      position: relative;
    }
    .sticker__image {
      color: rgb(255, 255, 255);
      border-radius: 8px;
      height: 188px;
      width: 188px;
    }
  }
  @media only screen and (min-width: 321px) and (max-width: 613px) {
    .sticker {
      display: flex;
      align-items: center;
      justify-content: center;
      font: inherit;
      position: relative;
      width: 100%;
      max-width: 321px;
      flex-wrap: wrap;
      overflow: hidden;
    }
    .sticker__image-container {
      margin: 8px;
      cursor: pointer;
      color: rgb(255, 255, 255);
      position: relative;
      vertical-align: baseline;
      position: relative;
    }
    .sticker__image {
      color: rgb(255, 255, 255);
      border-radius: 8px;
      height: 144px;
      width: 144px;
    }
  }

Implementing Routes

Go back to the GifRoute we created earlier and add the following code;



import React from "react";
import { Route, Routes } from "react-router-dom";
import GifGallery from "pages/Giphy/GifGallery";
import Sticker from "pages/Sticker/Sticker";
import ErrorPage from "pages/ErrorPage";

// GifRoute component that defines the routes for GIF-related pages
const GifRoute = ({
  giphyData,
  loadMoreData,
  stickerData,
  API_KEY,
  searchTerm,
  currentPage,
  setStickerData,
  setCurrentPage,
  setIsLoading,
  setIsError,
}) => {
  return (
    <Routes>
      {/* Route for the GifGallery page */}
      <Route
        path="/"
        element={
          <GifGallery giphyData={giphyData} loadMoreData={loadMoreData} />
        }
      />

      {/* Route for the Sticker page */}
      <Route
        path="/sticker"
        element={
          <Sticker
            stickerData={stickerData}
            API_KEY={API_KEY}
            searchTerm={searchTerm}
            currentPage={currentPage}
            setStickerData={setStickerData}
            setCurrentPage={setCurrentPage}
            setIsLoading={setIsLoading}
            setIsError={setIsError}
          />
        }
      />

      {/* Route for the ErrorPage */}
      <Route path="*" element={<ErrorPage />} />
    </Routes>
  );
};

export default GifRoute;

GitHub Code to this project (feel free to give it a star ⭐)

Find below the GitHub Code to this project (feel free to give it a star ⭐):

Willochs316 / giphy-api

Giphy API

The following article provides an in-depth explanation of this project Creating GIFs with Giphy API and ReactJS: A Beginner's Guide

The Giphy API is a web-based service that provides developers with access to millions of GIFs from the Giphy library. The API allows users to search for GIFs by keyword, tag, or category and retrieve them in a variety of formats.

Instructions

To begin working on the project, start by running npm start in your terminal. This will start the development server and the application will be accessible in your web browser at the specified port. From there, you can perform a search for a gif, the search query is executed and the corresponding gif data is retrieved. Clicking on the "Stickers" button returns the sticker data for the searched gif, while clicking on the "Gif" button retrieves the search value data. To navigate back to the home…

View on GitHub

Follow me

Enhancing Your Existing ReactJS Application with TypeScript and Absolute Imports

Willochs Ojigbo — Thu, 25 May 2023 00:04:03 +0000

Introduction

It becomes increasingly important to implement new tools and practices as your ReactJS application becomes more complicated in order to enhance the quality and maintainability of the code. Static typing and cutting-edge tooling are features of TypeScript, a typed superset of JavaScript that can increase developer productivity. This post will walk you through setting up absolute imports for a simpler import syntax and integrating TypeScript into your currently running ReactJS application.

Prerequisites

Before we get started, ensure that you have Node.js and npm (Node Package Manager) installed on your machine. Additionally, make sure you have an existing ReactJS application ready for TypeScript integration.

Step 1: Create a ReactJS Application

If you haven't already created a ReactJS application, you can use a tool like Create React App to set up a new project. Open your terminal and run the following command:

npx create-react-app my-app

This will create a new ReactJS project in a directory named my-app.

Step 2: Install TypeScript

Once your ReactJS project is set up, navigate to the project's root directory using the terminal:

cd my-app

To install TypeScript, run the following command:

npm install --save typescript

This will install TypeScript as a project dependency.

Step 3: Configuration

Next, you need to configure TypeScript for your project. In the project's root directory, create a new file named tsconfig.json. Copy and paste the following code into tsconfig.json:

{
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "@components/*": ["components/*"],
      "@layouts/*": ["layouts/*"],
      "@pages/*": ["pages/*"]
    },
    "target": "ESNext",
    "useDefineForClassFields": true,
    "lib": ["DOM", "DOM.Iterable", "ESNext"],
    "allowJs": false,
    "skipLibCheck": true,
    "esModuleInterop": false,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "preserve"
  },
  "include": ["src"]
}

Step 4: Rename Files

To allow TypeScript to recognize your existing JavaScript files, you need to rename them to use the .tsx file extension. For example, if you have a src/App.js file, rename it to src/App.tsx. This step is necessary for TypeScript to analyze and type-check your React components.

Step 5: Start the Development Server

Now, you can start the development server and begin working with TypeScript in your ReactJS application. Run the following command in the project's root directory:

npm start

With TypeScript and the tsconfig.json file set up, you can take advantage of absolute imports to simplify your import statements. Instead of using relative paths like "../../components/Button", you can use aliases defined in the tsconfig.json file.

import React from 'react';
import Button from 'components/Button';
import HomePage from 'pages/HomePage';
import Layout from 'layouts/Header';

const App = () => {
  return (
    <div>
      <Header />
      <HomePage />
      <Button />
    </div>
  );
}

export default App;

Styled Components and SCSS Which One Should You Use?

Willochs Ojigbo — Tue, 02 May 2023 12:13:00 +0000

Introduction

If you're building a project with TypeScript and want to use CSS, there are two main options:

Styled-Components
SCSS

I have been devoting the past few months to creating a brand-new app, giving it my all. I understood from the start that selecting the best styling library would be essential to the project's success.

I devoted several hours to investigating various possibilities and assessing their advantages and disadvantages. I was looking for a library that would give me the flexibility and control to create unique, visually stunning designs, without sacrificing performance or ease of use.

I chose Styled Components after giving it great thought and conducting research. Given its sizeable and vibrant community, excellent support for React and Typescript, and cutting-edge optimization tools, it seemed like the best option. I jumped right into coding when everything seemed to be going well.

Everything was going well for a while. However, as the app expanded and as I concentrated on delivering features, I started to notice some problems with styled components. The library didn't seem to be as adaptable as I had planned, and some of its peculiarities were giving me trouble.

Debugging was a bit more challenging, as it wasn't always clear what CSS rules were being applied where. And as with any new tool, there was a bit of a learning curve to get up to speed.

I made the decision to transition to using SCSS for styling in order to address these problems. With SCSS, I can name and organize my CSS code according to the BEM (Block Element Modifier) methodology, which makes it much simpler to debug and maintain. In comparison to Styled Components, SCSS provides more flexibility and dynamic styling options. Although setup and configuration might be slightly more involved, I think using SCSS will ultimately result in a better finished product of the application.

What is Styled-Component?

Styled-components are a CSS alternative to React components. They allow you to write your styles in JavaScript, which can be easier than writing them in SCSS or Less (a popular alternative).

Styled-components also have some benefits over SCSS:

They're faster because they don't have to compile into CSS before being used on the page. The browser can just render them out as plain old HTML tags and style them directly with JavaScript. This makes them great for prototyping and building fast prototypes!
You don't need any preprocessors like Sass or Less either - just plain old CSS will do fine here because it's all written in JavaScript anyway!

The Pros of Styled-Components

Styled-Components are a relatively new framework that allows you to style your React components using CSS syntax. The pros of using Styled-Components include:

Type safety: One of the biggest benefits of using Styled Components with TypeScript is the ability to ensure type safety in your CSS. TypeScript enables developers to define specific types for each of their styled components, which can help catch errors early in the development process.
Theming: Styled Components makes it easy to create themable components. You can define your theme variables and then use them throughout your components, making it easy to change the look and feel of your application with minimal code changes.
They're easier to read and write
You don't need to use classes anymore (which can be confusing)
It works with React, Vue and other frameworks

The Cons of Styled-Components

There are a few cons to using styled-components. First, it's harder to debug because you can't easily inspect the CSS code. Second, it requires more setup and configuration than SCSS does. Finally, not all browsers support CSS modules yet (but they will soon).


import * as React from "react";
import {
  SignUpFormFields,
  SignUpFormContainer,
  FormContainer,
} from "./SignUpForm.styled";

interface SignUpFormProps {}

export const SignUpForm: React.FunctionComponent<SignUpFormProps> = (props) => {
  return (
    <FormContainer>
      <SignUpFormContainer>
        <SignUpFormFields>
          <h2>Sign up and start learning</h2>
        </SignUpFormFields>
      </SignUpFormContainer>
    </FormContainer>
  );
};

Difficulty to inspect the CSS code as seen in the figure below:

If we have several lines of styling in our SignUpForm.styled.tsx file, such as the example below which applies styles to the SignUpForm component:

import styled from "styled-components";

export const FormContainer = styled.div`
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 400;
  line-height: 1.4;
  font-size: 16px;
  color: #1c1d1f;
  margin: 0;
  padding: 0;
  flex: 1 0 auto;
  width: 100%;
`;

export const SignUpFormContainer = styled.div`
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 400;
  line-height: 1.4;
  font-size: 16px;
  color: #1c1d1f;
  margin: 0;
  padding: 0;
  width: 100%;
`;

export const SignUpFormFields = styled.div`
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  font-weight: 400;
  line-height: 1.4;
  font-size: 16px;
  color: #1c1d1f;
  padding: 0;
  width: 100%;
  padding-right: 24px;
  padding-left: 24px;
  max-width: 400px;
  margin: 48px auto;
`;

When you inspect a component in the React DevTools, it is helpful to see the component's display name in the tree. By default, styled components are given a generated display name based on their component hierarchy, which may not be very informative. By setting a custom display name, you can make it easier to identify the component when debugging or profiling your application.

import styled from "styled-components";

export const FormContainer = styled.div`
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 400;
  line-height: 1.4;
  font-size: 16px;
  color: #1c1d1f;
  margin: 0;
  padding: 0;
  flex: 1 0 auto;
  width: 100%;
`;

FormContainer.displayName = "MyStyledComponentFormContainer";

In the example provided above, the display name of the FormContainer component is set to 'MyStyledComponentFormContainer'. This means that when you inspect this component in the React DevTools, it will be identified by this name instead of the default generated name.

What is SCSS?

The preprocessor scripting language called Sassy Cascading Style Sheets, or SCSS, is used to create CSS stylesheets. Variables, nesting, mixins, functions, and more are all added by SCSS to CSS as more features and abilities.

Standard CSS files are created from SCSS files, which are subsequently used in the creation of websites. The use of SCSS can provide developers more control over the styling of a web page or application and make creating and maintaining stylesheets easier and more effective. React, Angular, and Vue.js are a few examples of web development frameworks that use it frequently.

Pros of SCSS

Easier debugging: Because they're compiled into regular CSS at build time, using SCSS allows you to take advantage of all the features that come with preprocessors like variables (to keep track of colors), nesting (to organize your code), mixins (to reuse common styles) and more!
Familiar syntax: If you're already familiar with CSS, then the SCSS syntax should be relatively easy to pick up. This means you can start using SCSS right away without having to learn a new syntax.
Performance: Unlike Styled Components, SCSS is precompiled, which means that your CSS is generated at build time instead of runtime. This can offer better performance and a smaller bundle size.

Cons of SCSS

No support for dynamic styling
Less flexibility
More complex code and Less readability: With advanced features like mixins, functions, and nesting, SCSS code can sometimes become difficult to read and understand, especially for new developers.
Limited theming: While it is possible to create themable components with SCSS, it may require more effort and setup than it does with Styled Components.

Which One Should You Use?

When deciding which one to use, consider the requirements of your project. For example, if you're working on a large-scale application that needs to scale and be maintainable, then SCSS would be a better choice because it's more mature and has been around for longer. It has a larger community, which means it has a more extensive set of features, tools, and documentation.

for example as seen the SearchInput component below:


import React, { useState } from 'react';
import './SearchInput.scss';
import SearchIcon from '@mui/icons-material/Search';

interface SearchInputProps {
  onSubmit: (searchQuery: string) => void;
}

export default function SearchInput({ onSubmit }: SearchInputProps) {
  const [searchQuery, setSearchQuery] = useState('');

  const onSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setSearchQuery(e.target.value);
  };

  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    if (!disableSearchButton) {
      onSubmit(searchQuery);
    }
  };

  const disableSearchButton: boolean = !searchQuery.length;

  return (
    <div className='search'>
      <form className='search__form' onSubmit={handleSubmit}>
        <button className='search__button' disabled={disableSearchButton}>
          <SearchIcon className='search__icon' />
        </button>
        <input
          placeholder='Search for anything'
          className='search__input'
          value={searchQuery}
          onChange={onSearchChange}
        />
      </form>
    </div>
  );
}

SearchInputProps.scss

.search {
  height: 48px;
  width: 100%;
  margin: 0 1.2rem;
  border-radius: 9999px;
  border: 1px solid #1c1d1f;
  background-color: #f7f9fa;
  &__form {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 0 2.4rem 0 0;
  }

  &__button {
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
    background: none;
    height: 4.8rem;
    width: 4.8rem;
    cursor: pointer;

    &:hover:disabled {
      cursor: not-allowed;
    }
  }

  &__icon {
    height: 1rem;
    width: 1rem;
    color: #9b9d9e;
  }

  &__input {
    height: 34px;
    background-color: #f7f9fa;
    border: none;
    width: 100%;
    font-size: 14px;
    &:focus {
      outline: none;
    }
  }
}

Using SCSS with BEM (Block Element Modifier) methodology can result in more organized and maintainable code. BEM is a naming convention for classes in HTML and CSS that provides a clear and consistent structure for styling. It can help developers avoid specificity issues and create modular and reusable code.

However, if you're starting a new project or working on a small project, you may want to consider using CSS-in-JS libraries like styled-components.

Master React and OMBD API: The Complete Guide to Building a Movie App

Willochs Ojigbo — Sat, 18 Mar 2023 12:18:41 +0000

Introduction
How to Get an API Key
How to Set Up a React Project
How to Safely Store API Keys using Environment Variables
How to Implement the 'Add to Favorites' and 'Remove from Favorites' Feature

Introduction

Developers can learn how to create a movie app by following the tutorial "Build A Fun Movie App using React and the OMBD API." Developers who wish to discover how to use APIs to construct web applications and fetch data will find this article to be a very useful resource.

The tutorial starts with setting up the development environment and creating a React project, then guides developers through each step of building a movie app. The next section describes how to retrieve movie data using the OMDb API and display it within the app.

The article also explains how to add further features to the app, such as movie search, movie details display, and adding a favorites list. The lesson is well-written, simple to follow, and contains code snippets and pictures to aid developers in understanding the topics. You'll make API requests and deal with the results received in this tutorial using the Axios library because Axios automatically converts JSON data into JavaScript objects and supports Promises, the resulting code is simpler to read and debug.

Additionally, this tutorial will cover how to secure your API key by storing it in an environmental variable and also saving favorites movie to local storage.

This is an illustration of how our project will be structured:

For developers who want to learn how to create web applications using React and APIs, this article is a great resource. It offers a useful illustration of how to retrieve movie data using the OMDb API, which may be used in other API-based projects.

How to Get an API Key

To get an API Key for the OMDb API, follow these steps:

Go to the OMDb API website at http://www.omdbapi.com/ and click on the "API Key" button in the top menu.
Fill out the required information in the form, including your name, email address, and the intended use of the API. Choose whether you are using the API for personal or commercial use.
After filling out the form, click on the "Submit" button to proceed.
You will receive an email from OMDb API with your API key. Keep your API key secure, as it is unique to your account and required to make API requests.
To use the API key, append it to the end of the API endpoint URL. For example, if your API key is "abcdefg12345", the URL to search for a movie would be: http://www.omdbapi.com/?s=movie%20title&apikey=abcdefg12345

Instead of using the "i" parameter to search for movies by their ID, we will replace it with the search "s" parameter. This will enable us to search for movies by title instead.

As demonstrated in the figure below using Postman (If you haven't downloaded it yet, you can download it here.).

How to Set Up a React Project

Type the following command in your terminal:



npx create-react-app metflix

This will create a new React project named "metflix" in the current directory.

Once the command finishes executing, navigate to the project directory by typing the following command:



cd metflix



npm i axios

Start the development server by running the following command:



npm start

Remove the default App.test.js, logo.svg, reportWebVitals.js, setUpTests.js and index.css you have already created.

Notice, you'll come across an error on your local server:

We will add a font CDN to the index.html file, you can use the following steps:

Open the index.html file in the public folder of your React project.
Look for the <head> section of the file.
Add the following code inside the <head> section:



 <!--DM FONTS-->
    <link
      href="https://fonts.googleapis.com/css2?family=DM+Sans&display=swap"
      rel="stylesheet"
    />

Navigate to App.js and add the following lines of code to App.js:



import "./App.css";
import NavBar from "./components/navbar/navBar";

const App = () => {
  return (
    <div className="App">
      <div className="movie-container">
        <NavBar />
      </div>
    </div>
  );
};

export default App;

Create a new directory named commons inside the components directory located in the src folder. Inside the commons directory, add two new files named 'input.js' and 'typography.js'.

Inside input.js add the following codes;



// passed   type, className, name, placeholder, onChange = () => {}, onBlur = () => {}, onFocus = () => {} as props.

const Input = ({
  type,
  className,
  name,
  placeholder,
  onChange = () => {},
  onBlur = () => {},
  onFocus = () => {},
  value,
}) => {
  return (
    <>
      <input
        type={type}
        className={className}
        name={name}
        placeholder={placeholder}
        required
        onChange={onChange}
        onBlur={onBlur}
        onFocus={onFocus}
        value={value}
      />
    </>
  );
};
export default Input;

Inside typography.js add the following codes;



// pass className, title as props

const Typography = ({ className, title }) => {
  return (
    <>
      <p className={className}>{title}</p>
    </>
  );
};

export default Typography;

Navigate to the components directory, and create a new subdirectory named navbar. Within the navbar directory, include two files: navBar.js and navBar.css.

Add the following codes to navBar.js;



import React from "react";
import "./navBar.css";
import Typography from "../commons/typography";
import SearchInput from "../search/searchInput";

const NavBar = ({ searchValue, setSearchValue }) => {
  return (
    <header>
      <div className="navbar">
        <div className="main-navigation-container">
          <Typography className="navbar-title" title="Metflix" />
        </div>
      </div>

      <div className="navigation-image-container">
        <div className="watch-something">
          <Typography className="movie-text" title="Watch something" />
          <Typography className="movie-text" title="incredible." />
        </div>
      </div>

      <SearchInput searchValue={searchValue} setSearchValue={setSearchValue} />
    </header>
  );
};

export default NavBar;

Inside navBar.css add the following styles:



.navbar {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 140px;
  width: 100%;
  color: #ffffff;
  background: #292929;
  position: absolute;
  top: 0;
  left: 0;
}

.main-navigation-container {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #ffffff;
  font-size: 16.001px;
  height: 60px;
  width: 193px;
  position: absolute;
  left: 77px;
  top: 40px;
  border-radius: 0px;
}

.navbar-title {
  font-size: 16.001px;
  color: #ffffff;
}

.navigation-image-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: white;
  height: 550px;
  width: 100%;
  position: absolute;
  left: 0px;
  top: 138px;
  background: url("https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lidwxp4yh2qttgw2eduv.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
}

.watch-something {
  display: flex;
  flex-direction: column;
  align-items: baseline;
  justify-content: center;
  height: 282px;
  width: 490px;
  position: absolute;
  left: 77px;
  top: 109px;
}

.movie-text {
  color: #ffffff;
  font-family: DM Sans;
  font-size: 72px;
  font-weight: 700;
  line-height: 94px;
  letter-spacing: -0.05em;
  text-align: left;
}

/* Media Query iPad Pro 11 */
@media screen and (max-width: 834px) {
  .navbar {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 140px;
    width: 100%;
    color: #ffffff;
    background: #292929;
    position: absolute;
    top: 0;
    left: 0;
  }

  .main-navigation-container {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #ffffff;
    font-size: 16.001px;
    height: 60px;
    width: 193px;
    position: absolute;
    left: 321px;
    top: 40px;
    border-radius: 0px;
  }

  .navbar-title {
    font-size: 16.001px;
    color: #ffffff;
  }

  .navigation-image-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    height: 550px;
    width: 100%;
    position: absolute;
    left: 0px;
    top: 138px;
    background: url("https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lidwxp4yh2qttgw2eduv.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
  }

  .watch-something {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 282px;
    width: 490px;
    position: absolute;
    left: 172px;
    top: 109px;
  }

  .movie-text {
    color: #ffffff;
    font-family: DM Sans;
    font-size: 72px;
    font-weight: 700;
    line-height: 94px;
    letter-spacing: -0.05em;
    text-align: center;
  }
}

/* Media Query Mobile Devices */
@media only screen and (min-width: 321px) and (max-width: 679px) {
  .navbar {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 67px;
    width: 100%;
    color: #ffffff;
    background: #292929;
    position: absolute;
    top: 0;
    left: 0;
  }

  .main-navigation-container {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #ffffff;
    font-size: 16.001px;
    height: 33.58px;
    width: 108px;
    position: absolute;
    left: 107px;
    top: 16px;
    border-radius: 0px;
  }

  .navbar-title {
    font-size: 16.001px;
    color: #ffffff;
  }

  .navigation-image-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    height: 257px;
    width: 100%;
    position: absolute;
    left: 0px;
    top: 67px;
    background: url("https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lidwxp4yh2qttgw2eduv.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
  }

  .watch-something {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 72px;
    width: 273px;
    position: absolute;
    left: 23px;
    top: 98px;
  }

  .movie-text {
    color: #ffffff;
    font-family: DM Sans;
    font-size: 28px;
    font-weight: 700;
    line-height: 36.46px;
    letter-spacing: -0.05em;
    text-align: center;
  }
}

We will create a search input that will enable us to implement our search functionality. In order to do this, we must first make a brand-new subdirectory called search in the components folder. We will add two new files called searchInput.js and searchInput.css to the search folder.

Open the searchInput.js and add the following lines of code:



import Input from "../commons/input";
import "./searchInput.css";

const SearchInput = ({ searchValue, setSearchValue }) => {
  return (
    <div className="searchbar-container">
      <label id="search-label" htmlFor="search">
        Search
      </label>

      {/* The setSearchValue function updates the state of the component by setting the value of searchValue to the value of the search input field   */}
      <Input
        className="search-input"
        value={searchValue}
        onChange={(event) => setSearchValue(event.target.value)}
        placeholder="type to search..."
      />
    </div>
  );
};

export default SearchInput;

Inside searchInput.css add:



.searchbar-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 0px;
  width: 90.6944444444%;
  height: 89px;
  gap: 4px;
  position: absolute;
  top: 751px;
  left: 77px;
}

#search-label {
  display: flex;
  align-items: center;
  font-family: DM Sans;
  font-size: 24px;
  font-weight: 400;
  line-height: 31px;
  letter-spacing: 0em;
  text-align: left;
}

.search-input {
  display: flex;
  width: 100%;
  height: 54px;
  border: 1px solid #000000;
  outline: 0;
  flex: none;
  order: 1;
  flex-grow: 0;
  padding-left: 12px;
}

::placeholder {
  font-size: 16px;
  font-style: italic;
  text-transform: none;
}

/* Media Query iPad Pro 11 */

@media screen and (max-width: 834px) {
  .searchbar-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 0px;
    height: 89px;
    width: 81.5347721823%;
    gap: 4px;
    position: absolute;
    left: 77px;
    top: 751px;
    border-radius: 0px;
  }

  #search-label {
    display: flex;
    align-items: center;
    font-family: DM Sans;
    font-size: 24px;
    font-weight: 400;
    line-height: 31px;
    letter-spacing: 0em;
    text-align: left;
  }

  .search-input {
    display: flex;
    box-sizing: border-box;
    height: 54px;
    width: 100%;
    border: 1px solid #000000;
    outline: 0;
    flex: none;
    order: 1;
    flex-grow: 0;
    padding-left: 8px;
  }

  ::placeholder {
    font-style: italic;
    text-transform: none;
  }
}

/* Media Query Mobile Devices */

@media only screen and (min-width: 321px) and (max-width: 679px) {
  .searchbar-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 0px;
    width: 82.554517134%;
    height: 59px;
    gap: 4px;
    position: absolute;
    top: 380px;
    left: 28px;
  }

  #search-label {
    display: flex;
    align-items: center;
    font-size: 16px;
    font-weight: 400;
    line-height: 21px;
    letter-spacing: 0em;
    text-align: left;
  }

  .search-input {
    display: flex;
    box-sizing: border-box;
    width: 100%;
    height: 34px;
    border: 1px solid #000000;
    outline: 0;
    flex: none;
    order: 1;
    flex-grow: 0;
    padding-left: 8px;
  }

  ::placeholder {
    font-style: italic;
    text-transform: none;
  }
}

How to Safely Store API Keys using Environment Variables

Avoid hardcoding your API key in your code or any configuration files that could be accessed by others if you want to hide it in a React project. Instead, you can keep your API key in environment variables.

Create a new file called .env in the root of your project. This file should contain your API key like this:



REACT_APP_API_KEY = your-api-key-goes-here



const apiKey = process.env.REACT_APP_API_KEY;

Navigate to App.js where we will make use of this environment variable REACT_APP_API_KEY:



import { useEffect, useState } from "react";
import "./App.css";
import Typography from "./components/commons/typography";
import MovieCard from "./components/movies/movieCard";
import NavBar from "./components/navbar/navBar";
import axios from "axios";

const App = () => {
  const [movies, setMovies] = useState([]);
  const [searchValue, setSearchValue] = useState("");

  useEffect(() => {
    const fetchMovies = async () => {
      // GET request to the OMDB API using the Axios library
      // searchValue is a variable that holds the user's search input
      // The await keyword is used to wait for the response from the API before assigning it to the data variable.
      // Acess the api variable using process.env.REACT_APP_API_KEY
      const { data } = await axios.get(
        `http://www.omdbapi.com/?s=${searchValue}&apikey=${process.env.REACT_APP_API_KEY}`
      );

      // Checks the if the data object that was returned from the OMDB API request contains a property called Search.
      // If data.Search exists it means the response was successful, setMovies updates the movie state variable with the new search value
      if (data.Search) {
        setMovies(data.Search);
      }
    };

    fetchMovies(searchValue);
  }, [searchValue]);

  return (
    <div className="App">
      <div className="movie-container">
        <NavBar searchValue={searchValue} setSearchValue={setSearchValue} />

        <div className="movie-set">
          <div id="movie-category-container">
            <Typography className="movie-category" title="Top Movies" />
          </div>

          <MovieCard movies={movies} setMovies={setMovies} />
        </div>
      </div>
    </div>
  );
};

export default App;

How to Implement the 'Add to Favorites' and 'Remove from Favorites' Feature

We'll build a favorites component and give it as a prop to the MovieCard component. The favorites component will then appear as an overlay on the MovieCard. This feature will probably include the user viewing or adding movies to their favorites list.

Create a new folder in the components folder called favorites inside it create favoriteButton.js and favoriteButton.css

Inside favoriteButton.js add the following:



import React from "react";
import "./favoriteButton.css";

export const AddFavorite = () => {
  return (
    <>
      <svg
        className="heart-icon"
        width="40px"
        height="40px"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M927.4 273.5v-95.4h-87.9V82.8h-201v95.3h-87.9v95.4h-78.5v-95.4h-88V82.8H183.2v95.3H95.3v95.4H16.7v190.6h78.6v95.4h75.3v95.3H246v95.3h87.9v95.4h100.5v95.3h153.9v-95.3h100.4v-95.4h88v-95.3H852.1v-95.3h75.3v-95.4h78.5V273.5z"
          fill="#E02D2D"
        />
      </svg>
    </>
  );
};

export const RemoveFavorite = () => {
  return (
    <>
      <svg
        className="close-icon"
        width="40px"
        height="40px"
        viewBox="0 0 24 24"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          fillRule="evenodd"
          clipRule="evenodd"
          d="M5.29289 5.29289C5.68342 4.90237 6.31658 4.90237 6.70711 5.29289L12 10.5858L17.2929 5.29289C17.6834 4.90237 18.3166 4.90237 18.7071 5.29289C19.0976 5.68342 19.0976 6.31658 18.7071 6.70711L13.4142 12L18.7071 17.2929C19.0976 17.6834 19.0976 18.3166 18.7071 18.7071C18.3166 19.0976 17.6834 19.0976 17.2929 18.7071L12 13.4142L6.70711 18.7071C6.31658 19.0976 5.68342 19.0976 5.29289 18.7071C4.90237 18.3166 4.90237 17.6834 5.29289 17.2929L10.5858 12L5.29289 6.70711C4.90237 6.31658 4.90237 5.68342 5.29289 5.29289Z"
          fill="#0F1729"
        />
      </svg>
    </>
  );
};

Inside favoriteButton.css add these styles:



.heart-icon {
  width: 40px;
  height: 40px;
}

.close-icon {
  width: 40px;
  height: 40px;
  background-color: white;
}

@media screen and (max-width: 834px) {
  .heart-icon {
    width: 40px;
    height: 40px;
  }

  .close-icon {
    width: 40px;
    height: 40px;
  }
}

@media only screen and (min-width: 321px) and (max-width: 679px) {
  .heart-icon {
    width: 20px;
    height: 20px;
  }

  .close-icon {
    width: 20px;
    height: 20px;
    background-color: white;
  }
}

Navigate to the components directory in your project. Create a new folder called movies inside the components directory. Inside the movies folder, create two new files: movieCard.js and movieCard.css.

Add the following lines of code to movieCard.js:



import "./movieCard.css";

const MovieCard = ({
  movies,
  handleFavorite,
  favouriteMovie: FavouriteMovie,
}) => {
  return (
    <div className="movie-row-container">
      {movies?.map(
        (movie) =>
          // using regex to check if the Poster property of a movie object is an image file (JPEG, JPG, GIF or PNG format).
          movie.Poster.match(/\.(jpeg|jpg|gif|png)$/) != null && (
            <div className="movie-frame" key={movie.imdbID}>
              <img className="movie-image" src={movie.Poster} alt="movie" />
              <p className="movie-header">{movie.Type}</p>

              <div
                className="overlay-container"
                onClick={() => handleFavorite(movie)}
              >
                <FavouriteMovie />
              </div>
            </div>
          )
      )}
    </div>
  );
};

export default MovieCard;

Add the following lines of styles to movieCard.css:



.movie-row-container {
  display: flex;
  align-items: flex-start;
  height: 300px;
  width: 1552px;
  position: absolute;
  top: 49px;
  left: 0;
  padding: 0;
  gap: 13px;
  overflow-x: scroll;
  overflow-y: hidden;
}

.movie-row-container::-webkit-scrollbar {
  display: none;
}

.movie-frame {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 300px;
  width: 300px;
  border-radius: 12px;
  gap: 10px;
  position: relative;
  cursor: pointer;
  transition: transform 0.2s;
}

.movie-frame:hover {
  cursor: pointer;
  transform: scale(0.95);
}

.movie-image {
  width: 300px;
  height: 300px;
  border-radius: 12px;
}

.movie-header {
  color: #000000;
  font-weight: 400;
  font-size: 24px;
  position: absolute;
  left: 10px;
  top: 10px;
}

.movie-frame:hover .overlay-container {
  opacity: 1;
}

.overlay-container {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  background: rgba(0, 0, 0, 0.8);
  width: 100%;
  transition: 0.5s ease;
  opacity: 0;
  bottom: 0;
  font-size: 20px;
  padding: 20px;
  text-align: center;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
}

/* Media Query iPad Pro 11 */
@media screen and (max-width: 834px) {
  .movie-row-container {
    display: flex;
    align-items: flex-start;
    height: 300px;
    width: 1552px;
    position: absolute;
    top: 49px;
    left: 0;
    padding: 0;
    gap: 13px;
    overflow-x: scroll;
    overflow-y: hidden;
  }
}

/* Media Query Mobile Devices */
@media only screen and (min-width: 321px) and (max-width: 679px) {
  .movie-row-container {
    display: flex;
    align-items: flex-start;
    height: 200px;
    width: 626px;
    position: absolute;
    top: 49px;
    left: 0;
    padding: 0;
    gap: 13px;
    overflow-x: scroll;
    overflow-y: hidden;
  }

  .movie-frame {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: 200px;
    width: 200px;
    border-radius: 12px;
    gap: 10px;
    position: relative;
    cursor: pointer;
  }

  .movie-image {
    width: 200px;
    height: 200px;
    border-radius: 12px;
  }

  .overlay-container {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    background: rgba(0, 0, 0, 0.8);
    width: 100%;
    transition: 0.5s ease;
    opacity: 0;
    bottom: 0;
    font-size: 20px;
    padding: 10px;
    text-align: center;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
  }
}

Modify your App.js file by adding the following code snippet to it:



import { useEffect, useState } from "react";
import "./App.css";
import {
  AddFavorite,
  RemoveFavorite,
} from "./components/favorites/favoriteButton";
import Typography from "./components/commons/typography";
import MovieCard from "./components/movies/movieCard";
import NavBar from "./components/navbar/navBar";
import axios from "axios";

const App = () => {
  const [movies, setMovies] = useState([]);
  const [searchValue, setSearchValue] = useState("");
  const [favorites, setFavorites] = useState([]);

  useEffect(() => {
    const fetchMovies = async () => {
      // GET request to the OMDB API using the Axios library
      // searchValue is a variable that holds the user's search input
      // The await keyword is used to wait for the response from the API before assigning it to the data variable.
      // Acess the api variable using process.env.REACT_APP_API_KEY
      const { data } = await axios.get(
        `http://www.omdbapi.com/?s=${searchValue}&apikey=${process.env.REACT_APP_API_KEY}`
      );

      // Checks the if the data object that was returned from the OMDB API request contains a property called Search.
      // If data.Search exists it means the response was successful, setMovies updates the movie state variable with the new search value
      if (data.Search) {
        setMovies(data.Search);
      }
    };

    fetchMovies(searchValue);
  }, [searchValue]);

  // The localStorage is queried for an item with the key "react-movie-app", which contain a stringified JSON object of the updated favorites. This value is parsed and then used to update the favorites state using the setFavorites function.

  useEffect(() => {
    const updatedFavorites = JSON.parse(
      localStorage.getItem("react-movie-app")
    );

    setFavorites(updatedFavorites);
  }, []);

  const saveToLocalStorage = (items) => {
    localStorage.setItem("react-movie-app", JSON.stringify(items));
  };

  const addFavoriteMovie = (movie) => {
    // Use the || operator to ensure that favorites is not undefined before creating the new copy
    const newFavorites = [...(favorites || [])];
    // add movie to favorites array using push method
    newFavorites?.push(movie);
    // set the updated favorites array state
    setFavorites(newFavorites);
    saveToLocalStorage(newFavorites);
  };

  const removeFavoriteMovie = (movie) => {
    const existingFavorites = favorites.filter(
      (favorite) => favorite.imdbID !== movie.imdbID
    );
    setFavorites(existingFavorites);
    saveToLocalStorage(existingFavorites);
  };

  return (
    <div className="App">
      <div className="movie-container">
        <NavBar searchValue={searchValue} setSearchValue={setSearchValue} />

        <div className="movie-set">
          <div id="movie-category-container">
            <Typography className="movie-category" title="Top Movies" />
          </div>

          <MovieCard
            movies={movies}
            setMovies={setMovies}
            favouriteMovie={AddFavorite}
            handleFavorite={addFavoriteMovie}
          />
        </div>

        <div className="favorite-movie-set">
          <div id="movie-category-container">
            <Typography className="movie-category" title="My Favorites" />
          </div>

          <MovieCard
            movies={favorites}
            favouriteMovie={RemoveFavorite}
            handleFavorite={removeFavoriteMovie}
          />
        </div>
      </div>
    </div>
  );
};

export default App;

How To Use Styled-Components In React

Willochs Ojigbo — Thu, 02 Feb 2023 14:59:36 +0000

Introduction

Styled Components is a library for building HTML components with CSS classes, designed for use with React. It provides dynamic styling options and automatically updates styles for ease of use. The library allows for writing React components using both HTML5 and CSS, and generates CSS for improved app performance. Styles are defined in CSS and applied to elements in the application using JavaScript.

Benefits of Styled Components:

CSS syntax remains unchanged, even when writing in a JS file.
Improved performance with automatic addition of vendor prefixes.
Unused CSS and styling is automatically removed.
No need to manage CSS class naming methodology, as class names are generated automatically.

Styled components are easily integrated into a React architecture. This article explores how styled components offer a declarative approach to styling components in a React music application, reducing the need for extensive CSS writing.

We are basically going to build the following project:

Setting Up a React Environment:

If you have npx and Node.js installed, use create-react-app to create a React application.
If not, visit Node.js to download the recommended version.
To check Node installation, open terminal/command prompt and run "node -v" and "npm -v" to see the versions.



<!-- Run the command below to create a React application named my-react-music-app: -->

npx create-react-app moove

// The create-react-app will set up everything you need to run a React application.

<!-- Run the React Application: -->

// Now you are ready to run your first real React application!

// Run this command to move to the my-react-music-app directory:

cd moove

<!-- Run this command to run the React application moove: -->

npm start

Getting started

Installation:

To install styled-components, follow these steps:

Open a new terminal tab in Visual Studio Code.
Run the following command:



npm install styled-components

Project Structure should look like the following once our project files have been created and our dependencies have been installed:

Remove the default App.test.js, logo.svg, reportWebVitals.js, setUpTests.js along with App.css and index.css you have already created.

Notice, you'll come across an error on your local server:

Navigate to App.js and remove the logo.svg and App.css.

Your first styled component

Open App.js, delete everything, and replace it with the following:



const App = () => {
  return <div className="container">hello styled component</div>;
};

export default App;

Components are a new way of building web apps that harnesses the power of CSS and JavaScript.

Styling in JSX often involves adding classes using className. For example, you might have a "container" class in a CSS file to center content within a specific width. With style components, you can use a component called "Container" as a wrapper for other components, enabling nested components to have different styles.

For example, you can create a new styled component by calling the styled() function and passing in the type of HTML element you want to style as seen below;



import styled from 'styled-components';

const StyledButton = styled.button`
  background-color: blue;
  color: white;
  font-size: 16px;
  padding: 10px 20px;
  border: none;
  &:hover {
    background-color: darkblue;
  }
`;

In this example, StyledButton is a new component that can be used just like a regular HTML button, but with the added styles.

To use the StyledButton component, you can simply import it and use it in your JSX code, like so:



import StyledButton from './StyledButton';

function MyComponent() {
  return <StyledButton>Click me</StyledButton>;
}

Go to the App.js file in our project's directory;



import React from "react";

const App = () => {
  return <Container></Container>;
};

export default App;

The app will fail due to the "Container" component being undefined. To resolve this issue:

Create a new folder named styles within the components folder in the src directory.
Store all style components in the styles folder.
Keep all other React components in the original components folder.

In the styles folder, create a new file named container.styled.js and include the following code in your file.



import styled from "styled-components";

export const Container = styled.div`
  width: 100%;
  max-width: 428px;
  margin: 0 auto;
  height: 926px;
  background-color: #000000;
  overflow: hidden;
`;

We will add a ThemeProvider that provides a theme object to the component, you can wrap your component tree with the ThemeProvider component and pass a theme object as a prop to it.

Here's an example in App.js code:



import React from "react";
import { ThemeProvider } from "styled-components";
import { Container } from "./components/styles/Container.styled";

const theme = {
  colors: {
    header: "#0F0F0F",
    text: "#ffffff",
    body: "#000000",
  },
};

const App = () => {
  return (
<!-- pass a theme object as a prop  -->
    <ThemeProvider theme={theme}>
      <Container></Container>
    </ThemeProvider>
  );
};

export default App;

Create a file Header.js in the component folder and add the code.



import { Logo, Nav, StyledHeader } from "./styles/Header.styled";

const Header = () => {
  return (
    <StyledHeader>
      <Nav>
        <Logo
          src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q2xma02eslsv9bfw0ivl.png"
          alt="profile image"
        />
      </Nav>
    </StyledHeader>
  );
};

export default Header;

Create a file Header.styled.js in the styles folder and add:



import styled from "styled-components";

export const StyledHeader = styled.header`
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 428px;
  height: 83px;
  margin: 0 auto;
  position: relative;
<!-- passing theme as a prop to both color and background -->
  color: ${({ theme }) => theme.colors.text};
  background-color: ${({ theme }) => theme.colors.header};
`;

export const Nav = styled.nav`
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  height: 100%;
`;

export const Logo = styled.img`
  position: absolute;
  height: 49px;
  width: 49px;
  left: 23px;
  top: 21px;
  cursor: pointer;
`;

We'll create a file Global.styled.js in the the styles folder using the createGlobalStyle function from the styled-components library. This function creates a component that holds the global styles and can be used in the same way as any other styled component.

Here's an example in code:



import { createGlobalStyle } from "styled-components";

const GlobalStyles = createGlobalStyle`

*,
*:before,
*:after {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body {
    margin: 0;
    padding: 0;
    font-family: "Bw Modelica", sans-serif;
    background-color: ${({ theme }) => theme.colors.text};
    position: relative;
  }

  body::-webkit-scrollbar {
    display: none;
  }
`;

export default GlobalStyles;

Update App.js with the following:



import React from "react";
import { ThemeProvider } from "styled-components";
import ArtistCard from "./components/ArtistCard";
import { Container } from "./components/styles/Container.styled";
import Header from "./components/Header";
import GlobalStyles from "./components/styles/Global.styled";

const theme = {
  colors: {
    header: "#0F0F0F",
    text: "#ffffff",
    body: "#000000",
  },
};

const App = () => {
  return (
    <ThemeProvider theme={theme}>
      <>
        <GlobalStyles />
        <Container>
          <Header />
          <ArtistCard />
        </Container>
      </>
    </ThemeProvider>
  );
};

export default App;

Create a file ArtistCard.js in the components folder and add the following:



import React from "react";
import FooterStyled from "./Footer";
import {
  AppMusicCard,
  BillboardBanner,
  BurnaCard,
  LojayCard,
  ThirdBurnaCard,
  SubTitle,
  Title,
  SecondBurnaCard,
  SecondLojayCard,
  FourthBurnaCard,
  Text,
  SubText,
  BurnaTitle,
  LojayTitle,
  BurnaContent,
  LojayContent,
  ThirdBurnaTitle,
  SecondLojayTitle,
  Footer,
} from "./styles/ArtistCard.styled";

const ArtistCard = () => {
  const cards = [
    {
      title: "Daily Vibes 1",
      content: "Burna Boy, Oxlade, Davido, Tems Wizkid, Tiwa Savage.....",
      img: "https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pbyam0bxypq2jrnhyzba.png",
    },
    {
      title: "Daily Vibes 2",
      content: "Lojay, Oxlade, Amaa Rae, Rema, Omah Lay, SGawd....",
      img: "https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2tagaz26am1hu1gfjqze.png",
    },
  ];

  const images = [
    {
      img: "https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j140tnn7wsj1si27yc6q.png",
    },

    {
      img: "https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dttp4dzeir0y4untl32p.png",
    },

    {
      img: "https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vbv5masydlzzl02v4644.png",
    },

    {
      img: "https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2t2relgj7l45burg2kps.png",
      dot: "https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8d2zmv2d3kipklqu5ogk.png",
    },

    {
      img: "https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9ahn4iervude9qnjzcsa.png",
    },
  ];

  return (
    <AppMusicCard>
      <BillboardBanner></BillboardBanner>

      <Title>Welcome Back!</Title>
      <SubTitle>See more</SubTitle>

      <Text>Cheers to the Weekend</Text>
      <SubText>See more</SubText>
<!-- looping through the array using the map function -->
      {cards.map((_, index) => (
        <div key={index}>
          <BurnaCard src={cards[0].img} alt="" />
          <BurnaTitle>{cards[0].title}</BurnaTitle>
          <BurnaContent>{cards[0].content}</BurnaContent>

          <LojayCard src={cards[1].img} alt="" />
          <LojayTitle>{cards[1].title}</LojayTitle>
          <LojayContent>{cards[0].content}</LojayContent>

          <SecondBurnaCard src={cards[0].img} alt="" />

          <SecondLojayCard src={cards[1].img} alt="" />
          <ThirdBurnaCard src={cards[0].img} alt="" />

          <ThirdBurnaTitle>{cards[0].title}</ThirdBurnaTitle>

          <SecondLojayTitle>{cards[1].title}</SecondLojayTitle>

          <FourthBurnaCard src={cards[0].img} alt="" />
        </div>
      ))}

      <Footer>
        <FooterStyled images={images} />
      </Footer>
    </AppMusicCard>
  );
};

export default ArtistCard;

create ArtistCard.styled.js in the styles folder:



import styled from "styled-components";

export const AppMusicCard = styled.div`
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  color: ${({ theme }) => theme.colors.text};
  position: relative;
`;

export const BillboardBanner = styled.div`
  background-image: url("https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uml86l79tu7y0kyed1g8.png");
  position: absolute;
  height: 159px;
  width: 412px;
  left: 0px;
  top: 38px;
  cursor: pointer;
`;

export const Title = styled.div`
  position: absolute;
  width: 155px;
  left: 16px;
  top: 216px;
  font-style: normal;
  font-weight: 700;
  font-size: 20px;
  line-height: 24px;
  color: #ffffff;
`;

export const SubTitle = styled.div`
  position: absolute;
  right: 16px;
  top: 245px;
  font-size: 12px;
  font-weight: 400;
  line-height: 14px;
  letter-spacing: 0.04em;
  text-align: left;
  color: #d9d9d9e5;
  cursor: pointer;
`;

export const Text = styled.div`
  height: 17px;
  width: 167px;
  position: absolute;
  left: 15px;
  top: 536px;
  font-size: 14px;
  font-weight: 700;
  line-height: 17px;
  letter-spacing: 0em;
  text-align: left;
  color: ${({ theme }) => theme.colors.text};
`;

export const SubText = styled.div`
  position: absolute;
  right: 16px;
  top: 536px;
  font-size: 12px;
  font-weight: 400;
  line-height: 14px;
  letter-spacing: 0.04em;
  text-align: left;
  color: #d9d9d9e5;
  cursor: pointer;
`;

export const BurnaCard = styled.img`
  height: 228.0465545654297px;
  width: 181.1341094970703px;
  position: absolute;
  top: 278px;
  left: 15px;
  cursor: pointer;
`;

export const BurnaTitle = styled.p`
  position: absolute;
  left: 33px;
  top: 444px;
  width: 121px;
  font-size: 14px;
  font-weight: 700;
  line-height: 17px;
  letter-spacing: 0.04em;
  text-align: left;
  color: #ffffff;
`;

export const BurnaContent = styled.p`
  height: 21.603561401367188px;
  width: 142.42347717285156px;
  position: absolute;
  left: 35px;
  top: 467px;
  font-size: 8px;
  font-weight: 500;
  line-height: 10px;
  letter-spacing: 0.04em;
  text-align: left;
`;

export const LojayCard = styled.img`
  height: 228.0465545654297px;
  width: 181.1341094970703px;
  position: absolute;
  top: 278px;
  right: 30.87px;
  cursor: pointer;
`;

export const LojayTitle = styled.p`
  position: absolute;
  left: 233px;
  top: 444px;
  width: 121px;
  font-size: 14px;
  font-weight: 700;
  line-height: 17px;
  letter-spacing: 0.04em;
  text-align: left;
  color: #ffffff;
`;

export const LojayContent = styled.p`
  height: 21.603561401367188px;
  width: 142.42347717285156px;
  position: absolute;
  left: 233px;
  top: 467px;
  font-size: 8px;
  font-weight: 500;
  line-height: 10px;
  letter-spacing: 0.04em;
  text-align: left;
`;

export const SecondBurnaCard = styled.img`
  height: 228.0465545654297px;
  width: 181.1341094970703px;
  position: absolute;
  top: 279px;
  left: 410px;
  cursor: pointer;
`;

export const SecondLojayCard = styled.img`
  height: 228.0465545654297px;
  width: 181.1341094970703px;
  position: absolute;
  top: 570px;
  right: 30.87px;
  cursor: pointer;
`;

export const ThirdBurnaCard = styled.img`
  height: 228.0465545654297px;
  width: 181.1341094970703px;
  position: absolute;
  top: 570px;
  left: 15px;
  cursor: pointer;
`;

export const ThirdBurnaTitle = styled.p`
  position: absolute;
  left: 33px;
  top: 736px;
  width: 121px;
  font-size: 14px;
  font-weight: 700;
  line-height: 17px;
  letter-spacing: 0.04em;
  text-align: left;
  color: #ffffff;
  z-index: 1;
`;

export const SecondLojayTitle = styled.p`
  position: absolute;
  left: 233px;
  top: 736px;
  width: 121px;
  font-size: 14px;
  font-weight: 700;
  line-height: 17px;
  letter-spacing: 0.04em;
  text-align: left;
  color: #ffffff;
  z-index: 1;
`;

export const FourthBurnaCard = styled.img`
  height: 228.0465545654297px;
  width: 181.1341094970703px;
  position: absolute;
  top: 570px;
  left: 410px;
  cursor: pointer;
`;

//Footer Styles
export const Footer = styled.div`
  position: absolute;
  height: 92px;
  width: 428px;
  left: 0px;
  top: 751px;
  z-index: 1;
  background-color: ${({ theme }) => theme.colors.header};
`;

export const HomeIcon = styled.img`
  width: 25.155181884765625px;
  height: 29.4px;
  left: 44px;
  top: 871px;
  cursor: pointer;
  position: absolute;
  top: 37px;
  left: 44px;
  z-index: 1;
`;

export const EyeIcon = styled.img`
  width: 34.26810836791992px;
  position: absolute;
  top: 37px;
  left: 144px;
  cursor: pointer;
`;

export const LibraryIcon = styled.img`
  position: absolute;
  height: 28px;
  width: 28px;
  left: 253px;
  top: 37px;
  cursor: pointer;
`;

export const PlaylistIcon = styled.img`
  position: absolute;
  height: 28px;
  width: 28px;
  left: 356px;
  top: 37px;
  cursor: pointer;
`;

export const PlaylistDot = styled.img`
  width: 6.25px;
  position: absolute;
  left: 362.25px;
  top: 55.06px;
  cursor: pointer;
`;

export const FirstDrumIcon = styled.img`
  height: 85.95px;
  position: absolute;
  left: 0px;
  top: 5.21px;
  cursor: pointer;
  object-fit: contain;
`;

export const SecondDrumIcon = styled.img`
  height: 85.95px;
  position: absolute;
  left: 108.88px;
  top: 3.41px;
  cursor: pointer;
  z-index: -1;
`;

export const ThirdDrumIcon = styled.img`
  height: 85.95px;
  position: absolute;
  left: 213.33px;
  top: 1.46px;
  cursor: pointer;
  z-index: -1;
`;

export const FourthDrumIcon = styled.img`
  height: 85.95px;
  position: absolute;
  left: 320px;
  top: 1.46px;
  cursor: pointer;
`;

create a footer file in the component folder and add:



import React from "react";
import {
  EyeIcon,
  FirstDrumIcon,
  FourthDrumIcon,
  HomeIcon,
  LibraryIcon,
  PlaylistDot,
  PlaylistIcon,
  SecondDrumIcon,
  ThirdDrumIcon,
} from "./styles/ArtistCard.styled";

const FooterStyled = ({ images }) => {
  return (
    <>
      {images.map((_, index) => (
        <div key={index}>
          <HomeIcon src={images[0].img} alt="" />
          <EyeIcon src={images[1].img} alt="" />
          <LibraryIcon src={images[2].img} alt="" />
          <PlaylistIcon src={images[3].img} alt="" />
          <PlaylistDot src={images[3].dot} alt="" />
          <FirstDrumIcon src={images[4].img} alt="" />
          <SecondDrumIcon src={images[4].img} alt="" />
          <ThirdDrumIcon src={images[4].img} alt="" />
          <FourthDrumIcon src={images[4].img} alt="" />
        </div>
      ))}
    </>
  );
};

export default FooterStyled;

Infinite-Scroll And GitHub REST API

Willochs Ojigbo — Tue, 22 Nov 2022 21:45:29 +0000

Introduction
Retrieving Data Using GitHub REST APIs
Exploring The API With PostMan
Setting Up A React Project
Loading The Data
Creating Components
How to Add The Search Input
Implementing Loading Function and Infinite Scroll
Adding Cool Search Filter

Introduction

GitHub is a popular resource for developers to store and share their code. The REST APIs allow users to create, edit, and delete repositories using the HTTP protocol.

REST APIs are a type of software architecture that uses the HTTP protocol to communicate with an application. The application is referred to as a client and the REST API is the server.

REST APIs are most often used for web services. They are also commonly used in mobile applications, but they can be used in any application with a web browser interface.

In this tutorial, you'll learn about Infinite scroll, a useful UX technique in which content continually loads when a user reaches the bottom of the page. In addition to Infinite scroll, you’ll use the Axios library to make API requests and process the obtained results. Axios is a great fit because it automatically transforms JSON data into JavaScript objects, and it supports Promises, leading to code that’s easier to read and debug. You'll get from this article information about the underlying concepts of useEffect. We'll also learn how to use the GitHub REST API to load and extract data from the GitHub API.

To crown it all, we will learn advance search bar which filters through some data and displays the information in a really nice way. We could search for specific github users from the Github REST API.

In this Project:
We'll use the Github api Via the https://api.github.com/.

We'll implement the following:

Get a list of the most starred github repo that was created in the last 30 days.

We are going to show the Following fields in our display:

Repository name,
Repository description.
Number of stars for the repo.
Number of issues for the repo.
Username and avatar of the repo owner.
Implement data pagination with infinite scroll.

This is what we will build:

Shared album - Willochs Ojigbo - Google Photos

photos.google.com

Step 1 — Retrieving Data Using GitHub REST APIs?

GitHub REST API Documentation link: https://docs.github.com/en/rest/guides/getting-started-with-the-rest-api

Add the Base URL for the GitHub REST API, https://api.github.com/ to the path to get the full repository_search_url: https://api.github.com/search/repositories?q={query}&sort=stars&order=desc

Step 2 — Exploring The API With PostMan

To get the most starred Github repos created in the last 30 days (relative to 2021-09-13), we'll need to call the following endpoint:
https://api.github.com/search/repositories?q=created:>2021-08-13&sort=stars&order=desc/github

The greater than sign :>
created: YYYY-MM-DD created:>2021-08-13 matches repositories submitted 30 days ago that were created after 2021.

We're going to use Postman (download it here if you haven't gotten it) to play with the API.

Navigate into your Postman and paste in the Base URL. Click "send" and you should get some JSON back in the "body" section like so:

Step 3 — Setting Up A React Project

Ok with that out of the way, we can now see the step-by-step implementation to create a starred-repo-app in Reactjs.

If you are new to React and you want to explore the language features and syntax then Create React App is the best choice for creating a new React application. By far it is one of the best and most widely used ways of creating single page applications.

There are a couple of methods to create a new React app but you may choose: the npx method

npx comes with npm 5.2+ and higher, you can use the following command to create a new React project.

npx create-react-app starred-repo-app

Once we run this command, a folder named "starred-repo-app" will be created where we specified on our computer and all of the packages it requires will be automatically installed.

Navigate into your directory and enter your main folder starred-repos-app as:

cd starred-repos-app

Project Structure should look like the following once our project files have been created and our dependencies have been installed:

Remove the default App.test.js, logo.svg, reportWebVitals.js, setUpTests.js you have already created.

Notice, you'll come across an error on your local server:

A simple way to handle this error is basically to navigate to the index.js file and remove the index.css and reportWebVitals();

We are going to install React-icons which is a small library that helps you add icons (from all different icon libraries) to your React apps.

npm i react-icons

Next, we're going to add a Circular Progress Bar from Material UI which is a popular web widget that shows progress along a circle. We use it to implement the loading function.

npm install @mui/material @emotion/react @emotion/styled

When thats finished installing, we're going to add an Infinite Scroll Bar

An application that implements infinite scroll consists of a layout that allows users to keep consuming a certain amount of information without any pause, as the content is automatically loaded as the user scrolls.

There are a few different ways that you can implement infinite scroll in React.js. One way is to use a library like react-infinite-scroll-component. This library provides a component that will trigger an event when the user scrolls to the bottom of the page. You can then use this event to load more content.

To use react-infinite-scroll-component, you need to install it first using npm:

npm i react-infinite-scroll-component

Then, you can import it into your React component.

Thats all we need, so go ahead and run the app:

npm start

Step 4 — Loading The Data

We are going to make use of the useEffect Hook that allows us to perform side effects in our components.

Some examples of side effects are: fetching data, directly updating the DOM, and timers.

useEffect accepts two arguments, a function and a dependency array. The second argument is optional.

It is evident from the fact that we may sometimes in React applications need to get data from the external source. One way to make such data to be visible on our website is using Axios in retrieving the data thereby adding it to the state to facilitate the application whenever the requirement arises.

In our application, we'll need to run this command to install Axios.

npm install axios

At the heart of all React applications are components. A component is a self-contained module that renders some output. We are going to create interface elements like a button and an input field in our application.

Step 5 — Creating Components

We're going to create StarredUsers component to display the most starred Github repo that comes back in the search request.

Let's organize our project folders step by step:

Create a new folder named components inside the src folder.
Inside the components folder, make another folder called Commons. Inside Commons, create three files: Button.js, Icons.js, and Input.js.
Now, go back to the components folder and create a new folder named GithubStarredList. Inside this folder, add two files: GithubStarredList.js and GithubStarredList.css.
Inside the GithubStarredList folder, create another folder named GithubStarredUser. Inside it, add two files: GithubStarredUser.js and GithubStarredUser.css.

Open up Button.js and add the following:

// Here we passed in a custom className, title, type onClick as props

const Button = ({ className, title, type, onClick = () => {} }) => {
  return (
    <button className={className} type={type} onClick={onClick}>
      {title}
    </button>
  );
};

export default Button;

React components use props to communicate with each other. Every parent component can pass some information to its child components by giving them props.

Open up Icons.js and add the following:

//the prop icons was renamed to Icons to make it have a distinctive feature and easy to use.

const UserIcons = ({ icons: Icons, className, id, onClick = () => {} }) => {
  return (
//JavaScript Comparison using the && Operator (Logical AND)
    <>{Icons && <Icons className={className} id={id} onClick={onClick} />}</>
  );
};
export default UserIcons;

Open up Input.js and add the following:

const Input = ({
  type,
  className,
  name,
  placeholder,
  onChange = () => {},
  value,
}) => {
  return (
    <>
      <input
        type={type}
        className={className}
        name={name}
        placeholder={placeholder}
        required
        onChange={onChange}
        value={value}
      />
    </>
  );
};
export default Input;

Before we start working on our main component, app.js, we need to make sure we can use absolute imports. To do this, we'll create a file named "jsconfig.json." in the root directory of our project.

Inside the jsconfig.json file, add the following code:

{
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "*": ["src/*"],
      "@utils/*": ["utils/*"]
    }
  },
  "include": ["src"]
}

Here in App.js we can easily import the components of Axios, as shown below. Open App.js, delete everything, and replace it with the following:

import React, { useEffect, useState } from 'react';
import axios from 'axios';
import './App.css';

const App = () => {
  const [githubResponse, setGithubResponse] = useState({
    total_count: 0,
    items: [],
    incomplete_results: false,
  });
// Similar to componentDidMount and componentDidUpdate:
  useEffect(() => {
    // execute side effect
    try {
      const fetchItems = async () => {
        const results = await axios.get(
          `https://api.github.com/search/repositories?q=created:>2021-08-13&sort=stars&order=desc/github`
        );
        console.log(results);
      };
      fetchItems();
    } catch (error) {}
    // optional dependency array
    // 0 or more entries
  }, []);

  return <div className='App'></div>;
};

export default App;

Here in App.js

We declare the githubResponse state variable, and then we tell React we need to use an effect. We pass a function to the useEffect Hook. This function we pass is our effect. Inside our effect, we use a basic React set up to fetch data from API using Axios. We can read the latest githubResponse inside the effect because it’s in the scope of our function. When React renders our component, it will remember the effect we used, and then run our effect after updating the DOM. This happens for every render, including the first one.

When we console log results we get a list of objects containing the data we are getting from the API inside the fetchItems function.

After receiving the data from the API we'll have to change the data state from blank array to the response data using the React setState method.

Navigate back to App.js and update it with the following:

import React, { useEffect, useState } from 'react';
import axios from 'axios';
import GithubStarredList from "components/GithubStarredList/GithubStarredList"; //We're importing the GithubStarredList component
import './App.css';

const App = () => {
  const [githubResponse, setGithubResponse] = useState({
    total_count: 0,
    items: [],
    incomplete_results: false,
  });

  useEffect(() => {
    try {
      const fetchItems = async () => {
//we destructured the data from results
        const { data } = await axios.get(
          `https://api.github.com/search/repositories?q=created:>2021-08-13&sort=stars&order=desc/github`
        );
        setGithubResponse((prev) => ({
          ...prev,
          ...data,
        }));
      };
      fetchItems();
    } catch (error) {}
  }, []);
//We're rendering the StarredUsers and passing githubResponse we stored in state as props
  return <GithubStarredList githubResponse={githubResponse} />;
};

export default App;

Spread syntax (...)

When setting the React state with setGithubResponse, we used The spread (...) operator syntax which allows us iterate through our prev state and response data.

You might want to use prevState: prev if the new state is computed using the previous state. In other words if you need to change your state based on the previous state.

Open App.css and add the following styles:

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  background-color: #1f2937;
  height: 100%;
  font-size: 12px;
}

body::-webkit-scrollbar {
  display: none;
}

Now using the map function we'll iterate the data inside the render method of StarredUsers.

Open up GithubStarredList.js and add the following lines of code:

import React from "react";
import SearchBar from "components/SearchBar/SearchBar";
import GithubStarredUser from "components/GithubStarredList/GithubStarredUser/GithubStarredUser";
import "./GithubStarredList.css";

const GithubStarredList = ({ githubResponse }) => {
  return (
    <div className="starred-users">
      <SearchBar githubResponse={githubResponse} />
      <div className="starred-user-list">
        {githubResponse?.items?.map((item) => (
          <GithubStarredUser item={item} key={item.id} />
        ))}
      </div>
    </div>
  );
};

export default GithubStarredList;

For more information about optional chaining.

Adding Style

So after calling the GithubStarredList.js expression there is a need to style the component for showing the starred users, for that we have created the GithubStarredList.css in the GithubStarredList folder.

Inside the GithubStarredUser.js file, add the following code:

import React from "react";
import "./GithubStarredUser.css";

const GithubStarredUser = ({ item }) => {
  return (
    <div className="starred-user-content" key={item.id}>
      <div className="user-profile">
        <img
          src={item.owner.avatar_url}
          className="user-avatar"
          alt={item.owner.name}
        />

        <div className="user-profile-info">
          <h2 className="user-profile-name">{item.full_name}</h2>

          <p className="user-profile-description">
            {item.description}
            <span> {item.url}</span>
          </p>

          <div className="user-profile-ratings">
            <div className="user-profile-stars">
              Stars: {item.stargazers_count}k
            </div>

            <div className="user-profile-issues">
              Issues: {item.open_issues_count}k
            </div>

            <div className="user-profile-submission">
              <span className="user-submission-text">
                Submitted 30 days ago by {item.name}
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default GithubStarredUser;

Find the style for GithubStarredUser.css below;

Step 6 — How To Add The Search Input

Add a new component to the components folder called SearchBar inside create a file SearchBar.js and Search.css. Open SearchBar.js and add the following:

import React from "react";
import Button from "components/Commons/Button";
import Input from "components/Commons/Input";
import "./Search.css";

const SearchBar = () => {
  return (
    <section className="search-section">
      <div className="search-input-section">
        <Input className="search-input" placeholder="Search...." />

        <Button className="search-button" title="Search" type="submit" />
      </div>
    </section>
  );
};

export default SearchBar;

Adding SearchBar Style

Save and run the app, and then if you go to the browser you should see the following:

Step 7 — Implementing Loading Function and Infinite Scroll

Now that we have gotten the first steps of retrieving the data and rendering that data, we need to implement the loading function so basically when we are fetching the data we should be able to see a little spinner comes up saying its loading and once that data comes in we get rid of the spinner and show the data.

Update App.js with the following:

import React, { useEffect, useState } from "react";
import axios from "axios";
import GithubStarredList from "components/GithubStarredList/GithubStarredList";
import "./App.css";

const App = () => {
  const [githubResponse, setGithubResponse] = useState({
    total_count: 0,
    items: [],
    incomplete_results: false,
  });
  const [isLoading, setIsLoading] = useState(true);
  const [isError, setIsError] = useState(false);
  const [currentPage, setCurrentPage] = useState(1);

  useEffect(() => {
    try {
      const fetchItems = async () => {
        setIsError(false);
        currentPage === 1 && setIsLoading(true);
        const { data } = await axios.get(
          `https://api.github.com/search/repositories?q=created:%3E2021-08-13&sort=stars&order=desc/github&page=${currentPage}`
        );
        setGithubResponse((prev) => ({
          ...prev,
          ...data,
        }));
        currentPage === 1 && setIsLoading(false);
      };
      fetchItems();
    } catch (error) {
      setIsError(true);
      console.log(error.message);
    }
  }, [currentPage]);

  const loadMore = () => {
    githubResponse.incomplete_results && setCurrentPage((prev) => (prev += 1));
  };

  return (
    !isError && (
      <GithubStarredList
        isLoading={isLoading}
        githubResponse={githubResponse}
        loadMore={loadMore}
      />
    )
  );
};

export default App;

Update GithubStarredList.js with the following:

import React from "react";
import InfiniteScroll from "react-infinite-scroll-component";
import CircularProgress from "@mui/material/CircularProgress";
import { Box } from "@mui/material";
import SearchBar from "components/SearchBar/SearchBar";
import GithubStarredUser from "components/GithubStarredList/GithubStarredUser/GithubStarredUser";
import "./GithubStarredList.css";

const GithubStarredList = ({ githubResponse, isLoading, loadMore }) => {
  const onNext = () => {
    loadMore?.();
  };

  return isLoading ? (
    <Box className="progressBar">
      <CircularProgress />
    </Box>
  ) : (
    <div className="starred-users">
      <SearchBar githubResponse={githubResponse} />

      <InfiniteScroll
        dataLength={githubResponse?.items}
        next={onNext}
        hasMore={githubResponse?.incomplete_results}
        loader={
          <Box className="progressBar">
            <CircularProgress />
          </Box>
        }
      >
        <div className="starred-user-list">
          {githubResponse?.items?.map((item) => (
            <GithubStarredUser item={item} key={item.id} />
          ))}
        </div>
      </InfiniteScroll>
    </div>
  );
};

export default GithubStarredList;

Step 8 — Adding Cool Search Filter

A search filter is a specific attribute a user can use to refine the search results of a particular product listing page.

Update SearchBar.js with the following:

import React, { useState } from "react";
import Button from "components/Commons/Button";
import UserIcons from "components/Commons/Icons";
import Input from "components/Commons/Input";
import { FaTimes } from "react-icons/fa";
import "./Search.css";

const SearchBar = ({ githubResponse }) => {
  const [filteredItems, setFilteredItems] = useState([]);
  const [wordEntered, setwordEntered] = useState("");

  const handleFilteredItems = (event) => {
    const searchWord = event.target.value;
    setwordEntered(searchWord);
    const newFilteredItems = githubResponse?.items?.filter((item) => {
      return item.html_url.toLowerCase().includes(searchWord.toLowerCase());
    });

    if (searchWord === "") {
      return setFilteredItems([]);
    } else {
      setFilteredItems(newFilteredItems);
    }
  };

  const clearInput = () => {
    setFilteredItems([]);
    setwordEntered("");
  };
  return (
    <section className="search-section">
      <div className="search-input-section">
        <Input
          className="search-input"
          value={wordEntered}
          onChange={handleFilteredItems}
          placeholder="Search...."
        />
        {filteredItems.length === 0 ? (
          <Button className="search-button" title="Search" type="submit" />
        ) : (
          <UserIcons
            icons={FaTimes}
            className="clear-button"
            onClick={clearInput}
          />
        )}
      </div>

      {filteredItems.length !== 0 && (
        <div className="search-results">
          {filteredItems.slice(0, 5).map((item) => (
            <a
              className="search-result-item"
              href={item.html_url}
              target="true"
              key={item.id}
            >
              <p>{item.full_name}</p>
            </a>
          ))}
        </div>
      )}
    </section>
  );
};

export default SearchBar;

Follow me

Forem: Willochs Ojigbo

Chart.js in Next.js 15: Create Dynamic Data Visualizations

Introduction to Chart.js in Next.js

What is Chart.js?

Why Use Chart.js in Next.js Applications?

Installing Chart.js and Dependencies

Understanding Next.js’s Rendering Methods and How They Affect Chart.js

Solution

Summary of What You Have Learned

What’s Next?

Creating Your First Chart with Chart.js and JSON Server

Setting Up JSON Server

Fetching Data in Next.js

Creating a Chart Component in Next.js

Follow me

Fixing Absolute Path Issues Made Easy: Vite, React, TS

Introduction

Understanding the Issue

Quick and Easy Setup: Building a Vite Project with React and TypeScript

How To Make Absolute Path Work in Vite React TypeScript project?

Follow me

Creating GIFs with Giphy API and ReactJS: A Beginner's Guide.

Introduction

What is Giphy API?

Getting Started

How to Set Up a React Project

Setting Up The App File and Folder Structure

Exploring The Giphy API: Making API Calls

Searching for Gifs

Implement a Loading Function and Error Handling

Infinite Scroll: Implementing a Load More Function for Seamless Content Loading

Fetching Stickers

Implementing Routes

GitHub Code to this project (feel free to give it a star ⭐)

Willochs316 / giphy-api

Giphy API

Instructions

Follow me

Enhancing Your Existing ReactJS Application with TypeScript and Absolute Imports

Introduction

Prerequisites

Step 1: Create a ReactJS Application

Step 2: Install TypeScript

Step 3: Configuration

Step 4: Rename Files

Step 5: Start the Development Server

Styled Components and SCSS Which One Should You Use?

Introduction

What is Styled-Component?

The Pros of Styled-Components

The Cons of Styled-Components

What is SCSS?

Pros of SCSS

Cons of SCSS

Which One Should You Use?

Master React and OMBD API: The Complete Guide to Building a Movie App

Table of Contents

Introduction

How to Get an API Key

How to Set Up a React Project

How to Safely Store API Keys using Environment Variables

How to Implement the 'Add to Favorites' and 'Remove from Favorites' Feature

How To Use Styled-Components In React

Introduction

Benefits of Styled Components:

Setting Up a React Environment:

Getting started

Installation:

Your first styled component

Infinite-Scroll And GitHub REST API

Table of Contents

Introduction

Shared album - Willochs Ojigbo - Google Photos

Step 1 — Retrieving Data Using GitHub REST APIs?

Step 2 — Exploring The API With PostMan

Step 3 — Setting Up A React Project

Step 4 — Loading The Data

Step 5 — Creating Components

Spread syntax (...)

Adding Style