Forem: Chidi Eze

Alternatives to Docusaurus for product documentation

Chidi Eze — Thu, 04 Apr 2024 13:38:58 +0000

Introduction

Product documentation is essential to every product launch because it gives users the information they need to understand, use, and troubleshoot a product properly. This article is a follow-up to our previous one on the top five open-source tools for developing documentation.

Docusaurus is a popular open-source documentation tool primarily designed for product documentation and other technical documentation needs. It was first released in 2017 by Facebook Open Source (now Meta Open Source). Just recently, Docsaurus version 3.0 was released.

One of the highlights of Docusaurus is that it is built on top of modern web technologies, such as React and Markdown. This makes it easy for users to create documentation sites that are responsive, interactive, and easy to read. Secondly, it is extensible with plugins — users can easily add new features and functionality to their documentation site.

Why Docusaurus Alternatives?

Docusaurus isn’t perfect, however. Let’s take a look at some reasons for considering alternatives.

It lacks real-time co-editing, which can be crucial for teams working together on documentation.
It has a more difficult learning curve than other tools, especially for non-technical users.
It’s built for static site generation, which can lead to performance limitations for large documentation sites with many users.

In this article, we’ll explore some alternatives to Docusaurus. Below are some of the significant factors that will likely influence your decision.

Technical criteria:

Ease of use: How easy is setting up and using the tool? Does it require coding experience, or is it geared towards non-technical users?

Performance and scalability: Can the platform handle large amounts of content and users without compromising performance or stability?

Content creation and management: What formats does the tool support for content creation? Does it offer features for version control and allow collaboration?

Search and navigation: Does the tool have powerful search capabilities and an intuitive navigation system?

Community size and activity: Does the tool have a vibrant and active community that provides support, resources, and ready-made plugins or themes? A larger community indicates wider adoption and faster troubleshooting.

Open-source license: Does the platform offer free and open-source software (FOSS) licensing, allowing for customization and contribution?

GitBook

Git B ook is a well-known online platform for developing, sharing, and publishing technical documentation. Although it’s not open source, it offers free and paid plans, with the free plan having limited features and functionalities. The paid plans unlock more features, such as custom domains, team collaboration, and advanced analytics.

GitBook has an easy-to-use interface, a broad feature set, and a growing community, making it a good choice for independent developers and teams.

GitBook makes it simple to create content by allowing you to format, embed media, and bring your documentation to life with its intuitive WYSIWYG editor. You can also work with your team in real-time and view edits as they happen.

Aside from providing an intuitive editor and real-time collaborating environment, GitBook supports various content types, including text, images, code snippets, and diagrams.

Also, interactive elements like quizzes and polls allow comprehensive and engaging documentation creation.

It offers various deployment options, including cloud hosting, self-hosting, and static site generation. Users can choose the best deployment method for their needs and technical expertise.

Similarities with Docusaurus
GitBook is similar to Docusaurus in the following ways:

They both support the Markdown language for content creation, making it accessible to technical and non-technical users.
Themes allow users to tailor the documentation's appearance to their specific branding and needs; they have several theme customization options.
Both connect with Git for version control and have active communities supporting and contributing to their continuous development.

Differences
GitBook and Docusaurus differ in the following ways:

Gitbook has a WYSIWYG editor; however, Docusaurus mainly uses Markdown to edit content.
While Docusaurus offers a more focused group of features optimized for speed and performance, Gitbook provides a wider range of built-in features, including analytics and interactive aspects.
Docusaurus focuses more on creating static websites, whereas Gitbook provides self-hosting and cloud-hosting solutions.
Docusaurus is free and open source, whereas GitBook has a free plan with some restrictions.

Migrating from Docusaurus to GitBook can be smooth, especially for teams comfortable with Markdown and familiar with web-based documentation platforms.

However, this can be difficult when collaboration procedures, version control, and specialized plugin functionalities are a priority. While both offer collaborative functions, their methodologies differ. For example, while GitBook offers extensive analytics and SSO connectivity, it still lacks specific functionalities you can use with Docusaurus.

GitBook is frequently updated; the last update was on June 26, 2023. It is Apache-licensed and has a GitHub community where users can learn about the latest release and other vital information.

GitBook is an interesting alternative to consider if subscription fees are not a problem and ease of transition, a robust ecosystem, a user-friendly interface, and other features like custom domain analytics and SSO are essential to you.

The following companies use GitBook as their documentation tool.

Qubitro
Airbnb
Tech stack
Mailchimp

MkDocs

MkDocs, according to AlternativesTo, is the most popular open-source and self-hosted
alternative to Docusaurus.

It is a static site generator focused on building product documentation. It emphasizes simplicity and ease of use; developers who love clarity prefer MkDocs because of its minimalism.

Its documentation source files are written in Markdown, configured with a single YAML config file, and have a straightforward directory structure.

It is super fast and can generate a complete documentation site in seconds, making it suitable for large projects and websites with a large amount of material.

Similarities with Docusaurus
MkDocs is similar to Docusaurus in the following ways:

They both heavily use Markdown language in content creation, making it simple and easy for technical and non-technical users.
They integrate smoothly with Git for version control and provide theme customization possibilities, allowing customers to generate documentation exactly how they want it.

Differences
MkDocs and Docusaurus differ in the following ways:

MkDocs focuses on minimalism and lightweight functionality, whereas Docusaurus focuses on performance and extensive capabilities.
MkDocs is more straightforward to understand and use, whereas Docusaurus may need more technical expertise for advanced features and customization.
MkDocs, like GitBook, focuses primarily on static site generation, but Docusaurus provides other deployment choices, such as cloud hosting and server-side rendering.

MkDocs is BSD-2-Clause licensed and has a vibrant community; GitHub Discussion is used for questions and high-level discussion, while the Gitter/Matrix chat room is used to discuss less complex topics. These communities provide essential resources and support.

It is frequently updated and maintained, and the most recent release was on September 18, 2023

Migrating from Docusarus to MkDocs is simple because both technologies support the Markdown language. It may be difficult because Docusaurus permits multi-user editing, which MkDocs currently lacks. If collaborative editing is critical, we must identify and incorporate external technologies.

MkDocs is an excellent choice if a team needs a straightforward tool to set up, is familiar with Markdown, and when team-based editing is not required. The documentation is centered on clear writing.

The following companies and projects use MkDocs as their documentation tool.

Atlassian
Microsoft
Red Hat
Kubernetes

Docsify

Docsify is another open-source alternative to Docusaurus, according to AlternativeTo. It creates your documentation website in real time but does not generate static HTML files, unlike GitBook. Instead, it intelligently reads and parses your Markdown files before displaying them as a webpage. All you have to do is create an index file.

It is lightweight and straightforward to use, and like Docusaurus, it is primarily built for document creation. It also supports Markdown for content development and prioritizes speed and performance. It also has an easy-to-use drag-and-drop interface for non-technical users.

It streamlines content creation with multi-user editing, perfect for smaller teams, and offers basic version control.

It offers search and navigation, making it ideal for smaller projects with less sophisticated material and a growing community with fewer resources than other solutions.

Similarities with Docusaurus
Docsify is similar to Docusaurus in the following ways:

Both platforms utilize Markdown for content creation, making them accessible to a wider audience.
They offer seamless integration with Git for version control and can be extended with add-ons, plugins, and extensions.

Differences
Docsify and Docusaurus differ in the following ways:

Docusaurus documentation requires an internet connection, while Docsify allows offline access with Progressive Web Apps.
Docusaurus has built-in search functionality that allows users to search through the documentation content; Docsify depends on external search plugins to enable the search feature.
Docusaurus offers various deployment options, while Docsify, just like GitBook and MkDocs, primarily focuses on static site generation.

Depending on your situation, migrating from Docusaurus to Docsify can be straightforward or challenging.

It could be simple because both programs support the Markdown language, and Docsify's clean and user-friendly design makes it easy to navigate for those already familiar with Docusaurus.

It is challenging because, unlike Docusaurus, Docsify doesn't have built-in version control; thus, backing up content changes would have to be done manually. Also, Docsify's plugin ecosystem is still growing. If you depend extensively on Docusaurus plugins, you may need to find alternative solutions or develop custom features.

Docsify is frequently updated; the latest release was on June 24, 2023, and the most recent update was on December 17, 2023. It is MIT-licensed and has an active Discord community.

Docsify, with its drag-and-drop interface and simple collaborative feature, can be an excellent choice for non-technical teams who want to deploy simple documentation quickly.

The following companies use Docsify as their documentation tool.

Huawei
Cyber Alliance
KVIKYMART

Archivy

Archivy is a self-hosted knowledge repository that allows you to securely save meaningful content that contributes to your personal, searchable, and expandable wiki.

Archivy is specifically built to handle massive documentation sites with excellent scalability. Another core feature of Archivy is saving webpages locally by simply bookmarking the page. It offers robust search and navigation but might be less familiar to non-technical users.

It is free, open-source, MIT-licensed, and accessible to individual developers and organizations with small budgets. It is intended for experienced users and requires technical expertise for setup and configuration.

Similarities with Docusaurus
Archivy is similar to Docusaurus in the following ways:

Both platforms generate static HTML files for fast loading times and efficient content delivery.
Both platforms support Markdown for content creation and integrate seamlessly with Git for version control.

Differences
Archivy and Docusaurus differ in the following ways:

Docusaurus has an active community with many resources and support, while Archivy has a growing community with limited resources and support compared to Docusaurus and other established tools.
Docusaurus is static site generation-based; it pre-renders the entire documentation before deployment. Archivy uses a dynamic server-side rendering architecture that dynamically renders content, considerably boosting performance for large documentation sets.

Migrating from Docusaurus to Archivy can be appealing for managing large documentation sites. However, that process is challenging due to substantial underlying structures and operations differences.

For instance, while both platforms support Markdown, some syntax differences exist. You may need to modify the Docusaurus Markdown files to make them compatible with Archivy's style.

Archivy is often updated; the most recent update was on July 25, 2023, and the most recent release was on January 7, 2023. Archivy is committed to developing open and high-quality knowledge base software through collaboration and community, as evidenced by its issue board and D iscord server community.

If the team has some technical experience and the documentation will be large, involving complex information and high traffic, Archivy will be suitable.

The following companies use Archivy as their documentation tool.

Mozilla
DigitalOcean
Elastic

Conclusion

In the post, we discussed Docusaurus and its top alternatives and highlighted their strengths, similarities, and differences. Given their distinct features and advantages, selecting the finest documentation generator to replace Docusaurus is not straightforward. Your unique demands and requirements will determine the ideal option for your project.

Talk to Hackmamba for all your product documentation needs. Get a 1-month trial.

Resources

The following resources might be useful.

Build a simple E-commerce PIM with Next.js, Prisma, and Neon

Chidi Eze — Sat, 09 Mar 2024 20:27:50 +0000

This article will walk you through the steps of creating an e-commerce product information management system (PIM) with the Next.js framework, a Neon Postgres database, and Prisma as the object-relational mapper (ORM).

Next.js is a React framework for building fast and user-friendly full-stack applications. It provides numerous features and tools for building simple and complex web pages.

Prisma is a server-side library that helps developers read and write data to the database intuitively, efficiently, and safely.

Neon is a fully managed serverless Postgres with a generous free tier that offers a scalable and cost-effective solution for data storage, and modern developer features such as branching and bottomless storage.

This article won’t cover cart, checkout, and deployment features but will focus on how to create, read, update, and delete (CRUD) products in the database.

Here is a completed d emo of this project.

Prerequisites

You’ll need the following to complete this tutorial:

Node.js installed on your computer.
Basic knowledge of React and Next.js
A Git H ub account for (OAUTH) authentication

Getting started

We'll start with installing the Next.js package and other dependencies we'll use for this project. Open the terminal and run the below command to create a next.js starter project.

npx create-next-app neon-ecommerce

The above command will prompt a few questions; choose yes when asked whether to use Tailwind CSS. A new project with the appropriate configurations will be created in the selected directory; in our case, it is called neon-e-commerce.

Next, navigate to the project directory and install @prisma/client, next-auth, and Prisma npm packages with the following command:

cd neon-ecommerce 
npm i @prisma/client next-auth && npm i prisma --save-dev

Next, run the following command to launch the app:

npm run dev

Next.js will start a live development server at http://localhost:3000.

Setting up a Neon database

Click the “Create project” button and copy the database URL provided by Neon on the next page; this is all we need to connect the database to our project.

Setting up GitHub authentication

Since we'll be using GitHub for authentication, we need to register a new OAuth app on GitHub. This authentication is for admin users who want to create and sell their products, not for customers who wish to buy.

First, sign in to GitHub and go to Settings > Developer Settings > OAuth Apps.

Next, click on the "New OAuth App" button and fill out the form like in the image below:

Learn more about next-auth o auth providers (e.g., Twitter, Google, GitHub, etc.).

