DEV Community: Emmanuel Ugwu

Exploring the Best UI Component Libraries for React Native apps

Emmanuel Ugwu — Fri, 29 Mar 2024 07:51:14 +0000

Developers often face bottlenecks ranging from consistent design language to responsive layouts while building React Native applications. React Native’s inbuilt components can partially meet our development specifications, meaning we either build custom components from scratch or use multiple third-party, pre-designed styling components. Luckily, component libraries alleviate this problem by dishing out a more robust approach.

Taking advantage of component libraries can boost productivity, maintain a consistent style structure, and contribute to the overall efficiency of developing visually appealing and responsive apps. In plain terms, component libraries handle all the heavy lifting.

In this article, we'll look at some top open-source React Native UI component libraries. Not only will they assist us in applying a solid approach and enhancing our project delivery time, but they'll also offer exceptional support for React Native platforms like iOS and Android.

What is a component library, and why is it used?

A component library is a collection of reusable user interface (UI) elements or components, pre-designed and developed for easy integration into software applications. These components can vary from simple items like buttons and input fields to more complicated ones like dropdown menus, sliders, modals, and complete layout frameworks.

With a plethora of options available, picking which component library to utilize can be a daunting task. However, after understanding a component library's capabilities, restrictions, and community support, choosing one that suits your app’s specifications will be easier. Let's look at some React Native component libraries.

Gluestack

Gluestack, like any other customizable UI library, is built to make styling less cumbersome. It comprises a set of themed and unstyled components easily integrated across different platforms and devices. Originally, Gluestack was a part of NativeBase, a component library for both React and React Native. With performance and maintainability in mind, NativeBase was split into two parts, focusing on a universal CSS-in-JS library and an independent set of unstyled components. Gluestack has several advantages, some of which are:

Accessibility: Gluestack provides a vast selection of components to quickly build interfaces that suit your needs while achieving a constant design across different platforms.
Styling and Themeability: Gluestack's components can be modified to suit an app's requirements. This includes a pre-configured theme in the configuration file containing values like theme tokens, breakpoints, and component themes. Theme tokens represent different design attributes, such as typography or font settings, colors, etc. Tokens can also consistently define styling or UI elements throughout an application.
Animation Support: Prevents manual implementation of animations across applications with extensive plugin libraries like @legendapp/motion and moti.
Product Extensions: Gluestack has a range of extensions, like the VS Code extension to quicken development processes and the Figma UI Kit to create mockups and designs.

Currently, Gluestack doesn't seem to be a well-known or established component UI library in the React or React Native ecosystem; however, its key features make it a library developers should adopt.

React Native Paper

React Native Paper is a set of customizable and production-ready React Native components based on Google's Material Design specifications. It offers an option for integrating a Babel plugin, thereby minimizing its bundle size by eliminating modules that are not in use. Overall, React Native Paper is a popular choice for developers looking to create aesthetically pleasing user interfaces for React Native applications. React Native Paper has several essential features, including:

Cross-Platform Compatibility: Since React Native Paper is explicitly built for React Native, it works seamlessly across both iOS and Android platforms, ensuring a uniform user experience across multiple platforms.
Material Design Components: React Native Paper features a diverse set of UI components, including buttons, cards, dialogues, lists, and more, all assembled per Material Design principles.
Customization: The library allows developers to alter the appearance of components through theming and style overrides, creating designs that suit their preferences.
Community Support: React Native Paper, as an open-source project, has an extensive and active developer community that contributes by submitting bug reports, feature requests, or even code contributions. Being open-source, the nature of the project fosters community collaboration and ensures transparency in its development process.

NativeWind

NativeWind is another popular React Native library. Unlike Gluestack or React Native Paper, NativeWind uses Tailwind CSS as a scripting language, forming a compatibility layer between React Native and CSS. Since React Native's StyleSheet system only provides static styles, NativeWind’s universal style system bridges that gap, creating a consistent styling experience across all React Native platforms. The universal style system consists of UI state styles (active, hover, focus), responsive styles (media queries, dynamic units), device state styles (color scheme, screen sizes, and orientation), and styling inheritance. Some of its key features are:

Robust Styling System: NativeWind boasts a wide range of styling options such as pseudo-classes (hover, focus, active), parents-to-children state styles that automatically style children based upon parent pseudo-classes, component themes, and more.
Universal Integration: NativeWind supports and uses the best styling system across multiple platforms.
Fast Runtime: Utilizes a minimal runtime to process responsive styles (e.g., changes to device orientation and color scheme).
Easy to set up

Dripsy

Dripsy is another open-source library designed to work seamlessly with React Native's existing styling system while offering additional features and enhancements. Dripsy’s main objective is to create a responsive design for web and React Native applications irrespective of their screen sizes. Some key features of Dripsy include:

Theming: Dripsy provides theming capabilities, allowing developers to define and apply consistent visual styles across their applications. This includes custom color schemes, typography, and other design tokens.
Responsive Design: Dripsy allows developers to construct responsive layouts that adapt dynamically to the device's screen size and orientation. This also helps to provide a uniform user experience across devices.
Utility Functions: It includes utility functions and helpers for common styling tasks, making it easier to write, maintain, and ship stylesheets in React Native apps.
Customizable UI Components: UI Components like containers, buttons, text inputs, and more can be easily modified to meet the design specifications of applications.
Universal Integration: Dripsy supports integration with platforms like Android, IOS, web, and more.

Tamagui

Tamagui is a UI kit that aims to bridge the gap between React and React Native applications by addressing the fundamental parts of an app, such as styling, theming, and cross-platform components, while keeping app performance in mind. It utilizes an optimizing compiler to significantly improve performance by hoisting objects and CSS at build-time. Its main advantage is that it creates a consistent design system across web and native platforms. Some major highlights of Tamagui are:

Universal Integration: Tamagui integrates seamlessly across various platforms such as Android, iOS, web, and more.
Styling Components: Native apps can be styled with Tamagui’s base components - View and Text, as they are equivalent to React Native’s View and Text. They accept the superset of props that Tamagui supports. You can also build and extend custom and optimizable components.
Theming: Tamagui has a wide range of theming tools, such as tokens, theme values, and hooks, which apply consistent visual styles across applications. These tools include customized color schemes, fonts, and other design elements.
Supports Animation: Tamagui leverages the popular open-source library — Moti as a reanimated driver for animation libraries such as react-native-reanimated and React Native Animated.

Galio

Galio is a free, open-source React Native framework that enables beginner-level programmers to quickly build cross-platform mobile apps by leveraging its collection of customizable and reusable UI components. Galio supports theming, allowing developers to define and apply custom app themes easily. Using its components - GalioTheme, withGalio, and GalioProvider, you can create or overwrite custom themes, consume Galio's React Context, and pass down custom themes in your component as a prop or an argument. The custom themes include defining colors, typography, spacing, and other design elements to create a visually cohesive and appealing user interface. Let's look at some significant factors of Galio:

Customizability: Galio components are highly customizable, allowing developers to adjust styles, colors, and other properties to match their app's design requirements.
Responsive Design: Galio's components are designed to be responsive, ensuring they adapt well to different screen sizes and orientations.
Performance Optimization: Galio is optimized for performance, with efficient code and rendering techniques to deliver a smooth and responsive user experience.
Theming Support: Galio supports theming, making the process of creating and applying custom themes to apps more accessible.
Accessibility: Provides features and guidelines to ensure that apps built with Galio are accessible to users with disabilities.
Cross-Platform Compatibility: Galio components work seamlessly on both iOS and Android platforms, enabling developers to build cross-platform React Native apps.

Key factors to consider while selecting a component library

Finding a suitable library for your project is a crucial choice that will significantly impact user experience, maintainability, and development speed. When assessing component libraries, keep the following points in mind:

Compatibility: Verify the component library's compatibility with your selected technology stack. For instance, if you're building a React Native app, you'll need a library specifically designed for React Native.
Customization: Evaluate the library's flexibility for customization. Determine whether you can easily modify the appearance and behavior of the library’s components to match your project's design requirements.
Documentation: Examine how thorough and well-written the library's documentation is. Concise and clear explanations, usage examples, API references, and troubleshooting advice aid developers in using the library effectively.
Performance: Assess the library's performance metrics, like responsiveness and memory utilization. Performance optimization is necessary to guarantee seamless user experiences, particularly in complex applications.
Accessibility: Evaluate the library's support for features, such as keyboard navigation, compatibility with screen readers, and semantic markup. Making your application accessible is crucial to ensuring all users, including those with disabilities, can use it.
Community Support: Consider the size and nature of the library's community. A thriving community can guarantee the library's existence and offer priceless resources, assistance, and contributions.

By meticulously evaluating these factors, you can select a component library that best meets the needs and requirements of your project, thereby contributing to the success of your application development.

In Summary

Building applications in the React Native ecosystem, as much as any other web development ecosystem, can become exhausting when there’s little to no design flexibility to meet one’s app requirements. Thereby, utilizing a reliable component library will solve this issue, covering everything from complex pre-processing to responsive layouts and utility-first styling.

Build a URL shortener for marketing content analytics

Emmanuel Ugwu — Mon, 15 Jan 2024 10:05:34 +0000

In a world saturated with content across various platforms, understanding the effectiveness of created content is paramount. Marketing content analytics provides a lens through which businesses can evaluate the impact of their strategies, ensuring they resonate with the target audience.

A vital element of content analytics is the URL shortener, which focuses on aesthetics and user experience and enables marketers to create shorter and trackable links. By condensing lengthy URLs into compact forms, these tools streamline the presentation of links in various channels, including social media, emails, and print materials.

This post discusses building a URL shortener to maximize content analytics using Remix and Appwrite’s Function Template — URL Shortener.

The complete source code can be found on GitHub. Clone and fork it to get started!

ugwutotheeshoes / remix-url-shortener

This is a URL Shortener built with Remix and Appwrite function template - URL Shortener

Remix URL Shortener

This is a URL Shortener built with Remix and Appwrite function template - URL Shortener

View on GitHub

Prerequisites

To comfortably follow along in this article, you’ll need the following:

A basic understanding of Remix.
A GitHub account. Create one here.
Appwrite Cloud account.

Getting started

Setting up an Appwrite project

Appwrite Functions are a powerful tool that allows developers to extend their applications’ capabilities in a few simple steps. We’ll first need to create a project on Appwrite’s console to get started. To do this, log into the Appwrite console, click the Create project button, name the project appwrite-url-shortener , and click Create.

Create a function

Here, we’ll create an Appwrite function to condense lengthy URLs. Let’s navigate to the Functions tab on the sidebar and click Create Function to create a new function.

Next, click the GitHub button since we’ll manage our functions in a GitHub repository. To give Appwrite access to all repositories in the GitHub account, select All repositories and then click Install and Authorize.

Click on All templates and search Url Shortener, then click on Create function to set up the function.

Here, we’ll configure the template using the details below. Name the template URL shortener, then select any Node.js runtime from the dropdown list. Click on Next.

In this section, we’ll need to set the environmental variables as shown below.

APPWRITE_API_KEY: This API key lets us interact with the Appwrite server APIs. It is generated once the function is created and can be obtained from the Setting tab on the project's dashboard. Tick the Generate API key box since we want to generate a key on completion.
SHORT_BASE_URL: This is a domain to use for the short URLs. The functions subdomain or a custom domain are viable options here. Let’s use a sample value — https://short.app/s. We’ll reconfigure this to the function’s subdomain once the function fully initializes. You can eventually swap this with your custom subdomain.
Optional variables: Leave this as it is. We’ll replace the APPWRITE_DATABASE_ID and APPWRITE_COLLECTION_ID later on once we create a database to store the lengthy URLs.

After applying the configurations above, click Next.

Next, select the Create a new repository option and click Next. Then, input url-shortener as the repository’s name and click Next.

After naming the repo, select the existing repository's default branch, then click Create. This exports the function template into a suitable directory in the repository.

After this, our function template is successfully created and deployed. We should see the deployed source code in our GitHub repository.

Next, let’s copy the Domain link on the deployed template console, head to the Setting tab, and reconfigure the SHORT_BASE_URL variable using the function subdomain link.

Creating a Database, Collection, and Attribute

Next, we’ll create a database to store and replace a lengthy URL with a shorter one. On the left side of the Appwrite Console dashboard, click on the Database tab. Click on the Create Database button to create a new database. Creating a new database will lead us to the Collection page.

Next, we’ll create a collection in our database by clicking the Add Collection button.

Afterward, head to the Attribute tab and click the Create Attribute button. Then, select the String option from the dropdown menu. Fill in url as the Attribute name, put 1000 as the Attribute Size, and then click the Create button.

Copy the Database and Collection ID on the Collection dashboard, then head back to the Url-shortener template. Here, replace the APPWRITE_DATABASE_ID and APPWRITE_COLLECTION_ID variables we got earlier.

Project setup and installation

We’ll use Remix.js to handle the frontend component.

Run the following command in the terminal as shown below:

npx create-remix@latest --template  https://github.com/ugwutotheeshoes/remix-js

The command above clones a Remix application with a JavaScript template.
To use Appwrite in your Remix application, install the Appwrite client-side SDK for web applications.

npm install appwrite

Then, navigate into the project directory cd <project-name> and run npm run dev to start a development server at https://localhost:3000/ in your browser.

NOTE: We’re using a Remix.js template since this article is JavaScript-based. However, Typescript is also applicable.

Building the app’s functionality

To build the app’s functionality, head to the app/routes/index.jsx file and add the code snippet below.

    // index.jsx
    export default function Index() {  
      const [show, setShow] = useState(false);
      const [longUrl, setLongUrl] = useState("");
      const [shortUrl, setShortUrl] = useState("");

    const client = new Client();
        .setEndpoint("OUR_API_ENDPOINT") // Your API Endpoint
        .setProject("OUR_PROJECT_ID"); // Your project ID
     const functions = new Functions(client);


      const handleChange = (e) => {
         e.preventDefault();
         setLongUrl(e.target.value );
      };

      const handleSubmit = () => {
        const execution = functions.createExecution(
          "OUR_FUNCTION_ID", JSON.stringify({ url: longUrl, }), false, "/", "POST",
          {
            "Content-Type": "application/json",
          }
        );
        execution.then(
          function (response) {
            setShortUrl(response.responseBody);
            setShow(true);
            setLongUrl("");
            console.log(response);
          },
          function (error) {
            console.log(error); // Failure
          }
        );
      };
    return (
     <div className="container">
          <form onSubmit={handleSubmit}>
            <label>Paste your URL here:</label>
            <div className="section">
              <input
                type="text"
                placeholder="URL"
                value={longUrl}
                onChange={handleChange}
              />
              <button type="submit">Submit</button>
            </div>
          </form>
          {show && (
            <p>
              <span>Here's your short link:</span>
              {shortUrl}
            </p>
          )}
        </div>
      )
    }

