In today's rapidly evolving tech landscape, building robust, scalable, and maintainable backend services is a critical skill for developers. This article explores how to leverage modern technologies like NestJS, Docker, Swagger, and Prisma to create a production-ready REST API. You will learn the core fundamentals of NestJS and best practices while referencing code from this repository.

Modern applications require architectures that facilitate easy maintenance, testing, and scaling. NestJS, a progressive Node.js framework, provides an excellent foundation with its modular, TypeScript-based approach. Combined with Prisma for database operations, Swagger for API documentation, and Docker for containerization, you have a powerful stack for building server-side applications.

To follow step-by-step you can refer to the fully functional application available in this repository.

git clone https://github.com/jideabdqudus/task-manager-api.git

Stack Overview

1. NestJS

   NestJS is a progressive Node.js framework inspired by Angular's architecture. It uses TypeScript and follows object-oriented programming principles, making it ideal for building scalable server-side applications. Its modular structure encourages the separation of concerns, leading to more maintainable code. (Check out Nest)

2. Prisma

   Prisma is a next-generation ORM (Object-Relational Mapping) that significantly simplifies database access. With its type-safe database client and schema-based approach, Prisma ensures that database operations are both secure and predictable. (Check out Prisma)

3. Swagger

   Swagger (OpenAPI) is a powerful tool for documenting and testing APIs. It provides interactive documentation that makes it easier for front-end developers and API consumers to understand and use your endpoints. (Check out Swagger)

4. Docker

   Docker enables consistent application deployment across different environments through containerization. By packaging your application and its dependencies into containers, you ensure that it runs the same way in development, testing, and production. (Check out Docker)

Architecture

Whether you’re new to NestJS or looking to expand your skills, this article provides step-by-step instructions to build a full-featured API.

The task management API follows a modular architecture:

src/
├── auth/             # Authentication module
├── tasks/            # Task management module
├── user/             # User management module
├── database/         # Database module with Prisma service
├── app.module.ts     # Main application module
└── main.ts           # Application entry point

This structure separates the application into domain-specific modules, each handling specific business logic. Each module contains controllers (handling HTTP requests), services/providers (implementing business logic), and DTOs (Data Transfer Objects).

The final result of your application should look like this:

Prerequisites

This tutorial is designed to be beginner-friendly, but it would be helpful if you’re familiar with these:

• Basic NestJS

• TypeScript

• Docker

Make sure you have the following installed before you begin:

• Node.js (v16 or later)

• Node Package Manager

• Docker & Docker Compose

• PostgreSQL (or your preferred database)

Step 1: Setting Up Your NestJS Project

Create a new NestJS project using the CLI:

npm i -g @nestjs/cli # run if you don't have the NestJS CLI installed already
nest new task-manager-api
cd task-manager-api

This command scaffolds a basic NestJS application with all essential configurations. The CLI will prompt you to choose a package manager (npm or yarn). Select your preference, and NestJS will scaffold a basic project structure for you. This initial structure provides the foundation for the application.

As said earlier, Nest follows a modular architecture inspired by Angular. The file structure is of format:

• Modules: Organize application components into logical units

• Controllers: Handle HTTP requests and return responses

• Services: Contain business logic used by controllers

• Providers: Injectable components that can be shared across the application

The src directory is where the essential bits of the application would be and the majority of the codebase. On initializing the application, you’d find some key files in there.

• src/main.ts: Entry point that bootstraps the application

• src/app.module.ts: Root module that imports and organizes all other modules

• src/app.controller.ts: Basic controller handling routes/endpoints

• src/app.service.ts: Contains business logic used by the controller

Feel free to remove the app.controller.spec.ts, ./app.service, and ./app.controller files to emulate a fresh codebase.

To start the app, you can run npm run start:dev

⭐️ View Codebase

Step 2: Setting Up the Database with Prisma

Prisma provides a clean, type-safe interface to the PostgreSQL database.

1. Install Prisma:

    npm install @prisma/client
    npm install --save-dev prisma
   

2. Initialize Prisma:

    npx prisma init
   

   This creates a prisma/ directory with a schema.prisma file. Update the file to define models for User and Task.

    // prisma/schema.prisma
    generator client {
      provider = "prisma-client-js"
    }
   
    datasource db {
      provider = "postgresql"
      url      = env("DATABASE_URL")
    }
   
    model User {
      id        Int     @id @default(autoincrement())
      email     String  @unique
      password  String
      name      String
      tasks Task[]
      createdAt DateTime @default(now())
      updatedAt DateTime @updatedAt
    }
   
    model Task {
      id          Int      @id @default(autoincrement())
      title       String
      description String?
      status      Status   @default(PENDING)
      priority    Priority @default(MEDIUM)
      dueDate     DateTime?
      category    String?
      labels      String?
      ownerId     Int
      owner       User     @relation(fields: [ownerId], references: [id])
      createdAt   DateTime @default(now())
      updatedAt   DateTime @updatedAt
    }
    enum Status {
      PENDING
      IN_PROGRESS
      COMPLETED
    }
   
    enum Priority {
      LOW
      MEDIUM
      HIGH
    }
   

3. Migrate the Database:

   Set your DATABASE_URL in a .env file and run:

    npx prisma migrate dev --name init
   

   To find out how to create your Database URL, there are helpful guides based on the service you’d like to use (Supabase, Neon etc.)

This schema defines the data models along with their relationships. Prisma generates a type-safe client from this schema, providing methods for CRUD operations with full TypeScript support.

Based on your chosen service, you should see the tables after migration.

⭐️ View Codebase

Step 3: Create Database Service

Let’s create a Database service to handle the Primsa operations. It makes it easy to interact with the database through the application.

You can create services, modules, and controllers directly through your CLI

nest g module     <name>  # generates a module only
nest g service    <name>  # generates a service only  
nest g controller <name>  # generates a controller only
nest g resource   <name>  # generates all 3 of the above

You can, therefore, generate the database service and module (no controller).

// src/database.service.ts
import { Injectable, OnModuleInit, OnModuleDestroy } from '@nestjs/common';
import { PrismaClient } from '@prisma/client';

@Injectable()
export class DatabaseService
  extends PrismaClient
  implements OnModuleInit, OnModuleDestroy
{
  async onModuleInit() {
    await this.$connect();
  }

  async onModuleDestroy() {
    await this.$disconnect();
  }
}

// src/database.module.ts
import { Module, Global } from '@nestjs/common';
import { DatabaseService } from './database.service';

@Global()
@Module({
  providers: [DatabaseService],
  exports: [DatabaseService],
})
export class DatabaseModule {}

Ordinarily, the newly created services and modules get imported into the app.module.ts file. So ensure they are found there.

⭐️ View Codebase

Step 4: Configure Swagger

The application uses Swagger to automatically generate interactive API documentation. You can configure Swagger in the main.ts file.

1. Install Swagger:

    npm install --save @nestjs/swagger swagger-ui-express
   

2. Update main.ts file:

    import { NestFactory } from '@nestjs/core';
    import { AppModule } from './app.module';
    import { SwaggerModule, DocumentBuilder } from '@nestjs/swagger';
   
    async function bootstrap() {
      const app = await NestFactory.create(AppModule);
      const config = new DocumentBuilder()
        .setTitle('Tasks API')
        .setDescription('Task Management API')
        .addBearerAuth({ // Validation for Protected Routes
          type: 'http',
          name: 'JWT',
          scheme: 'bearer',
          bearerFormat: 'JWT',
        })
        .setVersion('1.0')
        .addTag('tasks')
        .build();
      const document = SwaggerModule.createDocument(app, config);
      SwaggerModule.setup('api-docs', app, document);
      await app.listen(process.env.PORT ?? 3000);
    }
    bootstrap();
   

   This setup creates an interactive documentation interface at the /api-docs endpoint, where developers can explore and test the API.

   ⭐️ View Codebase

Step 5: RESTful Endpoints

Before advancing into this section, it’s important you follow with the codebase at this point as this would be an overview of what to expect.

In NestJS, when building a feature like task-management, you'll typically work with four main components: Modules, Controllers, Services, and DTOs. Let's dive deep into how these components interact and the development flow for creating a complete resource.

1. Modules

   In NestJS, modules are the organizational units that encapsulate related functionality. They help maintain a clean, organized codebase as applications grow in complexity. Each feature (like Tasks) typically has its own module.

   Here's the possible structure of the TaskModule:

    // src/tasks.module.ts
    import { Module } from '@nestjs/common';
   
    @Module({
      imports: [DatabaseModule], // Import dependencies from other modules
      controllers: [TasksController], // Register controllers
      providers: [TasksService], // Register services
      exports: [TasksService], // Export services for use in other modules
    })
    export class TaskModule {}
   

   This decorator-based configuration tells NestJS:

   • Which other modules this module depends on

   • Which controllers handle the HTTP requests

   • Which providers (services) implement the business logic

   • Which providers should be available to other modules