After registering the application, copy the client ID and generate a new client secret.

Next, in the root directory of the project, create a .env file and set up environment variables as seen below:

    #.env
    DATABASE_URL="<YOUR NEON DATABASE URL>"
    GITHUB_ID="<YOUR GITHUB CLIENT ID>"
    GITHUB_SECRET="<THE GENERATED CLIENT SECRET>"
    NEXTAUTH_URL="http://localhost:3000/api/auth"
    NEXTAUTH_SECRET="<RUN *openssl rand -base64 32* TO GENERATE A SECRET>"

Learn more about the next-auth secret and how it works.

Now that we've completed the setup and installation, let's start developing the application.

Building the application

The first thing we'll do is create a component folder in the root of our application and a Header.js file with the following snippet:

    //component/Header.js
    import React from "react";
    import Link from "next/link";
    import { useRouter } from "next/router";
    import { signOut, useSession } from "next-auth/react";

    const Header = () => {
      const router = useRouter();
      const isActive = (pathname) => router.pathname === pathname;
      const { data: session } = useSession();

     // #When there is NO User
    let left = (
        <div className="left">
          <Link legacyBehavior href="/">
            <a className="bold" data-active={isActive("/")}>
              Neon Ecommerce Shop
            </a>
          </Link>

        </div>
      );

      let right = null;

      if (!session) {
        right = (
          <div className="right">
            <Link legacyBehavior href="/api/auth/signin">
              <a data-active={isActive("/signup")}>Log in</a>
            </Link>

          </div>
        );
      }

      }
      return (
        <nav>
          {left}
          {right}
        </nav>
      );
    };
    export default Header;

In the snippets above, we:

Imported the useRouter hook from next/router to handle navigating to different routes.
Imported useSession from next-auth to show our left and right nav when no user exists.