The snippet above does the following:

Creates a form and some variables to store a URL.
Imports the required dependencies to interact with Appwrite servers.
Creates a request to Appwrite to store the lengthy URL as a new document in the Database we created earlier. For that, we’ll use the Database and Collection ID here.
Stores the created Document’s ID from the response.
Displays the new shortened link, which comprises the function’s subdomain and the Document ID. Demo

The app should function like this after applying the necessary configurations above:

Conclusion

This post highlights the integration of the Appwrite Function template URL shortener in a Remix application. This template can significantly simplify content analysis, providing aesthetic benefits and, more importantly, a reliable means to assess and enhance the efficiency of content distribution across diverse digital platforms.

Resources

These resources may also be helpful:

How to use Appwrite Cloud Functions to censor sensitive information

Emmanuel Ugwu — Fri, 01 Dec 2023 14:04:32 +0000

Serverless computing has been marked by significant advancements, redefining how developers, organizations, and institutions deploy applications. This advancement has redefined the development process and provides developers and organizations with the ability to ship software efficiently.

At the forefront of this evolution is Appwrite, an open-source platform that leverages the power of serverless functions to create scalable, efficient, and cost-effective solutions.

Appwrite has also taken data privacy in serverless architectures to the next level by integrating the Pangea Redact API, a cutting-edge solution for sensitive data redaction.

In this article, we’ll showcase the Appwrite Functions template, its capabilities, and how it plays a pivotal role in censoring sensitive user information.

The complete source code can be found on GitHub. Clone and fork it to get started.

Prerequisites

To comfortably follow along with this article, we’ll need a few things:

A GitHub account.
A Pangea account. Create one here.
An Appwrite Cloud account.

Setting up Appwrite Functions

To integrate Appwrite Functions, we need to create a project on Appwrite’s console. To do this, log into the Appwrite console, click the Create project button, name the project appwrite-censor, and click Create.

Head to the Functions tab on the sidebar and click Create Function to create a new function.

Rather than creating a function using a starter template, let’s use Appwrite’s Censor with Redact template, which we’ll use to censor sensitive data. Click on All templates and select the Censor with Redact template.

Create a Pangea project

To fully utilize the Censor with Redact template, we’ll have to integrate Pangea Redact API into its configuration. Let’s head to Pangea, create an account, and set up a project. Configure the project using these details:


Organization Name	Appwrite
Cloud Provider	Amazon (AWS)
Project Name	appwrite-censor
Geographical Region	United States
Location	us-west-1 (Use the default location)

After applying the configurations above, click Next. Then, select Redact as the common service and click Next.

Next, copy the Default Token displayed on the project's dashboard; we’ll use it as a variable when setting up our Appwrite template.

Let’s head back to the Appwrite console and configure the template using the details below. Name the template Censor with Redact, then select 18.0 as the Node.js runtime version. Click on Next.

Set the default token we got earlier from Pangea's Redact dashboard as the PANGEA_REDACT_TOKEN and click Next.

Next, select the Create a new repository option and click Next. Then, input appwrite-censor-with-redact as the repository’s name and click Next.

After naming the repo, select the existing repository's default branch, then click Create. This exports the function template into a suitable directory in the repository.

After this, our function template is successfully created and deployed. We should see the deployed source code in our GitHub repository.

Glancing through the deployed source code, we’ll highlight two important files, namely:

index.html file: This is the template’s frontend file located in the functions/static folder, which consists of an input for receiving values.
main.js file: This file is in the functions/src folder and houses a function to interact with Pangea Redact API.

We’ll focus only on altering the main.js file to achieve the app's functionality.

Modifying the generated source code on GitHub

Clone the source code, open it in a code editor, and navigate to the src/main.js file. Then, edit the file as shown below:


    // src/main.js
    import { fetch } from 'undici';
    import { getStaticFile, throwIfMissing } from './utils.js';

    export default async ({ req, res }) => {
      throwIfMissing(process.env, ['PANGEA_REDACT_TOKEN']);

      if (req.method === 'GET') {
        return res.send(getStaticFile('index.html'), 200, {
          'Content-Type': 'text/html; charset=utf-8',
        });
      }

      try {
        throwIfMissing(req.body, ['text']);
      } catch (err) {
        return res.json({ ok: false, error: err.message }, 400);
      }

      const response = await fetch(`https://redact.aws.us.pangea.cloud/v1/redact`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          Authorization: `Bearer ${process.env.PANGEA_REDACT_TOKEN}`,
        },
        body: JSON.stringify({
          text: req.body.text,
        }),
      });

      const data = /** @type {*} */ (await response.json());
      return res.json({ ok: true, redacted: data.result.redacted_text });
    };

The snippet above changes the Pangea Domain URL to the geographical region of the Pangea project we registered earlier. Next, we must push the updated codebase back to the deployed template’s repository.

With that done, Appwrite automatically redeploys our function using the updated template.

Navigate to the Domains tab to find the generated domain from Appwrite. Click the generated domain and test the app. The app should work like this:

Customization options for the Censor with Redact template

The Appwrite Function template we’ve chosen here — Censor with Redact — provides a range of options that serve the unique purpose of maintaining data privacy, adhering to regulations, and creating a user-friendly application. This depends on the specific use case and the type of sensitive information that needs to be protected or censored. Here are some standard options:

PII (Personally Identifiable Information)Ruleset: This option focuses on redacting common forms of personally identifiable information, such as names, social security numbers, addresses, phone numbers, and email addresses. It helps protect users' private data by masking their personal information.
Credit Card Ruleset: The credit card option is designed to redact credit card related information. It helps prevent the exposure of sensitive financial data that could be used for fraudulent activities.
Medical Information Ruleset: This option is tailored for redacting medical- and health-related information. It covers a range of medical identifiers, diagnosis codes, and patient information to maintain the confidentiality of healthcare records.
Custom Ruleset: Appwrite allows developers to create custom redact rulesets. This will enable developers to define their redaction rules for specific types of sensitive data or proprietary information. Custom rulesets can be adapted to unique use cases.
Profanity Filter Ruleset: A profanity filter option is designed to censor offensive language and inappropriate content in text data. It helps maintain a positive and safe user experience in applications.
Age Verification Ruleset: This option redacts age-related information to comply with age verification regulations, especially in age-restricted applications or content.
Sensitive Keywords Ruleset: Sensitive keyword rulesets help identify and redact specific sensitive or inappropriate words or phrases. It can be used to enforce content guidelines or moderation.

Conclusion

This post discussed the integration of an Appwrite Function template, Censor with Redact, for sensitive data censorship in applications. It also highlighted multiple use cases of the template's customization options, which provide proactive measures to safeguard user privacy, speed up development, and enable developers to build safe and privacy-conscious applications.

These resources may also be helpful:

How to add S3 adapter to an Appwrite instance

Emmanuel Ugwu — Fri, 22 Sep 2023 08:18:30 +0000

In the modern day, cloud storage facilities have evolved significantly, presenting companies with a plethora of options to store and manage data efficiently. The availability of cloud storage options allows developers to design and deploy applications that scale effortlessly to accommodate growing user bases and increasing data volumes.

Cloud providers invest heavily in state-of-the-art security measures, data encryption at rest and in transit, identity access management, storage capacity, and comprehensive compliance certifications. This level of security is often beyond the capabilities of individual organizations, making cloud storage a preferred choice for sensitive data.

As data grows in volume and importance, the elasticity that cloud providers deliver accommodates increasing user demands and remains performant even during traffic spikes.

This article demonstrates a beginner-friendly tutorial on integrating an Amazon S3 adapter into an Appwrite instance. The complete source code for this project is located here. Clone and fork it to get started.

Prerequisite

To follow along with this tutorial, you’ll need the following requirements:

A basic understanding of Next.js
Node.js and its package manager, npm; install here
Docker installed
Access to an Appwrite Cloud account; submit a request for Appwrite Cloud here
An Amazon Web Services (AWS) account; create a free account here

Before initializing an Appwrite instance, we must prepare an Amazon S3 bucket and authenticate it to Appwrite.

What is Amazon S3?

Amazon S3, also known as Amazon Simple Storage Service, is a web service interface-based object storage service provided by Amazon Web Services. It includes performance, security, and scalability that are unmatched in the market.

How Amazon S3 works

Amazon S3 is an object storage service that stores data as objects within buckets. An object is a file and any metadata that describes the file. A bucket is a container for objects that can store any number of objects/data.

To fetch or send data to an S3 bucket, we’ll use an Amazon S3 adapter. The S3 adapter needs to be authenticated by an Appwrite instance locally using an AWS access key and secret key.

To create an Amazon S3 bucket, log into the AWS Console, head to the search bar on the top right corner of the dashboard, and search S3. Go to the S3 page and create a new bucket.

Use the general configuration below to create a bucket.


Bucket Name	pink-collage
AWS Region	US East (N. Virginia) us-east-1 (THIS MAY VARY DEPENDING ON A USER’S LOCATION)
Object Ownership	ACLs Disabled
Public Access Settings	Block all public access
Bucket Versioning	Disable
Default Encryption	Server-side Encryption with Amazon S3-managed keys

NOTE: The AWS region may vary depending on your location. Visit here to learn more.

We also want to get credentials that give Appwrite access to read and write our newly created bucket. To do that, click on the username in the upper right corner and select Security Credentials. Next, select Create Access Key. We'll be redirected to the dashboard to see the newly created credentials. Copy the access secret and access key; we'll use them later.

NOTE: Don’t share your access secret and access key.

Configuring Appwrite

To use Appwrite in our Next.js application, install Appwrite’s client-side software development kit (SDK) and Pink Design to style web applications.

npm install appwrite
npm install @appwrite.io/pink

We need to create an Appwrite instance in a preferred directory by running the command below:

docker run -it --rm \
    --volume /var/run/docker.sock:/var/run/docker.sock \
    --volume "$(pwd)"/appwrite:/usr/src/code/appwrite:rw \
    --entrypoint="install" \
    appwrite/appwrite:1.3.8

Then, configure the instance using the details below:


Server HTTP port	Default: 80 (Use the default port or press “enter”)
Server HTTPS port	Default: 443 (Use the default port or press “enter”)
API key	Default: 'your-secret-key' (Feel free to change this)
Appwrite hostname	Default: 'localhost' (In case you have a domain or subdomain, if not, press “enter”)
DNS A record hostname	Use the same input as the Appwrite hostname

Once our Appwrite instance is running, we can configure the storage adapter. To do that, locate the .env file Docker created for the Appwrite instance and replace the variables as shown below:

_APP_STORAGE_DEVICE=S3
_APP_STORAGE_S3_BUCKET=OUR_BUCKET
_APP_STORAGE_S3_REGION=OUR_REGION
_APP_STORAGE_S3_SECRET=OUR_ACCESS_SECRET
_APP_STORAGE_S3_ACCESS_KEY=OUR_ACCESS_KEY

NOTE: To locate the .env file, check your computer root file. For example, C:\Users{USER_NAME}\appwrite.env.

Once the environment variables are configured, save the file and head to the appwrite directory, then restart the Appwrite instance using docker-compose up -d. Then, head to the Appwrite instance server — localhost, where we’ll see Appwrite’s console. Create a new account and project. Let’s name this project appwrite-s3.

The new project will appear on the console dashboard. Next, copy the Project ID and API Endpoint; we'll use them later.

NOTE: Don’t share your Project ID or API Endpoint.

Navigate to the Storage tab and create a new bucket named pink-collage.

After creating the bucket, go to the Update Permissions section on the Settings page. We want to assign a Read Access and Write Access with a role: any value. We can customize these roles later to specify who has access to read or write to our bucket.

We also want to allow a set of file extensions. Go to the Update Allowed File Extension section and add any file extension format for the objects we’ll upload to our bucket.

NOTE: Appwrite storage accepts file extension formats like jpg, png, svg, gif, html, pdf, mp4, etc.

Initializing a Next.js project

Let’s bootstrap a new Next.js project with the following command:

npx create-next-app <project-name>

The command above triggers a command-line interface (CLI) where we can create our Next.js application. The image below shows the configuration options the CLI provides:

Navigate to the project directory and start a development server at https://localhost:3000/ in our browser.

cd <project-name> 
npm run dev

NOTE: <project-name> above stands for the name of our app; we can call it any name we deem fit.

Store and retrieve a file with an S3 adapter

Next, upload a file into the Appwrite bucket. Any file uploaded to Appwrite’s bucket will automatically be uploaded to Amazon S3 bucket. To confirm, visit the Amazon S3 bucket we created earlier to see the exact files we uploaded to Appwrite.

Next, create a pages/component/ApiHelper.js file to create an instance to interact with Appwrite services. Paste the Project ID and API Endpoint we got from Appwrite earlier on.

import { Client, Storage } from "appwrite";
const client = new Client();
export const storage = new Storage(client);
client
    .setEndpoint("http://localhost/v1") // Your API Endpoint
    .setProject("OUR_PROJECT_ID"); // Your project ID

Next, head to the pages/index.js file to fetch the file we uploaded.