2. Controllers

   Controllers are responsible for handling incoming HTTP requests and returning responses to the client. They define routes and use decorators to specify HTTP methods (GET, POST, etc.). Controllers depend on services to perform the actual business logic.

   Here's your task controller with detailed annotations:

    import {
      Controller,
      Get,
      Post,
      Body,
      Patch,
      Param,
      Delete,
    } from '@nestjs/common';
    import {
      ApiTags,
      ApiOperation,
      ApiResponse,
      ApiBearerAuth,
    } from '@nestjs/swagger';
    import { CreateTaskDto } from './dto/create-task.dto';
    import { UpdateTaskDto } from './dto/update-task.dto';
    import { JwtAuthGuard } from '../auth/guards/jwt-auth.guard';
   
    @ApiTags('tasks') // Swagger tag for grouping endpoints in documentation
    @Controller('tasks') // Base route prefix (/api/tasks)
    @UseGuards(JwtAuthGuard) // Authentication guard applied to all endpoints
    export class TasksController {
      constructor(private readonly tasksService: TasksService) {} // Dependency injection
   
      @Post() // HTTP POST method for creating resources
      @ApiOperation({ summary: 'Create a new task' }) // Swagger documentation
      @ApiResponse({
        status: 201,
        description: 'The task has been successfully created.',
      })
      @ApiBearerAuth() // Indicates authentication requirement in Swagger
      create(@Request() req, @Body() createTaskDto: CreateTaskDto) {
        // Extract user ID from JWT token payload
        return this.tasksService.create({
          ...createTaskDto,
          ownerId: (req as { user: { userId: number } }).user.userId,
        });
      }
   
      @Get() // HTTP GET method for retrieving resources
      @ApiOperation({ summary: 'Get all tasks' })
      @ApiResponse({
        status: 200,
        description: 'The tasks have been successfully retrieved.',
      })
      @ApiBearerAuth()
      findAll(@Request() req: unknown) {
        // Return only tasks owned by the authenticated user
        return this.tasksService.findAllByUser(
          (req as { user: { userId: number } }).user.userId,
        );
      }
   
      @Get(':id') // Dynamic route parameter
      @ApiOperation({ summary: 'Get a task by id' })
      @ApiResponse({
        status: 200,
        description: 'The task has been successfully retrieved.',
      })
      @ApiBearerAuth()
      findOne(@Request() req: unknown, @Param('id') id: string) {
        // Convert string ID to number with the + operator
        return this.tasksService.findOne(
          +id,
          (req as { user: { userId: number } }).user,
        );
      }
   
      @Patch(':id') // HTTP PATCH for partial updates
      @ApiOperation({ summary: 'Update a task' })
      @ApiResponse({
        status: 200,
        description: 'The task has been successfully updated.',
      })
      @ApiBearerAuth()
      update(
        @Request() req: unknown,
        @Param('id') id: string,
        @Body() updateTaskDto: UpdateTaskDto,
      ) {
        return this.tasksService.update(
          +id,
          updateTaskDto,
          (req as { user: { userId: number } }).user,
        );
      }
   
      @Delete(':id') // HTTP DELETE for removing resources
      @ApiOperation({ summary: 'Delete a task' })
      @ApiResponse({
        status: 200,
        description: 'The task has been successfully deleted.',
      })
      @ApiBearerAuth()
      remove(@Request() req: unknown, @Param('id') id: string) {
        return this.tasksService.remove(
          +id,
          (req as { user: { userId: number } }).user,
        );
      }
    }
   

   Notice how each method in the controller:

   1. Uses specific HTTP method decorators (@Get(), @Post(), etc).

   2. Accepts parameters from various sources (@Body(), @Param(), @Request())

   3. Delegates the actual business logic to the injected service

   4. Includes Swagger documentation for API explorability

3. Services

   Services implement the business logic and are responsible for data storage and retrieval. They abstract the database operations and provide a clean interface for controllers. In the architecture, services interact with the Prisma client to perform database operations.

   Here's a simplified view of the task service:

    import {
      Injectable,
      NotFoundException,
      ForbiddenException,
    } from '@nestjs/common';
   
    @Injectable() // Makes the service available for dependency injection
    export class TasksService {
      constructor(private databaseService: DatabaseService) {} // Inject the Prisma client service
   
      async create(createTaskDto: CreateTaskDto & { ownerId: number }) {
        return this.databaseService.task.create({
          data: createTaskDto,
        });
      }
   
      async findAllByUser(userId: number) {
        return this.databaseService.task.findMany({
          where: { ownerId: userId },
          orderBy: { updatedAt: 'desc' },
        });
      }
   
      async findOne(id: number, user: { userId: number }) {
        const task = await this.databaseService.task.findUnique({
          where: { id },
        });
   
        if (!task) {
          throw new NotFoundException(`Task with ID ${id} not found`);
        }
   
        // Authorization check
        if (task.ownerId !== user.userId) {
          throw new ForbiddenException('You can only access your own tasks');
        }
   
        return task;
      }
   
      // Update and delete methods follow a similar pattern
    }
   

   The service layer is where business rules, validations, and authorization checks should be implemented. The TasksService ensures that users can only access, modify, or delete their own tasks.

4. DTOs (Data Transfer Objects)

   DTOs define the shape of data for a specific API operation. They provide type safety and validation through decorators, ensuring that incoming requests conform to expected formats.

   The CreateTaskDto:

    import { ApiProperty } from '@nestjs/swagger';
    import {
      IsNotEmpty,
      IsString,
      IsOptional,
      IsEnum,
      IsISO8601,
    } from 'class-validator';
    import { Status, Priority } from '@prisma/client';
   
    export class CreateTaskDto {
      @ApiProperty() // Swagger documentation
      @IsString() // Validation: must be a string
      @IsNotEmpty() // Validation: cannot be empty
      title: string;
   
      @ApiProperty({ required: false })
      @IsString()
      @IsOptional() // Marks the field as optional
      description?: string;
   
      @ApiProperty({ enum: Status, default: Status.PENDING })
      @IsEnum(Status) // Validation: must be one of the enum values
      @IsOptional()
      status?: Status;
   
      @ApiProperty({ enum: Priority, default: Priority.MEDIUM })
      @IsEnum(Priority)
      @IsOptional()
      priority?: Priority;
   
      @ApiProperty({ required: false })
      @IsDateString() // Validates ISO date string format
      @IsOptional()
      dueDate?: string;
   
      @ApiProperty({ required: false })
      @IsString()
      @IsOptional()
      category?: string;
   
      @ApiProperty({ required: false })
      @IsString()
      @IsOptional()
      labels?: string;
    }
   

   UpdateTaskDto extends from a partial version of CreateTaskDto, making all fields optional for updates. Basically, what this does is take a copy of the CreateTaskDto whilst making its fields optional. You can decide to extend it further depending on the needs of your application:

    export class UpdateTaskDto extends PartialType(CreateTaskDto) {}
   

   ⭐️ View Codebase

Understanding the building blocks of Nest

As you can tell, when developing a new feature or resource in NestJS, a typical workflow would be:

1. Define the Data Model: Start with the Prisma schema to define the database model for your resource (in our case, the Task model).

2. Generate DTOs: Create Data Transfer Objects to define the shapes of requests and responses (CreateTaskDto, UpdateTaskDto).

3. Create the Service: Implement the business logic that interacts with the database via Prisma (TasksService).

4. Build the Controller: Define the API endpoints that map to service methods (TasksController).

5. Configure the Module: Wire everything together in a module (TaskModule).

6. Add Swagger Documentation: Add API documentation using decorators wherever necessary.

7. Implement Authentication/Authorization: Add guards and strategies for protecting routes.

8. Write Tests: Create unit and integration tests to verify the functionality.

This modular approach allows developers to work on different parts of the feature independently and promotes code reusability and separation of concerns.

Step 6: Containerization with Docker

Docker ensures that the application runs consistently across environments. Our multi-stage Dockerfile optimizes for both development and production:

# Dockerfile

# Development stage
FROM node:20-alpine AS development
WORKDIR /usr/src/app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

# Production stage
FROM node:20-alpine AS production
ARG NODE_ENV=production
ENV NODE_ENV=${NODE_ENV}
WORKDIR /usr/src/app
COPY package*.json ./
RUN npm install --only=production
COPY . .
COPY --from=development /usr/src/app/dist ./dist
CMD ["node", "dist/main"]

This approach:

1. Creates a development image with all dependencies for building

2. Creates a production image with only production dependencies

3. Copies the built application from the development stage to the production image

Combined with docker-compose, this setup allows for easy orchestration of the API alongside its PostgreSQL database.

Next, you’ll need to create a docker-compose.yml file

touch docker-compose.yml     # creates docker-compose.yml file

You can then add the following code to the created file

version: '3.8'
services:
  postgres:
    image: postgres:13.5
    restart: always
    environment:
      POSTGRES_USER: postgres
      POSTGRES_PASSWORD: postgres
      POSTGRES_DB: nest_task
    volumes:
      - postgres-data:/var/lib/postgresql/data
    ports:
      - '5432:5432'
volumes:
  postgres-data:

To start the container, run docker compose up . Ensure you have docker installed before running this on your machine. By now, you should have the PostgreSQL container running. To stop the container, you can run docker compose down.

⭐️ View Codebase

Conclusion

Building a scalable REST API involves combining the right technologies with solid architectural principles. NestJS provides an excellent foundation with its modular structure and TypeScript support. Prisma simplifies database operations with its type-safe client. Swagger automates API documentation, making it easier for others to use your API. Finally, Docker ensures consistent deployment across environments.

This approach results in an API that is not only powerful and flexible but also maintainable and testable. As your application grows, the modular architecture allows for easy extension without compromising stability.

By following the patterns demonstrated in this project, you can build professional-grade APIs that scale with your business needs.

Don't hesitate to explore the repository further, experiment with the code, and refer to the official NestJS documentation for a comprehensive understanding of the framework's capabilities. Happy coding!

⭐️ View Final Code

👉🏾 Learn more about me

👉🏾 Connect on LinkedIn

👉🏾 Subscribe to my blog

In this article, we'll walk through building a simple AI-powered chatbot using TensorFlow and JavaScript. The chatbot will recognize user commands and respond with predefined answers.

Step-by-Step Guide

1. Setting Up Our Project

   First, we create a new directory for our project and initialize it with npm, ensure you have Node.js installed on your system before starting this step.

    mkdir chatbot
    cd chatbot
    npm init -y
   

2. Install necessary packages

   We would be using the following npm packages for our simple project:

   • @tensorflow/tfjs: TensorFlow.js library for machine learning.

   • @tensorflow-models/universal-sentence-encoder: Pre-trained Universal Sentence Encoder model for intent recognition.

       npm install @tensorflow/tfjs @tensorflow-models/universal-sentence-encoder
     

3. Create intents

   Create a file named intents.js to store intents/commands. These are categories of user inputs that the chatbot will recognize (e.g., greetings, product inquiries, order status).

    // intents.js
    const intents = {
      greeting: ["hello", "hi", "hey", "good morning", "good evening", "howdy"],
      goodbye: ["bye", "goodbye", "see you later", "farewell", "catch you later"],
      thanks: ["thank you", "thanks", "much appreciated", "thank you very much"],
      product_inquiry: ["tell me about your products", "what do you sell?", "product information", "what can I buy?", "show me your products"],
      order_status: ["where is my order?", "order status", "track my order", "order tracking", "order update"],
      shipping_info: ["shipping information", "how do you ship?", "shipping methods", "delivery options", "how long does shipping take?"],
      return_policy: ["return policy", "how to return?", "return process", "can I return?", "returns"],
      payment_methods: ["payment options", "how can I pay?", "payment methods", "available payments"],
      support_contact: ["contact support", "how to contact support?", "customer support contact", "support info", "customer service contact"],
      business_hours: ["business hours", "working hours", "when are you open?", "opening hours", "store hours"]
    };
   
    module.exports = { intents }
   

