DEV Community: Abdulrasaq Jamiu Adewuyi

Implement text search with MongoDB Atlas Search and NextJS

Abdulrasaq Jamiu Adewuyi — Mon, 07 Jul 2025 06:24:09 +0000

MongoDB Guests for MongoDB

Mar 6 '25

Building a Text Search With the Autocomplete Feature With MongoDB Atlas Search and NextJS

#programming #webdev #tutorial #nextjs

Comments 1

11 min read

What Is New in NextJS 13

Abdulrasaq Jamiu Adewuyi — Mon, 10 Jul 2023 08:32:32 +0000

Introduction

Earlier this year, ReactJS’ official documentation recommended using the NextJS framework for React full-stack applications. As a ReactJS developer, learning Nextjs could be beneficial.
On May 4th, 2023, NextJS, in its blog post, announced the release of a stable NextJS version 13.4, marking stability for the App Router.
In this article, I will highlight some of the essential features NextJS introduced.

Prerequisites

Before we get started, be sure to have the following:

Node.js 16.8 or later installed.
Operating system (MacOS, Windows, or Linux)

Overview

Below are some of the Next.js 13 features we will be looking at:

File & Folder Structure
Server & Client side component
Routing & Special Next.js Files
Data fetching (SSR, SSG, ISR)
Next.js API Endpoints
SEO & Metadata

File & Folder Structure in Next 13.

To explain the concept file & folder structure in Next 13, let's create a new NextJS project.

Creating a NextJS application
To bootstrap a NextJS project, run the command below in the terminal and follow the prompts below to keep things simple and consistent.

npx create-next-app@latest

Once installation is completed, we should have our application file and folder as below:

Below are some of the most important files/folders

The app folder is the most important in a Next.js app and contains the favicon.ico, globals.css, layout.js, page.js, and page.module.css files, which are the most important files for now.
The layout.js file is the application's main entry point, and all the components are wrapped within it as children. This file allows us to personalize the behavior of our application by providing a common layout or template for all pages. Components included in this file will be shared throughout the entire application. In our application, if we want to add something consistent across all routes, such as a navbar, footer, or Redux Toolkit wrapper, we should place it in the layout.js file.
The page.js file represents the home page route of the application.
The page.module.css file represents the corresponding CSS file for page.js.
The globals.css file contains the global CSS styles of the entire application. It is imported within the layout file so that every route inherits it.

Some other file conventions that are introduced are error.js, loading.js, etc. We could read more on file and folder structure.

Server & Client-side Component

React 18 and Next 13 have introduced new methods for component rendering, enabling components to be rendered on the server or client sides. In NextJS, all components developed within the app folder are server-side by default. This approach improves initial page load times, enhancing SEO and user experience. If there is a need to convert a server-side component to a client-side one, all we need to do is add the "use client" directive at the top of the page. For example

// by default pages are server-side, 
    // adding `use client` turns the page to  client-side page

    'use client'
    import React from 'react'
    const page = () => {
      return (
        <div>
          client-side-page
        </div>
      )
    }
    export default page

Why would we want to turn our component to client-side? Generally, NextJS recommends using server components. However, we have to use client-side components when we have interactivity or event listeners, like onClick, onChange, or when using react hooks. We can also use client-side components when using custom hooks that depend on state, effects, or browser-only APIs.
NextJS provides a helpful table on when to use server components and when to use client components, check it out.

Routing in NextJS

In NextJS 13 routing system, all we need to do to implement the routing in NextJS is create a folder corresponding to the desired route within the app folder; the folder's name will serve as the route name.

Routes in NextJS 13

To create a route, create a folder corresponding to the desired route within the app folder; the folder's name will serve as the route path. For instance, let's say we want to create a /user route.

Navigate to the app folder
Create a new folder called user
Then within the user folder, create a new page.js file within which we can create a react functional component.

The file directory should be as /app/user/page.js

This page can be accessed at localhost:3000/user.

Nested Route in NextJS 13

We could create a nested route simply by following the same convention. To create a nested route such as localhost:3000/user/customer, create a customer folder within the user folder and create a page.js file as shown below. The file directory should be as /app/user/customer/page.js

Dynamic Route in NextJS 13

Similar to creating a route, but this time, the folder name will be wrapped with a squared bracket [], where the folder name represents the dynamic value. For instance, let's say we want to create a page that fetches customer by customer_id and routes as /user/customer/1 such that the value could be any customer_id e.g /user/customer/1, /user/customer/2 etc.
Simply create a [customer_id] folder within the customer folder and create a page.js file as shown below. The file directory should be as /app/user/customer/[customer_id]/page.js

To access the customer_id within the page, we could destructure from its params as shown above.

NextJS Data Fetching (SSR, SSG, ISR)

NextJS introduces three choices for selecting how to fetch data. Let's explore all of these one by one first we have.

NextJS Server Side Rendering (SSR)

Server-side rendering refers to dynamically rendering data on the server side. This means that new data is retrieved for each request. With SSR, every request to the server initiates a new rendering cycle and data retrieval, guaranteeing that the content is consistently updated.

In NextJS, we need to include an object { cache: "no-store" } in the fetch request to implement SSR. See the example shown below.

import React from "react";

    const SSR = async () => {
      //1. Server-side rendering (SSR)
      const res = await fetch(
        `https://jsonplaceholder.typicode.com/post/1`,
        { cache: "no-store" } //this makes it SSR
      );
      const data = res.json();

      return <div>SSR</div>;
    };

    export default SSR;

The above will make sure the request is always consistent and never cached.

NextJS Static Side Generation (SSG)

By default, NextJs fetches data using the static site generation, which automatically fetches the specified data. It also caches the data.
The only necessary step when using static site generation is not adding { cache: "no-store" } in the fetch request. This approach is well-suited for content that doesn't undergo frequent changes, such as blog posts, documentation, or marketing pages. See the example shown below.

import React from 'react'

    const SSG = async () => {
        //2. Static side generation (SSG)
        const res = await fetch(
            `https://jsonplaceholder.typicode.com/post/1` 
        )
        //remove the cache : 'no-store' makes it SSG
        const data  = res.json()
      return (
        <div>
          SSG
        </div>
      )
    }
    export default SSG

NextJS Incremental Static Regeneration (ISR)

Incremental Static Regeneration combines the benefits of SSR and SSG for dynamic content in static sites; with the incremental static generation, we can fetch at build time while defining a revalidation time interval; this means that the data will be cached, but after a specific time frame it's then going to refresh it.
In ISR, instead of messing with the cache, we can provide an additional parameter here { next: { revalidate: 10 } }, it is in seconds. See the example shown below.

import React from "react";

    const ISR = async () => {
      //3. Incremental static regeneration (ISR)
      const res = await fetch(
        `https://jsonplaceholder.typicode.com/post/1`,
        { next: { revalidate: 10 } } //refetch after 10 seconds
      );
      const data = res.json();

      return <div>ISR</div>;
    };

    export default ISR;

Next.js API Endpoints (Route Handlers)

Next.js enables full-stack applications, allowing operation on both the front-end and back-end. It accomplishes this by utilizing a file-based routing system. With Next.js, developers can handle HTTP requests and build back-end functionality without needing an external server.
Route Handlers allow the creation of custom request handlers for a given route using the Web Request and Response APIs.

To create an API endpoint in NextJS, we need to create a folder corresponding to the desired endpoint within the app folder; the folder's name will serve as the endpoint.
However, creating API endpoints within an api folder in the app folder is advisable to differentiate between pages and APIs.