Next, let’s handle our nav for when there is a logged-in user; add the following snippets to the Header.js file:

    // When there is a user
    if (session) {
        left = (
          <div className="left">
            <Link legacyBehavior href="/">
              <a className="bold" data-active={isActive("/")}>
                Products
              </a>
            </Link>
            <Link legacyBehavior href="/p/own">
              <a data-active={isActive("/p/own")}>My Products</a>
            </Link>
          </div>
        );
        right = (
          <div className="right">
            <p>
              {session.user.name} ({session.user.email})
            </p>
            <Link legacyBehavior href="/p/create">
              <button>
                <a>New Product</a>
              </button>
            </Link>
            <button onClick={() => signOut()}>
              <a>Log out</a>
            </button>

          </div>
        );

When a user is logged in, we display the Product, My Products, New Product, and signOut navigations.

Next, let’s add a Layout.js file within the component folder, which will manage our page layouts and help us render the Header.js component throughout the application pages.

    //component/Header.js
    import React from "react";
    import Header from "./Header";
    const Layout = (props) => (
      <div>
        <Header />
        <div >{props.children}</div>
      </div>
    );
    export default Layout;

Next, import the Layout.js component inside the pages/index.js file and render it to see how it looks.

    //pages/index.js
    import React from "react";
    import Layout from "../components/Layout";
    const Products = () => {
      return (
        <Layout>
          <div>Hello from Homepage</div>
        </Layout>
      );
    };
    export default Products;

In the browser, our application will look like the image below:

Currently, the login button redirects us to the pages/api/auth route, which we are yet to develop.
Before we create the authentication route, let's generate our app schema, fill it with placeholder data, and read it so that the homepage looks a little more interesting.

Generating schema, creating and reading data

First, let’s create a prisma folder in the root of our project and create a schema.prisma file with the following snippets:

    //prisma/schema.prisma
    generator client {
      provider = "prisma-client-js"
    }

    datasource db {
      provider  = "postgresql"
      url       = env("DATABASE_URL") // uses connection pooling
    }

    model Product {
      id           String   @id @default(cuid())
      name         String?
      image        String?
      price        String?
      publish      Boolean  @default(true)
      productOwner Owner?   @relation(fields: [ownerId], references: [id])
      ownerId      String?
    }

    model Owner {
      id        String    @id @default(cuid())
      name      String?
      email     String?   @unique
      createdAt DateTime  @default(now()) @map(name: "created_at")
      updatedAt DateTime  @updatedAt @map(name: "updated_at")
      products  Product[]

      @@map(name: "owners")
    }

Before running the npx prisma db push command to publish our schema, you can use the format command if you’re not confident everything was formatted correctly.

npx prisma format #formats the schema
npx prisma db push #publishes the schema

After clicking on the table navigation in the neon console after publishing, we’ll see the Product and Owner models.

At this stage, the Prisma studio is the fastest way to create data; to launch the studio and add data, run the following command:

npx prisma studio

The studio will launch at http://localhost:5555/

Next, create a few mock products in the studio, each with a proper image URL for the product image. Each product must have an owner, select an existing user in the database, or create a new user record.

Fetching and reading data from database

Now that we have successfully created some product data, let's fetch those products and render them on our homepage.

We must establish a Prisma client instance to enable smooth interaction with our Neon database. In the root of our application, create a lib folder and a prisma.js file with the following snippets:

    //lib/prisma.js
    import { PrismaClient } from "@prisma/client";
    let prisma;
    if (process.env.NODE_ENV === "production") {
      prisma = new PrismaClient();
    } else {
      if (!global.prisma) {
        global.prisma = new PrismaClient();
      }
      prisma = global.prisma;
    }
    export default prisma;

Next, let’s create a Product.js file in the component folder with the below snippets:

    //component/Product.js
    import Router from "next/router";
    import Image from "next/image";

    function Product({ product }) {
      return (
        <div onClick={() => Router.push(`/p/${product.id}`)}>
          <div>
            <img
              width={500}
              height={500}
              className="w-full"
              src={product.image}
              alt="item image"
            />
            <div>
              <div>{product.name}</div>
              <p>#{product.price}</p>
            </div>
            <div>
              <span>Add to cart</span>
            </div>
          </div>
        </div>
      );
    }
    export default Product;

We will receive individual products in the snippets above and display their details.

Let's fetch the products from our database and show them on the homepage. Update the index.js file like below.

    //pages/index.js
    import prisma from "@/lib/prisma";
    import Layout from "@/components/Layout";
    import Product from "@/components/Product";

    export const getStaticProps = async () => {
      const products = await prisma.product.findMany({
        where: { publish: true },
        include: {
          productOwner: {
            select: { name: true, email: true },
          },
        },
      });
      return {
        props: { products },
        revalidate: 10,
      };
    };

    const Products = (props) => {
      return (
        <>
          <Layout>
            <div className="grid grid-cols-3 gap-2">
              {props.products.map((product) => (
                <Product key={product.id} product={product} />
              ))}
            </div>
          </Layout>
        </>
      );
    };
    export default Products;

In the snippets above, we:

Used the prisma instance to fetch our published products, then provided them as props in the getStaticProps() function to our Products() function.
Looped through the products props and used our Product component to render each product.

Clicking on each product card directs us to the /p/${product.id} route, which doesn’t exist yet. Let's create that route first before we handle authentication.

Inside the pages directory, create a p folder and [id].js file with the following snippet:

    //pages/p/[id].js
    import Layout from "@/components/Layout";
    import Product from "@/components/Product";
    import prisma from "@/lib/prisma";

    export const getServerSideProps = async ({ params }) => {
      const product = await prisma.product.findUnique({
        where: {
          id: String(params?.id),
        },
        include: {
          productOwner: {
            select: { name: true, email: true },
          },
        },
      });
      return {
        props: product,
      };
    };
    function HandleProducts(props) {
      return (
        <Layout>
          <div className="max-w-4xl ">
            <Product product={props} />
          </div>
        </Layout>
      );
    }
    export default HandleProducts;

In the above snippets, we:

Got the product id from the params and fetched the product details using the prisma instance in the getServerSideProps() function.
Displayed the product using our Product component inside the HandleProducts() function.

Now the /p/${product.id} route is in place! Clicking on any product card takes us to the corresponding page with the specific product information.

Authenticating users with GitHub OAuth provider

Recall that clicking the login button takes us to an uncreated api/auth route; let's create it now.

Create an auth folder and a [...nextauth].js file in the api folder located inside the pages directory using the following snippet:

    //pages/api/auth/[...nextauth].js
    import NextAuth from "next-auth";
    import GithubProvider from "next-auth/providers/github";
    export const authOptions = {
      providers: [
        GithubProvider({
          clientId: process.env.GITHUB_ID,
          clientSecret: process.env.GITHUB_SECRET,
        }),
        // ...add more providers here
      ],
      secret: process.env.NEXTAUTH_SECRET,
    };
    export default NextAuth(authOptions);

In the above snippet, we imported GithubProvider and gave it our GitHub id and GitHub secret variables.

Now, when we click on the login button, we will be directed to a page where a "Sign in with GitHub" button is shown.

We will be redirected to our application after signing in with our credentials.

Notice that our navigation has been updated to include the logged-in user's name, MyProducts, NewProduct navigations, and a logout button.

Adding new products

Next, let's create the New Product page for authenticated users to create and publish their products. First, create a reusable form component to collect the product details. In the components directory, create a Product-Form file with the following snippet:

    //components/Product-Form.js
    import React from "react";
    function ProductForm({
      productName,
      productPrice,
      productImage,
      publish,
      setProductName,
      setProductPrice,
      setProductImage,
      setPublish,
      handleSubmit,
      handleCancel,
    }) {
      const checkHandler = (e) => {
        e.preventDefault();
        setPublish(!publish);
      };
      return (
        <>
          <div>
            <form onSubmit={handleSubmit}>
              {/* FORM INPUTS HERE */}
              </form>
          </div>
        </>
      );
    }
    export default ProductForm;

In the snippet above:

We destructured the product properties in the ProductForm component function and used the publish and setPublish properties to create a checkHandler() function.
In the return() function, we returned a form tag and passed handleSubmit props to the form’s onSubmit function.

Next, let’s add the following snippet inside the form tag.

    //components/Product-Form.js
    <div>
    <div>
      <label htmlFor="product-name">Name</label>
      <input
        id="product-name"
        type="text"
        value={productName}
        onChange={(e) => setProductName(e.target.value)}
        placeholder="Product title"
        required
      />
    </div>
    <div>
      <label htmlFor="product-price">Price</label>
      <input
        id="product-price"
        type="text"
        value={productPrice}
        onChange={(e) => setProductPrice(e.target.value)}
        placeholder="Amount"
        required
      />
    </div>
    </div>
    <div>
    <div>
      <label htmlFor="product-image">Product URL</label>
      <input
        id="product-image"
        type="text"
        value={productImage}
        onChange={(e) => setProductImage(e.target.value)}
        placeholder="Image URL"
        required
      />
    </div>
    </div>
    <div>
    <div>
      <label>
        <input
          type="checkbox"
          checked={publish}
          onChange={checkHandler}
        />
        <span>Publish Immediately?</span>
      </label>
    </div>
    <div>
      <input type="submit" value="Submit" />
      <button onClick={handleCancel} type="button">
        Cancel
      </button>
    </div>
    </div>

In the snippet above, we added various input fields for the product data, a check box to determine whether the product should be published immediately, a button to initiate the submit action, and another to cancel the process.

To show the product form in the frontend, create a create.js file inside the p directory using the following snippet:

    // pages/p/create
    import React, { useState } from "react";
    import Layout from "@/components/Layout";
    import Router from "next/router";
    import ProductForm from "@/components/Product-Form";

    const CreateProduct = () => {
      const [productName, setProductName] = useState("");
      const [productPrice, setProductPrice] = useState("");
      const [productImage, setProductImage] = useState("");
      const [publish, setPublish] = useState(false);

      const create = async (e) => {
        e.preventDefault();
        try {
          const body = { productName, productPrice, productImage, publish };
          await fetch("/api/product/create", {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify(body),
          });
          await Router.push("/p/own");
        } catch (error) {
          console.error(error);
        }
      };
      return (
        <Layout>
          <ProductForm
            handleSubmit={(e) => create(e)}
            publish={publish}
            setPublish={setPublish}
            productImage={productImage}
            setProductImage={setProductImage}
            productName={productName}
            setProductName={setProductName}
            productPrice={productPrice}
            setProductPrice={setProductPrice}
            handleCancel={() => Router.push("/p/own")}
          />
        </Layout>
      );
    };
    export default CreateProduct;

In the snippet above:

We imported the ProductForm component and defined state variables to hold our product data when a user enters it in the form.
We also wrote a create() function, which collects all product data and sends it as a POST request to the /api/product/create route, which we'll create shortly.
In the return() function, we rendered the ProductForm and passed the state constants and the create() function to it.

When we navigate to the New Product page, we’ll see the form rendered like below.

Now, let's create the route we're sending the product data to; in the api folder, create a product folder, a create folder, and an index.js file with the following snippet:

    //api/product/create/index.js
    import { getServerSession } from "next-auth/next";
    import { authOptions } from "../../auth/[...nextauth]";
    import prisma from "@/lib/prisma";

    export default async (req, res) => {
      const session = await getServerSession(req, res, authOptions);
      const { productName, productPrice, productImage, publish } = req.body;
      if (session) {
        const result = await prisma.product.create({
          data: {
            name: productName,
            price: productPrice,
            image: productImage,
            publish: publish,
            productOwner: {
              connectOrCreate: {
                where: {
                  email: session.user.email,
                },
                create: {
                  email: session.user.email,
                  name: session.user.name,
                },
              },
            },
          },
        });
        res.json(result);
      } else {
        // Not Signed in
        res.status(401);
      }
      res.end();
    };

In the snippet above:

We created a session constant with the getSeverSession hook and destructured productName, productPrice, productImage, and publish from the request body.
We checked to see if the user making the request has an active session, and if so, we called the prisma.product.create() method and gave our data, which included the productName, productPrice, productImage, and publish.

Because each product will have an owner, the connectOrCreate method determines whether the authorized user attempting to create the product has a record in the database and connects the product if a record exists or creates a new user if none exists.

Updating a product

Since users can now successfully create products, there may be a need to edit the product details. Let's implement the update functionality to allow users to update their products.

In the p directory within pages, update the [id].js file like in the below:

    //pages/p/[id].js
    // OTHER IMPORTS HERE
    import ProductForm from "@/components/Product-Form";
    // getServerSideProps() HERE
    function HandleProducts(props) {

      const [isVisible, setIsVisible] = useState(false);
      const [productName, setProductName] = useState("");
      const [productPrice, setProductPrice] = useState("");
      const [productImage, setProductImage] = useState("");
      const [published, setPublished] = useState(false);

      const { id, publish } = props;

      const userHasValidSession = Boolean(session);
      const productBelongsToUser = session?.user?.email === props.productOwner?.email;

      const updateProduct = async () => {
        try {
          const body = { productName, productPrice, productImage, published };
          await fetch(`/api/product/update/${id}`, {
            method: "PUT",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify(body),
          });
          await Router.push("/p/own");
        } catch (error) {
          console.error(error);
        }
      };
      return (
        <Layout>
          <div>
            <div>
              {/* PRODUCT COMPONENT HERE */}
              {userHasValidSession && productBelongsToUser && (
                <div className="inline-flex mt-5 py-3">
                  <button
                    onClick={() => setIsVisible(true)}
                  >
                    Edit
                  </button>
                </div>
              )}
            </div>
            <div>
              {isVisible && (
                <ProductForm
                  handleSubmit={() => updateProduct()}
                  publish={published}
                  setPublish={setPublished}
                  productImage={productImage}
                  setProductImage={setProductImage}
                  productName={productName}
                  setProductName={setProductName}
                  productPrice={productPrice}
                  setProductPrice={setProductPrice}
                  handleCancel={() => setIsVisible(false)}
                />
              )}
            </div>
          </div>
        </Layout>
      );
    }
    export default HandleProducts;

In the snippet above, we:

Imported the ProductForm component and defined state constants to keep the new product data as they are entered.
Extracted the ID and publish from props returned by the getServerSideProps() function.
Created the userHasValidSession and productBelongsToUser constants to determine whether the user has an active session and whether the product belongs to the user.
The updateProduct() function will bundle the updated product details and send them as a PUT request to the api/product/update/${id} route we'll create soon.
Showed the Edit button in the return() function only if the user has an active session and owns the product; the Edit button sets the isVisible state constant to true.
Displayed the ProductForm component only if the isVisible value is true, and we passed updateProduct() to the form.

Next, let’s create the api/product/update/${id} route with the following snippet:

    //api/product/update/[id].js
      import prisma from "@/lib/prisma";

      export default async function handleUpdate(req, res) {

      const productId = req.query.id;
      const { productName, productPrice, productImage, publish } = req.body;

      if (req.method === "PUT") {
        const product = await prisma.product.update({
          where: { id: productId },
          data: {
            name: productName,
            price: productPrice,
            image: productImage,
            publish: publish,
          },
        });
        res.json(product);
      } else {
        throw new Error(
          `Updating product with ID: ${productId} was not sucessful`
        );
      }
    }

In the snippet above:

We imported the prisma instance, set productId constant equal to req.query.id, and destructured the product properties from the request body.
We used the prisma instance to update the product, passing the productId as the id and the product properties as the data.

Now, users can successfully create and update products. But what if they want to publish or unpublish a product without performing a full update? Let's add the publish and unpublish functions next.

Adding publish and unpublish functions

If the product is unpublished, we want to show a publish button; otherwise, we want to offer an unpublish button. Update the [id].js file inside the p directory with the following snippet:

    //pages/p/[id].js
    // IMPORTS HERE
    // getServerSideProps() FUNCTION HERE
    function HandleProducts(props) {
      //  STATE CONSTANTS HERE
      const { id, publish } = props;
      const userHasValidSession = Boolean(session);
      const postBelongsToUser = session?.user?.email === props.productOwner?.email;

      async function handlePublish(id) {
        const body = { publish };
        await fetch(`/api/product/publish/${id}`, {
          method: "PUT",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify(body),
        });
        await Router.push("/p/own");
      }
      //   updateProduct() FUNCTION HERE
      return (
        <Layout>
          <div>
            <div>
              {/* PRODUCT COMPONENT HERE  */}
              {userHasValidSession &&
                postBelongsToUser &&
                (!props.publish ? (
                  <button onClick={() => handlePublish(id)}>Publish</button>
                ) : (
                  <button onClick={() => handlePublish(id)}>Unpublish</button>
                ))}
              {/* EDIT BUTTON HERE */}
            </div>
            {/* PRODUCTFORM COMPONENT HERE */}
          </div>
        </Layout>
      );
    }
    export default HandleProducts;

Here:

We defined the handlePublish() function, saved the product's current publish status as the body constant, and sent it to the '/api/product/publish/${id}' route we will define shortly.
The buttons were conditionally rendered after determining whether the user had an active session and whether the product about to be published or unpublished belonged to the stated user.

Next, let’s create the '/api/product/publish/${id}' route with the following snippet:

    //api/product/publish/
    import prisma from "@/lib/prisma";

      export default async function handleActive(req, res) {
      const productId = req.query.id;
      const { publish } = req.body;
      const product = await prisma.product.update({
        where: { id: productId },
        data: { publish: !publish },
      });
      res.json(product);
    }

Here:

We imported our prisma instance and destructured the publish constant from the request body.
We updated the product using the prisma instance and changed the publish data to the reverse of what it is.

Now, users can create, update, publish, and unpublish a product; sometimes, a user may want to delete a product completely. Let’s add the delete function.

Deleting a product

    //pages/p/[id].js

    // IMPORTS HERE
    // getServerSideProps() FUNCTION HERE
    //Delete Product
    async function deleteProduct(id) {
      if (confirm("Delete this product?")) {
        await fetch(`/api/product/delete/${id}`, {
          method: "DELETE",
        });
        Router.push("/p/own");
      } else {
        Router.push(`/p/${id}`);
      }
    }
    function HandleProducts(props) {
      // STATE CONSTANTS HERE
      const { id, publish } = props;
      const userHasValidSession = Boolean(session);
      const postBelongsToUser = session?.user?.email === props.productOwner?.email;
      //  handlePublish() FUNCTION HERE
      //  updateProduct() FUNCTION HERE
      return (
        <Layout>
          <div>
            <div>
              {/* PRODUCT COMPONENT HERE  */}
              {/* PUBLISH AND UNPUBLISH BUTTONS HERE  */}
              {userHasValidSession && postBelongsToUser && (
                <div className="inline-flex mt-5 py-3">
                  <button onClick={() => deleteProduct(id)}>Delete</button>
                  {/* Edit BUTTON HERE  */}
                </div>
              )}
            </div>
            {/* ProductForm COMPONENT HERE  */}
          </div>
        </Layout>
      );
    }
    export default HandleProducts;

In the above snippet:

We constructed the deleteProduct() function, which takes the id of the product we want to delete and sends it to the /api/product/delete/${id} route we'll develop shortly.
We added a Delete button before the Edit button, called the deleteProduct() function, and supplied the product's id we wanted to delete.

The complete snippet of the pages/p/[id].js can be found in this GitHub gist.

Next, let’s implement the /api/product/delete/${id} route with the following snippet:

    import prisma from "@/lib/prisma";
    export default async function handleDelete(req, res) {
      const productId = req.query.id;
      if (req.method === "DELETE") {
        const product = await prisma.product.delete({
          where: { id: productId },
        });
        res.json(product);
      } else {
        throw new Error(
          `The HTTP ${req.method} method is not supported at this route.`
        );
      }
    }

Here, we:

We imported our prisma instance and created a productId, which we set equal to the request query ID.
The prisma sample was used to delete the product, with the productId as the data.

A user who has successfully authenticated can now add new products and update, publish, and delete any product that belongs to them.

Conclusion

Congratulations! You successfully built a full-stack application with CRUD functionalities with Next.js, Neon, Prisma, and Next-Auth. Combining these tools can help developers create full-stack applications that are efficient and scalable. Next.js provides a structured development framework, Prisma streamlines database interactions, and Neon delivers a cost-effective and scalable database solution. The source code for this project is in this GitHub repository.

How to Build A Video Player with timeline comments using Appwrite & Cloudinary in Next.js

Chidi Eze — Thu, 04 May 2023 13:41:02 +0000

Timeline comments allow viewers to add comments or notes to specific points in a video, providing additional context or information about what is happening on screen. This feature enhances the viewer's experience, facilitates collaboration and engagement, improves accessibility, and provides valuable data insights for creators.

This article discusses building a video player with timeline comments using Appwrite storage, the Cloudinary video player, and Next.js.

Appwrite is an open-source backend server that provides a range of APIs and SDKs to help developers build web and mobile applications. It offers user authentication, database management, file storage, and more features.

Cloudinary is a cloud-based image and video management platform that provides developers with tools for storing, manipulating, optimizing, and delivering images and videos on their websites or applications.

Next.js is a popular open-source React-based framework for building web applications. It provides a range of features, such as server-side rendering, static site generation, and automatic code splitting.

Check out the GitHub repository to quickly get started:

https://github.com/Kizmelvin/nextjs-video-comments

Prerequisites

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

Basic understanding of JavaScript and React
Cloudinary account and at least one video uploaded to the media library (Create a free account here)

Getting started

Next, navigate to the Media Library tab, select a video, or click the Upload button to upload a video. Grab the video's id and keep it safe; we need it later.

Creating a Next.js application

First, let’s run the following command in the terminal to create a new Next.js application:

    npx create-next-app with-tailwindcss video-comments

The command above creates a starter Next.js application and adds tailwind CSS to the application with the with-tailwindcss flag in the video-comments folder.

Next, navigate to the project directory and start the application with the following commands:

    cd video-comments #navigate into the project directory
    npm run dev #start the dev server

Building the video player and the comments section

First, clean up the index.js file in the pages folder and update it with the following snippet:

    //pages/index.js
    import { useEffect, useState, useRef } from "react";
    const Home = () => {
      const videoRef = useRef();
      const cloudinaryRef = useRef();
      const playerRef = useRef();

      useEffect(() => {
        if (cloudinaryRef.current) return;
        cloudinaryRef.current = window.cloudinary;
        playerRef.current = cloudinaryRef.current.videoPlayer(videoRef.current, {
          cloud_name: "kizmelvin",
          secure: true,
        });
      });
      return (
        <div className=" flex min-h-screen  justify-around py-2">
          {/* Video player */}
          <section className="flex w-8/12 flex-col items-center justify-center px-10 text-center">
            <div className="w-full">
              <video
                ref={videoRef}
                id="demo-player"
                className="cld-video-player cld-fluid "
                controls
                data-cld-public-id="video-demo"
              />
            </div>
          </section>
        </div>
      );
    };
    export default Home;

In the snippet above:

We created some references, instantiated a Cloudinary instance in the useEffect() function, and passed our cloud name.
In the return function, we returned a video tag, passed ref and id properties, and set the data-cld-public-id property to the video ID we obtained from Cloudinary.

In the browser, the application should like the image below:

Creating the comments section

Let’s create an input to collect user comments and buttons to submit and cancel the process.

Next, let’s update the index.js with the following snippet:

In the snippet above, we:

Created state constants using the useState hook.
Created the openComment() function to pause the video and grab the current playing time.
In the return function, we rendered a Comment button, an input field for the comment, a Submit button to save the comment to Appwrite, and a Cancel button to terminate the process.

Integrating Appwrite for comments storage

Now it’s time to integrate Appwrite into our application to handle the video timeline comments.

First, log in to the Appwrite cloud or create an account. Check out this article on how to set up an Appwrite instance locally.

After successfully signing in, click on the + Create project button, choose a name for the project, and click the Create button.

After creating the project, navigate to the database tab, click the +Create database button, name the database, and click the create button to continue.

Next, grab the database ID and keep it handy. Click the +Create collection button, name the collection, and click the Create button to continue.

On the next screen, grab the collection ID and save it. Navigate to the attributes tab, click the +Create collection” button and the prompts, and create a name, comment, and videoTime attribute.

Finally, click the Settings button in the bottom-left corner and grab the project ID and the API Endpoint; we’ll need them to set up the Appwrite instance.

Back in the code editor, run the following command to install A ppwrite, uuid, and dotenv npm packages:

    npm install appwrite uuidv4 dotenv #install the packages

Next, create a .env.local file in the root directory of the project and save the Appwrite credentials like the below:

    /.env.local
    NEXT_PUBLIC_PROJECT_ID = "YOUR PROJECT ID"
    NEXT_PUBLIC_DATABASE_ID = "YOUR DATABASE ID"
    NEXT_PUBLIC_COLLECTION_ID = "YOUR COLLECTION ID"

Let’s create a helper folder in the root directory and create a Utils.js file with the following snippet:

    //helper/Utils.js
    import { Client, Databases } from "appwrite";
    import { v4 as uuidv4 } from "uuid";

    //Initializing Appwrite
    export const client = new Client();
    client.setEndpoint("https://cloud.appwrite.io/v1").setProject(process.env.PROJECT_ID);
    const dataB = new Databases(client);

    //Saving Comments to Appwrite Database

    export const saveComments = async (details) => {
      try {
        await dataB.createDocument(
          process.env.DATABASE_ID,
          process.env.COLLECTION_ID,
          uuidv4(),
          {
            comment: `${details.comment}`,
            videoTime: `${details.videoTime}`,
            name: `${details.name}`,
          }
        );
      } catch (error) {
        console.log(error);
      }
    };

    //Fetching comments from Appwrite Database

    export const listComments = ({ setComments }) => {
      const promise = dataB.listDocuments(
        process.env.DATABASE_ID,
        process.env.COLLECTION_ID
      );
      promise.then(
        (response) => setComments(response.documents),
        (error) => console.log(error)
      );
    };

In the snippet above, we did the following:

Created a new Client and two Database instances and passed the project_id to the client.
Created the saveComment function to save the video time and the user comment to the Appwrite database.
Created the listComments function to get the list of comments from Appwrite and update our comment state.

Now in the index.js file, let’s grab the details from our user; update the index.js file with the following snippet:

In the above snippet, we:

Imported saveComments and listComments functions from the Utils.js file and created the details object.
Called the saveComments() in the handleSubmit() function and passed the details object to it.
Created a button to view and hide the comments, looped through the comment state, and displayed the comments.

The complete code of the index.js file can be found in this Github Gist.

Now, we have a functional video player with timeline commenting functionality in the browser.

Conclusion

Building a video player with timeline comments is a great way to enhance user experience and engagement. By leveraging the power of these technologies, we created a seamless and interactive video playback experience that allows users to leave comments and feedback at specific points in the video timeline. So, to take your website to the next level, consider implementing a video player with timeline comments using Appwrite and Cloudinary in Next.js.

Resources

These resources might be helpful:

Here's Why Authentication Should Not Be Rocket Science

Chidi Eze — Mon, 06 Mar 2023 13:53:26 +0000

The phrase "rocket science" is an idiom that describes something very difficult; you can also use it to exaggerate the difficulty level of a task or problem.

Authentication is a process that employs a complex security pattern to verify the identity of a user or device. It isn't easy to understand and normally done through a combination of username and password or biometrics.

Despite its complexity, authentication is an essential layer in every modern technology. Authentication helps secure vital and sensitive information and prevent unwanted access. Without a proper authentication, data stored in a system can leak to an unwanted user. Additionally, authentication helps to prevent identity theft and other forms of cybercrime.

However, there are myths that people need to forget.

Passwords are the only form of authentication.
- Passwords are a common form of authentication, but many other methods are available such as biometrics (e.g., fingerprint, facial, and iris recognition), multi-factor authentication (MFA), and smart cards.
Only high-security systems require authentication.
- Many believe authentication is only required for systems that handle sensitive data, such as financial or government systems. However, authentication is essential for any system that stores personal or confidential information, regardless of how delicate.

This article discusses authentication and how to make implementing authentication flow less complicated and intimidating.

Examining Why Increasingly Complex Methods Are Not Improving Security

Initially, authentication relied on physical means such as keys and locks. As technology advanced, authentication methods moved towards using what the user knows, such as a password or a personal identification number (PIN). The two-factor authentication (2FA), which combines something the user knows with something the user has, such as a code sent to a phone, became known as a way to increase security.

Biometric authentication, which uses a user's physical characteristics such as a fingerprint or facial recognition, has also grown in popularity in recent years to improve convenience while maintaining security.

Many businesses and organizations are now utilizing multi-factor authentication (MFA), which combines two or more of the previous methods for additional security.
As technology advances, new authentication methods will likely become more complex to provide even greater security and convenience.

While increasing the complexity of authentication methods may be a creative way to improve security, it can have the opposite effect. For example, a user may not know how two-factor authentication (2FA) works and how to respond to prompts for codes sent to their phone. Also, if users find the authentication process too complicated, they may be more likely to circumvent or disable it, resulting in security vulnerabilities.

Another reason increasing complexity may not improve security is that it makes the system harder to manage and maintain and expands the system's attack surface, making it vulnerable to exploits.

When designing authentication methods, it is critical to balance security and usability.

The Problem With Complex Authentication Methods

Complex authentication can lead to some issues, including:

User frustration: If the authentication process is too complicated or time-consuming, users may become frustrated and give up accessing the system.
Increased support costs: If users have trouble with the authentication process, they may need assistance from support staff which can increase the cost of maintaining the system.
Reduced security: If users are frustrated with the authentication process, they may be more likely to use weak passwords or reuse passwords, making it easier for attackers to gain unwanted access to the system.
Decreased usability: Complex authentication can make it difficult for legitimate users to access the system, which can reduce the overall usability of the system.
Lost productivity: Users may need help accessing the system while trying to authenticate, which can lead to lost productivity.
Increased complexity: Complex authentication systems can be tough to administer and may require specialised knowledge and expertise to manage effectively.
Difficulty in scaling: With more complex authentication, it can be harder to scale a system to accommodate growing users.
Incompatibility with other systems: Complex authentication systems may not be compatible with other systems, making it hard to integrate the system with other tools or platforms.
Lost or Damaged Device: In case of loss or damaged device, users find it difficult to authenticate if the 2FA app is on the damaged or lost device since there is no forgotten authentication key as there would be with a forgotten password.

The Rise Of New Threats

Advanced technology and sophisticated attackers have led to the need for more robust authentication methods in several ways:

Increased hacking attempts: With the advancement of technology, attackers have access to more sophisticated tools and techniques that allow them to easily bypass traditional authentication methods, such as usernames and passwords.
Data breaches: Advanced technology has enabled attackers to easily access and steal personal information, such as login credentials, which they can use to gain unwanted access to systems.
Phishing and social engineering: Advanced technology has made it easier for attackers to carry out phishing and social engineering attacks, which can trick users into providing sensitive information, such as login credentials.
Advanced malware: Sophisticated attackers can use advanced malware to steal login credentials, keystrokes, and other information that they can use to gain unwanted access to systems.
Advanced persistent threats: Sophisticated attackers can launch advanced persistent threats, which are long-term, targeted attacks that can evade traditional security measures.

These factors have contributed to the need for more robust authentication methods to protect systems from advanced technology and sophisticated attackers. Two-factor authentication (2FA) or multi-factor authentication (MFA) have been widely adopted to help prevent unsanctioned access to systems by requiring an additional verification method, such as a fingerprint or a one-time code sent to a mobile device, using biometrics, such as facial and voice recognition.

These methods are more difficult to replicate than traditional authentication methods like passwords.

Furthermore, behavioural biometrics identifies a user based on their interaction with a device; for instance, how they type, swipe, and move the cursor is becoming more popular.

In summary, the rise of advanced technology and sophisticated attackers has necessitated the development of more robust authentication methods that are more user-friendly.

Alternative Authentication Solutions

Alternative authentication solutions are authentication flows other than the traditional authentication process. These authentication flows are more user-friendly and simplified. Simplified authentication methods make verifying a user's identity as simple as possible.

Below are a few examples of the Simplified authentication methods:

Single Sign-On (SSO): This allows a user to log in once and then access multiple applications or services without having to log in again for each one. It eliminates the need for users to remember multiple usernames and passwords and makes accessing the resources they need easier.
Social login: This allows users to authenticate using an existing account with a popular social media platform, such as Google, Facebook, or Twitter, instead of creating a new account. It also eliminates the need for users to remember another username and password and makes it easier to get started using a new service.
SMS or EMAIL verification: The user receives a code via SMS or email and must enter the code to complete the authentication process.

Some Backend-as-a-Service (BaaS) platforms are dedicated to managing and implementing these simplified authentications for organisations, one of which is Appwrite.

Appwrite is a platform that simplifies the authentication and API integration process for developers. The platform also includes built-in support for popular social media platforms, such as Google and Facebook, so that developers can easily integrate those platforms into their apps without dealing with the complexities of their authentication systems.

Some key features of Appwrite include:

A unified API for connecting to various services
Support for multiple authentication methods, such as OAuth and JSON Web Token
A simple and intuitive API that is easy to use and integrate into existing applications

The benefits of using Appwrite include the following:

Reduced development time and cost
Improved security and compliance
Better scalability and performance

Visit the Appwrite Documentation to learn more about Authenticating with Appwrite and how to implement it.

Conclusion

This article discusses a more unified authentication experience for your users and how Appwrite can help you achieve a rich authentication experience in little development time.

Resources

The following resources might be helpful:

Create a Paywall on a Next.js Blog Using FingerPrint and Sanity

Chidi Eze — Mon, 16 Jan 2023 14:10:30 +0000

This article was originally posted on Hackmamba

A Paywall is a system that restricts user access to a particular web content till the user subscribes to it. We can find paywalls on journals, blogs, and daily newspaper sites.

In this post, we'll implement a paywall on a blog using Fingerprint.js, Sanity, and Next.js. The paywall will block users from accessing the blog posts when the user has opened more than three posts.

Fingerprint is a browser fingerprinting software that accurately retrieves a user's browser information. Then use the information to assign a unique identifier to this user even in a private/incognito browsing mode.

We will fetch the blog page contents from Sanity; however, this post will not cover how to set up content in Sanity, but we can quickly watch this video resource about getting started with Sanity. Also, we will use Firebase to store visitor activities while on the page, learn how to get started with firebase quickly from this resource.

This is a live project Demo, and the complete source code can be found in this GitHub Repository.

Prerequisites

This post requires the following:

Experience with JavaScript and React.js
Installation of Node.js
A Fingerprint account. Signup is free!

Getting Started with Next.js

Next.js is a React-based frontend development framework that supports server-side rendering and static site generation.

Run the following command in the terminal to create a new Next.js application:

npx create-next-app blog-paywall

The above command creates a starter next.js application in the blog-paywall folder.

Next, we'll navigate into the project directory and start the application with the following commands:

cd blog-paywall # to navigate into the project directory
npm run dev # to run the dev server

Next.js will start a live development server at http://localhost:3000.

Setting up Fingerprint.js

Login to fingerprint and click the “+ NEW APPLICATION” button, choose the app name, provide a domain and click the CREATE button.

On the next screen, review the app details and proceed to create the app

From the homepage, click on the **settings icon**, and select “**Account settings**.” On the next screen, scroll down, and navigate to **R****eact**; copy the snippets and save them it will come in handy when building our application.

Building the Blog Paywall

We’ll start by installing the following npm packages:

fingerprint.js and firebase .
@sanity/image-url and @sanity/block-content-to-react
bootstrap and react-bootstrap.

Install the above dependencies with the command below:

npm install @fingerprintjs/fingerprintjs-pro-react firebase @sanity/image-url @sanity/block-content-to-react bootstrap react-bootstrap

Next, in the root directory of our project, go to the pages folder and modify the _app.js file with the snippets we got from fingerprint like shown below:

    // pages/_app.js 
    import "../styles/globals.css";
    import { FpjsProvider } from "@fingerprintjs/fingerprintjs-pro-react";
    function MyApp({ Component, pageProps }) {
      return (
        <FpjsProvider
          loadOptions={{
            apiKey: "<Your API Key>",
          }}
        >
          <Component {...pageProps} />
        </FpjsProvider>
      );
    }
    export default MyApp;

Here, we imported FpjsProvider, used to wrap our topmost component, and passed our API Key to it.

Fetching and Rendering Blog Posts

Let's clean up the index.js file and update it with the following snippets:

// pages/index.js
    import styles from "../styles/Home.module.css";

    export const getStaticProps = async (pageContext) => {
      const allPosts = encodeURIComponent(`*[ _type == "post"]`);
      const url = `https://dlwalt36.api.sanity.io/v1/data/query/production?query=${allPosts}`;
      const getPosts = await fetch(url).then((res) => res.json());
      if (!getPosts.result || !getPosts.result.length) {
        return {
          posts: [],
        };
      } else {
        return {
          props: {
            posts: getPosts.result,
          },
        };
      }
    };

    export default function Home({ posts }) {

      return (
        <div className={styles.main}>
          <h1>Welcome to Blog Page</h1>
        </div>
      );
    }

In the snippets above, we fetched our blog post contents from Sanity with the getStaticProps() function and returned the response so that the Home component could access it.

Next, let’s read the post contents with the following snippets:

    // pages/index.js
    import styles from "../styles/Home.module.css";
    import { useEffect, useState } from "react";
    import { useRouter } from "next/router";
    import imageUrlBuilder from "@sanity/image-url";

    export default function Home({ posts }) {
      const [receivedPosts, setReceivedPosts] = useState([]);
      const router = useRouter();

      useEffect(() => {
        if (posts.length) {
          const imgBuilder = imageUrlBuilder({
            projectId: "<YOUR PROJECY_ID>",
            dataset: "production",
          });
          setReceivedPosts(
            posts.map((post) => {
              return {
                ...post,
                mainImage: imgBuilder.image(post.mainImage),
              };
            })
          );
        } else {
          setReceivedPosts([]);
        }
      }, [posts]);

    // return() function here
    }

In the snippets above, we:

Imported useState, useEffect, useRouter, and imageUrlBuilder; used the useState and created receivedPosts state constant.
Created a constant router, called the useRouter() function on it, looped through the posts data, and updated the receivedPosts state.

Let’s display the blog post on the front end. Modify the index.js file with the following snippets:


    //pages/index.js
    //imports here
    export default function Home({ posts }) {
    const [receivedPosts, setReceivedPosts] = useState([]);
    const router = useRouter();

      // useEffect() function here

      return (
        <div className={styles.main}>
          <h1>Welcome to Blog Page</h1>
          <div className={styles.feed}>
            {receivedPosts.length ? (
              receivedPosts.map((post, index) => (
                <div
                  key={index}
                  className={styles.post}
                  onClick={() => router.push(`/post/${post.slug.current}`)}
                >
                  <img
                    className={styles.img}
                    src={post.mainImage}
                    alt="post thumbnail"
                  />
                  <h3>{post.title}</h3>
                </div>
              ))
            ) : (
              <>No Posts</>
            )}
          </div>
        </div>
      );
    }

Here, we used conditional rendering, looped through the receivedPosts state, and displayed the blog posts in return() function.

In the browser, we’ll have the application like the below:

Adding Dynamic Route

We want to open each post and view its content. In the pages directory, let’s create a post folder and create a [slug].js file for dynamic routing with the following snippets:

// pages/post/[slug].js
    const BlockContent = require("@sanity/block-content-to-react");
    import SyntaxHighlighter from "react-syntax-highlighter";
    import { useEffect, useState } from "react";
    import { useRouter } from "next/router";
    import imageUrlBuilder from "@sanity/image-url";
    import styles from "../../styles/Home.module.css";
    import { useVisitorData } from "@fingerprintjs/fingerprintjs-pro-react";
    import {
      updateDoc,
      doc,
      arrayUnion,
      setDoc,
      getDocFromServer,
    } from "firebase/firestore";
    import { db } from "../../Utils";

    export const getServerSideProps = async (pageContext) => {
      const pageSlug = pageContext.query.slug;
      const particularPost = encodeURIComponent(
        `*[ _type == "post" && slug.current == "${pageSlug}" ]` );
      const url = `https://<YOUR PROJECT_ID>}.api.sanity.io/v1/data/query/production?query=${particularPost}`;
      const postData = await fetch(url).then((res) => res.json());
      const postItem = postData.result[0];
      if (postItem) {
        return {
          props: {
            title: postItem.title,
            image: postItem.mainImage,
            body: postItem.body,
            slug: postItem.slug.current,
          },
        };
      } else {
          return {
          notFound: true,
        };
      }
    };

    export default function Post({ title, body, image, slug }) {
      const [modal, setModal] = useState(false);
      const [updated, setUpdated] = useState(false);
      const [visitTimes, setVisitTimes] = useState(0);
      const [imageUrl, setImageUrl] = useState();
      const { getData } = useVisitorData({ immediate: true });

      const router = useRouter();
      return (
        <>
        <h1>Hello from single post </h1>
        </>
      );
    }

In the snippets above:

BlockContent and SyntaxHighlighter - to help us render the post contents and the code snippets.
useState and useEffect hooks from "react" and useRouter from "next/router."
We imported imageUrlBuilder to handle the blog post images and useVisitorData to track users' information.
We imported different methods from "firebase/firestore" and db from our firebase configuration in the Utils.js file.

In the getServerSideProps() function, we fetched our blog content again from Sanity and returned the response.

We destructured the title, body, image, and slug and created modal, updated, visitTimes, and imageUrl constants with the useState hook in the Post component function.

Furthermore, we destructured getData from useVisitorData, created a constant router, and called the useRouter() function on it.

Next, we'll use the properties we destructured from the Post component function and implement the single post page. Update the [slug].js file with the following snippets:

//pages/post/slug.js

    const BlockContent = require("@sanity/block-content-to-react");
    // imports here
    // getServerSideProps() function here

    function Post({ title, body, image, slug }) {
      // constants here

      useEffect(() => {
        const imgBuilder = imageUrlBuilder({
          projectId: "<your project_id>",
          dataset: "production",
        });
        setImageUrl(imgBuilder.image(image));
      }, [image]);

    const serializers = {
        types: {
          code: (props) => (
            <div className="my-2">
              <SyntaxHighlighter language={props.node.language}>
                {props.node.code}
              </SyntaxHighlighter>
            </div>
          ),
        },
      };
     // return() function here
    }

    export default Post;

In the snippets above:

We used the imageUrlBuilder to quickly generate image URLs from Sanity image records and set our imageUrl to the generated image in the useEffect() function.
Created serializer object inside it and used SyntaxHighlighter to highlight code snippets in the post content.

Now in the return function, let’s display the post contents and update the [slug].js file with the following snippets:

// pages/post/[slug].js
    const BlockContent = require("@sanity/block-content-to-react");
    // imports here

    // getServerSideProps() function here

    function Post({ title, body, image, slug }) {
     // constants here

    // useEffect() function here

      // serializer object here
      return (
        <>
          <div className={styles.postItem}>
            <div className={styles.postNav} onClick={() => router.push("/")}>
              &#x2190;
            </div>
            {imageUrl && <img src={imageUrl} alt={title} />}
            <div>
              <h1>
                 <strong>{title}</strong>
              </h1>
            </div>
            <div className={styles.postBody}>
              <BlockContent
                blocks={body}
                serializers={serializers}
                imageOptions={{ w: 320, h: 240, fit: "max" }}
                projectId={"Your project_ID"}
                dataset={"production"}
              />
            </div>
          </div>
        </>
      );
    }
    export default Post;

Here, we displayed the blog post title and Image, used BlockContent to show the post body, and passed serializers to it.

Now, a user can click on a particular post and view its contents in the browser.

Storing User Activity in Firebase

We’ll track the user information using fingerprint and save the user ID and posts visited on Firebase. Learn how to store and retrieve data and configure Firebase in this resource.

When a user visits up to three posts, a Paywall will block the user till the user subscribes. Update the [slug].js file with the following snippets:

// pages/post/[slug].js
    const BlockContent = require("@sanity/block-content-to-react");
    // imports here
    // getServerSideProps() function here

    function Post({ title, body, image, slug }) {
     // constants here

        useEffect(() => {
        visitedTimes();
        const imgBuilder = imageUrlBuilder({
          projectId: "<your project_id>",
          dataset: "production",
        });
        setImageUrl(imgBuilder.image(image));
      }, [image, updated, modal]);

      // serializer object here

      const visitedTimes = async () => {
        await getData().then(async (visitor) => {
          const visited = {
            visitorId: visitor.visitorId,
            visitedPostId: slug,
          };
          const { visitorId, visitedPostId } = visited;
          const visitorRef = doc(db, "visitors", `${visitorId}`);
          const documentSnap = await getDocFromServer(visitorRef);
          if (documentSnap.exists()) {
            await updateDoc(visitorRef, {
              visitedPosts: arrayUnion(visitedPostId),
            });
            setUpdated(true);
            if (documentSnap.data().visitedPosts.length >= 3) {
              setModal(true);
            }
            setVisitTimes(documentSnap.data().visitedPosts.length);
          } else {
            setDoc(visitorRef, {
              visitedPosts: visitedPostId,
            });
          }
        });
      };
      //return() function here
    }
    export default Post;

Here, we created the visitedTimes() function that will get the user ID and posts visited and save them in firebase. When the user reads up to three posts, the function updates the modal state to true.

Adding a Paywall

In the return() function, let’s conditionally render the paywall to block the user when more than three posts are visited.

// pages/post/[slug].js
    //Other imports here
    import Modal from "react-bootstrap/Modal";
    import Link from "next/link";
    //getSeverSideProps() function here

    function Post({ title, body, image, slug }) {
    // constants here
      // visitedTimes() function here
      // useEffect() function here
      //serializers object here
      return (
        <>
          {visitTimes >= 3 && modal ? (
            <Modal
              centered
              show={modal}
              onHide={() => window.location.href("/")}
              animation={true}
            >
              <Modal.Header>
                <Modal.Title>Modal heading</Modal.Title>
              </Modal.Header>
              <Modal.Body>
                Oops! Seems you have exceeded your allocated free articles. You can
                get back by subscribing
              </Modal.Body>
              <Modal.Footer>
                <Link role="button" className="btn btn-secondary" href="/">
                  Go Home
                </Link>
                <Link className="btn btn-secondary" href="#">
                  Pay Now
                </Link>
              </Modal.Footer>
            </Modal>
          ) : (
            <div className={styles.postItem}>
            //single post here
            </div>
          )}
        </>
      );
    }
    export default Post;

In the snippets above, we imported Link from "next/link" and Modal from "bootstrap/Modal" and conditionally rendered the Modal in the components' return() function.
Now, the Paywall will block the user from reading the blog posts after the third one.

Conclusion

This post discussed adding a Paywall in a Next.js blog with fingerprint and firebase.

Resources

The following resources might be helpful:

Modern Web Architectures for High-Performance Apps

Chidi Eze — Thu, 05 Jan 2023 14:33:28 +0000

Web application architecture is the main reason certain web apps perform poorly and others excellently. This is because architecture defines how various software components interact with each other and the end user (frontend, backend, and user).

Creating modern web applications is continuously evolving and so are the architectures on which these apps are built. There are several options for web app architectures, from microservice architecture to serverless architectures.

This post will discuss things to consider while building your high-performant applications.

What is Web Architecture?

Before understanding web architecture, you should know how the web application works.

In a nutshell, a web application is software that is accessed using a web browser. From the above definition, you can see the two leading players in a web application, i.e. “software” and “web browser”.

These players, in familiar terms, are the Backend and Frontend or Client servers. How this works is that a user sends a request from the browser (Frontend) to the backend server. The backend server receives the request, processes it, and sends back a response to the front for the user to see or access it.

A web app architecture can be likened to a layout containing all the software components required to build an application and how they interact.

Modern web architecture can be classified like the following, based on software development and deployment:

Microservice Architecture
Serverless Architecture
JAMstack Architecture

Microservices Architecture

Microservices are one of the most popular modern web architectures for building extensive and distributed web applications. It is loosely coupled and gives the flexibility to update, change, and scale services independently. Each microservice is built around a single business function, which may be created with a custom set of technologies and usually has its data flow and database.

Microservices are popular thanks to the availability of microservice-friendly cloud infrastructures like AWS, Google Cloud, Microsoft Azure, and others.

This approach is known for its high reliability, reusability, huge scalability potential, and incredible tech and business agility. It solves the problems of earlier architecture (Monolithic).

However, as these microservices grow, managing them and deploying multiple services with runtime instances becomes challenging.

Serverless Architecture

Serverless architecture, not like the name, has servers. How this works is that your application is deployed on servers elsewhere owned and maintained by some cloud service providers.

In this approach, you don’t have to worry about execution and deployment but can focus on product quality. It lowers costs since you only pay for the infrastructure when it’s in use and not for idle time or unused space.

This architecture reduces development measures and costs and is highly scalable since all the services are created as separate entities and the backend code gets simplified.

Below are some approaches to serverless architecture:

Function-as-a-Service(FaaS)

Function-as-a-Service (FaaS) is a serverless method to execute modular code on edge. FaaS lets developers write and update a piece of code on the fly which can then be performed in response to an event such as a user clicking on an element in a web application. This makes it easy to scale code and is a cost-efficient way to implement microservices.

Backend-as-a-Service(BaaS)

Backend-as-a-Service (BaaS) is a cloud service model in which developers outsource all of the backend aspects of a web or mobile application and focus on writing and maintaining just the front end.

BaaS vendors like Appwrite provide pre-written software for activities on servers, such as user authentication, database management, remote updating, data security, push notifications (for mobile apps), and cloud storage.

JAMstack Architecture

Jamstack is an architectural approach that decouples the web experience layer from data and business logic, improving flexibility, scalability, performance, and maintainability.
Jamstack removes the need for business logic to dictate the web experience.

You can also think of Jamstack as a web development approach for building a static web application with dynamic functionalities.

Over the years Jamstack web development approach has become more popular because of the following functionalities:

Framework agnostic
Cost-effectiveness
Highly scalable
Security
Great developer experience

So, with JAMstack’s pre-rendered HTML files and its dynamic functionalities handled by third-party APIs through JavaScript, you get the advantage of both static and dynamic websites.

Best Practice

Choosing the best web app architecture for your applications depends on your needs and how you plan to develop the application. Microservice and serverless computing are both critical to web application development; the difference is that microservice architecture offers a long-term solution with high scalability, while serverless computing offers code efficiency.

However, microservices architecture will be great if you build a big enterprise like Uber, Airbnb etc., mainly because of its quick scalability. But if you are building a web or mobile application in a startup, serverless will be your best bet since it has a low scaling cost and works perfectly with lightweight applications.

When you intend to build static pages or an eCommerce application that require SEO, great user experience, and incredible load capacity, it is excellent to adopt the Jamstack approach.

Conclusion

This post discussed modern web development architecture and what to consider before choosing the architecture for your next performant application.

Resources

The following resources might be helpful:

How to add GitHub authentication to a Next.js application

Chidi Eze — Mon, 18 Jul 2022 23:56:03 +0000

Authentication enables organizations to keep their networks secure by verifying the identity of a user attempting to gain access to their network or protected resources.

This means authorizing a human-to-machine transfer of credentials during interactions on a network to confirm a user's authenticity.

Appwrite is an end-to-end backend server for web, mobile, native, or backend apps packaged as a set of Docker microservices. We can use these Appwrite services to integrate authentication & sign-in methods within our application quickly.

This post discusses how to authenticate a Next.js application using Appwrite's GitHub OAuth provider.

The complete source code is in this Git H ub Repository.

Prerequisites

To understand this article, you will need to meet the following requirements:

Installation of Node.js
Docker installation
Basic knowledge of JavaScript and React.js
An Appwrite instance; check out this article on how to set up an instance
A GitHub account; signup is completely free

Setting up Appwrite and GitHub

First, we’ll start the Appwrite instance on our local machine and navigate to the specified hostname and port http://localhost:80. Log in or sign up to create a new application.

After successful signup, click on the Create Project button and choose a name for the project.

Click the settings tab and save the Project ID and the API Endpoint. We’ll use this to set up the Next.js application.

Next, click on the Users tab from the menu on the left-hand side, navigate to Settings, scroll down, and toggle the GitHub OAuth2 Provider.

Now, grab the OAuth redirect URI and add GitHub authentication. Sign in to GitHub, navigate to settings/profile, scroll down, and click on the Developer settings tab.

Select the OAuth Apps tab on the left and click on the New Auth App button.

Next, choose a name for the application, add a Homepage URL, paste the OAuth redirect URI, and click the green Register Application button.

Grab the Client ID, click on the Generate a new secret button, authorize GitHub, and copy the generated Client secret.

Now, switch over to Appwrite and paste the Client ID in the App ID box and Client secret in the App Secret.

Setting up Next.js the Application

First, let’s run the following command in the terminal to create a new Next.js application:

npx create-next-app appwrite-github-app

The above command creates a starter Next.js application in our appwrite-github-app folder.

Next, navigate into the project directory with the following command:

cd appwrite-github-app

The, run the following command to install A ppwrite npm packages and start the application:

npm install appwrite #install appwrite package
npm run dev #start the dev server

Next.js will start the development server at http://localhost:3000.

Integrating the GitHub Authentication in the Next.js App

First, create a utils.js file in the root directory with the following snippets:

    import { Appwrite } from "appwrite";
    const appwriteSdk = new Appwrite();
    appwriteSdk
      .setEndpoint("http://localhost/v1")
      .setProject("<PROJECT ID HERE>");
    export default appwriteSdk;

Here, we imported Appwrite and created a new instance of it, passing our Project ID and API Endpoint that we saved earlier.

Next, modify the index.js with the following snippets:

 //pages/index.js
    import Head from "next/head";
    import styles from "../styles/Home.module.css";
    import appwriteSDK from "../utils";
    export default function Home() {
      const authRedirect = async () => {
        try {
          await appwriteSDK.account.createOAuth2Session(
            "github",
            "http://localhost:3000/welcome",
            "http://localhost:3000"
          );
        } catch (error) {
          console.log(error);
        }
      };
      return (
        <div className={styles.container}>
          <Head>
            <title>Appwrite Authentication with Github</title>
            <meta name="description" content="Generated by create next app" />
            <link rel="icon" href="/favicon.ico" />
          </Head>
          <main className={styles.main}>
            <h1>Hello there!</h1>
            <button onClick={authRedirect}>Login with Github</button>
          </main>
        </div>
      );
    }

In the snippets above we:

Imported appwriteSDK from the utils.js file, created authRedirect() function, and provided successful and failed authorization URLs inside the authRedirect() function.
Returned the Login with GitHub button and passed the authRedirect() function to it.

Notice we provided a /welcome route we have not created yet; create a welcome.js file inside the pages folder with the following snippets:

    //pages/welcome.js
    import styles from "../styles/Home.module.css";
    import "bootstrap/dist/css/bootstrap.min.css";
    import { useEffect, useState } from "react";
    import { useRouter } from "next/router";
    import appwriteSDK from "../utils";
    function welcome() {
      const [user, setUser] = useState(null);
      const router = useRouter();
      const getUser = async () => {
        const userData = (await appwriteSDK) && appwriteSDK.account.get();
        userData
          .then((res) => setUser(res))
          .catch((err) => {
            router.push("/");
            console.log(err);
          });
      };
      const logOut = async () => {
        await appwriteSDK.account.deleteSession("current");
        alert("logout successful");
        router.push("/");
      };
      useEffect(() => {
        getUser();
      }, []);
      return (
        <div className={styles.container}>
          <main className={styles.main}>
            <h1 className="mb-4">Github Authenticated Page</h1>
            {user && (
              <div>
                <p>
                  User:{" "}
                  <span className="fs-3 fw-bold text-capitalize">{user.name}</span>
                </p>
                <p>
                  Email: <span className="fs-3 fw-normal">{user.email}</span>
                </p>
                <button onClick={logOut} className="btn-danger mt-2 fs-3">
                  Log Out
                </button>
              </div>
            )}
          </main>
        </div>
      );
    }
    export default welcome;

In the snippets above we:

Imported useState, useEffect, and useRouter hooks; created user and router constants with useState and useRouter, respectively.
Created the getUser() function; inside it, we receive the authorized user account details and update the user state.
Created the logOut() function that logs out a user.
Conditionally returned the user details and created a Log Out button in the return() function.

In the browser, the application will look like this:

When we click on the Login with GitHub button, we’ll be redirected to the authorization page.

Appwrite will redirect us to the /welcome route on successful authorization, and we'll display the authenticated user details there.

Conclusion

This post discussed adding authentication to a Next.js application with Appwrite’s OAuth2 GitHub provider.

Resources

These resources might be helpful:

“useSwr” The New React Hook for Fetching Remote Data.

Chidi Eze — Fri, 25 Feb 2022 20:29:28 +0000

Introduction

We’ll be looking at a new way to fetch data in React projects in this post. This is a hook built by Vercel, called SWR used for remote data fetching with other features, such as caching, pagination, error handling, auto revalidation, mutation and so on. We’ll be building a Random Store App, using SWR hook to get data from FakeStore API.

Originally we would make our data fetching in a top-level component and pass the returned data as props to the components down the tree. Using this method would be challenging to maintain our code if we build a more extensive application requiring many data dependencies to be passed to the page. React’s Context helps this course a lot, but SWR provides us with a cleaner and declarative way of fetching data that even parent components won’t worry about knowing which data the child components need or passing them. With SWR, data are bound to the component that needs them.

Sandbox

Fork or preview the finished version of this project here, in CodeSandBox.

Prerequisites

To follow this project correctly, you should have basic knowledge of react.js and have node.js installed on your computer.

Setting up React.js Application

So create a folder anywhere in your computer, open the folder with your terminal or code editor and run the following command to create a react app and install axios and swr packages:

npx create-react-app . #to create a react application
npm install axios swr # to install axios and swr packages

Clean up your react app and run npm start to start the application, on the browser the application should run on localhost:3000.

Get Started

Head straight inside App.js and replace every code with the following code snippets.

    //App.js
    import "./App.css";
    function App() {
      return (
        <div className="App">
          <h3>Hello there!</h3>
        </div>
      );
    }
    export default App;

If you save and go over to the browser, it should look like below:

Now let’s go over to the code editor, and inside the src folder, create another folder, Components and inside it, create two files Header.js and Products.js. Inside the Header component, paste the following snippets:

    //Header.js
    import React from "react";
    export default function Header() {
      return (
        <div>
          <header>
            <h1 className="brand">
              <strong>Random-Store</strong>{" "}
            </h1>
            <div className="side-nav">
              <ul>
                <li>Blog</li>
                <li>News</li>
                <li>About</li>
              </ul>
            </div>
          </header>
        </div>
      );
    }

If you want, get the CSS used in this project here, or you style it how you want. Import the Header component inside App.js and render it like below:

    //App.js
    import "./App.css";
    import Header from "./Components/Header";
    function App() {
      return (
        <div className="App">
          <Header />
        </div>
      );
    }
    export default App;

If you check, your browser should look like below if you got the CSS.

Our project is already taking shape; next, let’s dive in and explore the SWR features by fetching our products from Fakestore API.

Data Fetching

To fetch data with the useSWR, we need to create a fetcher function, and this function is just a wrapper of native javascript fetch or lib like axios. You can use the native fetch or even use GraphQL API too, learn how. The fetcher function also transforms our received data into JSON. So inside Products.js, paste the following code snippets:

//Products.js
import React from "react";
import axios from "axios";
import useSWR from "swr";
function Products() {
  const address = `https://fakestoreapi.com/products?limit=8`;
  const fetcher = async (url) => await axios.get(url).then((res) => res.data);
const { data, error } = useSWR(address, fetcher);

if (error)
    return (
      <div>
        <h1>404</h1>
        <p>Loading failed...</p>
      </div>
    );
  if (!data)
    return (
      <div>
        <h1>Loading...</h1>
      </div>
    );
  return (
    <div>
      <div className="container">
        {data &&
          data.map((item) => (
            <div key={item.id} className={`user-card  ${item.gender}`}>
              <div className="basic">
                <img
                  src={item.image}
                  alt="item-avatar"
                  className="item-avatar"
                />
              </div>
              <div className="details">
                <h3> ${item.price}</h3>
                <p>{item.title}</p>
                <button
                  onClick={() => alert("cart functionalities available soon!")}
                >
                  Add To Cart
                </button>
              </div>
            </div>
          ))}
      </div>
    </div>
  );
}
export default Products;

In the above snippets, we imported useSWR from “swr” and also axios from “axios”, saving the FakeStore API to a variable called address. There’re three states of the useSWR request, loading state(request ongoing), data state( request successful), and error state(failed request).

So we pulled out “data” and “error” from useSWR and returned the corresponding UI. For the data state, then used conditional rendering to check if it’s successful and if it is, loop through the data and display each item details to the UI, import the Products component inside the App.js and render it. In the browser, it should look like so:

Error Handling

The useSWR hook does a great job handling errors. For instance, if there’s an error in the “fetcher” function, the hook returns it as an error.

    const { data, error } = useSWR(address, fetcher);

So the error object becomes defined, and thus the promised rejected, and our error corresponding UI is displayed. In some cases, we would want to work with the error object and the status code; we can customise the “fetcher” function to give us the error status.

Auto Revalidation

The SWR gives us the option to automatically refetch data using the revalidateOnFocus, refreshInterval, revalidateIfStale, revalidateOnReconnect and some other methods you can find in the docs. Some are enabled on default like the revalidateOnFocus and revalidateOnReconnect; others are not.

These methods can be convenient when your applications involve data with high-level-frequency updating.

If for a reason these methods or one of them does not suite your demand you can turn them off like below:

    const { data, error } = useSWR(address, fetcher, {
          revalidateIfStale: false,
          revalidateOnFocus: false,
          revalidateOnReconnect: false,
        });

Mutation

Sometimes we might want to locally revalidate our data and make the feel faster instead of waiting for the automatic revalidation options. SWR uses the mutate() to make that possible.

There are two ways to get the mutate function.

Pulling it out of the useSWR hook like below:

    const { data, error, mutate } = useSWR(address, fetcher);

The mutate pulled from useSWR is pre-bound to that particular request, i.e. it can be used anywhere within a component without having to pass the request key to it. We can then go-ahead to call the mutate() in an onClick or any other event or function you want.

Getting it from SWR function useSWRConfig().

In some cases, we might want to revalidate data in different components or pages. We’ll then get the mutate from useSWRConfig() and pass a request key to it.

The request key is mostly the URL we passed to the fetcher function. Below is an example component that would not reflect in our project, just a demo code block that shows how to use mutate() from useSWRConfig.

     import { useSWRConfig } from 'swr'

    export function DeleteItem () {
      const { mutate } = useSWRConfig()

      return (
        <div>

          <button onClick={(item-id) => {
          //some codes to delete the said item

            mutate(`${address}`)
          // tell SWRs request(s) with this key to revalidate
          }}>
            Delete
          </button>
        </div>
      )
    }

Once we “click” the delete button in the above code, we will be deleting a particular item; afterwards, we call the mutate() to revalidate every request with the address we passed to the mutate function.

For instance, if we are getting the products from a local /products endpoint, upon deleting a product in the backend, the frontend needs a communication of what changed in other to remain in sync and not serve stale data to the UI.

The SWR uses the mutate() to make the communication, thus checking if there is a change, and if there is, revalidate and render the new change without reloading the entire page.

Pagination

In some cases, we might want to load more items either in an onClick or onScroll events. SWR goes as far as requesting the next sets of data even before we click the “load more” or “next” button and just render the data when the corresponding event is triggered.

Let’s see how it works; update “App.js” to look like below:

    import "./App.css";
    import Header from "./Components/Header";
    import Products from "./Components/Products";
    import { useState } from "react";
    function App() {
      const [count, setCount] = useState(8);
      return (
        <div className="App">
          <Header />
          <Products count={count} setCount={setCount} />
        </div>
      );
    }
    export default App;

Now let’s pull out the “count” and “setCount” and use them in the Products.js component.

//Products.js
    import React from "react";
    import axios from "axios";
    import useSWR from "swr";
    function Products({ count, setCount }) {
      const address = `https://fakestoreapi.com/products?limit=${count}`;
      const fetcher = async (url) => await axios.get(url).then((res) => res.data);
      const { data, error, mutate } = useSWR(address, fetcher, {
        revalidateIfStale: false,
        revalidateOnFocus: false,
        revalidateOnReconnect: false,
      });

    //check error and display corresponding UI
      if (error)
        return (
          <div>
            <h1>404</h1>
            <p>Loading failed...</p>
          </div>
        );
    //check loading and display corresponding UI
      if (!data)
        return (
          <div>
            <h1>Loading...</h1>
          </div>
        );
    //create loadMore function
      const LoadMore = () => {
        setCount(count + 4);
        mutate();
      };
      return (
        <div>
          <div className="container">

          ///check and display Items

          </div>
          <div className="btns">
            <button onClick={() => LoadMore()}>Load More</button>
          </div>
        </div>
      );
    }
    export default Products;

In the browser, when we click on “Load More…”, the UI for the data loading state(Loading…) is displayed, followed by the data state and UI gets updated(more items fetched).

Is that just it? Not yet, there’s a better experience. Because of SWR's cache, we can preload the next set of items or a next page and render them inside a hidden div. SWR will trigger the data fetching of the next items even before the “Load More…” button is clicked. When the user then clicks the “Load More…” button or navigates to a next page, the data is already there, lets's update App.js and render the hidden div.

import "./App.css";
  import Header from "./Components/Header";
    import Products from "./Components/Products";
    import { useState } from "react";
      function App() {
      const [count, setCount] = useState(8);
      return (
        <div className="App">
          <Header />
          <div style={{ display: "none" }}>
            <Products count={count + 4} />
          </div>
       <Products count={count} setCount={setCount} />
       </div>
      );
    }
    export default App;

You see! the loading UI is gone, and our items are fetched.

The SWR has other exciting features that we’ll not cover in this post like

Conditional and Dependent Data Fetching.
SSR and SSG support
TypeScript support

Read about them in the docs, if you are interested.

SWR using its built-in cache and deduplication, skips unnecessary network requests or re-renders, plus it ships no unnecessary codes.

What this means is that if you are only importing the core useSWR API, unused APIs like useSWRInfinite or useSWRConfig won't be bundled in your application.

Conclusion

The SWR library is so amazing not to keep an eye on; we have seen some of its highlighted features in practice, and we hope you are convinced about its awesomeness.

The hook is backend-agnostic, which means it can fetch data from any remote API or database; it doesn't matter what software or the language your backend is running.

Top 10 Netlify CLI Commands

Chidi Eze — Fri, 28 Jan 2022 17:26:38 +0000

Using Netlify’s Command Line Interface has all the time made it a lot easier and faster to write, test and review codes locally prior to production. In this post we'll be looking at how to get started with Netlify CLI and then a list of amazingly Netlify CLI commands that might interest you and what they do.

Before you start running Netlify CLI you must have it installed in your computer, install it globally with the following command npm install netlify-cli -g with this you can now run Netlify commands from anywhere in your computer. Also you need to have a Netlify account and be logged in to be authorised and given access to Netlify CLI.
Login In with the following command netlify login.

Netlify init

The netlify init command will prompt you to connect to a github repository for continuous deployment, you can choose to continue without a git repository and loose the continuous deployment feature or setup git repository from other git providers by running the netlify init with a manual flag, netlify init --manual.

Netlify link

In some cases you might not want to start off entirely from the scratch, netlify link connects your local project or a remote repository to a site you already have in Netlify. This normally will add a siteId field to a new file inside your project folder, you can simply unlink it by running the following command netlify unlink.

Netlify functions

Running netlify functions:create and following the below prompts will create a netlify’s serverless function

Choosing netlify’s default directory or creating a folder in the base directory for the function to live in.
Choosing the language of your function (currently netlify supports functions built with either Javascript, Typescript or Go).
Choosing a function template from the list provided
Creating the name of the function ( e.g functionName.js)

and BOOM! you have a function boilerplate with the chosen template, living in the default or created directory, my unsolicited rating of this particular experience is a 5 ⭐ , if this interest you and you wish to know more about these functions including how to test them and make sure they work as expected before hand, go here

Netlify env

The Netlify env:set <VARIABLE_NAME> "<value>" command is used to set environment variable within Netlify’s infrastructure, this is cool because sometimes we might forget to gitignore the .env file and end up leaking secret keys and password. This command sets your environment variables and serves it to your site before building when you run netlify dev command, you don’t have to manually provide the environment variable in Netlify admin again.

For some reason especially if you are working with your team on a particular project, you might want to get a list of .env variables available in the project netlify env:list does exactly that.

Read more about Netlify’s .env variables here.

Netlify addons

To install an add-on, run netlify addons:create <name> command in a site already linked in your Netlify account, replacing <name> with the installation name of the add-on services you want to install. See the Add-on providers supported by Netlify, so for instance netlify addons:create fauna command will create a fauna database.

Netlify api

This is used to query different Netlify api methods, for instance if you would want to get all the sites in your netlify account, you should run netlify api listSites. To get all the netlify api method names, run netlify api with a list flag, like netlify api --list.

Netlify dev

According to Phil Hawksworth, Netlify Dev is the next step on the road to making the experience of developing for the web as productive, simple, and predictable as possible.

Netlify Dev can also be said to be a collection of development CLIs that brings the functionality of your Netlify production environment down to your local machine. When you run the above command, with detectors Netlify automatically detects your framework or static site generator and also makes environment variables available even before you run the build command.

Netlify dev --live

Adding the --live flag like in the above code block will kind of create a link from your local development server to the internet, this is so awesome as it provides a live URL you can share with remote colleagues or anyone else. Any update made in the local build will instantly be available in the live URL.

Netlify build

You can equally trigger netlify builds locally by simply running netlify build. The build gets executed the same way it would have been, If it was triggered from your netlify dashboard including the build plugins. Because the netlify build command somehow triggers the traditional netlify build process same way a git commit triggers the build in Netlify admin, it is necessary to always run your local build i.e npm run build before running the netlify build command.

To view the build stages run netlify build --dry.

Netlify deploy

You can manually deploy a site right from your local project directory by running netlify deploy, what it does is that it uploads files from your local project directory to a site you already have in Netlify.
For the first time you run the netlify build command in a particular project, Netlify will prompt you to link an already existing site from the list of sites in your Netlify account or to create a new one.

Note: Manual deploy is not advised because it doesn’t support Netlify continuous deployment feature, read more.

After successfully linking an existing Netlify site to your local project or creating a new one, the deploy command will also want to know which directory to publish and also the folder housing your serverless functions if you used any. Netlify will look for these informations in the following places:

In flags: this means providing these informations with the deploy command like bellow netlify deploy --dir=_your-site-dir --functions=folder-housing-your-serverless-functions.
In a netlify.toml file: this should be stored in the root of your project directory .
In your site settings: login in to your netlify account, click on sites, click on the particular site linked to your local project, click on Build & deploy and supply those informations accordingly.

when the informations aren’t found in any of the above places, the netlify deploy command will prompt you to provide them before going on to deploy to a draft URL for previewing and testing.

If you’d want to skip deploying to a draft URL and deploy directly to your site’s main URL run the deploy command with a production flag like netlify deploy --prod.

Conclusion

Deploying with the Netlify CLI really prevents back and forth visits to the browser plus its super fast as you won’t have to wait for remote CI builds to finish for your live deploy preview. I’d hope you found the commands and what they do cool or at least some of them. The better news is that some of these CLI features are still in their beta stage.

Setup Flutterwave's eCommerce Store with Zero Programming knowledge

Chidi Eze — Sun, 05 Sep 2021 01:49:00 +0000

Introduction

Flutterwave is an African based fintech company founded in 2016 that provides a payment infrastructure for global merchants and payment service providers across the continent.

Due to COVID-19, there were restrictive measures to SMEs and traders operating in Africa’s largest economies, the company accelerated the development of Flutterwave Store to help curb these restrictive measures and in April 2020 the San Francisco and Lagos-based fintech launched Flutterwave Store

In the Store you will upload products, set the products prices and if you want you can have Flutterwave integrated delivery partners pick up when you have an order and deliver to your customer.

So, let's look at how to setup Flutterwave Store, there's absolutely no need to worry it's super easy and simple.

First you need to have a Flutterwave account, log in to your dashboard if you have or create an account here.

After successfully creating Flutterwave account and probably updating your bank account informations. In the dashboard there's a Menu on the left hand side, click on Store

Click on setup my store now

Change your store name if its different from your Trading Name/ Registration Business Name, set your store description, edit the store URL to probably your store name, upload your store image or logo, select your store category and 'Click' Complete Setup. Just like that you've created your store next is to add products to your store

Click on the Add Product button then add the product details.

Add the product name and description, set the product price and the number of items in stock, create the product category, you can have more than one category, set the sizes available, then upload the product image or you can drag and drop the image. You can add up to five medias of the same product, Click Save Product to save your product, repeat the process for as many products as you want to be in your store.

Next navigate to manage store tab.

Your store Url is right beneath your store name, you can copy the link and start sharing to your audience but before that, "click " on the Take Store Online button to take your store live else it remains offline and your customers won't be able to access the store, you should set your pick up address and how you want to handle your shipping.

Yay! you have successfully created your eCommerce store and can receive payments from anywhere, to remove a product, go to your dashboard, click on the product and click the take product offline button, or you can edit or delete it completely from the More Action button.

Conclusion

Flutterwave Store is one of the best ways to create and manage an e-commerce business that accepts payments from anywhere without having a website or knowing how to write code.

Creating and or setting up the store(for now) is totally free, Flutterwave will charge just a little on payments. So it's a place where sellers and buyers can easily transact goods and a great opportunity a large pool of traders and small businesses across Africa should jump on, to take their businesses online.

Store and Retrieve Data in Firebase Cloud Storage with React.js

Chidi Eze — Thu, 02 Sep 2021 01:38:34 +0000

Introduction

Cloud computing is the use of a network of remote servers that are hosted on the internet. These remote servers are used to store, manage and process data. The use of cloud will also help companies and developers make systems more secure. Cloud systems enable you to maintain data integrity and data recovery. Developers who don’t use cloud will have less secure software and computer networks that can result in loss of key data.

Firebase

We will use Firebase a platform developed by Google for creating mobile and web applications. It was originally an independent company founded in 2011. Its first product was the Firebase Realtime Database, an API that synchronizes application data across iOS, Android, and Web devices, and stores it on Firebase's cloud. The product assists software developers in building real-time, collaborative applications. In October 2017, Firebase has launched Cloud Firestore, a real-time document database as the successor product to the original Firebase Realtime Database

React

We will use React (also known as React.js or ReactJS) a free and open-source front-end JavaScript library for building user interfaces or UI components.

Getting Started

In this tutorial we will be learning how to store and retrieve data in firebase by building a todo-list app.

Note

You should have Node.js installed on your computer.
You should have a code editor installed on your computer, I suggest VS-Code
You should be fairly familiar with React.js and JavaScript

Next thing is creating an empty folder in any directory on your computer preferably Desktop, with a folder name of your choice, in my case firebase-todos
Now from your code editor open the folder firebase-todos then click on terminal in the vs-code navigations and click on new terminal, before we start running the Npm CLI-commands we first have to check whether Node.js is properly installed by running node --version which will show us the version of node successfully installed.

Now let's run our command npx create-react-app . with the dot to create the app inside our firebase-todos folder. See more about creating react-app Now let's start our created app, to do that we run npm start in the terminal. Our app should start on localhost:3000 of our default browser with spinning react icon and a link to learn react.

It's time to clean up our created app so that the frontend should be what we really want, so let's delete some of the files inside the src folder that we don't need.
Let's get rid of the following files

App.css
App.test.js
logo.svg
reportWebVitals.js
setupTest.js

Once we delete these file our app will break because in the remaining files, we are trying to read those deleted files, so let go get rid of those lines of codes.
Inside App.js file delete the first two lines of code also delete the header tag with everything inside it then add a <h1> hello world </h1>.
So App.js will no look like this

function App() {
  return (
    <div className="App">
      <h1>hello world</h1>
    </div>
  );
}

export default App;

Next, modify the index.js file like below:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';


ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

When you save, our app would be up again showing just hello world in the browser like below.

Inside the src folder let's create another folder called Components and inside Components we will create three other files called Firebase.js, Header.js and Todos.js.

In Firebase.js we will be make communications to firebase, in Header.js we will be branding our project and also will be inputing our different todos and from Todos.js we will be displaying our todos.

The next thing is setting up firebase firestore in Firebase.js file so let's go to Firebase you need to create an account or sign in if you already have one, then click on the add project card, name your project and click continue, turn off the google analytics and click continue to create your project.

Next click on the cloud firestore to create firestore database(where we would store our data), click on create database choose either the test or production mode and click next, choose your closest cloud firestore location and click enable, yes we created our firestore database.

After creating our firestore database the next thing is to create our app, ie IOS, MOBILE OR WEB APP. So click on the setting icon beside the project overview from the dropdown click project setting, choose web application, choose a name for the app and click register app.

We are almost done with setting up firebase storage, right now we can't store our data in our firestore database because of the store rules, so in the firestore console navigate to rules and allow read, write, and create like below

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read;
      allow create;
      allow request;
      allow update: if false;
    }
  }
}