4. Create responses

   Create another file named responses.js to store predefined responses. These are the predefined responses the chatbot will give based on the recognized intent.

    // responses.js
    const responses = {
      greeting: "Hello! How can I help you today?",
      goodbye: "Goodbye! Have a great day!",
      thanks: "You're welcome! If you have any other questions, feel free to ask.",
      product_inquiry: "We offer a variety of products including electronics, books, clothing, and more. How can I assist you further?",
      order_status: "Please provide your order ID, and I will check the status for you.",
      shipping_info: "We offer various shipping methods including standard, express, and next-day delivery. Shipping times depend on the method chosen and your location.",
      return_policy: "Our return policy allows you to return products within 30 days of purchase. Please visit our returns page for detailed instructions.",
      payment_methods: "We accept multiple payment methods including credit/debit cards, PayPal, and bank transfers. Please choose the method that suits you best at checkout.",
      support_contact: "You can contact our support team via email at support@example.com or call us at 1-800-123-4567.",
      business_hours: "Our business hours are Monday to Friday, 9 AM to 5 PM. We are closed on weekends and public holidays."
    };
   
    module.exports = { responses };
   

5. Loading TensorFlow and the Sentence Encoder

   Create a main script file named chatbot.js and load the necessary libraries and models, we load the universal sentence encoder model asynchronously and start the chatbot once the model is loaded.

    // chatbot.js
    const tf = require('@tensorflow/tfjs');
    const use = require('@tensorflow-models/universal-sentence-encoder');
    const { intents } = require('./intents');
    const { responses } = require('./responses');
    const readline = require('readline');
   
    // Load the Universal Sentence Encoder model
    let model;
    use.load().then((loadedModel) => {
      model = loadedModel;
      console.log("Model loaded");
      startChatbot();
    });
   

6. Implementing Intent Recognition

   Add a function to recognize the intent of the user's input, we embed the user input into a high-dimensional vector using the universal encoder and then track the highest similarity score based on the intent.

    async function recognizeIntent(userInput) {
      const userInputEmb = await model.embed([userInput]);
      let maxScore = -1;
      let recognizedIntent = null;
   
      for (const [intent, examples] of Object.entries(intents)) {
        // Embedding the example phrases for each intent & Calculating similarity scores between the user input embedding and the example embeddings
        const examplesEmb = await model.embed(examples);
        const scores = await tf.matMul(userInputEmb, examplesEmb, false, true).data();
        const maxExampleScore = Math.max(...scores);
        if (maxExampleScore > maxScore) {
          maxScore = maxExampleScore;
          recognizedIntent = intent;
        }
      }
      return recognizedIntent;
    }
   

7. Generating Responses

   Add a function to generate responses based on the recognized intent:

    async function generateResponse(userInput) {
      const intent = await recognizeIntent(userInput);
      if (intent && responses[intent]) {
        return responses[intent];
      } else {
        return "I'm sorry, I don't understand that. Can you please rephrase?";
      }
    }
   

8. Implementing Chatbot Interaction

   Finally, implement the interaction loop with the chatbot by setting up the interface for reading user input from the command line, prompting the user for input and generating responses accordingly:

    function startChatbot() {
      const rl = readline.createInterface({
        input: process.stdin,
        output: process.stdout
      });
   
      console.log("Welcome to the customer service chatbot! Type 'quit' to exit.");
      rl.prompt();
   
      rl.on('line', async (line) => {
        const userInput = line.trim();
        if (userInput.toLowerCase() === 'quit') {
          console.log("Chatbot: Goodbye!");
          rl.close();
          return;
        }
   
        const response = await generateResponse(userInput);
        console.log(`Chatbot: ${response}`);
        rl.prompt();
      });
    }
   

   Here is the completed code for chatbot.js :

    // chatbot.js
   
    const tf = require('@tensorflow/tfjs');
    const use = require('@tensorflow-models/universal-sentence-encoder');
    const { intents } = require('./intents');
    const { responses } = require('./responses');
    const readline = require('readline');
   
    // Load the Universal Sentence Encoder model
    let model;
    use.load().then((loadedModel) => {
      model = loadedModel;
      console.log("Model loaded");
      startChatbot();
    });
   
    async function recognizeIntent(userInput) {
      const userInputEmb = await model.embed([userInput]);
      let maxScore = -1;
      let recognizedIntent = null;
   
      for (const [intent, examples] of Object.entries(intents)) {
        const examplesEmb = await model.embed(examples);
        const scores = await tf.matMul(userInputEmb, examplesEmb, false, true).data();
        const maxExampleScore = Math.max(...scores);
        if (maxExampleScore > maxScore) {
          maxScore = maxExampleScore;
          recognizedIntent = intent;
        }
      }
   
      return recognizedIntent;
    }
   
    async function generateResponse(userInput) {
      const intent = await recognizeIntent(userInput);
      if (intent && responses[intent]) {
        return responses[intent];
      } else {
        return "I'm sorry, I don't understand that. Can you please rephrase?";
      }
    }
   
    function startChatbot() {
      const rl = readline.createInterface({
        input: process.stdin,
        output: process.stdout
      });
   
      console.log("Welcome to the customer service chatbot! Type 'quit' to exit.");
      rl.prompt();
   
      rl.on('line', async (line) => {
        const userInput = line.trim();
        if (userInput.toLowerCase() === 'quit') {
          console.log("Chatbot: Goodbye!");
          rl.close();
          return;
        }
   
        const response = await generateResponse(userInput);
        console.log(`Chatbot: ${response}`);
        rl.prompt();
      });
    }
   

9. To run the chatbot, execute thechatbot.jsfile:

    node chatbot.js
   

Voila! Our command output should have the chatbot running:

Conclusion

In this article, we've built a simple customer service chatbot using TensorFlow and JavaScript. The model used in this article is basic and doesn't have the ability to generate complex responses, in a real-world scenario an extensive dataset would be used to handle generating user queries.
Likewise, you can expand this project by integrating APIs using AXIOS, adding more intents and responses, or deploying it on a web platform.

Happy coding!

👉🏾 Learn more about me

👉🏾 Connect on LinkedIn

👉🏾 Subscribe to my blog

In this article, we will provide a step-by-step guide on how to run a localhost on your mobile phone, both for Android and iOS devices.

Step 1: Connect your devices to the same network

This is probably the easiest step, all you have to do is make sure your computer is connected to the same wifi network as your mobile devices.

Step 2: Serve your app to Localhost and get the Port

On your computer/laptop, run your app as you usually do and get the localhost address, it is usually in the form http://localhost:<port>

For instance, the port from the image above is 9999.

Step 3: Find your computer's Local IP Address

There are different ways to find the IP address on your machine, to find out the IP address of your computer:

For Mac:

1. Open System Preferences -> Network

2. Next to the Status, you should see the IP address. It should write out - “WiFi is connected to WIFI_NAME and has the IP address YOUR_IP.” See how it looks in the screenshot below:

   

Take note of that address, also, bear in mind that It’s common for your Local IP Address to change automatically when your device or other devices connect/disconnect from the network.

For Linux:
Run in your terminal hostname -I. Or, run ifconfig | grep "inet " | grep -v 127.0.0.1

For Windows:

1. Select Start > Settings > Network & internet > Wi-Fi and then select the Wi-Fi network you’re connected to.

2. Under Properties, look for your IP address listed next to IPv4 address.

Great, now that we got our computer’s local IP address, we need to run our app.

Step 4: View the app on your phone

On your mobile device’s browser, you can now navigate to http://<Local IP Address>:<port number>. For example, If your application is running on localhost:9999 and your IP address is like 172.32.44.160, then on mobile, we navigate to 172.32.44.160:9999

In conclusion, running localhost on your mobile phone is a useful tool for developers and tech enthusiasts. By following these six simple steps, you can easily set up localhost on your mobile device, and test and run applications and websites right on your phone.

The Problem

Files could be saved in the backend as base64 encoded strings, this is to ensure that the data remains intact without modification during transport. Base64 is commonly used in a number of applications. So how do we download a file sent from the Backend as base 64 as it's just a string usually in this format (data:application/pdf;base64,[base64]..)

The Solution

In a situation whereby the user isn't making any request to an endpoint, the base64 file could be downloaded just like so (using the typical HTML anchor tag):

<a href="data:application/pdf;base64,[base64]" download="file_name.pdf">

Otherwise, In a situation whereby the user has to fetch data from an endpoint and pass data onClick, this can be done simply by creating a function that accepts the base64 encoded stringand creating the anchor tag element with the file link as an href attribute, adds a download attribute and clicks on the created anchor element.

let pdf = {
  file: "data:application/pdf;base64,[base64]......",
  file_name: "Purchase Invoice"
}

function downloadPDF(pdf) {
    const pdfLink = `${pdf.file}`;
    const anchorElement = document.createElement('a');
    const fileName = `${pdf.file_name}.pdf`;
    anchorElement.href = pdfLink;
    anchorElement.download = fileName;
    anchorElement.click();
}

I hope I'm able to help with this implementation, let me know in the comments.

Read more articles from me: blog.abdulqudus.com

One of the solutions to this is to use debounce/throttle, and a Lodash provides us with the debounce function. Lodash’s debounce function delays invoking a function passed into it; It can help performance in some situations.

In this article, we would be taking a look at the right implementation of debounce in a React App.

Our App

Let's take this sample React Application that contains a search input field and each time the user types a request is made that loads the data into the UI.

export default function App() {
  const [users, setUsers] = React.useState([]);

  async function search(value) {
    const res = await fetch(
      // Fake API 
      `https://api.github.com/?search=${value}`
    );
    const body = await res.json();
    return body.results.map((result) => result.name);
  }

  async function handleChange(event) {
    setUsers(await search(event.target.value));
  }

  return (
    <div className="App">
      <input
        type="search"
        placeholder="Enter your search"
        onChange={handleChange}
      />
      <ul>
        {users.map((user) => (
          <li key={user.id}>{user.firstname}</li>
        ))}
      </ul>
    </div>
  );
}

With the above code, the search request is made every time the user makes a keystroke in the input element. Ideally, we want the search request to be made only when the user has stopped typing. We can use the debounce function from Lodash to do this. The debounce function delays the processing of the key-up event until the user has stopped typing for a predetermined amount of time.

Implementing Debounce in React

npm install lodash

Create a debounce function, and call it inside of the handlechange, a timer is set to the debounced function that determines the intervals between each call.

import { debounce } from 'lodash';

const handleSearchDebounce = debounce(async (value) => {
    setUser(await search(value));
}, 300);

async function handleChange(event) {
  handleSearchDebounce(event.target.value);
}

Approach 2