//pages/index.js
import Link from "next/link";
import "@appwrite.io/pink";
import { storage } from "./component/ApiHelper";
export default function Home() {
const result = storage.getFilePreview("[BUCKET_ID]", "[FILE_ID]", "[width]", "[height]");
console.log(result); // Resource URL
return (
  <main>
    <div>
      <nav className="u-flex u-cross-center u-main-space-between u-padding-16">
        <h2 className="logo u-padding-16 eyebrow-heading-1 u-color-text-pink">
         <Link href="/">PINK COLLAGE</Link>
        </h2>
        <button className="button">
          <Link href="/upload">UPLOAD AN IMAGE</Link>
        </button>
      </nav>
      <div className="article">
        <img src={result} alt="images" />
        <div className="article-container">
          <h2 className="eyebrow-heading-1">The Pink Flamingo</h2>
          <p>
            Sunt et dolore labore est voluptate laborum nisi incididunt officia qui esse ut...
          </p>
        </div>
      </div>
    </div>
  </main>
 );
}

The code snippet above does the following:

Imports the Appwrite module from pages/component/ApiHelper.js
Fetches and renders the file we uploaded to the Appwrite bucket earlier on

This is what the app will look like:

Next, we want to be able to upload files directly from our application. To do this, create a new file — pages/upload.js which will have a custom file input to upload a file of any format. The uploaded file will be in an image format.

import React, { useState } from "react";
import Link from "next/link";
import "@appwrite.io/pink";
import { ID } from "appwrite";
import { storage } from "./component/ApiHelper";

const upload = () => {
const [upload, setUpload] = useState(null);

const onFileChange = (e) => {
 if (e.target.files) {
 setUpload(e.target.files[0]);
 }
};   
const fileUpload = () => {
 if (!upload) {
  return;
}
const promise = storage.createFile(
  "[BUCKET_ID]",
  ID.unique(),
  upload
);
promise.then(
 function (response) {
   console.log(response); // Success
 },
 function (error) {
   console.log(error); // Failure
  }
 );
};
return (
  <main>
    <div>
      <nav className="u-flex u-cross-center u-main-space-between u-padding-16">
        <h2 className="logo u-padding-16 eyebrow-heading-1 u-color-text-pink">
          <Link href="/">PINK COLLAGE</Link>
        </h2>
        <button className="button">
          <Link href="/">HOME</Link>
        </button>
      </nav>
      <h2 className="header eyebrow-heading-1 u-color-text-pink u-padding-16">
        Upload an image
      </h2>
      <div className="section">
        <button className="button" onClick={fileUpload}>
          Upload
        </button>
      </div>
    </div>
  </main>
 );
};

export default upload;

The code snippet above does the following:

Creates a navbar button that redirects to the homepage
Creates a file input to access the file to be uploaded
Sets up a useState variable, which retains the file
Then, interact with Appwrite services and upload the file

The application will look like this after applying the necessary configurations:

Conclusion

By leveraging the power of Appwrite's storage services, developers can easily integrate AWS S3 as a storage adapter for scalable and reliable storage of various data types. This combination allows flexibility in handling different file formats and ensures data security through AWS's robust infrastructure. With the S3 adapter, developers can use Appwrite's features while seamlessly storing and retrieving objects in AWS S3, enhancing their applications' overall performance and user experience.

Resources

Testing Next.js components using Cypress

Emmanuel Ugwu — Tue, 05 Sep 2023 06:08:42 +0000

The popularity of JavaScript frameworks is a testament to the flexibility they offer developers, allowing them to build complex applications. An example is Next.js, a React-based framework with pre-rendering, automatic code-splitting, and greater application scaling flexibility.

Every developer's goal is to build software that works. With a good JavaScript framework and adequate testing techniques, a developer can build software that works flawlessly. Testing enables developers to write efficient code, which saves them hours of debugging and eventually reflects in overall software quality.

Cypress is an end-to-end testing framework that creates tests for modern web applications, debugs them visually, and automatically runs them in continuous integration builds.

What we’ll build

This post reveals the similarities and differences between Cypress testing techniques and how to run tests in a Next.js application. The complete source code of this project is on GitHub. Fork it to get started quickly.

Prerequisite

A basic understanding of React.js and test UIs is needed to get the most out of this article.

Getting started with Cypress

First, you'll bootstrap a new Next.js app by running the following command in your terminal:



npx create-next-app <project-name>

Navigate into the project directory and install Cypress locally as a dev dependency.



#navigate to the newly created app
cd <project-name>

#install cypress
npm install cypress --save-dev

#run cypress via npm
npx cypress open

NOTE: <project-name> in the code snippet above stands for the app's name; you can call it whatever you want.

Once this is done, you'll need to include a way to launch Cypress from the terminal. You'll add a Cypress command to the scripts field in your package.json file to do this.



{
"scripts": {
    "cypress:open": "cypress open"
  }
}

Invoking the command npx cypress open from your project root starts the Cypress Launchpad.

Before you start writing your first test, you'll have to choose what test your application requires. Cypress offers two options: End-to-End and Component Testing.

Each option has its advantages and disadvantages, and the decision will be based on the needs of the task you're attempting to accomplish. Ultimately, your app will have a combination of both tests, but how do you choose right now?

Let's review each of these test types, their benefits, and what to consider when testing your Next.js application.

End-to-End Testing

E2E Testing is a technique for testing your app from the web browser to the back end, as well as interactions with third-party APIs and services. These tests ensure that your entire software works as a unit.

Cypress does end-to-end testing work in the same way users interact with your app using a real browser to visit URLs, view content, click on links and buttons, and so on. This testing method helps guarantee that your tests and the user's experience are consistent. Tests are written in code and use an API to replicate what a real user would do.

Benefits of End-to-End tests

Ensures your app functions as a unit.
Testing corresponds to the user experience.
Developers or QA Teams can write it.
It can also be used for integration testing.

Considerations for End-to-End tests

More complex and time-consuming to set up, execute, and maintain.
Provide testing infrastructure in CI.
Testing specific situations necessitates additional setup.

Writing your first E2E test

Cypress supports most browsers, including Chrome, Firefox, and Microsoft's new Edge browser. Cypress's execution speed and debugging capabilities are enhanced because the tests run within the browser. While the tests are performed in the browser, Cypress uses a node server as a proxy.

The browser and the Cypress Node process continually communicate to do duties on each other's behalf, such as simulating network requests from tests. Cypress test suites may be readily integrated into any CI/CD pipeline to perform end-to-end tests during their nightly cycles, per pull request, or other triggered events.

Cypress has provided some default tests to run your first E2E test in the Next.js app, as shown below.

Instead of using the provided tests, head to the file directory: cypress/e2e and create a new file called sample.cy.js. After creating the file, copy and paste the code snippet below.



#cypress/e2e/1-getting-started/sample.cy.js

describe('My First Test', () => {
  it('clicks the link "type"', () => {
    cy.visit('https://example.cypress.io')
    cy.contains('type').click()
  })
})

The test visits a webpage and clicks on a link located on the webpage.

Component Testing

Component tests differ from end-to-end testing in that, rather than visiting a URL to load up an entire app, a component can be "mounted" and evaluated independently. This allows you to focus solely on testing the component's functionality and not on any intricacies associated with testing a component as part of a bigger application.

Modern web frameworks provide ways to write applications by splitting them into smaller logical units known as components. Components might be as simple as a button to something as complicated as a registration form. Because of their nature, components are easily testable, which is where Cypress Component Testing comes in.

Nevertheless, even if all of your component tests pass, this does not imply that your application functions properly. Component tests offer nothing to confirm that all of your app's layers work together correctly. As a result, a well-tested program includes both end-to-end and component tests, with each set of tests specializing in what it does best.

Benefits of Component Tests

It is simpler to test components in isolation.
Quick and dependable.
It is simple to create customized scenarios in tests.
They don't rely on an external system to function.

Considerations for Component Tests

Do not guarantee overall app quality.
Do not use external APIs/Services.
Often written by developers working on the component.

Writing your first Component test

Navigate to the file directory, pages and create two files - Counter.js and Counter.cy.js. These files are the app’s component and testing files. Head to Counter.js and paste the code snippet below.



import { useState } from "react";
export default function Counter({ initial = 0, onChange = () => {} }) {
  const [count, setCount] = useState(initial);
  const handleIncrement = () => {
    const newCount = count + 1;
    setCount(newCount);
    onChange(newCount);
  };
  const handleDecrement = () => {
    const newCount = count - 1;
    setCount(newCount);
    onChange(newCount);
  };
  return (
    <div>
      <h1>Counter</h1>
      <button data-cy="decrement" className="btn-primary" onClick={handleDecrement}>
        -
      </button>
      <span data-cy="counter" className="counter">{count}</span>
      <button data-cy="increment" className="btn-primary" onClick={handleIncrement}>
        +
      </button>
    </div>
  );
}

This will create a simple counter to increase or decrease a number. The application will look like this after applying the code snippet above.

Now, let’s create a test script for the Counter.js file. Head to the Counter.cy.js file and write a test to mount the Counter.js component, then click on the increment button. After clicking the increment button, Cypress should check if the counter has a value of 1. Cypress should also do the same in a decrement scenario.



import React from 'react'
import Counter from './Counter'

it('when the increment button is pressed, the counter is incremented', () => {
  cy.mount(<Counter />)
  cy.get('[data-cy=increment]').click()
  cy.get('[data-cy=counter]').should('have.text', '1')
})
it('when the decrement button is pressed, the counter is decremented', () => {
  cy.mount(<Counter />)
  cy.get('[data-cy=decrement]').click()
  cy.get('[data-cy=counter]').should('have.text', '-1')
})

Head to the Component Test Launchpad and access the component testing page to run the test file you just created.

The test visits the component file and performs the test from its testing file.

Testing Type Comparison

While both end-to-end testing and component testing are valuable testing methodologies, they differ in terms of their scope, granularity, and complexity. These are comparisons of the two testing types:

	E2E	Component
What is tested in the app	All app layers	Individual component
Characteristics of the test type	Comprehensive, slower, more susceptible to flake	Specialized, quick, reliable
Test type use	Verifying app works as a cohesive whole	Testing the functionality of an individual component
Written by	Developers, QA Team, SDETs	Developers, Designers
CI Infrastructure	Often requires complex setup	None needed
Initialization Command	`cy.visit(url)`	`cy.mount(<MyComponent />)`

Testing API routes

When working with larger applications, you may encounter the need to test routes and endpoints. This is also possible with Cypress. Navigate to the pages folder in your application and create a new file called books.js, which will store the data and functions you need for your API:



// pages/api/books.js

export default function books(req, res) {
  res.statusCode = 200;
  res.setHeader("Content-Type", "application/json");
  return res.json([
    {
      id: 1,
      book: "The Firm",
      author: "John Grisham",
    },
    {
      id: 2,
      book: "Cracking the PM interview",
      author: "Jackie Bavaro",
    },
    {
      id: 3,
      book: "Fools Die",
      author: "Mario Puzo",
    },
  ]);
}

Next, let’s create a script for testing. Navigate to the e2e/1-getting-started folder in cypress, where you’ll create the tests for the API routes:



//cypress/e2e/1-getting-started/books.cy.js

describe("Book test", () => {
  it("Confirms the number of books in your local library", () => {
    cy.visit("http://localhost:3000");
    cy.request("GET", "api/books").as("books");
    cy.get("@books").should((response) => {
      expect(response.status).to.eq(200);
      expect(response).to.have.property("headers");
      expect(response).to.have.property("duration");
      expect(response.body).to.have.length(3);
    });
  });
});

The test expects the following from the books endpoint’s response:

Response status equals 200.
The API response to include a header.
The API response body should contain only three objects.
The test should include response time.

Launch the E2E Test server and run the tests like before.

You should have this as your result after performing the test.

Test Isolation

Test Isolation refers to the ability to execute tests independently of one another without being affected by the state of other tests or the application itself. Developers can ensure that other tests or external influences do not influence the results of each test by executing each test in a clean environment. This facilitates the identification and correction of bugs and the efficient collaboration of team members.

Test Isolation in End-to-End Testing
End-to-end testing in Cypress supports enabling or disabling test isolation to specify whether a suite of tests should run in a clean browser context or not. The test isolation is a global configuration that can be overridden at the describe level for End-to-End testing with the testIsolation option.



#cypress.config.js

const { defineConfig } = require('cypress')

module.exports = defineConfig({
  e2e: {
    testIsolation: true
  },
})

When test isolation is enabled, Cypress resets the browser context before each test by:

Clearing the DOM state by visiting about:blank.
Clearing cookies in all domains.
Clearing localStorage in all domains.
Clearing sessionStorage in all domains.

Because the test starts in a new browser context, you must return to your application and perform the set of interactions required to build the DOM and browser state for each test.

Also, when establishing a browser session, the cy.session(0) command will inherit this configuration and erase the page and current browser context. This is done so that tests can pass when run independently or in a randomized order.

When test isolation is disabled, Cypress doesn't change the browser context before the test begins. The page does not distinguish between tests and cookies; therefore, local and session storage will be accessible across all tests in that suite. Also, the cy.session() command clears only the current browser context while establishing a browser session.

Test Isolation in Component Testing
Cypress doesn’t support global configuration for test isolation in component testing.
When running component tests, Cypress always resets the browser context before each test by:

Unmounting the rendered component under the test.
Clearing cookies in all domains.
Clearing localStorage in all domains.
Clearing sessionStorage in all domains.

It is crucial to remember that while disabling test isolation may increase overall end-to-end test performance, it may also allow the state to "leak" between tests. This can make recent tests reliant on the results of previous tests, potentially leading to misleading test failures. While using this mode, it is important to be particularly attentive to how tests are written and ensure that tests continue running independently.

Conclusion

Using Cypress to test Next.js apps can assist developers in creating high-quality, reliable web applications that fulfill user experience and standards and perform well in production.

Resources

The following resources can help you get started with Cypress:

How to implement OAuth2 in web apps in 5 easy steps: A beginner’s guide

Emmanuel Ugwu — Fri, 28 Jul 2023 08:24:53 +0000

Authentication is the foundation of security for all modern technology. Every business, enterprise, and organization requires authentication, lowering the danger of compromising important user information.

Authentication is simply validating a user's information or identity. It plays a critical role in protecting sensitive data, maintaining user privacy, and granting users appropriate access to resources and functionalities within an application.

This guide demonstrates beginner-friendly steps to implement authentication in web apps with Appwrite’s Google OAuth.

The complete source code for this project is located here. Clone and fork it to get started.