It's time to go back to our code editor but before we proceed we need to copy our firestore database configurations, so click on the setting icon, scroll down and copy everything inside the script tag.

Back in your code editor open your terminal and run npm install firebase to install firebase then inside the Firebase.js file import firebase and paste the configuration you copied from firebase console, then export it by adding the last line of code like below so you would be able to import and use it in another file when you need to. Your Firebase.js file should look below

import firebase from "firebase"

// Your web app's Firebase configuration
var firebaseConfig = {
    apiKey: "AIzaSyCceIp****Jp3zbobYqcV_EefHQ0U23J_o",
    authDomain: "todos-31072.firebaseapp.com",
    projectId: "todos-31072",
    storageBucket: "todos-31072.appspot.com",
    messagingSenderId: "494703082670",
    appId: "1:494703082670:web:711****7f533807ebe813f"
  };
  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);
// export Firebase so it can be used elsewhere 
 const FireBase = firebase.initializeApp(firebaseConfig);
export default Firebase;

Next thing, we go into our Header.js file and create our frontend layouts, ie the project title and input element to type in our todos and a submit button.

So let's write these lines on code in our Header.js

import React, { useState } from "react";

function Header() {
  const [input, setInput] = useState("");

  const handleSubmit = (e) => {
    e.preventDefault();
    alert("Hello " + input);
    setInput("");
  };

  return (
    <>
      <center>
        <form onSubmit={handleSubmit}>
          <h1 className="title" style={{ color: "red" }}>
            My Todos
          </h1>
          <div className="input">
            <input
              type="text"
              required
              placeholder="What do you need to do today?"
              value={input}
              onChange={(e) => setInput(e.target.value)}
            />
            <button type="submit">Submit</button>
          </div>
        </form>
      </center>
    </>
  );
}