With the first method, a new version of the debounced method is created on every render. We can use the useRef hook to store the debounced function across renders instead:

import { debounce } from 'lodash';

const handleSearchDebounce = React.useRef(
  debounce(async (value) => {
    setUsers(await search(value));
  }, 300)
).current;

/* We can use the `useEffect` hook to cancel the debounced function 
so whenever the component unmounts the search stops running, and
the function gets canceled */
React.useEffect(() => {
  return () => {
    handleSearchDebounce.cancel();
  };
}, [handleSearchDebounce]);

Conclusion

In this article, I showed you how to implement a debounce function in React using Lodash. However, you don’t need to use Lodash's implementation of debounce in your projects if you don’t want to. You can decide to write your own debounce function and some other libraries offer this same debounce function.

👉🏾 Learn more about me

👉🏾 Connect on LinkedIn

👉🏾 Subscribe to my blog, let's feast

In this article, we would take a look at the Image component from NextJS and learn how to use it to optimize an image in our web app.

By the end of this article, you should understand the following concepts:

• Image Optimization

• Using next/image

• Image Props

• Configuring next.config.js

• Usage of the native < img > tag in NextJS

Image Optimization

Ordinarily, if you were going to make use of an image in your website/app you would do this ( assuming the image is in the same directory as the webpage it is accessing ):

<img src="./apple.jpg">

You can go further by adding an alternative text (for screen readers or when the image cannot be loaded) by doing this:

<img src="./apple.jpg" alt="Image of an apple"/>

However, this format doesn't solve image optimization aspects like image size, web formats, and responsiveness with this single usage.

NextJS offers automatic image optimization which solves all of the above as well as common tasks like internalization and routing.

The golden rule for any performance optimization simply put is giving users what they want in the shortest possible time or providing a fall-back if need be.

Hence NextJS provides us with a built-in image optimization API, next/image, a canonical form for native automatic image optimization.

Using next/image

The Image component in NextJS is quite similar to the native html <img>, it's an extension of this element and can be used by importing it from next/image and using it like you'd use a component with props.

import Image from 'next/image';

export default function SampleImage({source}) {
    return (
        <div>
            <Image src={source} alt='Image alt text'/>
        </div>
    )
}

The Image tag has a couple of props available to it for use asides the src and alt prop, we'd take a look at some of them

• width and height prop

The width and height of the image is in pixels , when adding the width and height be sure to add the correct dimension. If a different aspect ratio is added, the image would adjust accordingly. For example if the width and height of a (1400 x 700) image gets changed to (400 x400) as shown below, it could result in a skewed image.

import Image from 'next/image';

export default function SampleImage({source}) {
    return (
        <div>
            <Image 
               src={source} 
               alt='Image alt text'
               height={400}
               width={400}
             />
        </div>
    )
}

• layout prop

There may be times you do not know the width and height of an image, but still want it to fill the entire space while keeping its aspect ratio. In this situation, you can leave out the width and height prop on the Image component. Instead, add a prop of layout="fill". This will stretch the image to the width and the height of the parent element. When using the layout="fill" prop, it is often best to pair it with objectFit="cover". This will allow the image to maintain its aspect ratio while filling the element’s entire content box. To achieve this, wrap the Image component as a child of a <div> element. Then add a width and height to the parent <div> element, along with giving it a position="relative".

import Image from 'next/image';

export default function SampleImage({source}) {
    const myStyle = {
       height: '400px',
       width: '400px',
       position: 'relative' 
   }
    return (
        <div style={myStyle}>
            <Image 
               src={source} 
               alt='Image alt text'
               layout='fill'
               objectFit='cover'
             />
        </div>
    )
}

This way, we can see that the image is taking up the 400-pixel square that we wanted, but the aspect ratio of the image is still in place. The parts of the image that do not fit within the parent element are clipped.

Other layout values are intrinsic, fixed, and responsive.

• loader prop

A loader is a function returning a URL string for the image, given the following parameters (src, width, quality). Setting the loader as a prop on the Image component overrides the default loader defined in the images section of next.config.js.

import Image from 'next/image'

const sampleLoader = ({ src, width, quality }) => {
  return `https://example.com/${src}?w=${width}&q=${quality || 75}`
}

const MyImage = (props) => {
  return (
    <Image
      loader={sampleLoader}
      src="me.png"
      alt="My Picture"
      width={500}
      height={500}
    />
  )
}

• sizes prop

You can specify a list of image widths using the images.imageSizes property in your next.config.js file. These widths are concatenated with the array of device sizes to form the full array of sizes used to generate image srcsets.

module.exports = {
  images: {
    imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
  },
}

Or by defining it in your component like,

<Image
    src={src}
    alt="image-alt-text"
    sizes="320 640 700"
    layout="responsive"
/>

Keep in mind that it is recommended to define sizes only when using a responsive or fill layout.

• quality prop

The quality of the optimized image, is an integer between 1 and 100 where 100 is the best quality. Defaults to 75.

<Image
    src={src}
    alt="image-alt-text"
    quality={100}
    layout="fill"
/>

• priority prop

By default, images are not prioritized (because they are lazy-loaded), meaning priority defaults to false. When true, the image is considered high-priority and preloaded. You should use the priority property on any image detected as the Largest Contentful Paint (LCP) element. Should only be used when the image is visible above the fold. Defaults to false.

<Image
    src={src}
    alt="image-alt-text"
    width={500}
    height={300}
    priority
/>

• placeholder prop

This placeholder property is used as a fallback image when an image is loading. Its possible values are blur or empty. When empty, there will be no placeholder while the image is loading, only empty space. When blur, the blurDataURL property will be used as the placeholder. If src is an object from a static import and the imported image is .jpg, .png, .webp, or .avif, then blurDataURL will be automatically populated.

<Image
    src={src}
    alt="image-alt-text"
    width={500}
    height={300}
    placeholder="blur"
/>

• blurDataURL prop

The blurDataURL prop is a placeholder image that loads before the src image successfully loads and must be a base64-encoded data URL image that is effectual only when used in combination with placeholder=“blur”.

<Image
  src={src}
  alt="image-alt-text"
  width={600}
  height={450}
  placeholder="blur"
  blurDataURL=”data:image/png;base64,[IMAGE_CODE_FROM_PNG_PIXEL]”
/>

• objectFit prop

The objectFit prop defines how the image will fit into the container of it's parent, quite similar to the object-fit CSS property. It is used with layout=fill or an image with a set width and height.

<Image 
    src={src}
    alt="image-alt-text"
    layout="fill"
    objectFit="contain"
/>

It has a possible value of: contain, cover, fill, none, and scale-down.

• unoptimized prop

When true, the source image will be served as-is instead of changing quality, size, or format. Defaults to false.

<Image
    src={src}
    alt="image-alt-text"
    width={700}
    height={450}
    unoptimized
/>

Configuring next.config.js

You can configure your NextJS image through the next.config.js file

• domains

When using an external URL to load images, you must add it to domains in next.config.js

module.exports = {
    images: {
        domains: ['example.com'],
    }
}

• loader

By default, NextJS handles image optimization but you can hand that responsibility over to a cloud provider such as Cloudinary or imgix that is more dedicated to images than just general optimization.

module.exports = {
    images: {
        loader: 'cloudinary',
        path: 'https://your-site.com/assets/images/'
    }
}

Keep in mind that when loader is set to an external image service, the domains config is ignored.

For more advanced cases of props in NextJS, there are other props that you can add to the Image component as well as configurations. Check out the full documentation here.

Conclusion

Image optimization in Next.js improves the user and developer experience but just like every other thing in programming, the Image component has some limitations one of which is its inability to adjust CSS directly. Unlike the native <img> element whereby you can pass a style prop to override its CSS. The NextJS image component doesn't support the style property at all. Hence to style the source image, name it with a className then target it with your CSS.

<Image
    src={src}
    alt="image-alt-text"
    width={700}
    height={450}
    className="myImage"
/>

P.S: Next.js forces using their

component instead of the native <img> tag by including the corresponding linter check to the app build process. So if you're going to make use of the <img> tag in a NextJS application you'd add the following to disable the check

// eslint-disable-next-line @next/next/no-img-element
 <img
     src={src}
     alt='myImg'
     className='myImage'
 />

Or by adding "@next/next/no-img-element": "off" in the .eslintrcconfig file.

I hope you enjoyed reading this as much as I enjoyed writing it and would be building your NextJS app as soon as possible.

Resources used:

• NextJS Doc

• Log Rocket

• UploadCare

• Level Up Coding

👉🏾 Learn more about me

👉🏾 Connect on LinkedIn

👉🏾 Subscribe to my blog, let's feast

Side-note: I started writing Vue a month ago and the experience has been fantastic, do check it out as it has a faster learning curve (if you are fairly good in react)

What is Vuex?

Vuex is a state management tool for Vue (as Redux is for React). It holds a global state that can be accessed and modified within your application. It enables you to work with state in a controlled way and to use actions, getters, and mutations to handle changes to the state. Vuex, just like every global state management system should only be used when you need some global state or a centralized place to hold data

What is Nuxt?

Nuxt.js (as Next.js is for React) is a frontend framework built upon Vue.js that offers great development features such as server-side rendering, automatically generated routes, improved meta tags managing, and SEO improvement.

Setting up Vuex with Nuxt

The good news, Nuxt comes with Vuex by default! When scaffolding a new project you might have noticed an empty folder called store. This is where all of the logic for our Vuex takes place, it is disabled by default but will be activated as soon as we create a .js file in there.

• Create index.js Inside of the Store folder create an index.js file, if you don't have a Store folder you can go ahead and create this as well. The index.js would be the root module and contain the four building blocks of a Vuex module:

export const state = () => {}

export const mutations = {}

export const actions = {}

export const getters = {}

• Update the state in the index.js file For the purpose of this article, we are building a small counter app, and we'd initiate our counter state in our index.js file.

//updated code
export const state = () => ({
  counter: 0
})

• Update the mutation inside index.js file

  //updated code
  export const mutations = {
  increment: state => (
    state.counter++
   )
  }
  

Our index.js file should look like this now

export const state = () => ({
  counter: 0
})
export const mutations = {
  increment: state => (
    state.counter++
  )
}
export const actions = () => {}
export const modules = () => {}

Don't worry about the actions and modules as we wouldn't be going in-depth on Vuex.

• Now create a button and dispatch the action inside of the pages folder.

• Inside of the pages/index.vue file