Prerequisite

To follow along with this tutorial, the following are required:

A basic understanding of JavaScript and Next.js
Node and its package manager, npm. Install them from here
Access to an Appwrite Cloud account. Submit a request for Appwrite Cloud here
A Google account; create a free account here

Step 1: Project setup and installation

Let’s bootstrap a new Next.js project with the following command:



npx create-next-app <project-name>

The command above triggers a command-line interface (CLI) where we can create our Next.js application. The image below shows the configuration options the CLI provides:

Navigate to the project directory and start a development server at https://localhost:3000/ in our browser.



cd <project-name> 
npm run dev

NOTE: <project-name> above stands for the name of our app; we can call it any name we deem fit.

Step 2: Set up Google authentication

We'll head to Google Cloud Console to set up a Google authentication. Here, we’ll get an OAuth client ID for our application.

A client ID is an application-specific identifier that aids the client and server OAuth 2.0 authentication. Create a new project and name it appwrite-google-auth.

After creating the project, click the APIs & Services tab to see the dashboard below.

On the left-hand menu, select the OAuth Consent Screen option. We must first configure our consent screen to create an OAuth client ID. A consent screen shows a summary of our project and its policies whenever our app requests authorizations from a user’s Google Account.

Click on Configure Consent Screen, then select External to give access to any test user with a Google Account, and click Create.

Next, we’ll edit our app registration. Fill in the app registration form with the details below and click SAVE AND CONTINUE.


App Name	Medic Care
User support email	walterobrian@gmail.com
App logo	LEAVE BLANK
Application home page	http://localhost:3000/
Application privacy policy link	LEAVE BLANK
Application terms of service link	LEAVE BLANK
Authorized domains	LEAVE BLANK OR ADD A REGISTERED APP DOMAIN IF THERE’S ONE
Developer contact information	walterobrian@gmail.com

Leave the Scopes and Test users configurations blank and click SAVE AND CONTINUE to complete the process.
On the left-hand menu, select the Credentials option to access the page where we can generate the Google client ID. At the top of this screen, click CREATE CREDENTIALS, then select the OAuth client ID option.

Fill in the OAuth client ID form with the details below and click the Create button.


Application type	Web application
Name	appwrite-auth
Authorized JavaScript origins	- http://localhost:3000/ - http://localhost
Authorized redirect URIs	- http://localhost:3000/ - http://localhost

The Authorized JavaScript origins URI is the development server of our application. Use http://localhost:3000 and http://localhost, or a hosted URI if the application is hosted.

The Authorized redirect URI is the link to which Google will redirect a user after a successful login. We can redirect a user to another link or return the user to the original link. Either way, include the URL here.

Finally, click the Create button to generate the Google client ID. We'll be redirected to the dashboard to see the newly created credentials. Copy the Google Client ID and Client Secret; we'll use them later.

NOTE: Don’t share your Google Client ID or Client Secret.

Step 3: Create an Appwrite project

What is Appwrite?

Appwrite is a development platform that provides a powerful API and management console for building backend servers for web and mobile applications.

To use Appwrite in our Next.js application, install Appwrite’s client-side SDK (Software Development Kit) and Pink Design to style web applications.



npm install appwrite
npm install @appwrite.io/pink

The new project will appear on the console. Next, copy the Project ID and API Endpoint. We’ll use this to set up our Next.js application.

NOTE: Don’t share your Project ID or API Endpoint.

Navigate to the Auth option and click the Settings tab. We want to enable a Google OAuth provider for our app. Click on the Google OAuth Provider tab and paste the Google Client ID and Client Secret we got from Google earlier.

Copy the Appwrite Authorized redirect URI for our Google OAuth provider and add it to our Google Cloud Console's list of Authorized redirect URIs.

Step 4: Integrate Appwrite with our Next.js application

Let’s create a pages/component/ApiHelper.js file to house our Appwrite instance. Paste the Project ID and API Endpoint from Appwrite. This creates an instance to interact with Appwrite services.



import { Client, Account } from "appwrite";
const client = new Client();
 export const account = new Account(client);
 client
   .setEndpoint("http://localhost/v1") // Your API Endpoint
   .setProject("OUR_PROJECT_ID"); // Your project ID

Next, we want to create an impression where any user not logged into the app would automatically be redirected to Google's OAuth Page.

To achieve this functionality, open the pages/index.js file, import the Appwrite instance from ApiHelper.js, and replace its default syntax with the code snippet below.



// pages/index.jsx
import React, { useEffect, useState } from "react";
import { account } from "./api/ApiHelper";
export default function Home() {
  const [userDetails, setUserDetails] = useState();
  const fetchUser = async () => {
    try {
      const data = await account.get();
      setUserDetails(data);
    } catch (error) {
      console.log("the error that happened:", error);
      return Login();
    }
  };
  useEffect(() => {
    fetchUser();
  }, []);
  const Login = () => {
    try {
      const response = account.createOAuth2Session(
        "google",
        "http://localhost:3000",
        "http://localhost:3000/login"
      );
      console.log(response);
    } catch (error) {
      console.error("Failed to create OAuth session:", error);
    }
  };
  return (
    <main>
      {userDetails ? (
          <div className="container u-padding-64 u-text-center">
            <p className="text u-normal">
              <b>Patient Name</b>: {userDetails.name}
            </p>
            <p className="text u-normal">
              <b>Email</b>: {userDetails.email}
            </p>
          </div>
        </div>
      ) : (
        <div className="container u-padding-64 u-text-center">
          <h1>Redirecting to authentication page...</h1>
        </div>
      )}
    </main>
  );
 }

The code snippet above does the following:

Creates a useState() variable — userDetails, to hold user data
Executes the function — fetchUser, whenever the component is mounted. This function gets the data of a user that’s currently logged in, then assigns it to the userDetails variable
Automatically creates a Google OAuth session only if the user data isn’t present, which shows the current user isn’t logged in. This Google OAuth session grants a user access to log into the app
The Google OAuth session re-routes to the homepage only if the user successfully logs in

This is how the login page will look after applying the configurations above:

Step 5: Create a log in and log out feature

Next, we’ll create a pages/login.js file to log into the app manually. This file will create a Google OAuth session allowing users access to the app. Import the Appwrite instance from ApiHelper.js to initialize the session.



//pages/login.js
import React from "react";
import Link from "next/link";
import "@appwrite.io/pink";
import { account } from "./component/ApiHelper";
export default function Login() {
  const Login = () => {
    try {
      const response = account.createOAuth2Session(
        "google",
        "http://localhost:3000",
        "http://localhost:3000/login"
      );
      console.log(response);
    } catch (error) {
      console.error("Failed to create OAuth session:", error);
    }
  };
  return (
    <main>
      <nav className="u-flex u-cross-center u-main-space-between u-padding-32">
        <h2 className="logo u-padding-16 eyebrow-heading-1 u-or-text-pink">
          <Link href="/">MEDIC CARE</Link>
        </h2>
        <button className="button" onClick={() => Login()}>
          LOG IN
        </button>
      </nav>
      <div className="container u-padding-64">
        <p className="u-text-center u-padding-64 text u-normal">
          Log in to get user details.
        </p>
      </div>
    </main>
  );
}

The Google OAuth session redirects to the homepage only if the user successfully logs in. To log out a user, head back to the pages/index.js file and add an Appwrite instance to delete the current user session and re-route the page to the login page.



//pages/index.js
export default function Home() {
  const Logout = async () => {
    try {
      await account.deleteSession("current");
      router.push("/login");
    } catch (error) {
      console.log("the error that happened:", error);
    }
  };
return (    
    <main>
      {userDetails ? (
        <div>
          <nav className="u-flex u-cross-center u-main-space-between u-padding-32">
<h2 className="logo u-padding-16 eyebrow-heading-1 u-color-text-pink">MEDIC CARE</h2>
            <div>
   <button className="button" onClick={() => Logout()}> LOG OUT </button>
            </div>
          </nav>
       // User details
      ) : (
        <div className="container u-padding-64 u-text-center">
          <h1>Redirecting to authentication page...</h1>
        </div>
      )}
    </main>
    );
  }

Here’s a demo of how the Google authentication will turn out after applying the necessary configurations:

Conclusion

Following these five steps, developers can implement OAuth2 in their web apps using Google OAuth and Appwrite SDK, providing users with a safe and efficient authentication process.

Resources

Build a cloud-based customer support ticketing app with real-time updates (Nuxt.js)

Emmanuel Ugwu — Thu, 13 Jul 2023 11:28:13 +0000

In today's marketing environment, providing excellent customer service has become vital to ensure customer satisfaction and loyalty. Businesses frequently use ticketing systems to manage customer inquiries, complaints, and requests. These solutions not only consolidate customer support interactions but also allow for fast issue tracking and resolution.

Appwrite, an extensive open-source backend server, and API suite, provides developers with a robust framework for developing a variety of applications. Because of its vast feature set and ease of integration, it is an excellent choice for developing a customer support ticketing app that improves service delivery and overall customer experience.

In this article, we’ll build a customer support ticketing app using Appwrite Cloud to provide real-time updates, store and render data, and an open-source design system — Pink Design, to style the application.

Github

The complete source code for this project is located here. Clone and fork it to get started.

Prerequisite

To follow along with this tutorial, the following are required:

A basic understanding of JavaScript, Vue.js, and Nuxt.js
Node and its package manager, npm (install them from here)
Access to an Appwrite Cloud account (submit a request for Appwrite Cloud here)

Getting started

Project setup and installation

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

npx nuxi init <project-name>

Navigate to the project directory and install the required dependencies.

cd <project-name> 
npm install

Run npm run dev to start a development server at https://localhost:3000/ in our browser.

NOTE: <project-name> above stands for the name of our app; feel free to call it whatever you like.

Installing Appwrite and Pink Design

What is Appwrite?

Appwrite is a development platform that provides a powerful API and management console for building backend servers for web and mobile applications.

What is Pink Design?

Pink Design is Appwrite's open-source design system for creating consistent and reusable user interfaces. Pink Design aims to emphasize collaboration, developer experience, and accessibility.

To use Appwrite in our Nuxt.js application, install Appwrite’s client-side SDK (Software Development Kit) and Pink Design for web applications.

npm install appwrite
npm install @appwrite.io/pink

Setting up Appwrite Cloud

The new project will appear on the console. Next, copy the Project ID. We’ll use this to set up our Nuxt.js application.

Create a database, collection, attributes, and add sample data

Navigate to the Database tab and click the Create database button to create a new database.

Next, we’ll create a collection in our database by clicking the Create collection button. Give it a suitable name and then click Create.

Go to the Update Permissions section on the Settings page. We want to assign a CRU access (create, read, update) with a role: any value for the Collections we created. We can customize these roles later to specify who has access to read or write to our database.

Navigate to the Attributes tab and create a set of attributes for our collection as shown below:

Attribute Key	Attribute Type	Size	Element	Required
email	Email	NULL	NIL	No
request	String	2000	NIL	Yes
name	String	256	NIL	Yes
status	String	256	NIL	No

We need to add sample data for our application. To do this, head to the Documents section and click on Create document, then add the model to the collection as shown below:

Integrating Appwrite with Nuxt.js

Let’s create a form to accept customer support requests. To do this, create a pages/index.vue file in the root folder of the project and add the following syntax below:

// pages/index.vue
<template>
  <div>
   <nav class="u-flex u-cross-center u-main-space-between u-padding-32">
    <h2 class="logo u-padding-16 eyebrow-heading-1 u-color-text-pink">
     <NuxtLink to="/">PINK CUSTOMER SUPPORT</NuxtLink>
    </h2>
  <NuxtLink to="/requests">
     <span class="button"> SUPPORT REQUESTS</span>
  </NuxtLink>
 </nav>
 <form @submit.prevent="submitForm">
   <h2 class="eyebrow-heading-1 u-text-center u-padding-64">
     write a request
   </h2>
 <div class="u-grid u-cross-center u-main-center u-padding-16">
   <label for="email">Full Name:</label>
    <input placeholder="Full Name" type="text" id="name" v-model="name" required />
  <label for="email">Email:</label>
    <input placeholder="Email" type="email" id="email" v-model="email" required />
  <label for="request">Request:</label>
    <textarea class="input-text" placeholder="Request" type="text" id="request" v-model="request" required />
  <button class="button" type="submit">
    <span class="text">Submit</span>
  </button>
  </div>
 </form>
</div>
</template>

The image below shows what our application will look like after applying the configurations above.

In the pages/index.vue file, we’ll create a new document in Appwrite’s database for each customer support request we submit. Copy and paste the code snippet below:

// pages/index.vue
<script>
import { Client, Databases, ID } from "appwrite";
 export default {
  data() {
    return {
      name: "",
      email: "",
      request: "",
    };
  },
  methods: {
    async submitForm() {
      const client = new Client();
      const databases = new Databases(client);
      client
            .setEndpoint("OUR_API_ENDPOINT") // Your API Endpoint
            .setProject("OUR_PROJECT_ID"); // Your project ID
      try {
        const response = await databases.createDocument(
          "OUR_DATABASE_ID", 
          "OUR_COLLECTION_ID",
          ID.unique(),
          {
            name: this.name,
            email: this.email,
            request: this.request,
            status: "open",
          }
        );
        console.log(response);
        this.name = "";
        this.email = "";
        this.request = "";
      } catch (error) {
        console.error(error);
      }
    },
  },
};
</script>

The code snippet above does the following:

Gets the data values from the form inputs
Initializes an instance to create a new document in Appwrite’s database whenever we submit the form
Resets the form to its default state

Fetching customer support requests

We’ll also need to show the customer support requests we submitted earlier on. For this, create a components/FetchDocuments.js file in the root folder of the project with the following syntax:

// components/FetchDocuments.js
<script setup>
import { Client, Databases } from "appwrite";
const client = new Client();
const databases = new Databases(client);
  client
    .setEndpoint("OUR_API_ENDPOINT") // Your API Endpoint
    .setProject("OUR_PROJECT_ID"); // Your project ID
export const FetchDocuments = databases.listDocuments( "OUR_DATABASE_ID", "OUR_COLLECTION_ID");

Let’s break down the code snippet above:

Imports the required module — Client and Databases
Creates a new instance for the modules

NOTE: Get the API Endpoint, Project ID, [DATABASE_ID], and
[COLLECTION_ID] from Appwrite’s console.

Then, create a pages/request.vue file, import the instance named FetchDocuments, which interacts with Appwrite services by fetching the requests whenever the component is mounted. We must also render only requests with a customer email from Appwrite’s database.

// pages/request.vue
<script>
import { FetchDocuments } from "@/components/FetchDocuments.js";
export default {
  data() {
    return {
      docs: [],
    };
  },
  async mounted() {
    const response = await FetchDocuments;
    const data = response.documents.slice().reverse();
    // Filter the data array and push values that serve as the beginning of a support request to the docs variable
    data.filter((item) => {
      if (item.email !== null) {
        this.docs.push(item);
      }
    });
  },
};
</script>

The rendered requests in the pages/request.vue file will also be in descending order where the most recent requests are at the top.

//pages/request.vue
<template>
  <main>
    <nav>
      ...   // nav bar
    </nav>
 <div class="container">
  <h2 class="eyebrow-heading-1 u-text-center u-padding-64">support requests</h2>
      <ul class="list">
        <li class="box" v-for="doc in docs" :key="doc.$id">
          <div class="u-flex u-cross-center u-main-space-between">
            <div class="u-grid">
              <div class="u-flex u-cross-center u-main-space-between">
                <span class="text eyebrow-heading-1"> {{ doc.name }} </span>
                <div class="tag">
                  <span class="icon-check-circle" aria-hidden="true"></span>
                  <span class="text">{{ doc.status }}</span>
                </div>
              </div>
              <span class="text">{{ doc.request.slice(0, 200) }}</span>
            </div>
            <NuxtLink :to="`/request/${doc.$id}`">
              <span class="button icon-cheveron-right" aria-hidden="true"></span>
            </NuxtLink>
          </div>
        </li>
      </ul>
    </div>
  </main>
</template>

The application will look like this after applying the configurations above:

Accessing a single customer support request

Here, in order to view a single request and its content, create a pages/request/[id].vue file and add the following syntax:

//pages/request/[id].vue
<template>
 <div class="u-flex u-cross-center u-main-space-between u-padding-32">
   <h2 class="eyebrow-heading-1 u-text-left u-padding-32">
     CUSTOMER: {{ customer.name }}
   </h2>
 </div>
   <div class="u-grid">
     <h2 class="u-x-small u-bold u-text-right u-margin-inline-start-32">
        {{ new Date(customer.$createdAt) }}
     </h2>
     <p class="text u-normal u-text-right u-padding-32">
        {{ customer.request }}
     </p>
   </div>
</template>
<script>
import { useRouter, useRoute } from "vue-router";
import { Client, Databases, ID } from "appwrite";
import { FetchDocuments } from "@/components/FetchDocuments";
export default {
  data() {
    const router = useRouter();
    const isIdMatch = router.currentRoute.value.params.id;
    return {
      requestId: isIdMatch,
      request: "",
      docs: [],
      customer: [],
    };
  },
  async mounted() {
    const client = new Client();
    const databases = new Databases(client);
    client
    .setEndpoint("OUR_API_ENDPOINT") // Your API Endpoint
    .setProject("OUR_PROJECT_ID"); // Your project ID
// Instance to fetch a customer's name
    const singleDocument = await databases.getDocument(
      "OUR_DATABASE_ID", 
      "OUR_COLLECTION_ID",
      `${this.requestId}`
    );
    this.customer = singleDocument;
  },
</script>

The code syntax above does the following:

Gets the current page route id
Initializes an instance to fetch a customer’s name using the existing route id whenever the component is mounted

Adding comments

In the pages/request/[id].vue file, we need to fetch a single request content and create an impression where a customer can comment on a request he/she had tendered earlier. For the comment functionality, let’s create a form to submit comments. We also want to change the status of a request in case it has been resolved.

//pages/request/[id].vue
<template>
  <div>
//  customer name
  <form @submit.prevent="updateForm">
    <div class="u-grid u-cross-center u-main-center u-padding-32">
       <span style="font-size: 20px" class="u-color-text-pink">
          Has this issue been resolved?
       </span>
         <div class="checkbox">
           <label for="status1">Yes:
            <input type="radio" v-model="status" id="checkbox1" value="resolved"/>
           </label>
           <label for="status2">No:
            <input type="radio" v-model="status" id="checkbox2" value="open" />
           </label>
         </div>
           <label for="request" style="font-size: 20px" class="u-color-text-pink"> 
            If not, state what the current issue is:
           </label>
 <textarea class="input-text" placeholder="Comment" type="text" id="request" v-model="request" required />
      <button class="button" type="submit">
         <span class="text">Add Comment</span>
      </button>
    </div>
   </form>
  </div>
</template>
<script>
 export default {
   data() {
     return {
       request: "",
       status: "",
       docs: [],
     };
   },
 // ... Fetch customer's name
methods: {
    async updateForm() {
      const client = new Client();
      const databases = new Databases(client);
      client
        .setEndpoint("OUR_API_ENDPOINT") // Your API Endpoint
        .setProject("OUR_PROJECT_ID"); // Your project ID
      try {
        const response = await databases.createDocument(
        "OUR_DATABASE_ID", 
        "OUR_COLLECTION_ID",
         ID.unique(),
          {
            request: this.request,
            status: this.status,
            email: null,
            name: this.requestId,
          }
        );
        this.docs.push(response);
        this.request = "";
      } catch (error) {
        console.error(error);
      }
    },
  },
}

The code syntax above does the following:

Posts a new document that serves as a comment to Appwrite’s database
Creates an option to change the status of a request to open or resolved
The document also has its name as the current route id to access it.
Pushes the new document to the data variable — docs; the new document is then rendered as a comment to give an impression of a real-time update
Resets the form

Then, we’ll initialize an instance in the pages/request/[id].vue file to fetch the customer’s request and comments. We also want to render a customer’s request and comments only if the comment name or request id matches the current route.

//pages/request/[id].vue
<template>
  <div>
// customer's request and previous comments
     <ul class="list">
        <li v-for="doc in docs" :key="doc.$id">
          <div class="u-flex u-cross-center u-main-space-between">
           <h2 class="u-x-small u-bold u-text-right u-margin-inline-start-32">
              {{ new Date(doc.$createdAt) }}
            </h2>
          </div>
          <div class="u-grid">
           <p class="text u-normal u-text-right u-padding-32">{{ doc.request }}</p>
          </div>
        </li>
      </ul>
</div>
</template>
<script>
  async mounted() {
// ... Fetch customer's name
// Instance to fetch a customer's request and comments
    const comments = await FetchDocuments;
    const MatchComments= comments.documents;
    MatchComments.filter((item) => {
      if (item.name === this.requestId || item.$id === this.requestId) {
        this.docs.push(item);
      }
    });
   }
</script>

Here’s a demo of what the application will look like, after applying the configurations above:

Conclusion

This post demonstrates Appwrite Cloud's real-time functionality to store and update data and style customer support ticketing apps with an open-source design system — Pink Design. Integrating user authentication in an application is also one of Appwrite’s functionalities, which serves as a tool to help identify and validate the identity of users accessing the application.

Resources

These resources may also be helpful:

Creating stunning blogs with Appwrite’s database relationships and Nuxt

Emmanuel Ugwu — Fri, 19 May 2023 09:26:34 +0000

Databases are essential to modern web app development, providing a centralized location for data storage, management, and retrieval. They are crucial, as without databases, web apps would have to store data in files or memory, which may become unmanageable as data increases.

In this article, we’ll build a blog using Appwrite’s database relationship to store and render data, as well as Pink Design, an open-source design system to style a Nuxt project.

The complete source code is located on GitHub. Clone and fork it to get started.

Prerequisites

To follow along, the following are required:

Docker Desktop installed on the computer; run the docker -v command to verify that we have Docker installed. If not, install it from the Get Docker documentation.
A basic understanding of JavaScript, Vue.js, and Nuxt.
An Appwrite instance; check out this article on how to set up an instance. Appwrite also supports one-click installation on DigitalOcean or Gitpod.
Node and its package manager, npm. Run the command node -v && npm -v to verify that we have them installed or install them from here.

Getting started

Project setup and installation

Run the following command in the terminal to create a new Nuxt application:

npx nuxi init <project-name>

Navigate to the project directory and install the required dependencies.

cd <project-name> 
npm install

Run npm run dev to start a development server at https://localhost:3000/ in our browser.

NOTE: <project-name> above stands for the name of our app; we can call it any name we deem fit.

What is Pink Design?

Pink Design is Appwrite's open-source design system for creating consistent and reusable user interfaces. Pink Design aims to emphasize collaboration, developer experience, and accessibility.

Scaffolding an Appwrite Project

Installing Appwrite

Appwrite is a development platform that provides a powerful API and management console for building backend servers for web and mobile applications.

To use Appwrite in our Nuxt application, install Appwrite’s Pink Design and client-side SDK (Software Development Kit) for web applications.

npm install appwrite
npm install @appwrite.io/pink

Then, we’ll set up a new Appwrite project by starting an Appwrite instance and navigating to the specified hostname and port:

    localhost:80

NOTE: To set up an Appwrite instance, follow the steps in the article located in Prerequisites.

Creating a new project

Next, we must log into our account or create an account by initializing an Appwrite instance if we don’t have one.

On Appwrite’s console, click the Create Project button, input blog as the project name, and click Create.

The project dashboard will appear on the console. Next, click the Settings tab at the bottom of the page and copy the Project ID and API Endpoint; we’ll use this to set up our Nuxt application.

Creating a Collection and Attribute

On the left side of the Appwrite Console dashboard, click on the Database tab. Click on the Create Database button to create a new database. Creating a new database will lead us to the Collection page.

Next, we’ll create two Collections — Blog and Posts.

After creating the Collections, go to the Update Permissions section on the Settings page. We want to assign a CRUD access (create, read, update, delete) with a role: any value for the Collections we created earlier. We can customize these roles later to specify who has access to read or write to our database.

Next, go to the Attributes tab of the Post collection to create the properties we want the document to have. Let’s generate string attributes — title and content with a size of 1000 and 20000 bits.

For the Blog collection, generate a string attribute — blog-name with a size of 256 bits.

Next, create a Relationship attribute for the Blog collection. Select Relationship as the attribute type. Select the Two-way relationship type in the Relationship modal and pick post as the related collection and post as an attribute key. Select an attribute key called blog to represent the related collection and one-to-many as the relation. Select Cascade as the desired on-delete behavior. Click the Create button to create the relationship.

Let’s head to the Documents section and click on Create Document. We want to create a post title for the blog. Fill in the attributes with the dummy title we made for the blog.

Head to the Post collection and create a Document with a title and content value. Select the Blog document ID we created earlier as the blog relationship value.

The documents created above are for posts for the blog.

Building the UI

Create a pages/index.vue file at the root folder of the project with the following syntax:

<template>  
  <main>
    <nav class="u-flex u-cross-center u-main-space-between u-padding-32">
     <h2 class="logo u-padding-32 eyebrow-heading-1 u-color-text-pink">
       <NuxtLink to="/">Pink Blog</NuxtLink>
      </h2>
      <NuxtLink to="/">
        <span class="button">  WRITE AN ARTICLE </span>
      </NuxtLink>
    </nav>
  <div class="container">
 </div>
 </main>
</template>

The Pink Design CSS styles above do the following:

container: It holds any content and is used to group content and create scannable interfaces
eyebrow-heading-1: Used to support the main heading of a page or to provide additional context or orientation
u-flex, u-grid: Controls how an element is displayed
u-cross-center u-main-space-between: Aligns and justifies an element’s content
u-text-center: Centers a text
u-padding-32: Applies a padding of 2rem to the element
u-color-text-pink: Changes a text color to pink

Fetch and render data from Appwrite

Here, we’ll fetch the posts created earlier on from Appwrite. To do this, create a new file, utils.js, in the root directory of the project, then copy and paste the following code:

<script setup>
import { Client, Databases } from "appwrite";
const client = new Client();
const databases = new Databases(client);
  client
   .setEndpoint("OUR_API_ENDPOINT") // Your API Endpoint
   .setProject("OUR_PROJECT_ID"); // Your project ID
export const getPost = databases.listDocuments( "OUR_DATABASE_ID", "OUR_COLLECTION_ID", "OUR_DOCUMENT_ID");

Let’s break down the code snippet above:

Imports the required module, Client and Databases
Creates a new instance for the modules

NOTE: Get your API Endpoint, Project ID, [DATABASE_ID], and [COLLECTION_ID] from Appwrite’s console.

Import the instance in the index.vue file, which interacts with Appwrite services whenever the component is mounted.

import { getPost } from "../utils";
const docs = ref(null);

onMounted(() => {
  getPost.then(
    function (response) {
      docs.value = response;
    },
    function (error) {
      console.log(error);
    }
   );
});
</script>

Next, we’ll display the posts from the Appwrite console using the v-for directive. We’ll also render the latest post at the top of the list.

<template>
  <main>
    <nav>
      ...   // nav bar
    </nav>
<div class="container">
   <h2 class="eyebrow-heading-1 u-text-center u-padding-64">posts</h2>
     <ul class="list">
       <li class="box" v-for="doc in docs.slice().reverse()" :key="doc.$id">
         <NuxtLink :to="`/post/${doc.$id}`">
           <div class="u-flex u-cross-center u-main-space-between">
             <div class="u-grid">
               <span class="text eyebrow-heading-1"> {{ doc.title }} </span>
                 <span class="text">{{ doc.content.slice(1, 200) }}</span>
              </div>
              <span class="button icon-cheveron-right" aria-hidden="true"></span>
              </div>
           </NuxtLink>
         </li>
       </ul>
   </div>
  </main>
</template>

The Pink Design CSS styles within the <template> do the following:

heading-level-3: Determines the size of the text
u-line-height-2: Adjusts the line height of a text
button: A class representing a button
icon-cheveron-right: Creates a chevron right button

The application will look like this after applying the configurations above:

Posting new content to Appwrite

Here, we'll build a form to post content to Appwrite. To do this, create a pages/article.vue file and paste the following code:

<template>
 <div>
  <nav> ... // nav </nav>
  <form @submit.prevent="submitForm">
     <h2 class="eyebrow-heading-1 u-text-center u-padding-64">
       write an article
      </h2>
   <div class="u-grid u-cross-center u-main-center u-padding-16">
 <label for="title">Article title:</label>
 <input placeholder="Title" type="text" id="title" v-model="title" required />
 <label for="content">Content:</label>
 <textarea class="input-text" placeholder="Content" type="content" id="content"
    v-model="content" required />
 <button class="button" type="submit">
  <span class="text">Submit</span>
 </button>
 </div>
 </form>
 </div>
 </template>

This is what our application will look like after applying the configurations mentioned above:

Next, we’ll assign the form data values to two separate variables and push the values to Appwrite. Let’s also clear the form once the data is sent.

<script>
import { Client, Databases, ID } from "appwrite";
export default {
 data() {
   return {
     title: "",
     content: "",
    };
   },
  methods: {
    async submitForm() {
     const client = new Client();
     const databases = new Databases(client);
     client
      .setEndpoint("OUR_API_ENDPOINT") // Your API Endpoint
      .setProject("OUR_PROJECT_ID"); // Your project ID
     try {
      const response = await databases.createDocument(
         "OUR_DATABASE_ID", 
         "OUR_COLLECTION_ID",
         ID.unique(),
            {
             title: this.title,
             content: this.content,
            }
          );
           console.log(response);
         this.name = "";
         this.comment = "";
        } catch (error) {
           console.error(error);
         }
       },
     },
   };
</script>

Head back to the Post section after pushing the new post to Appwrite. This ection will contain an updated version of the posts.

Applying dynamic routing

We want to click on each post in the blog and view its content. Create a pages/post/[id].vue file to render a post’s content when clicked. Copy and paste the code snippet below:

<template>
 <main>
  <nav>
   <h2 class="logo u-padding-32 eyebrow-heading-1 u-color-text-pink">
  <NuxtLink to="/">Pink Blog</NuxtLink>
   </h2>
  </nav>
<div v-if= "isIdMatch">
  <h2 class="heading-level-3 u-text-left u-padding-64">{{ post.title }}</h2>
   <p class="heading-level-7 u-padding-64" style="line-height: 2.5rem">
     {{ post.content }}
   </p>
</div>
</main>
</template>
<script>
import { useRouter, useRoute } from "vue-router";
import { Client, Databases } from "appwrite";
const router = useRouter();
const route = useRoute();
const id = route.params.id;
const isIdMatch = router.currentRoute.value.params.id === id;
const post = ref(null)
const client = new Client();
const databases = new Databases(client);
  client
    .setEndpoint("OUR_API_ENDPOINT") // Your API Endpoint
    .setProject("OUR_PROJECT_ID"); // Your project ID
const singlePost = databases.getDocument(
  "OUR_DATABASE_ID",
  "OUR_COLLECTION_ID",
  "`${id}`"
 );
onMounted(() => {
  singlePost.then(
  function (response) {
     post.value = response;
     console.log(post.value); // Success
    },
   function (error) {
     console.log(error); // Failure
    }
   );
 });
</script>

Here, the code snippet will do the following:

Gets the route ID of the clicked post.
Creates an instance to access the post via its route ID.
Renders the post only if the fetched post’s ID matches the route id.

The application will look like this after applying the configurations above:

Conclusion

Appwrite’s Relationships feature provides a database management system that helps reduce redundant information while creating data sets. Pink Design's flexible framework promotes development and responsiveness while providing a broad range of customization. This combination allows us to build applications with exciting UIs swiftly, without hassle.

Resources

Securing health data: A guide to implementing privacy and security in Next.js

Emmanuel Ugwu — Tue, 21 Mar 2023 17:04:04 +0000

Today’s security management systems are comprehensive, integrating various physical, digital, and operational security measures.

Because of the increasing concerns of cyberattacks, physical threats, and other security issues, the importance of security management systems in organizations and businesses has grown dramatically. As a result, more advanced security management frameworks and tools — such as threat intelligence, risk assessments, and incident response planning — have been developed, fueled by the need for organizations and businesses to protect themselves against a growing number of sophisticated and diversified security threats.

What we’ll build

This post discusses safeguarding sensitive user data using Appwrite’s out-of-the-box functionalities. The complete source code of this project is on GitHub. Fork it to get started quickly.

Prerequisites

To follow along with this article, the following are required:

Docker Desktop installed on your computer; run the docker -v command to verify that Docker is installed. If not, install it from the Get Docker documentation.
A basic understanding of JavaScript, React.js, and Next.js.
An Appwrite instance; check out this article on how to set up an instance. Appwrite also supports one-click install on DigitalOcean or Gitpod.
Node and its package manager, npm. Run the command node -v && npm -v to verify that they are installed or install them from here.

Getting started

What is Appwrite and its importance in security management?

Appwrite is a development platform that provides a powerful API and management console for building backend servers for web and mobile applications. It includes authentication, database management, storage, and more features.

Abstracted security management is essential for every application, and Appwrite is no exception. In this way, developers can concentrate on designing the application's functionality while Appwrite manages the security architecture. This enables Appwrite to deliver security features like encryption, access control, and audit logging without forcing developers to implement them manually.

Furthermore, abstracted security management makes maintaining the application's security easier over time. Developers can ensure the platform is continuously updated to address new security threats even as the technology stack changes.

Project setup and installation

Let’s bootstrap a new Next.js project with the following command:

npx create-next-app <project-name>

The command above triggers a command-line interface (CLI) where we can create our Next.js application. The image below shows the configuration options the CLI provides:

After configuring the Next.js project, navigate into the project directory cd <project-name> and run npm run dev to start a development server at https://localhost:3000/ in our browser.

NOTE: <project-name> above stands for the name of our app; we can call it any name we deem fit.

Setting up an Appwrite project

Installing Appwrite
To use Appwrite in our Next.js application, install the Appwrite client-side software development kit (SDK) for web applications.

npm install appwrite

Then, we’ll set up a new Appwrite project by starting an Appwrite instance and navigating to the specified hostname and port http://localhost:80.

NOTE: To set up an Appwrite instance, follow the steps in the article here.

Creating a new project
Next, we must log into our account or create an account if we don’t have one.

On Appwrite’s console, click the Create Project button, input health-auth-app as the project name, and click Create.

The project dashboard will appear on the console. Next, copy the Project ID; we’ll use this to set up our Next.js application.

Creating an Auth User
On the left side of the Appwrite Console dashboard, click on the Auth tab.

Click the Create User button to fill in the User form with the necessary information.

Next, we’ll create a User Preference to hold user data. It consists of a key and value. The User Preference will contain a user’s health data bio, including name, gender, blood group, email, and date of birth.

After applying the necessary configurations on Appwrite, we’ll start building our application.

Building the app component

Open the app/routes/index.jsx file and replace its default syntax with the code snippet below.

import Head from "next/head";
import styles from "../styles/Home.module.css";
import Link from "next/link";

export default function Home() {
  return (
     <main className={styles.main}>
       <h1>authentication service app</h1>
         <p>Choose a service to sign in with.</p>
           <div className={styles.description}>
             <Link href="/appwrite" className="btn appwrite">
                sign in with appwrite
              </Link>
              <Link href="/google" className="btn google">
                sign in with google
              </Link>
           </div>
     </main>
      );
    }

The code snippet above will serve as the homepage of our application, which houses two different authentication options: Appwrite and Google. It renders a default home page, and it will look like this:

Appwrite authentication

To handle the Appwrite authentication, we’ll create a component file called appwrite.js and link it to the “SIGN IN WITH APPWRITE” button in the index.js file. Once the button is clicked, it’ll redirect a user to Appwrite’s authentication page. This page contains a form to accept a user’s email and password.

import React from "react";
import styles from "../styles/Home.module.css";
import { Client, Account } from "appwrite";

const Appwrite = () => {
const handleChange = (e) => {
  e.preventDefault();
  setFormData({ ...formData, [e.target.name]: 
  e.target.value });
 };
const handleSubmit = (e) => {
  e.preventDefault();
  setFormData({ name: "", message: "" });
  updateData();
 };
const client = new Client()
      .setEndpoint("http://localhost/v1") // Your API Endpoint
      .setProject("OUR_PROJECT_ID"); // Your project ID
const account = new Account(client);
const updateData = () => {
  const promise = account.createEmailSession(
          `${formData.email}`,
          `${formData.password}`
      );
  promise.then(
      function (response) {
      console.log(response); // Success
   }, function (error) {
      console.log(error); // Failure
   });}
 return (
  <div className={styles.AppwriteContainer}>
    <p>Please enter your user credentials to access your bio data.</p>
      <form onSubmit={handleSubmit}>
        <div className={styles.label}>
           <label>email</label>
   <input type="email" name="email" value={formData.email} onChange={handleChange} />
           <label>password</label>
   <input type="password" name="password" value={formData.password}onChange={handleChange} />
     <button type="submit" className="sub appwrite">
       Sign in
     </button>
   </div>
 </form>
</div>
)};
export default Appwrite;

The code snippet above does the following:

Creates a form to accept a valid email and password combination
Creates an email session for a user by sending a request to Appwrite’s servers with the email and password combination
Logs a response of whether the request was successful or not

After applying the configurations, our application will look like this:

Get user preferences — key and value

We’ll also want to get the user preference (i.e., user bio-data) from Appwrite’s servers. We’ll send another request only if the current user session is valid. The request fetches the user preference we created in our Appwrite console earlier. Let’s use conditional rendering to display the fetched data only if the request is successful.

import React from "react";
import styles from "../styles/Home.module.css";
import { Client, Account } from "appwrite";

const Appwrite = () => {
const handleChange = (e) => {    
 ...
  promise.then(
      function (response) {
        if (response.current == true) {
          setIsOpen(true);
          const account = account.getPrefs();
          account.then(
            function (res) {
              setFetchedData((prevData) => [...prevData, res]); //Success
            },
            function (error) {
              console.log(error); // Failure
            })}
        setIsOpen(false);
      },
      function (error) {
        console.log(error); //Failure
      })}; 
return (
    ...
)};
export default Appwrite;

Then, we’ll use a map() method to render the user preference we got from Appwrite.

<div>
  {isOpen ? (
     <main className="main-container">
       ...
        {fetchedData.map((value) => {
const { id, gender, group, weight, height, address, email } = value;
   return (
<main>
      <div key={id} className="data">
         <p>gender: {gender}</p>
         <p>blood group: {group}</p>
         <p>weight: {weight}</p>
         <p>height: {height}</p>
         <p>address: {address}</p>
         <p>email: {email}</p>
      </div>
      );
   })}
      <Link href="/" className="log-btn">
          Log out
       </Link>
  </main>
        ) : (
          ...
      )} 
      </div>
      );
    };