export default Header;

Now import the Header like so import Header from "./Components/Header"; inside the App.js file, get rid of h1 and it's content then render the <Header />.
If you did everything correctly in your browser, it should now look like below

Everything is working like we wanted, so let's save our input in firestore once we click the submit button instead of alerting Hello (whatever our input is). We will save and get todos from firebase inside the App.js file and pass the functions as props to each component that needs it. Inside App.js let's get our firebase configurations from Firebase.js like so import FireBase from "./Components/Firebase";

The next is to save our input data to firebase collection, so App.js will now look like the below:

import React from "react";
import Header from "./Components/Header";
import { v4 as uuid } from "uuid/";
import FireBase from "./Components/Firebase";

function App() {
  const saveTodo = (input) => {
    const saveToFirebase = FireBase.firestore();
    saveToFirebase.collection("todos").add({
      id: uuid(),
      item: input
    });
  };
  return (
    <div className="App">
      <Header saveTodo={saveTodo} />
    </div>
  );
}

export default App;

Above we created saveTodo function and pass input as it's parameter which will actually come from the input in our Header.js file, then called firestore function upon the Firebase configuration we imported from Firebase.js, then set our collection id and finally added our object the has an id and item which takes the input parameter.
Also we passed down our saveTodo function to the header component, so inside the Header.js we will destructure and pull out the saveTodo function and call it inside the handleSubmit function and pass our actual input as the input parameter it requires. Update the Header.js file with the following snippets:

import React, { useState } from "react";

function Header({ saveTodo }) {
  const [input, setInput] = useState("");

  const handleSubmit = (e) => {
    e.preventDefault();
    saveTodo(input);
    setInput("");
  };

  return (
    <>
      <center>
        <form onSubmit={handleSubmit}>
          <h1 className="title">My Todos</h1>
          <div className="input">
            <input
              type="text"
              required
              placeholder="What do you need to do today?"
              value={input}
              onChange={(e) => setInput(e.target.value)}
            />
            <button type="submit">Submit</button>
          </div>
        </form>
      </center>
    </>
  );
}

export default Header;

Now whatever you type in as your todo and hit submit, it will be saved in firebase under todos collection.
Let's get our todos from firebase, let head back to App.js and create a getTodos function. First we need to create todos state and set it equals to an empty array so in our getTodos function we would update the todos and set it equals to the data we would get from firebase. we would now pass down the state todos to any component that would be needing it, in our case Todos.js. App.js will now look like below

import React, { useState } from "react";
import Header from "./Components/Header";
import { v4 as uuid } from "uuid/";
import FireBase from "./Components/Firebase";

function App() {
  const [todos, setTodos] = useState([]);

  const saveTodo = (input) => {
    const saveToFirebase = FireBase.firestore();
    saveToFirebase.collection("todos").add({
      id: uuid(),
      item: input,
    });
  };
  const getTodos = () => {
    const getFromFirebase = FireBase.firestore().collection("todos");
    getFromFirebase.onSnapshot((querySnapShot) => {
      const saveFirebaseTodos = [];
      querySnapShot.forEach((doc) => {
        saveFirebaseTodos.push(doc.data());
      });
      setTodos(saveFirebaseTodos);
    });
  };

  return (
    <div className="App">
      <Header saveTodo={saveTodo} getTodos={getTodos} />
    </div>
  );
}