For instance, let's say we want to create an api/user endpoint. Follow the steps below.

Navigate to the app folder
Create a new folder called api
Within the api folder, create a new folder called user
Next, within the user folder, create a new route.js file within which we can create a react functional component.

The file directory should be as /app/api/user/route.js.

Therefore this endpoint would be api/user. See folder structure below.

SEO & Metadata

Metadata refers to the information embedded in a web page that provides descriptive details about the page content. It plays a crucial role in search engine optimization (SEO) by helping search engines accurately understand and index the page.
Next.js introduces an additional metadata API that offers two approaches for handling metadata: static-generated and dynamically-generated metadata. These options provide enhanced flexibility in managing metadata within Next.js.

Static Metadata

Static metadata refers to the information that can be defined statically and is associated with a particular page or component.
To make changes to the metadata in a static manner. We export a specific object called metadata that holds the desired metadata, as demonstrated below.

import React from 'react'
    //static metadata here
    export const metadata = {
        title : 'product title',
        descriptions : 'page description goes here'
    }
    export const page = () => {
      return (
        <div>page</div>
      )
    }

Dynamically Generated Metadata

Imagine a page that renders product information; majorly, such a page will be a dynamic page such that the product will be fetched by a key (usually ID); in this type of scenario, it is best to use dynamically generated metadata.
By utilizing dynamically generated metadata in Next.js, we can provide tailored information for each page based on its content or context. This enables search engines, social media platforms, and other tools to understand better and present our pages, ultimately improving our website's visibility and user experience.
To modify the metadata dynamically, we will export a special function called generateMetadata as shown below.

import React from 'react'
    const getProduct = ()=>{
        //get product here
    }
    // call the generateMetadata function 
    export async function generateMetadata({params}) {
        const product = await getProduct(params.id);
        return{
            title : product.title
        }
    }
    export const page = () => {
      return (
        <div>page</div>
      )
    }

Conclusion

NextJS, in its blog post, announces the release of a stable NextJS version 13.4. In this article, I highlighted some important features Next.js 13 introduced.

If this article is helpful, consider liking, sharing, and following me; connect with me on Twitter for more exciting articles like this.
Happy coding.

How to Generate Custom PDF, Using React and React-PDF.

Abdulrasaq Jamiu Adewuyi — Tue, 25 Apr 2023 20:58:48 +0000

Introduction

Generating a PDF from a webpage is becoming essential in web development, especially in a report-driven application. It is often used in scenarios ranging from creating an invoice in an e-commerce application, printing transactional reports, generating reports, etc. In this article, we will explore how to create an application that generates, prints, downloads, and shares a PDF with ReactJS and React-PDF.

You can also check out eduproject, explaining the design and implementation of custom PDF using React and React-pdf.

Together, we will go through step by step procedure I use to design an e-commerce invoice with the react-pdf package.

Page preview

The image below shows the webpage preview displaying download, print, and share buttons on every invoice.

PDF Invoice design

The image below shows the screenshot of a sample PDF invoice we will design for this project.

Page in action

The image below shows a preview of this project. Each invoice sample has download, print, and share buttons.

Prerequisites

To follow along, we will need the following:

Basic knowledge of JavaScript and ReactJS.
Knowledge of CSS Flexbox property.
The source code of the project is available on GitHub.

Project Setup.

To get started with React. Run the below command in the terminal to create a new React project.

npx create-react-app pdf-gen

Change the directory to the project folder by running.

cd pdf-gen
Next, let's install the required dependencies by running the below command.

npm install @react-pdf/renderer file-saver react-icons

Next, let’s create these files Invoice.js and PdfCard.js, we will be adding our code to them as we go along in this guide.

If using a Mac OS, let’s run the below command to create these files

touch src/Invoice.js touch src/PdfCard.js

If using a Windows OS, let’s run the below command to create the files, make sure to run the command one after the other.

cd.> src/Invoice.js

cd.> src/PdfCard.js

Then run the npm start to start the project. We should have a running react project ready to be modified.

Project Folder Structure

After the above setup process is completed, we should have our folder structure as below.

Basically, we will be working with the App.js file which is our root file, the Invoice.js, and PdfCard.js.

The react-pdf package will be used to design an e-commerce invoice sample. Before diving in properly, let’s work through the building block of the react-pdf package.

React-PDF

React-PDF is an open-source library for rendering PDF documents in a React application. It is a powerful and flexible library for working with PDF documents in React, making it an excellent choice for building PDF-related features in our projects.

React-PDF Building Blocks.

PDFViewer: This component will display the PDF documents within the web browser.
Document: This component represents the PDF document and is the parent component to other components.
Page: As the name implies, it represents a single page within a PDF document.
View: This is the core component for designing the UI.
Text: This component is used for displaying text
Image: This component displays images within the document. Support image formats such as JPG, PNG, GIF, etc.
PDFDownloadLink: This component creates a download link for a PDF document generated by the React-pdf library.
BlobProvider: This component generates a PDF document and provides it as a Blob object that can be used to display or download the PDF document.

With this out of the way, let's create our PDF.

Design an E-commerce PDF Invoice

In our project folder, let's create a new file called Invoice.js in the src folder and add code as shown below.

import React from 'react'
    import { Image, Text, View, Page, Document, StyleSheet } from '@react-pdf/renderer';

    const Invoice = () => {

    const reciept_data = {
    // update reciept_data here
    }

    const styles = StyleSheet.create({
    // update Invoice styles here 
    }}

    const InvoiceTitle = () => (
    // update InvoiceTitle component here 
    );

    const Address = () => (
    // update Address component here
    );

    const UserAddress = () => (
    // update UserAddress component here
    );

    const TableHead = () => (
    // update TableHead component here
    );

    const TableBody = () => (
    // update TableBody component here
    );

    const TableTotal = () => (
    // update TableTotal component here
    );

      return (
            <Document>
                <Page size="A4" style={styles.page}>
                    <InvoiceTitle  />
                    <Address/>
                    <UserAddress/>
                    <TableHead/>
                    <TableBody/>
                    <TableTotal/>
                </Page>
            </Document>
      )
    }
    export default Invoice

The above code snippet shows the Invoice component which includes other sub-components which are InvoiceTitle, Address, UserAddress, TableHead, TableBody, and the TableTotal components, these components will be updated accordingly as we go along in this guide.

The above image shows the section and position of each component in the Invoice design sample.

Open the App.js file and replace the existing code with code as below:

 import { PDFViewer } from "@react-pdf/renderer";
    import Invoice from "./Invoice";

    function App() {
      return (
        <div>
          <PDFViewer width="1000" height="650" className="app" >
            <Invoice />
          </PDFViewer>
        </div>
      );
    }

    export default App;

Next, let's update invoice styles as below. This includes the stylesheet for styling and beautifying our invoice

Next, let's update InvoiceTitle component and make sure to import a logo for the Image.

const InvoiceTitle = () => (
            <View style={styles.titleContainer}>
                <View style={styles.spaceBetween}>
                    <Image style={styles.logo} src={logo} />
                    <Text style={styles.reportTitle}>Xpress Enterprises</Text>
                </View>
            </View>
        );

Next, let's update Address component.