Here’s a demo of how the Appwrite authentication will turn out after applying the necessary configurations:

Let’s also set up another form of authentication with an OAuth provider such as Google.

Setting up a Google authentication

OAuth is an open standard protocol used for authorization, enabling third-party applications to access a user's data without having access to their password. As a result, OAuth providers such as Google are responsible for protecting the security of their users' data and maintaining their user base's trust.

How OAuth providers like Google improve overall application UX

OAuth providers can considerably improve applications' overall user experience (UX) while simultaneously delivering high security. Here are a few benefits:

Simplified sign-up and login: Using OAuth, users can sign up for and log in to an application with only a few clicks. Users can avoid remembering several login credentials by not having to create a new username and password for each application they use. This improves the UX by making the onboarding process faster and easier.
Improved security: The application does not keep the user's password because OAuth uses a token-based authentication approach. Instead, the OAuth provider authenticates the user, and the application receives a unique token that authorizes the user to access the application.
Improved performance: OAuth providers are frequently more efficient than traditional means of username and password authentication. This can lead to improved performance, faster load times, and an overall better UX.

Generating a Google Auth credential

Let’s create a Google Authentication project and obtain a Google client ID for our application.
A client ID is an application-specific identifier that aids client and server OAuth 2.0 authentication. To get a client ID, head over to the Google Cloud Console. For this article, we’ll name the project “Appwrite Auth”.

After creating the project, click on the project name to get a dashboard like the one below. On the left-hand menu, select the Credentials option to access the page where we can generate the Google client ID. On this screen, at the top, click CREATE CREDENTIALS, then select the OAuth client ID option:

As seen below, we‘ll be required to select an application type. Select Web application since we're utilizing the Google client ID for the web.

NOTE: When integrating it in a React Native, Flutter, or Swift project, choose between an Android or iOS for the two operating systems.

Next, we’ll choose a client ID name. The name identifies or defines the ID we’re creating. Our client ID name will be “next-auth”.

We'll also add two URI types: Authorized JavaScript origins and Authorized redirect URIs.

The Authorized JavaScript origins URI is the development server of our application. For React/ Next.js developers, this is localhost and localhost:3000, or a hosted URI if the application is hosted.

The Authorized redirect URI is the link to which Google will redirect a user after a successful login. We can redirect a user to another link or return the user to the original link. Either way, include the URL here.

Add the two localhost URIs — http://localhost:3000 and http://localhost — to the Authorized JavaScript origins and Authorized redirect URIs.

Finally, to generate the Google client ID, click the Create button. We'll be redirected to the homepage, where the newly created credentials will be visible. Copy the Google client ID; we'll use it later on.

NOTE: Don’t share your Google Client ID or Google Client Secret.

Integrating Google Authentication into our application

Let’s install and integrate Google Authentication into our Next.js application. To do so, we’ll use @react-oauth/google. Head to the terminal and install @react-oauth/google with the following command:

npm install @react-oauth/google@latest

After installation, we’ll wrap our application with GoogleOAuthProvider. This supplies a clientId prop to link our Google client ID to our application. Inside the _app.js file, we’ll wrap the application like so:

    import "../styles/globals.css";
    import { SessionProvider } from "next-auth/react";
    import { GoogleOAuthProvider } from '@react-oauth/google';
    function App({ Component, pageProps }) {
      return (
        <GoogleOAuthProvider clientId="GOOGLE_CLIENT_ID">
          <Component {...pageProps} />
        </GoogleOAuthProvider>
      );
    }
    export default App