// pages/index.vue
<template>
  <div>
    Counter: {{ this.$store.state.counter }}
    <br />
    <button @click="add_one">Add</button>
  </div>
</template>

<script>
export default {
  methods: {
    add_one() {
      this.$store.commit("increment");
    },
  },
};
</script>

<style scoped></style>

What the code above does, we get the current value of the counter state from the store, then on button click, we commit(dispatch) the increment action that changes the value of the state.

Our final result should be this:

Conclusion

Working with Vuex in a Nuxt application is simple and easy to get started with. It provides module creation based on folder and file structure under the store folder. The context helper property $store is useful when accessing the store from a component. Other than that there are no Nuxt specific ways of working with Vuex compared to a plain Vue application. Nuxt lets you quickly get up and running so you can focus on implementation rather than configuration.

Thanks for reading!

Resources used:

• Langvad
• Nakita Kejser

👉🏾 Learn more about me 👉🏾 Connect on LinkedIn 👉🏾 Subscribe to my blog, let's feast

QOTD: It always seems impossible until it's done

This is caused by sending large JavaScript payloads which in turn impacts the speed of your site significantly. Instead of shipping all the JavaScript to your user as soon as the first page of your application is loaded, split your bundle into multiple pieces and only send what's necessary at the very beginning.

What is Code Splitting?

Many JavaScript frameworks bundle all dependencies into one large file. This makes it easy to add your JavaScript to an HTML page. The bundle requires only one link tag, and there are fewer calls needed to set up the page since all the JavaScript is in one place. In theory, bundling JavaScript in this way should speed up page loads and lower the amount of traffic that page needs to handle.

Code splitting is a common practice in large React applications, and the increase in speed it provides can determine whether a user continues using a web application or leaves. Many studies have shown that pages have less than three seconds to make an impression with users, so shaving off even fractions of a second could be significant. Therefore, aiming for three seconds or less of load time is ideal.

Popular module bundlers like webpack, allow you to split your bundles using dynamic imports. For example;

// math.js
export function subtract(a, b) {
  return a - b;
}

Without Code Splitting

//index.js
import { subtract } from './math.js';

console.log(subtract(26, 16)); // 10

With Code Splitting

import("./math").then(math => {
  console.log(math.subtract(26, 16)); //10
});

When Webpack comes across this syntax, it automatically starts code-splitting your app. If you’re using Create React App, this is already configured for you and you can start using it immediately. It’s also supported out of the box in Next.js.

How does Code Splitting work In React

There are several ways to implement code splitting in React. Different bundlers work in different ways, but React has multiple methods to customize bundling regardless of the bundler used.

Using Dynamic Imports

The Dynamic import syntax works for both static site generation and server-side rendering. Dynamic imports use the then function to import only the code that is needed. Any call to the imported code must be inside that function (as seen above and below).

import("./math").then(math => {
  console.log(math.subtract(26, 16)); //10
});

Using React Lazy

React.lazy allows for lazy loading of imports in many contexts. It is not yet available for server-side rendering, but its diversity of functions makes up for that. The React.lazy method makes it easy to code-split a React application on a component level using dynamic imports. However, there will always be a slight delay that users have to experience when a code-split component is being fetched over the network, so it's important to display a useful loading state. Using React.lazy with the Suspense component helps solve this problem.

//Without Suspense Fallback
import React, { lazy } from 'react';

const HeaderComponent = lazy(() => import('./HeaderComponent'));

const App = () => (
  <div>
    <HeaderComponent />
  </div>
)

//With Suspense Fallback
import React, { lazy, Suspense } from 'react';

const HeaderComponent = lazy(() => import('./HeaderComponent'));

const App = () => (
  <Suspense fallback={<div>Loading...</div>}>
    <HeaderComponent />
  </Suspense>
)

//Suspense Fallback With Multiple Components
import React, { lazy, Suspense } from 'react';

const HeaderComponent = lazy(() => import('./HeaderComponent'));
const FooterComponent = lazy(() => import('./FooterComponent'));


const App = () => (
  <Suspense fallback={<div>Loading...</div>}>
    <HeaderComponent />
    <FooterComponent />
  </Suspense>
)

Loading Failures

If any module fails to load, for example, due to network failure, we will get an error that can handle these errors with Error Boundaries. Once we have created the Error Boundary, we can use it anywhere above our lazy components to display an error state.

import React, { lazy, Suspense } from 'react';

const HeaderComponent = lazy(() => import('./HeaderComponent'));
const FooterComponent = lazy(() => import('./FooterComponent'));


class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = {hasError: false};
  }

  static getDerivedStateFromError(error) {
    return {hasError: true};
  }

  render() {
    if (this.state.hasError) {
      return <p>Loading failed! Please reload.</p>;
    }

    return this.props.children;
  }
}

const App = () => (
  <ErrorBoundary>
    <Suspense fallback={<div>Loading</div>}>
      <HeaderComponent />
      <FooterComponent />
    </Suspense>
  </ErrorBoundary>
)

Conclusion

With the above resource, I hope you're better suited to optimize your React application and have what it takes to split a project.

If you are unsure where to begin applying code splitting to your React application, follow these steps:

• Begin at the route level. Routes are the simplest way to identify points of your application that can be split. The React docs show how Suspense can be used along with react-router.
• Identify any large components on a page on your site that only render on certain user interactions (like clicking a button). Splitting these components will minimize your JavaScript payloads.
• Consider splitting anything else that is offscreen and not critical for the user.

Resources Used:

• Web.Dev
• Log Rocket
• React Docs

👉🏾 Learn more about me
👉🏾 Connect on LinkedIn
👉🏾 Subscribe to my blog, let's feast

QOTD: Whatever is worth doing at all, is worth doing well

In this article, we would look at some of the UI Frameworks you can use alongside your React project, judging based on sources such as:

• GitHub
• Npm
• StackShare
• Stackoverflow

So let's start;

1. Ant Design

Ant Design (or AntD) is an enterprise-class UI design language with a set of high-quality React UI components. It is one of the best React UI libraries for enterprises. It offers many polished components that could be used to build an entire application. The documentation is extensive, with tons of examples, and stays up to date. It's also my personal favorite :)

Maintained by: Ant Design.

Github Stars: 73.4k

Website Statisics: Used by 13, 741 websites

Used by: Binance, Alibaba, Alipay, Coinrule

Pros:

• Good Documentation and Examples
• Typescript Support
• Internationalization Support

• Quality Icons

  Visit Ant Design

2. Material UI

Material-UI is the most popular React UI framework that provides Google Material Design out of the box. Material design takes inspiration from the physical world and textures while keeping the actual UI elements to a minimum.

Maintained by: Material UI & Google.

Github Stars: 70.1k

Website Statisics: Used by 193, 121 websites

Used by: Medium, Roast, Meisterplan

Pros:

• Good Documentation and Examples
• Exciting React themes and templates

• Wide range of components

  Visit Material UI

3. React Bootstrap

React-Bootstrap replaces Bootstrap JavaScript. Each component has been built from scratch as a true React component, without unneeded dependencies like jQuery. React Bootstrap is one of the oldest React UI libraries and has grown steadily with React itself. While React-Bootstrap doesn’t offer any official support, there is a massive, active community and plenty of resources supporting Bootstrap.

Maintained by: Mark Otto.

Github Stars: 19.1k

Website Statisics: Used by 11, 221 websites

Used by: Butterflynetwork, Scoutbee, Isgood.ai

Pros:

• Bootstrap’s grid system allows a fully responsive series of containers, rows, and columns for your layout.

• Easy to use and edit

  Visit React Bootstrap

4. Semantic UI

Semantic UI React is the official plugin for Semantic UI. The library boasts a collection of over fifty components, including segments, progress bars, transitions, pagination, and more. However, despite all of its unique features, if you do not have hands-on experience in JavaScript, you may find the library a bit complex.

Maintained by: Jack Lukic.

Github Stars: 12.4k

Website Statisics: Used by 7, 033 websites

Used by: Lumeneo, Hacker.works, Rev.io

Pros:

• Impressive customization and theming capabilities.
• Wide collection for UI Components.
• Zero traces of any jQuery code, simplifying the application development.

• Declarative API.

  Visit Semantic UI

5. Chakra UI

Chakra UI provides a set of accessible, reusable, and composable React UI components that make it easy to create websites and apps. Chakra UI components are built on top of a React UI Primitive for endless composability. The community of Chakra UI is very active. You will get all the help required whenever you feel stuck.

Maintained by: Segun Adebayo.

Github Stars: 19.6k

Used by: Bonton, Orbital, LUGGIT

Pros:

• Chakra UI contains a set of layout components like Box and Stack that make it easy to style your components by passing props.
• You can use the same react component as much as you want and customize it for further use.

• This library does not require any heavy set up to implement and is simple and easy to use.

  Visit Chakra UI

6. Blueprint

Blueprint is a newly open-sourced design system implemented as a collection of composable React components and optimized for desktop applications. This is not a mobile-first UI toolkit.

Maintained by: Palantir.

Github Stars: 18.2k

Used by: Allocate, NatML, Onedot

Pros:

• The React UI library has over forty components optimized in particular for complex data-dense interfaces for desktop applications.

• Contains many useful components like breadcrumbs, buttons, callouts, cards, dividers, navbars, tabs, tags, and much more.

  Visit Blueprint

7. Fluent

Fluent UI web represents a collection of utilities, React components, and web components for building web applications. It has Web Components and native libraries for iOS, macOS, Android, and Windows.

Maintained by: Microsoft.

Github Stars: 11.8k

Website Statisics: Used by 97 websites

Npm Downloads: 53,498/Week

Used by: Microsoft

Pros:

• It has components for building forms and lists but also offers very specific ones like a PeoplePicker for example.

• Good default styling capabilities without any code.

  Visit Fluent

8. Grommet

Grommet is a React-based framework that provides accessibility, modularity, responsiveness, and themes in a tidy package. Grommet is a component library designed for responsive, accessible, and mobile-first web projects. It even has a list of SVG icons.

Maintained by: Hewlett Packard Enterprises.

Github Stars: 7.3k

Npm Downloads: 23,278/Week

Used by: Netflix, Uber, Boeing, HP

Pros:

• It embraces atomic design methods and allows for keyboard navigation, screen reader tags, and more.

• Powerful theming tools which let you tailor the component library to align with your color, type, and layout needs. You can even control component interaction.

  Visit Grommet

Conclusion

With the above resource, you now have a list of 8 different UI Frameworks to pick from while building your next React project.

Let me know if I'm missing any in the comment section 🤔

Resources used:

• Raftlabs
• TrendsBuiltWith

👉🏾 Learn more about me 👉🏾 Connect on LinkedIn 👉🏾 Subscribe to my blog, let's feast

QOTD: We are what we repeatedly do. Excellence then is not an act, but a habit.

• What props are
• What states are
• How to use props and states in React components
• The difference between props and states

What exactly are Props?

Props is just a short form of saying properties, think of props as arguments passed into a function. React components are functions that return JSX (or more generally something that's renderable like React elements, null, a string, etc.). Typically when you have a piece of code that you would like to reuse, you can place that code into a function, and any dynamic values that code used before can be accepted as arguments.

That being said, props can be anything. In our example they're numbers, but they can also be (and often are) strings, arrays, objects, functions, etc.

In the example below, the parent component can pass a prop to its child component like:

<AdditionComponent n1={2} n2={3} />

The child component can make use of the passed props by getting the props and using in this format:

function AdditionComponent(props) {
  return (
    <div>
      {props.n1} + {props.n2} = {props.n1 + props.n2}
    </div>
  )
}

Which would in turn render 2 + 3 = 5 on the UI.

Props are immutable so we cannot modify the props from inside the component. Modifying the props passed into the Add component would throw an error;

In your react app, you can destructure your props so as to make your code more readable and still get the same output. Destructuring the example above would give us this output:

function AdditionComponent(props) {
const { n1, n2 } = props  
return (
    <div>
      {n1} + {n2} = {n1 + n2}
    </div>
  )
}

Another way of destrcturing is doing it at the top level of your fucntion declaration:

function AdditionComponent({n1,n2}) {
  return (
    <div>
      {n1} + {n2} = {n1 + n2}
    </div>
  )
}

After agreeing that props are immutable, what happens if we want to change a particular prop value based on an action? We get an error and this is where states come in...

What is a React State?

Like props, state holds information about the component. However, the kind of information and how it is handled is different. The state is an updatable structure that is used to contain data or information about the component and can change over time. The change in state can happen as a response to user action or system event.

To define a state in a React (Functional Component) all we have to do is import the useState hook into our app and use accordingly, like below:

import {useState} from "react";

const AdditionForm = () => {
  const [num, setNum] = useState(0)

  function handleInputChange(event) {
    setNum(event.target.value)
  }

  return (
    <div>
      <input type="number" value={num} onChange={handleInputChange} /> =  {num}
    </div>
  )
}

Now, for each change in the input field, num gets tracked according to the state change.

Where as, for a Class based component, we can achieve the same action by doing this:

class AdditionForm extends React.Component {
  constructor() {
    super();
    this.state = {
      num: 0,
    };
  }
handleInputChange(event) {
    this.setState({num: event.target.value });
  }
render() {
    return (
      <input type="number" value={this.state.num} onChange={this.handleInputChange} /> = {this.state.num}
 );
 }
}

Now, state is changeable and can be reused across our application 😉

Conclusion

We now have a proper idea of what states and props are, how they can be used, and the difference between both.

Go ahead and test your knowledge on what you've learnt and tell me in the comment section if you can pass states as props in a React application 🙋🏾‍♂️❔

Resources used:

• Madhavan Nagarajan
• Kent Dodds

👉🏾 Learn more about me 👉🏾 Connect on LinkedIn 👉🏾 Subscribe to my blog, let's feast

In this guide, you will learn:

• What Redux is
• How Redux works
• How to setup Redux in a React app

What is Redux?

Redux is a predictable state container for JavaScript apps. It helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test. On top of that, it provides a great developer experience, such as live code editing combined with a time-traveling debugger. In layman's terms, It's a state management system for javascript apps.

I personally recommend redux for medium/large scale applications and context for small applications.

How does Redux work?

In Redux you have to remember 3 things:

• Action
• Reducer
• Store

So in redux, you will create only one store and pass the store in your topmost react component. Normally in App Component in src/app.js file or index.js file. Store holds all the app state or global state for the application in Redux.

As the store will be passed to the React application or view part, we can pass any information or command. This is called action in the Redux way. That means you want to dispatch an action to send some command.

Basically the actions will be dispatched to the reducer which is a fancy term of function. The reducer will get the current state from the store and will use the actions to create a new state based on the old state and will update in the store.

Finally, if a view component is connected to the store, it will re-render when the state in the Redux store will be updated.

How to setup Redux in a React app

Installing the dependencies

The first step is installing our dependencies from NPM, so on our command-line interface.

npm i redux react-redux redux-thunk redux-devtools-extension

Redux is stand-alone and react-redux gives us access to several hooks that make life easier, redux-thunk is a middleware that allows you to write action creators that return a function instead of an action, redux-devtools-extension is an optional dependency that I make use of to improve debugging and view states on the web.

Create folders and files

A lot of people set up their folder structures in different ways with Redux, I like to create a redux folder and place my actions and reducers in separate folders within this particular folder, and a separate file in this folder for my types.

By the way, actions are objects that determine what will be done. Reducers, on the other hand, check which action is performed and update the state based on the action.

For the purpose of this article, we are building a small counter app.

Define the Types (constants)

• Start by defining the types that would be used across the application, I like placing this in a separate file (Types.js) for clarity and reusability. Since we are building a simple project, it's quite easy to determine what all the types would be.

//Types.Js
export const INCREMENT = "INCREMENT";
export const DECREMENT = "DECREMENT";
export const RESET = "RESET";

Create Reducer

• Now create a counterReducer.js file inside the reducer folder you created earlier on.

//counterReducer.js
import { INCREMENT, DECREMENT, RESET } from '../Types.js'
const initialState = {
    counter: 0
}
const counterReducer = (state = initialState, action) => {
  switch (action.type) {
    case INCREMENT:
      return {
        state,
        counter: state.counter + 1
      }
    case DECREMENT:
      return {
        state,
        counter: state.counter - 1
      }
    case RESET:
      return {
        state,
        counter: 0
      }
    default:
      return state;
  }
}

export default counterReducer

For the snippet of code above, we've basically created our reducer by defining its initial state and what happens when a particular action type is fired; A lot of people typically create the reducer with a switch statement, but it is also possible to use an if statement.

Create "Index" Reducer

• Next, we create an index.js file inside of our reducers folder, for an application with more than one reducer, we make use of the combineReducer function, this function turns our reducers into a single reducer that we can pass to the createStore API. Now our demo application only has one reducer, but for the purpose of subsequent projects we are going to make use of the combineReducer function.

//Index.js(Reducer)
import { combineReducers } from 'redux'
import counterReducer from './counterReducer'

export default combineReducers({counter: counterReducer})

Create global store

• Now let's create a store.js file inside of our src folder, see this as the logic and the connector between react and redux. To use the store, we are going to add it as a prop inside of a Provider that's going to wrap our entire application.

//store.js
import { applyMiddleware, createStore } from 'redux'
import { composeWithDevTools } from 'redux-devtools-extension'
import thunk from 'redux-thunk'
import rootReducer from './redux/reducers'

const initialState = {}
const middleware = [thunk]
const store = createStore(
  rootReducer,
  initialState,
  composeWithDevTools(applyMiddleware(...middleware))
)
export default store

• Import store.js into Index.js:

//index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
//New code
import { Provider } from 'react-redux'
import store from "./store"


ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>,
  document.getElementById('root')
);

Create actions

• Let's create the actions that would be used inside of our application, the actions determine what happens to the reducers (this is where your API calls happen too). Inside the actions folder, let's create counterActions.js.

//counterActions.js
import { INCREMENT, DECREMENT, RESET } from '../Types.js'

export const increment = () => {
  return {
    type: INCREMENT,
  };
};

export const decrement = () => {
  return {
    type: DECREMENT,
  };
};

export const reset = () => {
  return {
    type: RESET,
  };
};

• Finally, we can make use of the actions in our app, where we have the counter:

import React from 'react';
import './App.css';
import logo from "./logo.svg"
import { useSelector, useDispatch } from "react-redux";
import {  decrement,  increment, reset, } from "./redux/actions/counterAction";

const App =()=> {
  //dispatch is the hook to fire off our actions
  const dispatch = useDispatch();
  //useSelector helps access the states across the application.
  const counter = useSelector((state) => state.counter);
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logaso" alt="logo" />
        <h1>Redux project</h1>
        <h3>Counter</h3>
        <h3>{counter.counter}</h3>
        <button onClick={() => dispatch(increment())}>Increase</button>
        <button onClick={() => dispatch(reset())}>Reset</button>
        <button onClick={() => dispatch(decrement())}>Decrease</button>
      </header>
    </div>
  );
}
export default App;

Now we should have a fully working react-redux application.

Conclusion

We now have a fully running react-redux application, new reducers can be created in the reducers folder, actions created in the actions folder then connected to the combineReducers export.

While Redux is by far the popular and widely used state management system, I highly recommend using Redux for large and medium-sized applications alone.

There are other state management systems I've come across like Mobx, Context API, and Apollo for GraphQL to use at your disposal likewise.

I hope you enjoyed reading this and would be building your next Redux application without hassle.

Thanks to the creator of Redux and one of my Favorite Software developers, Dan Abramov

👉🏾 Learn more about me

👉🏾 Follow me on Twitter

👉🏾 Subscribe to my blog

• What Progressive Web Apps (PWAs) are
• Rules of a PWA
• Create a React App as a PWA
• How to convert your existing React app to a PWA

What is a Progressive Web App?

A progressive web application (or PWA) is a web application that is built to look and behave like native apps, operates offline, allows installation, and is optimized for a variety of screens. Basically, a Progressive Web App (PWA) is an application that expands the functionality of a regular website progressively by adding features that previously were exclusive for native applications.

A couple of big companies have switched to using PWAs since its creation in 2015, let's take a look;

• Twitter: The benefits of using PWA over the traditional app? Well, it takes up less storage for a start, 3% less disk space to be exact for the Android version. Twitter has credited this with a 75% increase in the number of Tweets, a 65% increase in pages per session, and a 20% decrease in bounce rates.
• Uber: Uber’s PWA, m.uber, allows you to hail a ride without downloading and installing the traditional Uber mobile app. It’s absolutely tiny, with the core service only taking up 50kb which means it loads quickly even on the poorest of connections.
• Instagram: If you visit Instagram on your mobile browser now, you’ll be accessing it via a PWA. Previously you’d have struggled with a lack of functionality, only really being able to browse your timeline or profile. Now the PWA looks just like the traditional app and gives you some extra functionality as well.
• Pinterest: built a PWA when they discovered that their website experience is too slow. On Pinterest’s PWA, users spend 40% more time compared to the previous version. Its PWA requires only 150 KB of data storage.