const Address = () => (
            <View style={styles.titleContainer}>
                <View style={styles.spaceBetween}>
                    <View>
                        <Text style={styles.invoice}>Invoice </Text>
                        <Text style={styles.invoiceNumber}>Invoice number: {reciept_data.invoice_no} </Text>
                    </View>
                    <View>
                        <Text style={styles.addressTitle}>7, Ademola Odede, </Text>
                        <Text style={styles.addressTitle}>Ikeja,</Text>
                        <Text style={styles.addressTitle}>Lagos, Nigeria.</Text>
                    </View>
                </View>
            </View>
        );

Next, let's update UserAddress component.

const UserAddress = () => (
            <View style={styles.titleContainer}>
                <View style={styles.spaceBetween}>
                    <View style={{maxWidth : 200}}>
                        <Text style={styles.addressTitle}>Bill to </Text>
                        <Text style={styles.address}>
                            {reciept_data.address}
                        </Text>
                    </View>
                    <Text style={styles.addressTitle}>{reciept_data.date}</Text>
                </View>
            </View>
        );

Next, let's update TableHead component.

 const TableHead = () => (
            <View style={{ width:'100%', flexDirection :'row', marginTop:10}}>
                <View style={[styles.theader, styles.theader2]}>
                    <Text >Items</Text>   
                </View>
                <View style={styles.theader}>
                    <Text>Price</Text>   
                </View>
                <View style={styles.theader}>
                    <Text>Qty</Text>   
                </View>
                <View style={styles.theader}>
                    <Text>Amount</Text>   
                </View>
            </View>
        );

Next, let's update TableBody component.

const TableBody = () => (
           reciept_data.items.map((receipt)=>(
            <Fragment key={receipt.id}>
                <View style={{ width:'100%', flexDirection :'row'}}>
                    <View style={[styles.tbody, styles.tbody2]}>
                        <Text >{receipt.desc}</Text>   
                    </View>
                    <View style={styles.tbody}>
                        <Text>{receipt.price} </Text>   
                    </View>
                    <View style={styles.tbody}>
                        <Text>{receipt.qty}</Text>   
                    </View>
                    <View style={styles.tbody}>
                        <Text>{(receipt.price * receipt.qty).toFixed(2)}</Text>   
                    </View>
                </View>
            </Fragment>
           ))
        );

Next, let's update TableTotal component.

const TableTotal = () => (
            <View style={{ width:'100%', flexDirection :'row'}}>
                <View style={styles.total}>
                    <Text></Text>   
                </View>
                <View style={styles.total}>
                    <Text> </Text>   
                </View>
                <View style={styles.tbody}>
                    <Text>Total</Text>   
                </View>
                <View style={styles.tbody}>
                    <Text>
                        {reciept_data.items.reduce((sum, item)=> sum + (item.price * item.qty), 0)}
                    </Text>  
                </View>
            </View>
        );

Once all components and pages are updated, we should see our PDF displayed on the screen as below.

Now we have a PDF Invoice file that can be downloaded, printed, and shared via email.
In a real-world scenario, it is likely we have an Invoice or list of invoices requiring actions such as downloading, printing, and sharing via email. Using some custom hooks from React-PDF, we can implement these features. Let's update our design to accommodate these action buttons (download, print, and share).

Let's create a new file PdfCard.js update as below:

import React from 'react'
    import {CgFileDocument} from 'react-icons/cg'
    import {HiOutlineDownload, HiOutlinePrinter} from 'react-icons/hi'
    import {FiShare2} from 'react-icons/fi'

    const PdfCard = ({title}) => {

        const styles = {
            container : {  width:'220px',  borderRadius : '5px',  padding:'15px 12px',  display:'flex',  flexDirection:'column',  gap:'15px',  boxShadow: "0 3px 10px rgb(0 0 0 / 0.2)"},
            flex : { width:'100%', display:'flex', gap:'5px', alignItems:'center' },
            bold : { fontSize:'13px', fontWeight: 600},
            thin : {  fontSize:'11px',  color:'#6f6f6f',  fontWeight: 500 },
            btn:{ borderRadius : '3px', border:'1px solid gray', display : 'flex', alignItems :'center', gap:'2px', padding : '3px', fontSize:'11px', color:'#4f4f4f', fontWeight: 600, cursor:'pointer', userSelect:'none'}
        }

      return (
        <div style={styles.container}>
            <div style={styles.flex}>
                <CgFileDocument color='#90e0ef' size={20}/>
                <span style={styles.bold}>{title}</span>
            </div>
            <div style={styles.thin}>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus eligendi reiciendis fuga doloremque
            </div>

            <div style={{...styles.flex, ...{justifyContent:'space-between'}}}>
                <div style={styles.btn}>
                    <HiOutlineDownload size={14}/>
                    <span>Download</span>
                </div>

                <div style={styles.btn}>
                    <HiOutlinePrinter size={14}/>
                    <span>Print</span>
                </div>
                <div style={styles.btn}>
                    <FiShare2 size={14}/>
                    <span>Share</span>
                </div>
            </div>


        </div>
      )
    }

    export default PdfCard

To see this design in action, let's update the App.js as below:

 import PdfCard from "./PdfCard";

    function App() {
      const cards = {  maxWidth: "1200px", margin: "0 auto", display: "grid", gap: "1rem", padding : '20px', gridTemplateColumns: "repeat(auto-fit, minmax(250px, 1fr))"}
      return (
        <div>
          <h2 style={{textAlign:'center'}}>List of invoices</h2>
          <div style={cards}>
            <PdfCard title="Oasic ltd Invoice"/>
            <PdfCard title="Libra ltd Invoice"/>
            <PdfCard title="Xpress ltd Invoice"/>
            <PdfCard title="Cardic ltd Invoice"/>
          </div>
        </div>
      );
    }

    export default App;

We should see the webpage below:

Next, let's implement the actions button functionalities.

Downloading PDF Invoice with React-PDF

To download PDF we will be using a custom hook PDFDownloadLink from React-PDF. This component creates a download link for a PDF document generated by the react-pdf library.
Let's update our PdfCard.js with the PDFDownloadLink as below:

<PDFDownloadLink document={<Invoice />} fileName='invoice.pdf'>
       <div style={styles.btn}>
          <HiOutlineDownload size={14}/>
          <span>Download</span>
       </div>
     </PDFDownloadLink>

Ensure to import PDFDownloadLink from @react-pdf/renderer and Invoice from Invoice.js. Once updated, click the download button and see the invoice download to the localdisk of the computer. With that done, let's move on to the Print functionality.

Printing PDF Invoice with React-PDF

To print PDFs, we will use a custom hook BlobProvider from React-PDF. This component generates a PDF document and provides it as a Blob object that can be used to display or download the PDF document.

Let's update our PdfCard.js with the BlobProvider as below:

<BlobProvider document={<Invoice />}>
      {({ url, blob }) => (
         <a href={url} target="_blank" style={styles.btn}>
            <HiOutlinePrinter size={14}/>
               <span>Print</span>
         </a>
      )}
     </BlobProvider>

Ensure to import BlobProvider from @react-pdf/renderer. Once updated, click the print button and see the invoice preview in a new tab. And finally, let's implement the Share functionality.

Share PDF Invoice with React-PDF

To share PDFs via email, we will use a custom hook, BlobProvider from React-PDF. This implementation will download a PDF file to the computer's local disk and open a mailbox for us to attach the downloaded file.

To see this in action, let's update our PdfCard.js as below:

import { saveAs } from "file-saver";

    const handleShare = async (blob) => {
            await saveAs(blob, `invoice.pdf`);
            window.location.href = `mailto:?subject=${encodeURIComponent(`Invoice`)}&body=${encodeURIComponent(`Kindly find attached invoice`)}`;
        }
    ...
    ...
    ...

     <BlobProvider document={<Invoice />}>
       {({ url, blob }) => (
         <div style={styles.btn} onClick={() => handleShare(url, blob)} >
            <FiShare2 size={14} />
            <span>Share</span>
         </div>
       )}
    </BlobProvider>

Conclusion

In this article, we built an application that generates, prints, downloads, and shares a PDF with ReactJS and React-PDF.

To learn more about React-PDF, check out its official documentation.

If this article is helpful, consider liking, sharing, and following me; connect with me on Twitter for more articles like this.

Happy coding.

MongoDB Atlas Hackathon 2022 on DEV

Abdulrasaq Jamiu Adewuyi — Sun, 04 Dec 2022 20:42:16 +0000

What I built

I built an Airbnb clone, an home provider platform where different home providers (hosts) add homes to the platform where home seekers can see a list of homes added by the hosts, the app is developed using NextJS for the front end and NodeJS(ExpressJS) for the back end.
I built the search functionality, search autocomplete, home filters and many more features with the MongoDB Atlas.

Category Submission:

Search no more

App Link

https://windcnc.netlify.app/

Screenshots

Landing page

Showing a list of homes in each category property_type

Loading state

Showing the loading state of the landing page

Country autocomplete

Showing country search autocomplete

Street autocomplete

Showing street search autocomplete

Search result

Showing home search result

Showing home search results in map view

Description

The Airbnb clone project is a platform that allows filtering and searching of homes among many homes on the platform while also showing the location on the map.

Link to Source Code

Source code frontend

Source code backend

Permissive License

MIT

Background

(What made you decide to build this particular app? What inspired you?)

I chose this project because it was helpful enough to explore and implement the search functionality with a different dataset.

Also with the fact that MongoDB has a robust collection sample_airbnb that I can leverage on.

The main inspiration is to learn and show developers how easy and flexible it is to use the MongoDB atlas search.

How I built it

(How did you utilize MongoDB Atlas? Did you learn something new along the way? Pick up a new skill?)

As a frontend developer, this is my first time using MongoDB and I must say it is way easy and more flexible to use than I expected, and of course, I learnt, understood and can work with the fundamental of MongoDB

The following are steps to implement the project

Connecting to mongoDB collection

Our collection name sample_airbnb

try {
    const client = await MongoClient.connect(MONGODB_URI, { useNewUrlParser: true, useUnifiedTopology: true });
    db = await client.db("sample_airbnb");
    dbConnected = true;

    console.log("Database is connected and ready to go!");

  } catch (e) {
    console.log(e.toString(), "connection error");
  }

Create search indexes

{
  "mappings": {
    "dynamic": false,
    "fields": {
      "address": {
        "dynamic": false,
        "fields": {
          "country": {
            "type": "string"
          },
          "street": {
            "type": "string"
          }
        },
        "type": "document"
      },
      "property_type": {
        "type": "string"
      }
    }
  }
}

Create search indexes for country autocomplete

{
  "mappings": {
    "dynamic": false,
    "fields": {
      "address": {
        "fields": {
          "country": {
            "maxGrams": 10,
            "type": "autocomplete"
          }
        },
        "type": "document"
      }
    }
  }
}

Create search indexes for street autocomplete

{
  "mappings": {
    "dynamic": false,
    "fields": {
      "address": {
        "fields": {
          "street": {
            "type": "autocomplete"
          }
        },
        "type": "document"
      }
    }
  }
}

Create aggregation pipeline to get list on homes in a category `property_type`

 [
        {
          '$match': {
            'property_type': {
              '$eq': req.params.category
            }
          }
        }, {
          '$project': {
            'accommodates': 1,
            'price': 1,
            'property_type': 1,
            'name': 1,
            'description': 1,
            'host': 1,
            'address': 1,
            'images': 1,
            "review_scores": 1
          }
        }
      ]

Create aggregation pipeline to search list of homes by country in each category

[ 
{
    "$search": {
      "index": 'search_home',
      "compound": {
        "must": [
        {"text": {
          "query": queries.street,
          "path": 'address.street',
          "fuzzy": {}
        }},
        { "text": {
          "query": queries.category,
          "path": 'property_type',
          "fuzzy": {}
        }}
      ]}
    }
  }
]

Create aggregation pipeline to search list of homes by street in each caterogy

[{
    "$search": {
      "index": 'search_home',
      "compound": {
        "must": [
       { "text": {
          "query": queries.country,
          "path": 'address.country',
          "fuzzy": {}
        }},
        { "text": {
          "query": queries.category,
          "path": 'property_type',
          "fuzzy": {}
        }}
      ]}
    }
  }]

Create aggregation pipeline to search list on homes by both country and street in each category

[{
    "$search": {
      "index": 'search_home',
      "compound": {
        "must": [
        {"text": {
          "query": queries.street,
          "path": 'address.street',
          "fuzzy": {}
        }},
       { "text": {
          "query": queries.country,
          "path": 'address.country',
          "fuzzy": {}
        }},
        { "text": {
          "query": queries.category,
          "path": 'property_type',
          "fuzzy": {}
        }}
      ]}
    }
  }]

Create aggregation pipeline for autocomplete country search field

[
        {
          '$search': {
            'index': 'country_autocomplete', 
            'autocomplete': {
              'query': req.params.param, 
              'path': 'address.country',
            }, 
            'highlight': {
              'path': [
                'address.country'
              ]
            }
          }
        }, {
          '$limit': 1
        }, {
          '$project': {
            'address.country': 1, 
            'highlights': {
              '$meta': 'searchHighlights'
            }
          }
        }
      ]

Create aggregation pipeline for autocomplete street search field

[
        {
          '$search': {
            'index': 'town_autocomplete', 
            'autocomplete': {
              'query': req.params.param, 
              'path': 'address.street',
            }, 
            'highlight': {
              'path': [
                'address.street'
              ]
            }
          }
        }, {
          '$limit': 5
        }, {
          '$project': {
            'address.street': 1, 
            'highlights': {
              '$meta': 'searchHighlights'
            }
          }
        }
      ]

Building Home Provider Application with Xata, Cloudinary, and NextJs

Abdulrasaq Jamiu Adewuyi — Wed, 23 Nov 2022 11:31:03 +0000

Introduction

Nothing is more convenient than a database that works without worrying about its server(s). We don't have to worry about the server because an organization manages it. We don't have to worry about how many servers there are or how much RAM they have.

Xata is a serverless data platform that provides databases that guarantee high durability, availability, and security so we can focus on other things that matter.

In this article, you will learn how to use Nextjs with Xata (a serverless database) and Cloudinary (an assets storage service) to build a highly robust home provider application, Accommodate.

About Accommodate

The project (accommodate) is a platform that allows registered users (hosts) to add new homes to the platform and edit and delete existing homes, where home seekers can see a list of homes added by the hosts.

The main idea is to learn and show developers how easy and flexible it is to use Xata and Cloudinary.

Prerequisites

To follow along, we will need the following:

Basic knowledge of JavaScript and NextJS
Install Node.js on our computer
Preferred code editor Visual Studio Code

Project Overview

I chose this project because it was helpful enough to explore various operations on the Xata database, such as insert, get, filter, create, update and delete. Also, to explore the seamless asset management features Cloudinary has to offer.

Below are some of what we will be working on within this project:

NextJS: Our Javascript framework of choice. We will use this framework to build our front end.
Xata: Secure serverless data platform where we will be creating databases
Cloudinary: A cloud assets storage service where we will be storing images

Below will be the initial screen displayed of our application.

The source code of the project is available on GitHub.
Here is the live link to the deployed application we will be building

Project Live Demonstration

Below is a video demonstration should what we will be building in this article

Project setup

Let's set up our front-end and back-end projects.

Setting up a NextJS project.

The source code of the project is available on GitHub. Feel free to clone or fork. However, to follow through with the tutorial, bootstrap a new Next.js App.

Run the below command on the terminal in our project folder.

npx create-next-app accommodate

accommodate in the above indicate the project name.

Then, we should move to the project directory by running the following:

cd accommodate

Install packages

This project will require the following packages, so let's install them, in our terminal let’s run

npm install @xata.io/cli -g

This will install Xata CLI globally, allowing the Xata command to run on our device.

npm install axios

This will install axios which we will be using to make API calls.

Setting up a Cloudinary Account
Next, signup to Cloudinary with a google account, GitHub account, or email; once signup is completed, we will be redirected to the Xata dashboard console, where we can create databases, tables, and records.

We should get a page like so.

Take note of the Cloud Name and the API Key these are the value we will be using to query Cloudinary APIs.

Setting up a Xata Account

Next, signup on to Xata with a google account, GitHub account, or email; once signup is completed, we will be redirected to the Xata dashboard console, where we can create databases, tables, and records.

With the above steps complete, we are all set. Next, let's create our database.

Creating a Xata database:

To create a Xata database, check out the guide from the Xata documentation. I believe this work guide is simple and easy to follow; however, if you have any questions, feel free to drop them in the comment section.
Click Add a database and specify the database name. Next, create tables.

In this project, we will be creating two tables.

Users table - To store user information.
Homes table - To store home information.

Users table
Table name - users

Field name	Data Type
fullname	String
email	String
password	String

Homes table
Table name - homes

Field name	Data type
title	String
price	String
location	String
dateFrom	String
dateTill	String
lng	Decimal number
lat	Decimal number
price	Decimal number
category	String
image	Multiple select
host	Link (link to users table)

Check out https://xata.io/docs/intro/getting-started for more information on the data types.

Connecting to Xata database:

Once the above steps are completed, connect to the created Xata database. To connect, let’s open our project and follow the steps below.

On our Xata dashboard, click on the Get code snippet button at the top-right corner of the page
Click on the Setup Xata Project dropdown button.
Copy the Xata init command; the command should look like so

xata init --db https://**********************.*******.xata.sh/db/accomodate

Then in our project terminal, let’s run the copied Xata init command. This will initialize and pull the database to our project.

To initialize our project, Xata CLI will ask questions allowing it to create configuration files. Kindly supply responses as below:

Do you want to use code generation in your project? : Generate JavaScript code with ES modules
Choose the output file for the code generator : utils/xata.js
Do you want to generate the TypeScript declarations? › N
Choose a default development branch (fallback branch). : none

Once the pull is done, we should get a message ✔ You are all set!

With this pulled successfully, we can start querying our Xata database.
Let's go ahead to populate our user's table with some records.

From the Xata console, let’s click on our database, then click on the table we want to populate, and next click on the plus sign at the last row of our table.

Fill in the record information and click Create record to continue. We can add as many records as we want.

Now, let's run our first Xata query command.

Query Xata database
In our, NextJS project, open pages/api, let create a file, getUsers.js add code as shown below:

Update index.js like so.

The above shows the simple code snippet to get all records in our user's table. Firstly we import getXataClient for our Xata configuration file generated earlier.

Next, we create an instance of getXataClient using the query command.

The question is, how do we get the query commands? Xata provides a getting code snippet panel where we can get our query commands, and the code snippet reflects the state of the table.
Check out the illustration below.

Project implementation

With these done, let's start implementing our project.

Project structure
The project structure looks like so.

Create API requests
Let's create an API to get all records from the homes table
In the pages/api folder, let's create a file, getHomes.js, and add code as shown below.

Let's create an API to get homes records added by a specific user
In the pages/api folder, let's create a file, getUserHomes.js, and add code as shown below.

Let's create an API to add new records to the homes table
In the pages/api folder, let's create a file, registerUser.js, and add code as shown below.

Let's create an API to authenticate a user.

In the pages/api folder, let's create a file, namely loginUser.js, and add code as shown below.

Let's create an API to create a user.
In the pages/api folder, let's create a file, registerUser.js, and add code as shown below.

Consume API request
With all these APIs created, the next is to consume them.

Let's consume getHomes API by updating the pages/index.js file as below:

Let's consume getUserHomes API by updating the pages/dashboard.js file as below:

Let's consume loginUser API by updating the pages/login.js file as below:

Let's consume registerUser API by updating the pages/signup.js file as below:

Let's consume addHome API by updating the components/AddHomeForm/index.js file as below:

| Note: the above are code snippets from our code. The complete code can be found on GitHub |

And that is all. We have now completed the implementation of our home provider application.
Now we can deploy the application to our preferred hosting platform. In our case Netlify.

Deploying our app on Netlify

To deploy to a NextJS application on Netlify, follow this article on the Netlify blog post.

Conclusion

I hope you enjoyed this article the same as I did. In this exciting article, I explained how I built a home provider application with NextJS (JavaScript framework), Xata (a Secure serverless data platform), and Cloudinary(A cloud assets storage service).

In this article, we can learn:

How to create a NextJS application
How to sign up on Xata
How to create a Xata database and tables
How to get code snippets from Xata tables
How to query Xata
How to sign up on Cloudinary
How to insert assets into Cloudinary
And many more.

What Next?

This is the end of this article, but it won't be my last contribution to the project. The project can still be improved in many ways, such as

Users requesting home
Users paying for home
Getting latitude and longitude from home address
Host delivering request

If you would like to contribute to this project, you are welcome to Git fork the project and modify it.
You are welcome to connect with me on Twitter. This will enable you to stay up to date with more exciting articles that will be posted here.

Happy coding!

Resources and reference

Xata documentation
Deploy Nextjs on Netlify
UI design ideas and some assets for Airbnb
Cloudinary documentation

How to Create a Countdown Timer In ReactJS

Abdulrasaq Jamiu Adewuyi — Thu, 01 Sep 2022 20:02:48 +0000

Introduction

In a previous article, I explained how to Create a Countdown Timer With JavaScript, this article contained more information on how the countdown timer work, its importance, and stated some use case where you would need a countdown timer. I also explained how the JavaScript setInterval() and clearInterval() method work. I recommend checking it out.

In this article, I will explain how to implement the countdown time in ReactJS.

Create a New React project

It’s simple to get started with React. To create a new React project, run the following command in the terminal.

This command will create a new react project with some example files to get you started, where count-down-timer will be your project name.

npx create-react-app count-down-timer

With this project created, open /App.js file and paste the below code.

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