Next, we’ll create a component file called google.js and link it to the “SIGN IN WITH GOOGLE” button in the index.js file. Once the button is clicked, it redirects a user to Google’s authentication page. Copy and paste the code sample below.

import React from "react";
import styles from "@/styles/Home.module.css";
import { FaJenkins } from "react-icons/fa";
const Google = () => {
 return (
   <main className="main-container">
     <div className="title">
       <FaJenkins />
        <div className="header">
          <h2>Bilbo Baggins</h2>
          <h4>date of birth: 22 September T.A. 2890 (131)</h4>
        </div>
    </div>
    <div className="data">
       <p>gender: male</p>
       <p>blood group: unknown</p>
       <p>weight: about 25 kilos (55 pounds)</p>
       <p>height: 4&apos;1&quot;</p>
       <p>address: Bag End</p>
       <p>email: bilbobags@gmail.com</p>
     </div>
     <button className="log-btn">
       Log out
     </button>
</main>
)};
export default Google;

The code sample contains the user bio-data we'll authenticate. Our application will look like this after applying the code snippet above.

Next, we need to prevent unauthorized access to our user bio-data. To achieve this, we'll set up authentication using @react-oauth/google, where we'll use conditional rendering to access the user bio data only if the sign-in authentication request is successful.

import { googleLogout, useGoogleLogin } from "@react-oauth/google";
import axios from "axios";

const Google = () => {
 const [user, setUser] = useState(false);
 const googleLogin = useGoogleLogin({
     flow: "auth-code",
     onSuccess: async (codeResponse) => {
       const tokens = await axios.post("http://localhost:3000/google", {
            code: codeResponse.code,
          });
          setUser(true);
        },
        onError: (errorResponse) => console.log(errorResponse),
      });
 return (
   <div className="section">
      {user ? (
         <main className="main-container">
              ...
         </main>
          ) : (
       <div>
         <h1 className="login">sign in to access your bio data.</h1>
         <button className="log-btn" onClick={() => googleLogin()}>
            Sign in with Google 🚀{" "}
         </button>
       </div>
      )}
 </div>
)};
export default Google;

Here’s a demo of how the Google authentication will turn out after applying the necessary configurations:

Conclusion

This article discussed using Appwrite's security management system and protocol to safeguard sensitive user data integrated into web applications.

Additional resources

Build a crypto gift card store with Refine, Reloadly, and Stripe

Emmanuel Ugwu — Fri, 17 Mar 2023 05:57:11 +0000

Previously, web development was exclusively associated with the creation of intranet and internet-based web pages and websites. However, currently, it is more like developing web applications that outperform the complexity and size of traditional mobile and desktop programs. Choosing the correct framework is critical because it substantially impacts an application's speed and performance.

What we will be building

This post discusses using a React-based framework, Refine, a Node.js server, Reloadly’s, and Stripe’s Session API to build a crypto gift card store.
We’ll make use of the following dependencies below to achieve this post.

axios: A promise-based HTTP client for making API requests.
dotenv: A module for loading separately stored environmental variables.
express: A Node JS application framework - this will be used extensively in our server
concurrently: An npm package to run multiple commands together.

The source code for this post is available on Github.

Prerequisite

To get the most out of this article, the following are required:

Node and its package manager, npm. Run the command node -v && npm -v to verify that you have them installed, or install them from here.
A basic understanding of JavaScript, React, TypeScript, and Refine.
A Stripe account is needed — sign up here.
A Reloadly account is also required— sign up here.
Familiarity with axios and express. Setting up the Refine application

Create a Refine app in a new folder by running the following command in the terminal:

npx superplate-cli -p refine-react <project-name>

Follow the CLI wizard to select options and start creating your project.

? What will be the name of your app:
> <project-name>

? Do you want to use a UI Framework?:
❯ Ant Design

? Do you want a customized theme?:
❯ Default theme

? Router Provider:
❯ React Router v6

? Data Provider:
❯ REST API

? Auth Provider:
❯ None

? Do you want to add example pages?:
❯ No

? Do you want a customized layout?:
❯ No

? Do you want to add Kbar command pallete?:
❯ No

? i18n - Internationalization:
❯ No

Navigate into the project directory and install the required dependencies.

cd <project-name>
npm install axios dotenv express stripe concurrently

Running npm run start starts the project on the local development server at https://localhost:3000 in our browser.

NOTE: <project-name> above stands for the name of your app. Call it whatever name you want.

Building the App Component

Create a .env file in the root folder of our app to protect sensitive credentials we’ll use to build and integrate our crypto gift card store. Head on to Reloadly to get an access token to integrate Reloadly Gift Card API, then go to Stripe to obtain a Secret Key. Add the Reloadly Access Token and Stripe Secret Key to the .env file.

//.env

STRIPE_KEY='STRIPE_SECRET_KEY_HERE'
RELOADLY_TOKEN='Bearer RELOADLY_ACCESS_TOKEN_HERE

Before integrating Stripe’s API, we need to create a product and price model for the crypto gift card we’ll use. Read this Stripe documentation on how to manage products and price models here.
Next, we create a Homepage.tsx component file in the src folder:

import { Link } from "react-router-dom";
import axios from 'axios';   

export const Homepage: React.FC = () => {
    return (
<section>
 <h2 className='title'>Buy Crypto Gift Card</h2>
   <p className='desc'>Buy crypto gift cards in an instant </p>
<div className='crypto'>
   <div className="cards">
      <div className="bin">
         <img src="https://res.cloudinary.com/ugwutotheeshoes/image/upload/v1661613925/binance_logo.png"
              alt="The cover of Binance USD"
            />
             <div className="header">
                <h2>Binance US</h2>
                 <p> US$50.00</p>
             </div>
       </div>
       <Link to='/checkout' onClick={getUsers}>buy now</Link>
    </div>
 </div>
</section>
   )
}

In the code snippet above, we created a link to help route our Homepage.tsx component to a checkout page we’ll build later. We’ll also use an onClick event listener to trigger/run a POST request.
Our application will look like this:

Requesting data from Reloadly's API

We want to request a $50 Bitcoin gift card; for that, we’ll have to make a POST request via axios to Reloadly, requesting data relating to the Bitcoin gift card.

interface Crypto {
    body: string,
    headers: object,
    data: string
  }

const getUsers = async () => {
 try {
      const { data, status } = await axios.post<Crypto>(
        `https://giftcards.reloadly.com/orders`,
        {
          productId: 16235,
          quantity: 1,
          unitPrice: 50,
          senderName: 'John Doe',
          recipientEmail: 'anyone@email.com'
        }, {
        headers: {
          'Content-Type': 'application/json',
          Authorization: 'Bearer TOKEN'
        },
      },
     )
      return data;
    } catch (error) {
      if (axios.isAxiosError(error)) {
        console.log('error: ', error.message);
        return error.message
      } else {
        console.log('unexpected error: ', error);
        return error
      }
    }
  }

Using the body parameters in the code snippet shown above, we can manipulate the data from Reloadly to whatever use case we want. Still, in this scenario, we want to confirm if we’re requesting the right gift card.

Building a Checkout Page

Now we’ll add a page to show a preview of the user’s order, which is the Checkout page. Let’s create a Checkout.jsx component file in the src folder.

const ProductDisplay = () => (
  <section>
    <h2 className="check">Checkout</h2>
    <div className="description">
      <div className="product">
        <img             src="https://res.cloudinary.com/ugwutotheeshoes/image/upload/v1661613925/binance_logo.png"
          alt="The cover of Binance USD"
        />
        <h2>Binance USD</h2>
      </div>
      <p>US$50.00</p>
    </div>
    <form action="/create-checkout-session" method="POST">
      <div className="btn">
        <button className="checkout" type="submit">
          Checkout
        </button>
      </div>
    </form>
  </section>
 );

Next, we'll create a component in the Checkout.jsx file to show a success or error message if our payment passes or fails.

import React, { useState, useEffect } from "react";

const Message = ({ message }) => (
  <section>
    <p>{message}</p>
  </section>
);

export default function Checkout() {
  const [message, setMessage] = useState("");
  useEffect(() => {
    // Check to see if this is a redirect back from Checkout
    const query = new URLSearchParams(window.location.search);
    if (query.get("success")) {
      setMessage("Order placed! You will receive an email confirmation.");
      console.log("yaay");
    }
    if (query.get("canceled")) {
      setMessage(
        "Order canceled -- continue to shop around and checkout when you're ready."
      );
      console.log("nahh");
    }
 }, []);
  return message ? <Message message={message} /> : <ProductDisplay />;
}

This is what our application will look like after building the checkout page.

Routing our App Components

Let's use Refine as a medium for routing to navigate among views of various components in our application. Route the app components in the App.tsx file as shown below.

import React from "react"
import { Homepage } from "./Homepage";
import { Refine } from "@pankod/refine-core";
import routerProvider from "@pankod/refine-react-router-v6";
import dataProvider from "@pankod/refine-simple-rest";
import Checkout from "./Checkout"
import { Success } from './Success';
import { Error } from "./Error";

function App() {
  return (
    <Refine
      routerProvider={routerProvider}
      dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
      resources={[{ 
        name: "home", 
        list: Homepage 
      },{
        name: "checkout",
        list: Checkout,
      },{
        name: "success",
        list: Success,
      },{
        name: "error",
        list: Error,
      },]}
      Layout={({ children }) => (
        <div>
          <div>{children}</div>
        </div>
      )}
    />
  );
 }
export default App;

Building the Node Server

Create a server.js file in the project's root folder and import the required dependencies we installed earlier.

// .server.js

const stripe = require('stripe')(process.env.STRIPE_KEY);
const express = require('express');
const app = express();
app.use(express.static('public'));

Next, we’ll make a POST request to Stripe’s API to create a checkout session. The checkout session controls what the user sees on the checkout page, such as the currency and price of the gift card. For that, we need to integrate the Price ID of the product model we created earlier.

// .server.js

const YOUR_DOMAIN = 'http://localhost:4242';

app.post('/create-checkout-session', async (req, res) => {
const session = await stripe.checkout.sessions.create({
    line_items: [
      {
  // Provide the exact Price ID (for example, pr_1234) of the product you want to sell
        price: 'price_1Lb9G7CJuM28O4MVY4uZ3lYV',
        quantity: 1,
      },
    ],
    mode: 'payment',
    success_url: `${YOUR_DOMAIN}?success=true`,
    cancel_url: `${YOUR_DOMAIN}?canceled=true`,
  });
  res.redirect(303, session.url);
});
app.listen(4242, () => console.log('Running on port 4242'));

In the code snippet above, we also specified URLs for success and error pages if our payment passes or fails and to redirect users to them.

Next, we need to run our node server and gift card store simultaneously. This is where the npm package, concurrently comes in. Head to the package.json file and apply these configurations between the dependencies and eslintConfig JSON schema.

// package.json

  "homepage": "http://localhost:3000",
  "proxy": "http://localhost:4242",
  "scripts": {
    "start-client": "react-scripts start",
    "start-server": "node server.js",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "start": "concurrently \"npm run start-client\" \"npm run start-server\""
  },

After applying these configurations, run npm run start to restart our application. This is what our crypto gift card store will look like fully set up:

Conclusion

Integrating Refine provides many out-of-the-box capabilities for rapid development while maintaining incredible customizability as it broadens your learning curve and scales web applications using a different approach.

Resources

Refer to these resources while reading this post as well:

Create a Quiz App Using Appwrite and Remix

Emmanuel Ugwu — Fri, 13 Jan 2023 10:44:29 +0000

Data is a valuable resource used by individuals, organizations, and institutions; it is also crucial to offer sufficient technical security to stop unauthorized users from obtaining these data.

A robust database management system like Appwrite can provide the requirements necessary for safeguarding data. It enables authorized users to contribute new data, update existing data, and remove obsolete data.

This post discusses how to build a Remix application using Appwrite’s out-of-box functionalities to fetch and render data from its database.

Remix is a full-stack React framework used to create web applications. It offers several valuable features, including built-in support for cookies and sessions, server-side rendering, file system-based routing, TypeScript support, and more.

The complete source code of this project is on GitHub. Fork it to get started quickly.

Prerequisite

To comfortably follow along in this article, it would be helpful to have the following:

Docker Desktop installed on the computer; run the docker -v command to verify that we have Docker installed. If not, install it from the Get Docker documentation.
A basic understanding of JavaScript, React.js, and Remix.
An Appwrite instance; check out this article on how to set up an instance. Appwrite also supports one-click install on DigitalOcean or Gitpod.
Node and its package manager, npm. Run the command node -v && npm -v to verify that we have them installed or install them from here.

Getting Started

Project setup and installation

Run the following command in the terminal to create a new Remix application:

    npx create-remix@latest <project-name>

The command above triggers a CLI (Command Line Interface) where we can create our Remix application. The image below shows the configuration options the CLI provides:

Then, navigate into the project directory cd and run npm run start to start a development server at https://localhost:3000/ in our browser.

NOTE: above stands for the name of our app, call it any name that makes sense.

Setting up an Appwrite Project

Installing Appwrite

Appwrite is a development platform that provides a powerful API and management console for building backend servers for web and mobile applications.

To use Appwrite in our Remix application, install the Appwrite client-side SDK (Software Development Kit) for web applications.

    npm install appwrite

Then, we’ll set up a new Appwrite project by starting an Appwrite instance and navigating to the specified hostname and port http://localhost:80.

NOTE: To set up an Appwrite instance, follow the steps in the article located in Prerequisites.

Creating a New Project

Next, we need to log into our account or create an account if we don’t have one.

On Appwrite’s console, click the Create Project button, input quiz-app as the project name, and click Create.

The project dashboard will appear on the console. Next, copy the Project ID, we’ll use this to set up our Remix application.

Creating a Collection and Attribute

On the left side of the Appwrite Console dashboard, click on the Database tab. Click on the Create Database button to create a new database. Creating a new database will lead us to the Collection page.

Next, we’ll create a collection in our database by clicking the Add Collection button.