export default App;

In the getTodos()we targeted our collection "todos", then used firestore's onSnapShot() to listen to our document and creates a document snapshot immediately with the current contents, each time the contents change, another call updates the document snapshot, then created an empty array and pushed the data onSnapShot() returned and finally set our state todos equals to the array.

We will want to call getTodos() each time we add a new todo, so we will pass the getTodo() to our Header.js component, then pull it out in Header.js and call it immediately after saveTodo() in handleSubmit().

Next, we will call the getTodos() once our page loads to have access to previously saved todos and set them equals to our state todos, we will do that with the react useEffect hook.
Finally in App.js, import and render our Todos.js Component and pass down the state todos as the Component props. App.js would finally look like below

import React, { useState, useEffect } from "react";
import Header from "./Components/Header";
import { v4 as uuid } from "uuid/";
import FireBase from "./Components/Firebase";
import Todos from "./Components/Todos";

function App() {
  const [todos, setTodos] = useState([]);

  useEffect(() => {
    getTodos();
  }, []);

  const saveTodo = (input) => {
    const saveToFirebase = FireBase.firestore();
    saveToFirebase.collection("todos").add({
      id: uuid(),
      item: input,
    });
  };
  const getTodos = () => {
    const getFromFirebase = FireBase.firestore().collection("todos");
    getFromFirebase.onSnapshot((querySnapShot) => {
      const saveFirebaseTodos = [];
      querySnapShot.forEach((doc) => {
        saveFirebaseTodos.push(doc.data());
      });
      setTodos(saveFirebaseTodos);
    });
  };

  return (
    <div className="App">
      <Header saveTodo={saveTodo} getTodos={getTodos} />
      <Todos todos={todos} />
    </div>
  );
}