function App() {
  const countdownDate = new Date('10/18/2022');
  //end date
  const [state, setState] = useState({
    days: 0,
    hours: 0,
    minutes: 0,
    seconds: 0,
  });
//state variable to store days, hours, minutes and seconds

  useEffect(() => {
    const interval = setInterval(() => setNewTime(), 1000);
    //indicating function to rerun every 1000 milliseconds (1 second)

    if(state.seconds < 0){
      clearInterval(interval)
    //Stop the rerun once state.seconds is less than zero
    }
  }, []);

  const setNewTime = () => {
    if (countdownDate) {
      const currentTime = new Date();
      //get current time now in milliseconds
      const distanceToDate = countdownDate - currentTime;
      //get difference dates in milliseconds
      let days = Math.floor(distanceToDate / (1000 * 60 * 60 * 24));
      // get number of days from the difference in dates
      let hours = Math.floor(
        (distanceToDate % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60),
      );
      // get number of minutes from the remaining time after removing hours
      let minutes = Math.floor(
        (distanceToDate % (1000 * 60 * 60)) / (1000 * 60),
      );
      let seconds = Math.floor((distanceToDate % (1000 * 60)) / 1000);
      // number of hours from the remaining time after removing seconds

      const numbersToAddZeroTo = [1, 2, 3, 4, 5, 6, 7, 8, 9];

      days = `${days}`;
      if (numbersToAddZeroTo.includes(hours)) {
        hours = `0${hours}`;
      } else if (numbersToAddZeroTo.includes(minutes)) {
        minutes = `0${minutes}`;
      } else if (numbersToAddZeroTo.includes(seconds)) {
        seconds = `0${seconds}`;
      }
      // a logic to add 0 in front of numbers such that 1 will be 01, 2 will be 02, and so on.

      setState({ days, hours, minutes, seconds });
      //Updating the state variable.
    }
  };

  return (
    <div className="container">
        {
            state.seconds < 0 ?
            <div className='counter-timer'> Time up </div>
            :
            <div className='counter-container'>
            <div className='counter-timer-wrapper'>
              <div className='counter-timer'>{state.days || '00'}</div>
              <span >Days</span>
            </div>
            <div className='counter-timer-wrapper'>
              <div className='counter-timer'>:</div>
            </div>
            <div className='counter-timer-wrapper'>
              <div className='counter-timer'>{state.hours || '00'}</div>
              <span >Hours</span>
            </div>
            <div className='counter-timer-wrapper'>
              <div className='counter-timer'>:</div>
            </div>
            <div className='counter-timer-wrapper'>
              <div className='counter-timer'>{state.minutes || '00'}</div>
              <span >Minutes</span>
            </div>
            <div className='counter-timer-wrapper'>
              <div className='counter-timer'>:</div>
            </div>
            <div className='counter-timer-wrapper'>
              <div className='counter-timer'>{state.seconds || '00'}</div>
              <span >Seconds</span>
            </div>
          </div>
        }

    </div>

  );
}

export default App;

Open /App.css file and paste the below code.


body{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Inter', sans-serif;
  }
  div{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  #time-up{
    display: none;
  }
  .container{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  height: 100vh;
  background-color: #1A1A40;
  color: white;
  }
  .counter-container {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 8px;
  }
  .counter-timer-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* justify-content: fl; */
  }
  .counter-timer{
    font-size: 60px;
    font-weight: 600;
    margin: 0;
    padding: 0;
  }
  span{
        color: #c7c7c7;
        font-size: 18px;
  }

  @media screen and (max-width : 900px) {
    .counter-timer {
      font-size: 30px;
      font-weight: 600;
    }
    span {
        font-size: 12px;
    }

  }

And that is all. You have a super cool countdown timer.

Note: The countdown timer will not show up if you are reading this article on or after 18th October 2022. You should know why. This is because "10/18/2022" is our end date. Feel free to change the end date to a later date after today and see the magic.

Thanks for Reading 🎉🎉🎉

If you have any questions, kindly drop them in the comment section.

I'd love to connect with you on Twitter for more exciting content

Happy coding...

How to Create a Countdown Timer With Javascript

Abdulrasaq Jamiu Adewuyi — Thu, 01 Sep 2022 20:02:12 +0000

Introduction

Count down timer is an essential feature to have in a webpage that requires an action from the user within a certain period. It is often used to increase user engagement in a webpage. It is popularly used in web pages such as sales pages, opt-in pages, event pages, and a lot more.

This article will explain how I created a custom countdown timer with HTML, CSS, and JavaScript so you will be able to create yours.

How Does the Count Down Timer Work

Before we dive in, let's understand how the countdown timer works. It simply shows the time left from now to a specified later time; to get this, we need to subtract the time now from the later time.

As previously mentioned, we must subtract the current time from a future time to calculate the remaining time. Fortunately, we can use the JavaScript "Date()" method for this.

Let's see a simple example of subtracting two dates:




let first_date = new Date('10/18/2022') 
let second_date = new Date('09/18/2022')

console.log(first_date - second_date)
//2592000000

let date_today = new Date() //today's date

console.log(first_date - date_today)
//5140586280

From the above, we can get the difference in the dates in milliseconds.

Now is the time to convert the milliseconds to equivalent days, hours, minutes, and seconds.

From our basic conversion:
1 day = 1000 x 60 x 60 x 24 milliseconds
1 hour = 1000 x 60 x 60 milliseconds
1 minute = 1000 x 60 milliseconds
1 second = 1000 milliseconds




const dateTill = new Date('10/18/2022')
//end date
const dateFrom = new Date();
//start date (today)

const diff = dateTill - dateFrom
//difference in dates

day_to_miliseconds = 1000 * 60 * 60 * 24
// 1 day equivalent in milliseconds
hour_to_miliseconds = 1000 * 60 * 60
// 1 hour equivalent in milliseconds
minute_to_miliseconds = 1000 * 60
// 1 minute equivalent in milliseconds
second_to_miliseconds = 1000
// 1 second equivalent in milliseconds

let days = Math.floor(diff / day_to_miliseconds );
// number of days from the difference in dates
let hours = Math.floor((diff % day_to_miliseconds) / hour_to_miliseconds);
// number of hours from the remaining time after removing days 
let minutes = Math.floor((diff % hour_to_miliseconds) / minute_to_miliseconds);
// number of minutes from the remaining time after removing hours
let seconds = Math.floor((diff % minute_to_miliseconds) / second_to_miliseconds);
// number of hours from the remaining time after removing seconds

console.log(days, hours, minutes, seconds)
// expected result

Cool, right?
Now that we have understood how to get our data, let's design the beautiful countdown timer with HTML and CSS.

With the above design implemented, we will use a JavaScript setInterval() method to implement the countdown functionality.

How does the `setInterval()` method works.

The setInterval() method is use to execution a function at interval (e.g, every 1 minute, every 5 minute e.t.c) until clearInterval() method is called.

Syntax



setInterval(() => function(), time);

function() represent function to run every time
time represents the interval at which we should recall the function in milliseconds.
We will also use the clearInterval() method to stop our setInterval() method once the specified end date is reached.

For the countdown timer, we will write a function that will run every 1 second (1000 milliseconds).
Let's look at the below code carefully.

And that is all. You have a super cool custom countdown timer.

Note: The countdown timer will not show up if you are reading this article on or after 18th October 2022. You should know why? This is because "10/18/2022" is our end date. Feel free to change the end date to a later date after today and see the magic.

Wrapping up

The countdown timer is an important feature in some web pages, such as sales pages, opt-in pages, and many other use-cases. In this article, I explained how to use the javascript setInterval() and clearInterval() methods to create a countdown timer in a few simple steps.

You can also check out my article on How to Create a Countdown Timer In ReactJS

Thanks for Reading 🌟🌟🌟

If you have any questions, kindly drop them in the comment section.

I'd love to connect with you on Twitter

Happy coding!

How to sort an array of objects using the JS Sort Method