Rules of a PWA

• PWAs must implement service workers, service workers act as a proxy between the web browsers and API servers, which allows web apps to message and cache network requests and assets.
• PWAs must be served over a secure network, i.e the application must be served over HTTPS.
• PWAs must have a web manifest, which is a JSON file that provides basic information about the PWA, such as name, icons, splash screen, description, version of the app e.t.c.

Okay, now we understood all the benefits and reasons why your app should be a PWA, it's time to create our first PWA.

Create a React App as a PWA

Starting with Create React App 4, you can now create your react app as a PWA from scratch in one easy step. So I wouldn't be spending so much time on this.

npx create-react-app my-app --template cra-template-pwa

By typing the above command, you get a react app with a PWA template containing the Service-Workers and App Manifest.

👉🏾 TS; WM?

How to convert a react app to a PWA

Now the exciting part, converting an existing react project to a Progressive web application; Before going over the steps, let's take a look at the lighthouse report of our React App to verify the PWA status. This can be done by navigating to lighthouse in the developer tools and clicking on Generate report. This is what you should have (or similar):

This shows that our react app isn't progressive (yet)! We are going to change this in the following steps:

1. Creating a service worker

What is a service worker? The service worker provides a programmatic way to cache app resources, be it javascript files or JSON data from HTTP requests. Create a file called service-worker.js inside of your public folder, and add the following code:

var CACHE_NAME = 'pwa-example';
var urlsToCache = [
  '/',
  '/completed'
];

// Install a service worker
self.addEventListener('install', event => {
  // Perform install steps
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(function(cache) {
        console.log('Opened cache');
        return cache.addAll(urlsToCache);
      })
  );
});

// Cache and return requests
self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request)
      .then(function(response) {
        // Cache hit - return response
        if (response) {
          return response;
        }
        return fetch(event.request);
      }
    )
  );
});

// Update a service worker
self.addEventListener('activate', event => {
  var cacheWhitelist = ['pwa-task-manager'];
  event.waitUntil(
    caches.keys().then(cacheNames => {
      return Promise.all(
        cacheNames.map(cacheName => {
          if (cacheWhitelist.indexOf(cacheName) === -1) {
            return caches.delete(cacheName);
          }
        })
      );
    })
  );
});

What the code in service-worker.js does is - define a callback for the install event and choose what to cache. Inside the callback, we open a cache, cache the files, and get confirmation that assets are cached.

2. Update Index.html

Now, update your index.html file (in the public folder) to verify the status of a service worker in the application when it loads. Place this code inside of your body tag

<script>
    if ('serviceWorker' in navigator) {
       window.addEventListener('load', function() {
         navigator.serviceWorker.register('serviceWorker.js').then(function(registration) {
          console.log('Worker registration successful', registration.scope);
           }, function(err) {
            console.log('Worker registration failed', err);
             }).catch(function(err) {
            console.log(err);
            });
            });
    } else {
       console.log('Service Worker is not supported by browser.');
    }
</script>

3. Update Index.js

Update your index.js in the src folder (src/index.js) from serviceWorker.unregister() to serviceWorker.register().

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

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

//Updated Code here
serviceWorker.register();

4. Update manifest.json

Your react app comes with a manifest by default, but if not, then create a manifest.json file inside the public folder with the following code:

{
  "short_name": "React App",
  "name": "Create React App Sample",
  "icons": [
    {
      "src": "favicon.ico",
      "sizes": "64x64 32x32 24x24 16x16",
      "type": "image/x-icon"
    },
    {
      "src": "logo192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "logo512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "start_url": ".",
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#ffffff"
}

The app manifest file describes the resources your app will need, this includes your app's display name, icons as well as a splash screen. You can edit the file to suit your needs

Run the application again (npm run start) you should have a running PWA, verify this by opening the Developer tools and check the Lighthouse reports:

Conclusion

An important feature of PWAs is the security (HTTPS), deploying your app would take care of this step for you. Once your app is deployed and secure, all your audit tests will be passed and users would be able to fully access a PWA :)

I hope you enjoyed reading this and could build a PWA using this article :)

Thanks! Learn more about me

Oh, one more thing, my website is built as a PWA. Check out the mobile and desktop look here:

Resources:

• Create React App
• What are PWAs
• Brilliant Progressive Web Apps
• How PWAs can drive business success

Header image was designed by myself, feel free to use :)

In this article, you will learn:

• What linked lists are.
• Performance of linked lists.
• Types of linked lists.
• How to Implement your own linked list.

What are linked lists?

A linked list is a sequence of data elements, which are connected together via links. Each element (node) in a linked list contains a connection to another data element in form of a pointer.

You should know:

That every element in a linked list is called a Node, and every node contains a data (value to be stored) and next (reference to the next node) fields.

A linked list therefore is a collection of nodes, with the last node pointing to None

Performance of linked lists.

In a linked list, the time complexity for the operations is given as:

• Indexing - O(n)
• Insertion - O(1)
• Deletion - O(1)
• Search - O(n)

Space complexity however is O(n).

Types of linked lists.

There are 3 main types of linked lists;

• Singly-linked lists: Each node consists of only one pointer to the next (which we are learning)
• Doubly-linked lists: Each node contains two pointers, a pointer to the next node and a pointer to the previous node.

• Circular-linked lists: In a circular linked list the last node points to the first node or any other node before it thereby forming a loop

Implementing a linked list in Python

This comes in 2 parts, creating our list Node, and the Linked List itself. So, first thing first, create a class to represent each Node of the linked list

class Node:
    def __init__(self, data):
        self.data = data
        self.next = None

As you can see each node contains just 2 fields, the data, and next.

Next, create a class to represent your linked list :

class LinkedList:
    def __init__(self, nodes=None):
        self.head = None
        if nodes is not None:
            node = Node(data=nodes.pop(0))
            self.head = node
            for n in nodes:
                node.next = Node(data=n)
                node = node.next

Putting it all together

Let's update each of our classes with a repr function so our new code looks like this :

class Node:
    def __init__(self, data):
        self.data = data
        self.next = None

    def __repr__(self):
        return self.data

class LinkedList:
    def __init__(self, nodes=None):
        self.head = None
        if nodes is not None:
            node = Node(data=nodes.pop(0))
            self.head = node
            for n in nodes:
                node.next = Node(data=n)
                node = node.next

    def __repr__(self):
        node = self.head
        nodes = []
        while node is not None:
            nodes.append(node.data)
            node = node.next
        nodes.append("None")
        return " -> ".join(nodes)

The code above would rightly allow us to create a linked list, notice that in the LinkedList init function if the node is not passed we initialized it to None.

my_list = LinkedList()
firstNode = Node("1")
my_list.head = firstNode
secondNode = Node("2")
firstNode.next = secondNode
print(my_list)

>>> 1 -> 2 -> None

Linked Lists Methods

To help us use our linked lists even more efficiently, we would implement some methods to:

• Traverse a linked list.
• Insert a new node at the beginning.
• Insert a new node at the end.

Traverse a linked list

Traversing a linked list means iterating through the list, and we add the iter function to allow us to replicate the same behavior from regular lists (arrays)

def __iter__(self):
    node = self.head
    while node is not None:
        yield node
        node = node.next

The code above goes through the list if it does not equal to None and yields every node before re-assigning the node to the next node if it exists.

Insert node at the beginning

def add_at_beginning(self, node):
    node.next = self.head
    self.head = node

In the above code, you're setting the next value to the present head value before re-assigning head to the new node

Insert node at the end

def add_at_end(self, node):
    if self.head is None:
        self.head = node
        return
    for current in self:
        pass
    current.next = node

While inserting at the end is similar to inserting at the beginning, first, you want to traverse the whole list until you reach the end. Next, you want to set current as the last node on the list. Finally, you want to add the new node as the next value of that current.

Our final code containing our methods should look like this

class Node:
    def __init__(self, data):
        self.data = data
        self.next = None

    def __repr__(self):
        return self.data

class LinkedList:
    def __init__(self, nodes=None):
        self.head = None
        if nodes is not None:
            node = Node(data=nodes.pop(0))
            self.head = node
            for elem in nodes:
                node.next = Node(data=elem)
                node = node.next

    def __repr__(self):
        node = self.head
        nodes = []
        while node is not None:
            nodes.append(node.data)
            node = node.next
        nodes.append("None")
        return " -> ".join(nodes)

    # Traverse a Linked List
    def __iter__(self):
        node = self.head
        while node is not None:
            yield node
            node = node.next

    # Insert a new node at the beginning
    def add_at_beginning(self, node):
        node.next = self.head
        self.head = node

    # Insert a new node at the end
    def add_at_end(self, node):
        if self.head is None:
            self.head = node
            return
        for current_node in self:
            pass
        current_node.next = node

To wrap up a final example, have a look at how it works:

my_list = LinkedList()
firstNode = Node("1")
secondNode = Node("2")
my_list .head = firstNode
firstNode.next = secondNode
my_list.add_at_beginning(Node("3"))
my_list.add_at_end(Node("4"))
print(my_list)

>>>  3 -> 1 -> 2 -> 4 -> None

Conclusion

In this article, you learned quite a few things, The most important are:

• What linked lists are
• What the other types of linked lists are
• Time and Space Complexities of a linked list
• How to implement your own linked list and node classes, plus relevant methods

I hope you enjoyed reading it as much as I enjoyed writing it :)

Learn more about me

Fetching data from an API either from an external source or from the Backend of your application can be done in many ways.

In this Quick guide, I would show you how to fetch data in a react app by making an HTTP request to a REST API using 4 different patterns.

Before I begin, let’s have a refresher on what REST APIs are:

What is a REST API?

A REST API (also known as RESTful API) is an application programming interface (API or web API) that conforms to the constraints of REST architectural style and allows for interaction with RESTful web services. REST stands for “REpresentational State Transfer”.

In this guide, we would be making use of the Github REST API and its sample response looks like this:

{
"login": "jideabdqudus",
"id": 45945474,
"node_id": "MDQ6VXNlcjQ1OTQ1NDc0",
"avatar_url": "https://avatars.githubusercontent.com/u/45945474?v=4",
"gravatar_id": "",
"url": "https://api.github.com/users/jideabdqudus",
"html_url": "https://github.com/jideabdqudus",
"followers_url": "https://api.github.com/users/jideabdqudus/followers",
"following_url": "https://api.github.com/users/jideabdqudus/following{/other_user}",
"gists_url": "https://api.github.com/users/jideabdqudus/gists{/gist_id}",
"starred_url": "https://api.github.com/users/jideabdqudus/starred{/owner}{/repo}",
"subscriptions_url": "https://api.github.com/users/jideabdqudus/subscriptions",
"organizations_url": "https://api.github.com/users/jideabdqudus/orgs",
"repos_url": "https://api.github.com/users/jideabdqudus/repos",
"events_url": "https://api.github.com/users/jideabdqudus/events{/privacy}",
"received_events_url": "https://api.github.com/users/jideabdqudus/received_events",
"type": "User",
"site_admin": false,
"name": "Jide Abdul-Qudus.",
"company": null,
"blog": "www.abdulqudus.com",
"location": "Lagos, Nigeria.",
"email": null,
"hireable": true,
"bio": "Software Engineer.",
"twitter_username": null,
"public_repos": 57,
"public_gists": 0,
"followers": 12,
"following": 0,
"created_at": "2018-12-17T15:57:35Z",
"updated_at": "2021-04-06T20:48:07Z"
}

Whenever a GET request is made to this (https://api.github.com/users/jideabdqudus) endpoint it returns this Javascript Object as its response & we can decide to use this data in our application.

Fetching data using the Fetch API

The Fetch API is an inbuilt JavaScript method for getting resources from a server or an API endpoint. It s a tool that’s built into most modern browsers on the window object (window.fetch) and enables us to make HTTP requests very easily using JavaScript promises.

To make a simple GET request with fetch we just need to include the URL endpoint which is a compulsory argument. It returns a promise that points to the response from the request. We want to make this request once our React component has mounted hence we would be making use of a Hook called useEffect for functional-based components or componentDidMount for class-based components.

import React, { useState, useEffect } from "react";
export default function App() {

  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetch("https://api.github.com/users/jideabdqudus")
      .then((response) => {
        if (response.ok) {
          return response.json();
        }
        throw response;
      })
      .then((data) => {
        setData(data);
      })
      .catch((error) => {
        console.error("Error fetching data: ", error);
        setError(error);
      })
      .finally(() => {
        setLoading(false);
      });
  }, []);

  if (loading) return "Loading...";
  if (error) return "Error!";
  return (
    <div style={{ textAlign: "center" }}>
      <img src={data.avatar_url} alt="Avatar" height="100" />
      <p>Name: {data.name}</p>
      <p>Bio: {data.bio}</p>
      <p>Username: {data.login}</p>
      <p>Location: {data.location}</p>
      <p>Public Repos: {data.public_repos}</p>
    </div>
  );
}

In the code above, we have created a very simple functional component that makes a fetch request once the component gets mounted and sends back the response to us in the data state.

Within the useEffect we declare the API endpoint inside of our fetch function, the .then() callback, was used to see if the response was okay (response.ok). We call back a response as JSON data if the response is ok.

If it’s not an okay response, we assume there was an error making the request. Using fetch, for us to handle the errors, we throw response as an error for it to handled by our catch callback.

Here in our example, we are putting our error data in state with setError. If there's an error we return the text "Error!".

The .finally() callback is a function that is called when our promise has resolved successfully or not. In it, we set loading to false, so that we no longer see our loading text.

Instead we see either our data on the page if the request was made successfully, or that there was an error in making the request if not.

How to Fetch Data in React Using Axios

The second pattern is by making use of Axios. Axios is an easy to use promise-based HTTP client for the browser and node.js. With Axios, we get the ability to intercept and cancel request, it also has a built-in feature that provides client-side protection against cross-site request forgery.

Axios is a React/Javascript library, so for us to use it in our app we would need to install it first.

npm install axios or yarn add axios

After which we import it at the top of the component that it would be used in. Making HTTP request with Axios is quite easy, and it’s one of the most popular ways of fetching data in React. We would be converting the previous Fetch example to an axios request.

import React, { useState, useEffect } from "react";
import axios from "axios";
export default function App() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  useEffect(() => {
    axios("https://api.github.com/users/jideabdqudus")
      .then((response) => {
        setData(response.data);
      })
      .catch((error) => {
        console.error("Error fetching data: ", error);
        setError(error);
      })
      .finally(() => {
        setLoading(false);
      });
  }, []);

  if (loading) return "Loading...";
  if (error) return "Error!";
  return (
    <div style={{ textAlign: "center" }}>
      <img src={data.avatar_url} alt="Avatar" height="100" />
      <p>Name: {data.name}</p>
      <p>Bio: {data.bio}</p>
      <p>Username: {data.login}</p>
      <p>Location: {data.location}</p>
      <p>Public Repos: {data.public_repos}</p>
    </div>
  );
}

What Axios enables us to do is to use the exact same promise syntax as fetch — but instead of using our first then callback to manually determine whether the response is okay and throw an error, Axios takes care of that for us.

Fetch Data in React Using async / await syntax

In ES7, it became possible to resolve promises using the async / await syntax. Async/await is a relatively new way to write asynchronous code in Javascript.

The benefit of this is that it enables us to remove our .then(), .catch(), and .finally() callbacks, promises andsimply get back our asynchronously resolved data as if we were writing synchronous code without promises altogether.

Why `async/await` ? Well, simply put, async/await allows us to write asynchronous code in a synchronous manner. The one thing you need to know about async functions is that; they always returns a promise.

We have to be aware of the fact that when we use useEffect the effect function (the first argument) cannot be made an async function.

To create an async function all we need to do is add the async keyword before the function definition, we would be converting our previous example to an async/await syntax:

import React, { useState, useEffect } from "react";
import axios from "axios";
export default function App() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  useEffect(() => {
    getData();
  }, []);

  async function getData() {
    await axios("https://api.github.com/users/jideabdqudus")
      .then((response) => {
        setData(response.data);
      })
      .catch((error) => {
        console.error("Error fetching data: ", error);
        setError(error);
      })
      .finally(() => {
        setLoading(false);
      });
  }

  if (loading) return "Loading...";
  if (error) return "Error!";
  return (
    <div style={{ textAlign: "center" }}>
      <img src={data.avatar_url} alt="Avatar" height="100" />
      <p>Name: {data.name}</p>
      <p>Bio: {data.bio}</p>
      <p>Username: {data.login}</p>
      <p>Location: {data.location}</p>
      <p>Public Repos: {data.public_repos}</p>
    </div>
  );
}

In summary, async/await is a cleaner syntax to write asynchronous Javascript code. It enhances readability and flow of your code.

Things to keep in mind while using async/await:

• Async functions return a promise.

• Await can only be used inside an async block.

• Await waits until the function(“promise”) resolves or rejects.

How to Fetch Data in React Using a Custom React Hook (useFetch)

Over time, you may realize that it gets a bit tedious and time-consuming to keep writing the useEffect hook with all of its boilerplate within every component in which you want to fetch data.

To cut down on our reused code, we can use a custom hook as a special abstraction, which we can write ourselves from a third party library (like we are here, using the library react-fetch-hook).

useFetch is an isomorphic fetch hook. That means it works with SSR (server side rendering).

A custom hook that makes our HTTP request allows us to make our components much more concise. All we have to do is call our hook at the top of our component.

import React from "react";
import useFetch from "react-fetch-hook"

export default function App() {
  const { isLoading, error, data } = useFetch("https://api.github.com/users/jideabdqudus");
  if (isLoading) return "Loading...";
  if (error) return "Error!";

  return (
    <div style={{ textAlign: "center" }}>
      <img src={data.avatar_url} alt="Avatar" height="100" />
      <p>Name: {data.name}</p>
      <p>Bio: {data.bio}</p>
      <p>Username: {data.login}</p>
      <p>Location: {data.location}</p>
      <p>Public Repos: {data.public_repos}</p>
    </div>
  );
}

Conclusion

The 4 different patterns shown above are great ways of consuming APIs but fetch is mainly used when building relatively small applications and Axios/useFetch when building large applications for scalability reasons.

I hope you enjoyed reading this guide, I’ll be happy to answer any comment or questions you leave down below!

Check out more articles on my website: www.abdulqudus.com/blog

The UI/UX of this app is concentrated on the experiences of users of the lag mobile app available on the google play store.

The App is a mobile application that helps to solve the problems experienced with navigating constantly through the school's website. It offers university students an opportunity to get first-hand information and access to there database/portal.

Project Brief

An interactive mobile application prototype that can solve the problem of searching, navigating, downloading and filtering information in a convenient way and analyze the UI/UX progress through iterations all along the design process through proper design thinking strategies.

The Design Process

As this work serves as a personal project and away from my normal core software programming, I thought to create a good UX strategy based on knowledge sought around.

Interviews/Reviews

To start this process I took reviews from students, coworkers, and end-users of the application to understand important areas that needed to be worked on.

Based on the survey and interview research, the results indicated that:

• Users want options for updating data

• Users want to have time to use

• Users want flexibility in making payments

• Users want real-time information feed.

Google play store review

Affinity Mapping

Subsequently, I started identifying the user’s preferences and pain-points. Once I did that, I wrote them down and grouped them in an affinity map which helped me pinpoint recurrent themes and issues. I selected the most recurrent themes or problems from the reviews to be the focal points of the mobile application.

User flow

Before wireframing and creating a high-fidelity prototype, I decided to create a simple user flow in Figma. With this, I was able to better understand how the user would interact with the app to perform the tasks needed.

Low-Fidelity Wireframes

Right after finishing the User Flow, I was ready to start prototyping my low fidelity wireframes of the app on paper.

Visual Design/Prototype

For this part of the process, I was able to transform the paper frameworks into high-fidelity prototypes.

High-fidelity prototype

User guide into the High-fidelity prototype, with a thorough look at the functions/pathways.

Conclusion.

Working on this project has been a great experience and I have learned about the user-centered design process in great detail. Understanding the UX process through a user-centered lens allows for designing apps/websites with the user in mind by understanding the motivations and desires of each user.

Present google play store app VS My new design

Readers feedback

After reading several UX case studies, seeking to find the perfect methodology, I realized that nobody’s project reaches perfection and I’m pretty sure that mine is not the exception.

For this reason, I’d really really love to have feedback from you guys whether it is on my methodology, my writing or any other thing you think I should improve.

Thanks a lot in advance for the feedback and for your reading!

I’ll leave you with extra images from the project :)

Please clap, comment and share.

Read my articles and more about me: ➡ https://blog.abdulqudus.com

Visit my web portfolio

abdulqudus.com