After creating a Collection, go to the Update Permissions section on the Settings page. We want to assign a Read Access and Write Access with a role: any value. We can customize these roles later to specify who has access to read or write to our database.

On the Collection dashboard, copy the Collection ID; we’ll need to perform operations on the collection’s documents.

Next, go to the Attributes tab to create the properties we want the document to have. Let’s generate string attributes — options, answers, and questions with a size of 256 bits.

NOTE: The quiz options have four attributes (one, two, three, & four) for our application.

Let’s head to the Documents section and click on Create Document. We want to create a database for our application’s questions, options, and answers.

Building the app component

Open the app/routes/index.jsx file and replace its default syntax with the code snippet below.

// index.jsx
export default function Index() {
 return (
     <div className="container">
       <h1>Remix Science Quiz App</h1>
       <p>Easy learning with 10th grade science questions and answers that covers all the important topics.</p>
       <button className="quiz-btn">start quiz</button>
     </div>
   )};

This renders a default home page which will look like this:

Next, we'll create and import a Questions.jsx file into the index.jsx file. This component houses our quiz questions and options. We also want our quiz questions to appear only when we’ve started the quiz. We’ll use a useState variable and conditional rendering to achieve this functionality, where toShow, the useState variable, displays or hides either of the components, as shown below.

 //index.jsx
import Questions from "./Questions";

export default function Index() {
 const [toShow, setToShow] = useState(true);
  return (
  <div>
    {toShow ? (
      <div className="container">
       // Default Home Page
      </div>
       ) : (
       <Questions  />
     )}
  </div>
)};

Fetching and Rendering Data from Appwrite’s Database

To fetch data from Appwrite’s database, add the code snippet below to our index.jsx file.

// index.jsx
import { Client, Databases } from "appwrite";

export default function Index() {
 const [quizQuestions, setQuizQuestions] = useState([""]);
 const [toShow, setToShow] = useState(true);
 const client = new Client();
 const databases = new Databases(client);
   client
    .setEndpoint("OUR_API_ENDPOINT") // Your API Endpoint
    .setProject("OUR_PROJECT_ID"); // Your project ID
 const promise = databases.listDocuments( "OUR_DATABASE_ID", "OUR_COLLECTION_ID");
 const updateData = () => {
   promise.then(
   function (response) {
     setQuizQuestions(response.documents);
     },
   function (error) {
     console.log(error); // Failure
    });
     setToShow(false);
  };
  return (
   <div>
     {toShow ? (
       <div className="container">
          <h1>Remix Science Quiz App</h1>
          <p> Easy learning with 10th grade science questions and answers that covers all the important topics. </p>
          <button className="quiz-btn" onClick={updateData}> start quiz </button>
       </div>
          ) : (
       <Questions quizQuestions={quizQuestions} />
       )}
    </div>
   );
 }

The code snippet above does the following:

Create and assign a function that triggers a request to Appwrite’s servers
Makes a request to Appwrite’s servers to fetch the quiz data and push the fetched data into a useState variable
Export our quiz data to the Questions.jsx component

NOTE: Get your API Endpoint, Project ID, [DATABASE_ID], [COLLECTION_ID], and [DOCUMENT_ID] from Appwrite’s console.

Here, we’ll render the data imported from Appwrite. The generated data will be structured so that a user can answer the quiz questions one at a time. To do this, let’s use a useState variable, currentQuestion, to show only the quiz questions and options that match the variable’s value.

// Questions.jsx
const Questions = ({ quizQuestions }) => {
const [currentQuestion, setCurrentQuestion] = useState(0);
const [finalResult, setFinalResult] = useState(true);
 return (
<div className="questions">
  <div className="section-container">
    <h2>Questions {currentQuestion + 1} out of {quizQuestions.length}</h2>
     <p>{quizQuestions[currentQuestion].question}?</p>
      <div className="section">
       <button name="one">{quizQuestions[currentQuestion].one}</button>
       <button name="two">{quizQuestions[currentQuestion].two}</button>
       <button name="three">{quizQuestions[currentQuestion].three}</button>
       <button name="four">{quizQuestions[currentQuestion].four}</button>
      </div>
  </div>
    <button type="button" className="btn">Next &gt;</button>
 </div>

This is how the quiz section of our application will look like:

Generating the Quiz Score

Let’s create a function — handleChange, to check whether the option a user clicks on is correct. The function matches the clicked option’s text with the answer from Appwrite’s database. If they both match, we‘ll add a point to our quiz score variable called score.

     // Questions.jsx
      const Questions = ({ quizQuestions }) => {  
      const [currentQuestion, setCurrentQuestion] = useState(0);
      const [finalResult, setFinalResult] = useState(true);
      const [score, setScore] = useState(0);
      const handleChange = (e) => {
        e.preventDefault();
        if (e.target.innerText === quizQuestions[currentQuestion].answer) {
          setScore(score + 1);
        }
      };
    return (
    <div className="questions">
        <div className="section-container">
           <h2>Questions {currentQuestion + 1} out of {quizQuestions.length}</h2>
           <p>{quizQuestions[currentQuestion].question}?</p>
          <div className="section">
            <button onClick={handleChange}>{quizQuestions[currentQuestion].one}</button>
            <button onClick={handleChange}>{quizQuestions[currentQuestion].two}</button>
            <button onClick={handleChange}>{quizQuestions[currentQuestion].three}</button>
            <button onClick={handleChange}>{quizQuestions[currentQuestion].four}</button>
           </div>
        </div>
        <button type="button" className="btn">Next &gt;</button>
    </div>

Next, we need to switch to the next question and show the quiz score if there aren't any questions left.

// Questions.jsx
const Questions = ({ quizQuestions }) => {
const [currentQuestion, setCurrentQuestion] = useState(0);
const [finalResult, setFinalResult] = useState(true);
const handleSubmit = (e) => {
    e.preventDefault();
    if (currentQuestion + 1 < quizQuestions.length) {
     setCurrentQuestion(currentQuestion + 1);
   } else {
    setFinalResult(false);
   }
 };
return (
   <div>
    {finalResult ? (
    <div className="questions">
     // Question Section
     <button type="button" className="btn" onClick={handleSubmit}>Next &gt;</button>
     </div>
  ) : (
     <div className="final">
       <p>Your final score is {score} out of {quizQuestions.length}</p>
        <button type="button" onClick={() => window.location.reload()}>
         reset score!
        </button>
     </div>
   )}
 </div>
)};

export default Questions;

Let’s assign a function to the next button. This function first checks if there’s a question to show; if there is, it displays the question, and if there’s not, it shows the quiz score and a button to reset the quiz score.
This is how the application will look after applying the significant configurations:

Conclusion

This article discussed how to use Appwrite’s storage functionality and, more importantly, how to integrate Appwrite into web applications built with Remix.

Resources

How to add a documentation feedback button in Docusaurus

Emmanuel Ugwu — Tue, 06 Dec 2022 09:56:10 +0000

As a technical writer or product owner, you might want to know or measure the impact of documentation quality, as this affects countless products, even those with well-detailed product documentation.

So how do we know whether our documentations are good? The first response people usually give is that documentation quality is measured through user feedback.

Collecting user feedback on documentation can be a great way to learn about user perspectives and improve a product or service. It helps to know how a product performs and where to improve.
This article demonstrates how to use Appwrite’s out-of-box functionalities to collect and store data through feedback.

The complete source code of this project is on GitHub. Fork it to get started quickly.

Prerequisite

To comfortably follow along in this article, it would be helpful to have the following:

Docker Desktop installed on your computer; run the docker -v command to verify that we have Docker Desktop installed. If not, install it from the Get Docker documentation.
A basic understanding of JavaScript and Docusaurus.
An Appwrite instance; check out this article on how to set up an instance. Appwrite also supports one-click install on DigitalOcean or Gitpod.
Node and its package manager, npm. Run the command node -v && npm -v to verify that you have them installed, or install them from here.

Getting Started

Project setup and installation

Run the following command in the terminal to create a new Docusaurus site:

    npx create-docusaurus@latest <project-name> classic

Then, navigate into the project directory cd <project-name> and run npm run start to start a development server at https://localhost:3000/ in our browser.

NOTE: <project-name> above stands for the name of your app. Call it whatever name you want.

Setting up an Appwrite project

Appwrite is a development platform that provides a powerful API and management console for building backend servers for web and mobile applications.

To use Appwrite in our Docusaurus application, install the Appwrite client-side SDK (Software Development Kit) for web applications.

    npm install appwrite

Then, we’ll set up a new Appwrite project by starting an Appwrite instance and navigating to the specified hostname and port http://localhost:80.

NOTE: To set up an Appwrite instance, follow the steps in the article located in Prerequisites.

Next, we need to log into our account or create an account if we don’t have one.

On Appwrite’s console, click the Create Project button, input docusaurus-feedback as the project name, and click Create.

The project dashboard will appear on the console. Next, click on the Settings tab and copy the Project ID and API Endpoint. We’ll use this to set up our Docusaurus application.

Creating a collection and attribute

On the left side of the Appwrite Console dashboard, click on the Database tab. Click on the Add Database button to create a new database. Creating a new database will lead us to the Collection page.

Next, we’ll create a collection in our database tab by clicking the Add Collection button. After creating a Collection, go to the Permissions section on the Settings page. We want to assign a Read Access and Write Access with a role: all value. We can customize these roles later to specify who has access to read or write to our database.

On the right side of the Settings page, copy the Collection ID; we’ll need to perform operations on the collection’s documents.

Next, go to the Attributes tab to create the properties we want a document to have.

Let’s create a string attribute of message with a size of 256 bits.

Building a component with Docusaurus

This article section uses Docusaurus to build a modal that provides and ships user feedback to Appwrite.

What is Docusaurus?

Docusaurus is a static-site generator that leverages the full potential of React to create an interactive single-page application with quick client-side navigation. It also provides out-of-the-box documentation features to build any website (personal website, product, blog, marketing landing pages, etc.).

Let’s create a new folder called FormPage in the src\components folder in our app. We will create an index.js file in this folder with the code snippet below.

    // Formpage\index.js
    export default function Form() {
      const [formData, setFormData] = useState({ name: "", message: "" });

      const handleChange = (e) => {
        e.preventDefault();
        setFormData({ ...formData, [e.target.name]: e.target.value });
      };
       return (
        <div className={styles.features}>
          <div className={styles.feed}>
            <h1>Was this documentation helpful?</h1>
            <button>give a feedback</button>
          </div>
            <form>
              <div className={styles.App}>
                <div className={styles.label}>
                  <label>Name</label>
                  <input type="text" name="name" value={formData.name} 
                    onChange={handleChange}/>
                </div>
                <div className={styles.label}>
                  <label>Review</label>
                  <textarea className={styles.textarea} type="text" name="message"
                    placeholder="type here" value={formData.message}
                    onChange={handleChange} />
                  <button>send feedback</button>
                </div>
              </div>
            </form>
        </div>
    )}

The code snippet above does the following:

Creates a form needed for collecting feedback from users.
Sets a useState variable, formData, for storing the user feedback.
Creates a function, handleChange, to assign values from our input elements to the formData variable.

Next, we’ll import the Formpage\index.js file in our pages\index.js file, as shown below.

    export default function Home() {
    const {siteConfig} = useDocusaurusContext();
      return (
        <Layout
          title={`Hello from ${siteConfig.title}`}
          description="Description will go into a meta tag in <head />">
          <HomepageHeader />
          <main>
            <HomepageFeatures />
    +        <Form />
          </main>
        </Layout>
      );
    }

Our demo application will look like this after applying the necessary configurations:

Next, we’ll want the form to appear only when a user wants to give a feedback. We’ll use a useState variable and conditional rendering to achieve this functionality, where the useState variable, isOpen, is assigned to a button to display or hide our form.

    // Formpage\index.js
    const React = require("react");
    const { useState } = React;

    export default function Form() {
    const [formData, setFormData] = useState({ name: "", message: "" });
    const [isOpen, setIsOpen] = useState(false);  

      const handleChange = (e) => {
      ...
      };
      const toggle = (e) => {
        e.preventDefault();
        setIsOpen(!isOpen);
      };
    return(
        <div className={styles.features}>
          <div className={styles.feed}>
            <h1>Was this documentation helpful?</h1>
            <button onClick={toggle}>give a feedback</button>
          </div>
    {isOpen ? ( 
            <form>
              ...
            </form>) : ( "" )
    }
        </div>
      )}

Our application should look like this after hiding the form:

Integrating Appwrite

Using Appwrite Database SDK, we’ll integrate Appwrite into our form, where we’ll make a request to create a document in the format of a database with a value called message as the user feedback. Appwrite will create a new document with new user feedback every time the form is submitted.

    // Formpage\index.js
    import { Client, Databases } from "appwrite";

    export default function Form() {
    const [formData, setFormData] = useState({ name: "", message: "" });
    const client = new Client();
    const databases = new Databases(client);

    client
        .setEndpoint('https://OUR-HOSTNAME_OR_IP/v1') // Your API Endpoint
        .setProject('OUR-PROJECT-ID') // Your project ID
    ;

    const updateData = () => {
    const promise = databases.createDocument('OUR-DATABASE_ID', 'OUR-COLLECTION_ID', 'OUR-DOCUMENT_ID', {message: `${formData.name} - ${formData.message}`});

    promise.then(function (response) {
        console.log(response); // Success
    }, function (error) {
        console.log(error); // Failure
    });
    return(
    ...
    )
    }

NOTE: Get your API Endpoint , Project ID , [DATABASE_ID] ,
[COLLECTION_ID] , [DOCUMENT_ID] from Appwrite’s console.

Next, we need to push the user’s feedback to Appwrite and reset our input elements whenever our form is submitted. To do this, we’ll create a function called handleSubmit to reset our form, then update our Appwrite database with our new user feedback.

      const handleSubmit = (e) => {
        e.preventDefault();
        setFormData({ name: "", message: "" });
        updateData();
      };

After applying the configurations, our demo application will look like this:

Conclusion

This article discussed how to use Appwrite’s storage functionality and, more importantly, how to integrate Appwrite into web applications built with Docusaurus.