Abdulrasaq Jamiu Adewuyi — Sat, 06 Aug 2022 13:32:00 +0000

The JavaScript Sort() method is a built-in function that we can easily use to sort an array of elements in JavaScript. However, the logic and method of applying the sort method differ depending on the data type of the elements in an array (string, number, object, etc.).
This article will teach you how to sort an array for strings, numbers, dates, and objects.

How Does the `Sort()` Method Work?

The sort() method is used to arrange or rearrange the positioning of an element in an array based on a condition.

The sort() method can arrange digits ranging from -1 to 9, A to Z, a to z, the question is how do we use the sort() method with digits outside this range, keep reading this will be explained in details.

NOTE: The sort() method give precedence from -1 to 9, A to Z, a to z. i.e in an array where we have a combination of numbers (-1 to 9), uppercase letter (A - Z), and lowercase letter (a - z), the sort() method will consider numbers followed by uppercase letter then the lowercase letter.

Why would I need the `sort()` method?

The sort method is widely used in many live scenarios.
Below are some of the scenarios where you can use the sort() method

Imagine an API that returns an array of articles and each article has a key showing number of views, where you need to display the 10 most viewed articles. (sorting by number)
Imagine an array of countries that you need to display in alphabetical order (sorting by string)
Imagine an array of items in a store that you need to display based on when it was added (sorting by date)

Let's get started properly.

How to Sort an Array of Strings in Ascending Order.

Fortunately, the sort() method, by default, will sort elements in alphabetical order from (a-z). As an outcome, the code below should arrange the string array in ascending order.

//array of strings
const list_of_animals = ["goat", "antelope", "horse", "fox", "cat"];

list_of_animal.sort()
//[ 'antelope', 'cat', 'fox', 'goat', 'horse' ]

How to Sort an Array of Strings in Descending Order

To sort an array of strings in descending order, you must use the reverse() method with the sort() method.
The sort() method sorts the array in ascending order, whereas the reverse() method reverses the order of the array elements.

//array of strings
const list_of_animals = ["goat", "antelope", "horse", "fox", "cat"];

list_of_animals.sort().reverse()
//[ 'horse', 'goat', 'fox', 'cat', 'antelope' ]

Note: The above method will work fine where all elements of the array are of the same case (uppercase or lowercase).

However, in the case where the elements in an array include both uppercase and lowercase, we will get an unexpected result.

const list_of_animals = ["goat", "antelope", "Horse", "fox", "Cat"];

list_of_animals.sort()
//[ 'Cat', 'Horse', 'antelope', 'fox', 'goat']

Well, it is not an unexpected result, that is just how the sort() method works based on precedence, in cases like this all we need to do is convert every element to the same case before applying the sort method. The below code should work fine

const list_of_animals = ["goat", "antelope", "Horse", "fox", "Cat"];

list_of_animals.map((list)=>list.toLowerCase()).sort()
//[ 'antelope', 'cat', 'fox', 'goat', 'horse' ]

Cool, let move to array of numbers

How to Sort an Array of Numbers

Sorting an array of numbers is not as straightforward as that of strings. As stated earlier, the sort method, by default, will sort an array of number ranging from -1 to 9. Therefore applying a sort() method to an array of numbers will give an unexpected response. For example

//array of numbers
const animal_count = [62, 42, 12, 3, 7];

animal_count.sort()
//[ 12, 3, 42, 62, 7 ]

From the result, you will see that the array sorts based on the first character in each number which is not what we want.

Therefore, to be able to sort an array of numbers, we need an additional comparison function to support the sort() method.
The compare function will accept two arguments followed by a statement, for instance:

function(x, y) {return x - y}

//The result will be positive if x is greater
//The result will be negative if y is greater
//The result will be zero if x and y are equal

Fortunately, the sort() method can appropriately sort positive, zero, and negative values.
So, as we use the sort() method in conjunction with the compare function, the sort() method compares two values, sends the values to our compare function, and then sorts the values based on the returned value.

How to Sort an Array of Numbers in Ascending Order.

Sorting an array of numbers in ascending order, i.e., from the least number to the highest number

animal_count?.sort((x, y) => x - y);
// 3, 7, 12, 42, 62 ]

How to Sort an Array of Numbers in Descending Order

We are sorting an array of numbers in descending order, i.e., from the highest number to the least number.

animal_count?.sort((x, y) => y - x);
// [ 62, 42, 12, 7, 3 ]

How to Sort an Array of Dates in Ascending Order

Sorting an array of dates in ascending order, i.e., from the least date to the highest date


const date_added = ["2022-07-15T17:10:57.720274+01:00", "2022-07-15T17:12:57.720274+01:00", "2022-07-14T17:10:00.720274+01:00", "2022-07-13T17:09:57.720274+01:00", "2022-07-15T17:10:50.720274+01:00"];

date_added?.sort((x, y) => new Date(x) - new Date(y));

/* [
 '2022-07-13T17:09:57.720274+01:00',
 '2022-07-14T17:10:00.720274+01:00',
 '2022-07-15T17:10:50.720274+01:00',
 '2022-07-15T17:10:57.720274+01:00',
 '2022-07-15T17:12:57.720274+01:00'
 ] */

How to Sort an Array of Dates in Descending Order

Sorting an array of dates in ascending order, i.e., from the highest date to the last date:

const date_added = ["2022-07-15T17:10:57.720274+01:00", "2022-07-15T17:12:57.720274+01:00", "2022-07-14T17:10:00.720274+01:00", "2022-07-13T17:09:57.720274+01:00", "2022-07-15T17:10:50.720274+01:00"];

date_added?.sort((x, y) => new Date(y) - new Date(x));

/*[
 '2022-07-15T17:12:57.720274+01:00',
 '2022-07-15T17:10:57.720274+01:00',
 '2022-07-15T17:10:50.720274+01:00',
 '2022-07-14T17:10:00.720274+01:00',
 '2022-07-13T17:09:57.720274+01:00'
 ]*/

How to Sort an Array of Objects by Any Key Value

Considering the below array of objects, we can sort by any of the keys (id, name, count, date_added) based on what you have learned in this article. However, I will show you how to sort by date_added and by name:

//array of object
const activity_history = [
    {
      id: "1",
      name: "goat",
      count: 62,
      date_added: "2022-07-15T17:10:57.720274+01:00"
    },
    {
      id: "2",
      name: "antelope",
      count: 42,
      date_added: "2022-07-15T17:12:57.720274+01:00"
    },
    {
      id: "3",
      name: "horse",
      count: 12,
      date_added: "2022-07-14T17:10:00.720274+01:00"
    },
    {
      id: "4",
      name: "fox",
      count: 3,
      date_added: "2022-07-13T17:09:57.720274+01:00"
    },
    {
      id: "5",
      name: "cat",
      count: 7,
      date_added: "2022-07-15T17:10:50.720274+01:00"
    }
  ];

How to Sort an Array of Objects by Date in Ascending Order

activity_history?.sort(
    (x, y) => new Date(x.date_added) - new Date(y.date_added)
  );

How to Sort an Array of Objects by Date in Descending Order

activity_history?.sort(
    (x, y) => new Date(y.date_added) - new Date(x.date_added)
  );

How to Sort an Array of Objects by Name in Ascending Order

 activity_history.sort((x, y)=>{
    if(x.name < y.name) { return -1; }
    if(x.name > y.name) { return 1; }
    return 0;
  })