export default App;

Next, we head straight to Todos.js and pull out the state todos we passed down to it from App.js, then we map through the todos and display each todo in our frontend. So Todos.js will look like below

import React from "react";

function Todos({ todos }) {
  return (
    <div>
      <ul>
        {todos.map((todo) => (
          <li key={todo.id}>
            {todo.item}
          </li>
        ))}
      </ul>
    </div>
  );
}

export default Todos;

By now if you did everything correctly you would have your todos displayed in your frontend. Below is my end result

Here is the github repository for the code and the styles. Congratulation you have successfully saved and retrieved data in firebase cloud storage.

Conclusion

In this Project we built a Todo App using React.js and Firebase. With React we created a client that sends data to firebase firestore to store and also a client that consumes the stored data, with Firebase firestore we were able to save the data client provided and give back the said data to the client. For more resources on these tools, visit the documentation of React and Firebase.

Forem: Chidi Eze

Alternatives to Docusaurus for product documentation

Introduction

Why Docusaurus Alternatives?

Technical criteria:

GitBook

MkDocs

Docsify

Archivy

Conclusion

Resources

Build a simple E-commerce PIM with Next.js, Prisma, and Neon

Prerequisites

Getting started

Setting up a Neon database

Setting up GitHub authentication

Building the application

Generating schema, creating and reading data

Fetching and reading data from database

Authenticating users with GitHub OAuth provider

Adding new products

Updating a product

Adding publish and unpublish functions

Deleting a product

Conclusion

Top 5 Open-Source Documentation Development Platforms of 2024

Criteria for judgement

Hugo

Docusaurus

Docsify

MkDocs

Key strengths of MkDocs

Drawbacks

Doxygen

Trends and development

Ratings

Conclusion

Resources

How to Build A Video Player with timeline comments using Appwrite & Cloudinary in Next.js

Prerequisites

Getting started

Creating a Next.js application

Building the video player and the comments section

Creating the comments section

Integrating Appwrite for comments storage

Conclusion

Resources

Here's Why Authentication Should Not Be Rocket Science

Examining Why Increasingly Complex Methods Are Not Improving Security

The Problem With Complex Authentication Methods

The Rise Of New Threats

Alternative Authentication Solutions

Conclusion

Resources

Create a Paywall on a Next.js Blog Using FingerPrint and Sanity

Prerequisites

Getting Started with Next.js

Setting up Fingerprint.js

Building the Blog Paywall

Fetching and Rendering Blog Posts

Adding Dynamic Route

Storing User Activity in Firebase

Adding a Paywall

Conclusion

Resources

Modern Web Architectures for High-Performance Apps

What is Web Architecture?

Microservices Architecture

Serverless Architecture

Function-as-a-Service(FaaS)

Backend-as-a-Service(BaaS)

JAMstack Architecture

Best Practice

Conclusion

Resources

How to add GitHub authentication to a Next.js application

Prerequisites

Setting up Appwrite and GitHub

Setting up Next.js the Application

Integrating the GitHub Authentication in the Next.js App