How to Sort an Array of Objects by Name in Descending Order

 activity_history.sort((x, y)=>{
    if(y.name < x.name) { return -1; }
    if(y.name > x.name) { return 1; }
    return 0;
  })

Conclusion

Ooh yeah, that is it. I hope you learned and understand how easy it is to use the sort() method for different data types through the many examples of how the methods work.
Thanks for Reading 🌟🎉

I'd love to connect with you on Twitter

Happy coding!

How to create a custom image uploader with preview

Abdulrasaq Jamiu Adewuyi — Thu, 28 Jul 2022 21:14:00 +0000

Introduction

Creating a custom image uploader has nearly become a must as the default HTML input type file looks plain.
You will agree that modern web design demands more, and there seems to be no direct way to style it. However, the use of ::file-selector-button CSS pseudo-element can be used but still has its limitations. In this article, I will show you how I created a fully customized image uploader with preview as shown below.

Creating an HTML `input` type File

Create an HTML input type file with attribute accept = “image/x-png, image/jpeg”



<input type="file"
   id="image-file"
   accept="image/x-png, image/jpeg"
/>

By adding the attribute accepts to the input type file, you specify the type of file you want the input to accept. In our case, we want it to accept image type png and image type jpeg.

Click on the input to open the file explorer. You will see that you can select images with .png extension and images with .jpeg extension only.

Creating an HTML `label` Tag

Add a label tag and point the label for attribute to the id of the created input file.



<input type="file"
  id="image-file"
  accept="image/x-png, image/jpeg"
 />
 <label for="image-file">Upload image</label>

By adding the for attribute of the label to the id of the input, clicking the label element behaves as if we clicked the input directly.

The outcome of the above is as shown below. We can click the Upload image text and see that it toggles the window file explorer, just as what the input file is doing.

Hiding The Default `input`

Next is to hide the default input and style the label as you want.
Since we have a label that behaves exactly as our input, the next is to hide the default input. To hide the default input, we need to add a CSS style and set display = none to the input file tag.



<input type="file"
  id="image-file"
  accept="image/x-png, image/jpeg"
  style="display : none"
/>

At this point, you now have a label you can style as you like. To style our label, add an id attribute to the label tag, then add the below CSS to give it a beautiful card-like custom image uploader.



<label id="image-label" for="image-file">Upload image</label>



   body{
      display: flex;
      justify-content: center;
   }
   #image-label{
      position: relative;
      width: 200px;
      height: 200px;
      background: #fff;
      background-position: center;
      background-repeat: no-repeat;
      background-size: contain;
      display:flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0px 1px 7px rgba(105, 110, 232, 0.54);
      border-radius: 10px;
      flex-direction: column;
      gap: 15px;
      user-select: none;
      cursor: pointer;
      color: #207ed1;
      transition: all 1s;
   }
   #image-label:hover{
      color: #18ac1c;
   }

Now that you have a completely customized image uploader, now is time to preview the selected image.

Using Javascript to Get a Selected File From an `input` Type File

Next is getting the selected image and previewing it for the user
Now what I did is, in my JavaScript file, I listen to the change event on the input file, whereby whenever a change is made, it returns an array of one element which contains the information of the uploaded file(such as file name, file type, etc.).



const input_file = document.getElementById('image-file');
input_file.addEventListener('change', async function(){
   const file = document.querySelector('#image-file').files;
   console.log("file", file)
   })

Using Javascript to Convert File to BASE64 Encoded File.

Now that we can get the file, we need to convert the file to a base64 encoded file for our browser to understand the image



const input_file = document.getElementById('image-file');

const convert_to_base64 = file => new Promise((response) => {
   const file_reader = new FileReader();
   file_reader.readAsDataURL(file);
   file_reader.onload = () => response(file_reader.result);
});

input_file.addEventListener('change', async function(){
   const file = document.querySelector('#image-file').files;
   const my_image = await convert_to_base64(file[0]);
   console.log(my_image, "my_image")
   })

Using Javascript to Style an Element

Now we are done, all we need to do is set the base64 image as the background image of our label.



const input_file = document.getElementById('image-file');
const input_label = document.getElementById('image-label')

const convert_to_base64 = file => new Promise((response) => {
   const file_reader = new FileReader();
   file_reader.readAsDataURL(file);
   file_reader.onload = () => response(file_reader.result);
});

input_file.addEventListener('change', async function(){
   const file = document.querySelector('#image-file').files;
   const my_image = await convert_to_base64(file[0]);
   input_label.style.backgroundImage =`url(${my_image})`
   })

And that is all. You have a super cool custom image uploader with an image preview in a few simple steps.

Conclusion

As a developer, you will agree that modern web design demands more than just a plain image uploader. The above articles show you how to create a custom image uploader with image preview in four easy steps with your HTML, CSS, and JavaScript

Thanks for Reading 🌟🎉

I'd love to connect with you on Twitter

Happy coding...

DEV Community: Abdulrasaq Jamiu Adewuyi

Implement text search with MongoDB Atlas Search and NextJS

Building a Text Search With the Autocomplete Feature With MongoDB Atlas Search and NextJS

What Is New in NextJS 13

Introduction

Prerequisites

Overview

File & Folder Structure in Next 13.

Server & Client-side Component

Routing in NextJS

Routes in NextJS 13

Nested Route in NextJS 13

Dynamic Route in NextJS 13

NextJS Data Fetching (SSR, SSG, ISR)

NextJS Server Side Rendering (SSR)

NextJS Static Side Generation (SSG)

NextJS Incremental Static Regeneration (ISR)

Next.js API Endpoints (Route Handlers)

SEO & Metadata

Static Metadata

Dynamically Generated Metadata

Conclusion

How to Generate Custom PDF, Using React and React-PDF.

Introduction

Page preview

PDF Invoice design

Page in action

Prerequisites

Project Setup.

Project Folder Structure

React-PDF

React-PDF Building Blocks.

Design an E-commerce PDF Invoice

Downloading PDF Invoice with React-PDF

Printing PDF Invoice with React-PDF

Share PDF Invoice with React-PDF

Conclusion

MongoDB Atlas Hackathon 2022 on DEV

What I built

Category Submission:

App Link

Screenshots

Landing page

Loading state

Country autocomplete

Street autocomplete

Search result

Description

Link to Source Code

Permissive License

Background

How I built it

Connecting to mongoDB collection

Create search indexes

Create search indexes for country autocomplete

Create search indexes for street autocomplete

Create aggregation pipeline to get list on homes in a category property_type

Create aggregation pipeline to search list of homes by country in each category

Create aggregation pipeline to search list of homes by street in each caterogy

Create aggregation pipeline to search list on homes by both country and street in each category

Create aggregation pipeline for autocomplete country search field

Create aggregation pipeline for autocomplete street search field

Building Home Provider Application with Xata, Cloudinary, and NextJs

Introduction

About Accommodate

Prerequisites

Project Overview

Project Live Demonstration

Project setup

Creating a Xata database:

Connecting to Xata database:

Project implementation

Deploying our app on Netlify

Conclusion

What Next?

Resources and reference

How to Create a Countdown Timer In ReactJS

Introduction

Create a New React project

How to Create a Countdown Timer With Javascript

Create aggregation pipeline to get list on homes in a category `property_type`

How does the `setInterval()` method works.

How Does the `Sort()` Method Work?

Why would I need the `sort()` method?

Creating an HTML `input` type File

Creating an HTML `label` Tag

Hiding The Default `input`

Using Javascript to Get a Selected File From an `input` Type File