Forem: Michael Ikoko

Building a Traffic Light Simulator with a Countdown using Arduino and a 7-Segment Display

Michael Ikoko — Mon, 26 May 2025 23:17:32 +0000

Introduction

After blinking your first LED on Arduino, what's next? Before moving on to more complex concepts, you can design a real-world application for controlling LEDs using a microcontroller by simulating traffic lights.

This is a beginner-friendly tutorial on simulating traffic lights using Arduino. It also adds complexity by including a countdown timer using a 7-segment display.

At the end of the tutorial, you will be able to control three LEDs to mimic traffic lights. Additionally, you will have an understanding of what a 7-segment display is and how to program it with a microcontroller.

Prerequisites

This article makes use of the Wokwi simulator for designing. The same design concepts can be applied to any other microcontroller simulator of your choice, like Tinkercad or Fritzing. If you have the components, do well to connect them physically.

The following components are used in this tutorial:

Arduino UNO
Breadboard
Three LEDs (red, yellow, and green)
Four 200-ohm resistors
A 7-segment display
Jumper cables

The tutorial also assumes a basic understanding of how to use a breadboard.

Circuit Design

The circuit you will be designing in this tutorial will consist of two major parts:

The traffic light control
Countdown timer display

Connecting the LEDs

The traffic light control is made up of three LEDs (red, yellow, and green). You connect each LED in series with a 200-ohm resistor. The resistor limits the current flowing to the LED, thereby preventing the LED from burning out. You should note that it doesn't matter if you place the resistor before or after the LED.

To construct the circuit shown above on a breadboard, proceed with the following steps:

Connect each LED across the central gap of the breadboard so that the terminals of the LED are on opposite sides of the breadboard.
Connect the anode (the longer leg) of each LED to a digital output (PWM) pin on the Arduino. Specifically, the red, yellow, and green LEDs are connected to digital pins 4, 3, and 2, respectively.
Connect one end of a resistor to the cathode (the shorter leg) of each LED. Connect the other end of the resistor to the negative (ground) rail of the breadboard.
Finally, connect the negative rail of the breadboard to one of the Arduino’s ground (GND) pins.

Understanding the 7-Segment Display

A 7-segment display is an electronic component that is primarily used to display digits (0-9). As the name implies, a 7-segment display consists of seven different LEDs. Each LED on a 7-segment display represents a segment and is labelled from a through g. The segments of a 7-segment display are arranged to form digits by illuminating various combinations of segments, each of which can be illuminated independently.

There are 10 pins in a standard 7-segment display. These include:

Pins a to g: These pins control the LEDs in individual segments.
The Decimal Point (DP) pin: This pin controls the optional decimal point segment.
Two common pins: The common pins are the shared connection for all the segments in the display. These are either connected to ground (in common cathode displays) or to a voltage source (in common anode displays).

7-segment displays are classified according to the common terminal type. There are two main types of 7-segment displays:

The Common Cathode (CC).
The Common Anode (CA).

The Common Cathode (CC)

In the common cathode 7-segment display, all the cathodes of the LEDs in each segment are connected to a LOW logic level (logic "0"). This requires you to connect either or both of the common pins to ground. Individual segments are illuminated by applying a HIGH to the signal pins. A Common Cathode 7-segment display is active HIGH.

Truth Table for Common Cathode 7-Segment Display

This tutorial makes use of the Common Cathode 7-segment display. A truth table showing the logic levels of individual segments corresponding to each decimal digit is as follows:

Digit	a	b	c	d	e	f	g
0	1	1	1	1	1	1	0
1	0	1	1	0	0	0	0
2	1	1	0	1	1	0	1
3	1	1	1	1	0	0	1
4	0	1	1	0	0	1	1
5	1	0	1	1	0	1	1
6	1	0	1	1	1	1	1
7	1	1	1	0	0	0	0
8	1	1	1	1	1	1	1
9	1	1	1	1	0	1	1

The Common Anode (CA)

In the common anode 7-segment display, all the anodes of the LEDs in each segment are connected to a HIGH logic level (logic "1"). This implies that you connect the common pins to a voltage source. Individual segments are illuminated by applying a LOW to the signal pins. A Commode Anode display is active LOW.

Connecting the 7-segment Display

In this tutorial, you use the 7-segment display to display a countdown timer during the traffic light phases. To connect the 7-segment display, follow these steps:

Insert the 7-segment display across the central gap of the breadboard. The top five pins of the display are connected in one half of the breadboard, the bottom five pins are connected in the other half.
Recall that this tutorial uses a Common Cathode (CC) 7-segment display. This means that the common pins are connected to ground. Connect a 200-ohm resistor from the common pin to the negative rail of the breadboard (which should already be connected to the Arduino's GND pin). This resistor limits the current flowing to the display and protects the LEDs in the display.
Connect each of the segment pins (a through g) of the display to separate digital output pins on the Arduino. The table below shows the mapping between the segment pins and the corresponding Arduino pins:

7-Segment Display Pin	Arduino Pin
A	D12
B	D13
C	D5
D	D6
E	D7
F	D11
G	D10

The complete circuit should look like this:

Traffic Light Phases

The traffic light simulation is a continuous cycle consisting of four different phases. Each phase runs for a specific period, and a countdown is displayed to indicate the time remaining in each phase.

Red Phase (STOP): This phase mimics the red traffic light, signalling drivers to stop. In the stop phase, you turn on the red LED only. The countdown for this phase begins from 9 and decreases to 4. When the countdown reaches 3, the simulation transitions into the “GET-READY” phase.
Red-Yellow Phase (GET READY): This phase mimics the "get-ready" traffic signal, signalling drivers that the lights are about to turn green. In this phase, you turn on both the red and yellow LEDs. The duration of this phase is 3 seconds, covering the last 3 seconds of the red phase countdown.
Green Phase (GO): This phase mimics the green light, signalling drivers to proceed. In the green phase, you turn on the green LED only. The countdown is reset, restarting from 9 and decreasing to 4. When the countdown reaches 3, the simulation begins the “CAUTION” phase.
Yellow Phase (CAUTION): This phase mimics the yellow traffic light, warning drivers that the lights are about to turn red. In the caution phase, you turn on the yellow LED only. The duration of this phase is 3 seconds, covering the last 3 seconds of the green phase countdown

Arduino Code

The software is a core aspect of any microcontroller-based project. It is where you describe the behaviour of the hardware components connected to the microcontroller.

In this section, you will develop the Arduino sketch responsible for simulating the behaviour of the traffic lights and the countdown display. You will work on the logic for controlling red, yellow, and green LEDs, the traffic phase timing logic, and displaying the countdown.

Pin Configuration

To improve code readability and maintainability, it’s best practice to define descriptive variable names for the pins you're using. This allows you to reference each pin by its function, rather than by its number.

In the sketch.ino, begin by defining the three digital output pins used by the red, yellow, and green LEDs. Then, you define each of the seven digital output pins connected to the 7-segment display. Finally, create an array to group the pins used by the 7-segment display:

const int RED = 4;
const int YELLOW = 3;
const int GREEN = 2;

const int a = 12;
const int b = 13;
const int c = 5;
const int d = 6;
const int e = 7;
const int f = 11;
const int g = 10;

const int segmentPins[7] = {a, b, c, d, e, f, g};

Timing Constants

Next, you create variables storing the duration of each traffic light phase. Given that you are only using one 7-segment display, the maximum digit that can be displayed is 9. The “STOP” and “GO” phases will last for 9 seconds, and the two transition phases (“GET-READY” and “CAUTION”) will each last for 3 seconds. At your discretion, you can change the duration.

Add the following lines to the sketch.ino file:

//...
const int DELAY_RED = 9;
const int DELAY_YELLOW = 3;
const int DELAY_GREEN = 9;

7-Segment Display Truth Table Array

You learned earlier that to display a digit on the 7-segment display, each segment (labelled a through g) is turned ON (logic level 1) and OFF (logic level 0) in a particular combination. A truth table is used to show the logic levels (0 and 1) of each segment for a particular digit.

To implement this, you create an array to store the various combinations of logic levels used for displaying digits 0 through 9. The array digitMap is a two-dimensional array where each row defines the logic levels for a particular digit, and each column represents a specific segment. The array has 10 rows (one for digit 0 to 9), and 7 columns (one for each segment a to g). The array digitMap stores the truth table for the 7-segment display. This means that you can simply reference digitMap[digit][segment] to determine what segments to activate when displaying a number.

Add the following lines to the sketch.ino file:

//...
const bool digitMap[10][7] = {
  {1, 1, 1, 1, 1, 1, 0}, // 0
  {0, 1, 1, 0, 0, 0, 0}, // 1
  {1, 1, 0, 1, 1, 0, 1}, // 2
  {1, 1, 1, 1, 0, 0, 1}, // 3
  {0, 1, 1, 0, 0, 1, 1}, // 4
  {1, 0, 1, 1, 0, 1, 1}, // 5
  {1, 0, 1, 1, 1, 1, 1}, // 6
  {1, 1, 1, 0, 0, 0, 0}, // 7
  {1, 1, 1, 1, 1, 1, 1}, // 8
  {1, 1, 1, 0, 0, 1, 1}  // 9
};

The `setup` Function

The setup function in every Arduino sketch runs once when the microcontroller is powered on or reset. In the setup function, you perform initialization tasks, such as setting pin modes, configuring peripherals, or initializing serial communication.

In the setup function for this project, you perform the following:

You configure the pins used by the red, yellow, and green LEDs as OUTPUT, so that the Arduino can send voltage signals to turn them ON and OFF.
You initialize the 7-segment display pins as OUTPUT, allowing you to control each segment.
You set the baud rate of the microcontroller to enable serial communication, which is useful for debugging.

Create the setup function in the sketch.ino file with the following contents:

//...
void setup() {
  // Traffic lights
  pinMode(RED, OUTPUT);
  pinMode(YELLOW, OUTPUT);
  pinMode(GREEN, OUTPUT);

  // 7-segment display
  for (int i = 0; i < 7; i++) {
    pinMode(segmentPins[i], OUTPUT);
  }

  Serial.begin(9600);
}

Helper Functions

Before jumping into the loop function, you should create a couple of functions that handle certain tasks. You do this to make the logic in the main loop readable and modular.

The helper functions in this project include:

Traffic light control functions: The red_light(), red_yellow_light(), yellow_light(), and green_light() functions set the appropriate LEDs ON or OFF for their respective traffic phase.
7-segment display functions: The display() function shows a digit on the display, and the clearDisplay() function turns off all segments.

Add the following lines to the sketch.ino file:

//... 
void red_light() {
  digitalWrite(RED, HIGH);
  digitalWrite(YELLOW, LOW);
  digitalWrite(GREEN, LOW);
}

void red_yellow_light() {
  digitalWrite(RED, HIGH);
  digitalWrite(YELLOW, HIGH);
  digitalWrite(GREEN, LOW);
}

void yellow_light() {
  digitalWrite(RED, LOW);
  digitalWrite(YELLOW, HIGH);
  digitalWrite(GREEN, LOW);
}

void green_light() {
  digitalWrite(RED, LOW);
  digitalWrite(YELLOW, LOW);
  digitalWrite(GREEN, HIGH);
}

void display(int num) {
  if (num < 0 || num > 9) {
    clearDisplay();
    return;
  }

  for (int i = 0; i < 7; i++) {
    digitalWrite(segmentPins[i], digitMap[num][i] ? HIGH : LOW);
  }

  Serial.print("Countdown: ");
  Serial.println(num);
}

void clearDisplay() {
  for (int i = 0; i < 7; i++) {
    digitalWrite(segmentPins[i], LOW);
  }
}

In the red_light(), red_yellow_light(), yellow_light(), and green_light() functions, you set the state of red, yellow, and green LEDs for their respective traffic phase. The digitalWrite function is used to send either a HIGH(about 5V) or a LOW(0V) to the specified pin. A HIGH signal will turn on the LED, and a LOW signal will turn off the LED.

The display() function is responsible for displaying a particular digit on the 7-segment display. The function has a parameter num, which is an integer specifying the digit to be displayed. The display() function is written such that it prevents you from manually setting each segment anytime you want to update a digit.

The display() function operates as follows when called with an integer argument:

Firstly, it verifies if the value of num is within the valid range (0 to 9). If the value of num is less than 0 or greater than 9, the display is cleared using clearDisplay() and the function exits.
If the value of num is valid. The function loops through each 7-segment. Each segment is turned ON(HIGH) or OFF(LOW) based on the logic levels for the particular digit (num) specified by the digitMap array. The digitalWrite(segmentPins[i], digitMap[num][i] ? HIGH : LOW); line achieves that.

The clearDisplay() function turns OFF(LOW) all segments, and displays nothing on the 7-segment display.

Main Loop

The code in the loop() function is run repeatedly by the microcontroller. The loop() function is where you define the core logic of the traffic light simulation.

In this project, the loop() function consists of two separate loops, corresponding to two stages:

The STOP Stage: In the first stage, you begin the for loop from the value specified in DELAY_RED(9 seconds) to 1, with a -1 decrement. The red LED is turned ON for the "STOP" phase, and in the last 3 seconds of the countdown (DELAY_YELLOW), the red and yellow LEDs are turned ON for the "GET-READY" phase.
The GO Stage: In the second stage, you start the for loop from the value specified in DELAY_GREEN(9 seconds) to 1, with a -1 decrement. The green LED is turned ON for the "GO" phase, and in the last 3 seconds of the countdown(DELAY_YELLOW), the yellow LED is turned on for the "CAUTION" phase.

In both stages, the display() function displays the countdown number on the 7-segment, and each iteration pauses for 1 second (delay(1000)), so that the countdown updates every second.

Create the loop() function in the sketch.ino file, with the following contents:

//...
void loop() {
  // STOP PHASE
  for (int i = DELAY_RED; i > 0; i--) {
    if (i <= DELAY_YELLOW) {
      // RED/YELLOW TRANSITION
      red_yellow_light();
      display(i);
    } else {
      // RED LIGHT
      red_light();
      display(i);
    }
    delay(1000);
  }

  // GO PHASE
  for (int i = DELAY_GREEN; i > 0; i--) {
    if (i <= DELAY_YELLOW) {
      // YELLOW TRANSITION
      yellow_light();
      display(i);
    } else {
      // GREEN LIGHT
      green_light();
      display(i);
    }
    delay(1000);
  }
}

Final Code

After combining all the logic discussed above, the final code in the sketch.ino is:

const int RED = 4;
const int YELLOW = 3;
const int GREEN = 2;

const int DELAY_RED = 9;
const int DELAY_YELLOW = 3;
const int DELAY_GREEN = 9;

const int a = 12;
const int b = 13;
const int c = 5;
const int d = 6;
const int e = 7;
const int f = 11;
const int g = 10;

const bool digitMap[10][7] = {
  {1, 1, 1, 1, 1, 1, 0}, // 0
  {0, 1, 1, 0, 0, 0, 0}, // 1
  {1, 1, 0, 1, 1, 0, 1}, // 2
  {1, 1, 1, 1, 0, 0, 1}, // 3
  {0, 1, 1, 0, 0, 1, 1}, // 4
  {1, 0, 1, 1, 0, 1, 1}, // 5
  {1, 0, 1, 1, 1, 1, 1}, // 6
  {1, 1, 1, 0, 0, 0, 0}, // 7
  {1, 1, 1, 1, 1, 1, 1}, // 8
  {1, 1, 1, 0, 0, 1, 1}  // 9
};

const int segmentPins[7] = {a, b, c, d, e, f, g};

void setup() {
  // Traffic lights
  pinMode(RED, OUTPUT);
  pinMode(YELLOW, OUTPUT);
  pinMode(GREEN, OUTPUT);

  // 7-segment display
  for (int i = 0; i < 7; i++) {
    pinMode(segmentPins[i], OUTPUT);
  }

  Serial.begin(9600);
}

void loop() {
  // STOP PHASE
  for (int i = DELAY_RED; i > 0; i--) {
    if (i <= DELAY_YELLOW) {
      // RED/YELLOW TRANSITION
      red_yellow_light();
      display(i);
    } else {
      // RED LIGHT
      red_light();
      display(i);
    }
    delay(1000);
  }

  // GO PHASE
  for (int i = DELAY_GREEN; i > 0; i--) {
    if (i <= DELAY_YELLOW) {
      // YELLOW TRANSITION
      yellow_light();
      display(i);
    } else {
      // GREEN LIGHT
      green_light();
      display(i);
    }
    delay(1000);
  }
}

void red_light() {
  digitalWrite(RED, HIGH);
  digitalWrite(YELLOW, LOW);
  digitalWrite(GREEN, LOW);
}

void red_yellow_light() {
  digitalWrite(RED, HIGH);
  digitalWrite(YELLOW, HIGH);
  digitalWrite(GREEN, LOW);
}

void yellow_light() {
  digitalWrite(RED, LOW);
  digitalWrite(YELLOW, HIGH);
  digitalWrite(GREEN, LOW);
}

void green_light() {
  digitalWrite(RED, LOW);
  digitalWrite(YELLOW, LOW);
  digitalWrite(GREEN, HIGH);
}

void display(int num) {
  if (num < 0 || num > 9) {
    clearDisplay();
    return;
  }

  for (int i = 0; i < 7; i++) {
    digitalWrite(segmentPins[i], digitMap[num][i] ? HIGH : LOW);
  }

  Serial.print("Countdown: ");
  Serial.println(num);
}

void clearDisplay() {
  for (int i = 0; i < 7; i++) {
    digitalWrite(segmentPins[i], LOW);
  }
}

Simulation in Wokwi

Try the simulation on Wokwi

Physical Connection

If you have access to the components, I encourage you to replicate the project on a breadboard. The connections are the same as in the simulation, so you won't need to change the code.

Here is what my final setup looked like:

Conclusion

By following this tutorial, you built a complete traffic light simulation with a countdown timer using an Arduino and a 7-segment display. You configured digital outputs to control LEDs representing traffic lights and used a truth table approach to drive the 7-segment display dynamically. You also explored how traffic light phases operate in practice and simulated your design using Wokwi, with the option to replicate it physically on a breadboard.

Consider extending this system by using multiple 7-segment displays, using an LCD, or implementing multi-intersection traffic control with ultrasonic sensors. The possibilities are limitless—the core concepts you've applied here can serve as a springboard into more advanced embedded systems projects.

References

Electronics Tutorials – 7 Segment Display Tutorial
Sun Founder Docs – 7-Segment Display (UNO/Mega Kit)
Components101 – 7-Segment Display: Pinout, Working & Datasheet
Veygo – Traffic Lights: What They Mean and How to Respond

Implementing JWT Authentication with Express, MongoDB, and Passport.js

Michael Ikoko — Wed, 14 Aug 2024 00:17:07 +0000

Introduction

Secure authentication is a core concept in the development of modern web applications. Authentication is crucial in safeguarding user data and restricting access to certain resources. Authentication involves a series of processes that verify the identity of a user. There are various techniques of authentication, some include:

Basic authentication
API keys
OAuth 2.0
JWT (JSON Web Tokens)
OpenID Connect

Each technique listed above has pros and cons, refer to article for a detailed explanation.

This article will focus on using JWTs for authentication. According to the docs:

JSON Web Token (JWT) is an open standard (RFC 7519) that defines a compact and self-contained way for securely transmitting information between parties as a JSON object.

JWTs are widely used for authentication because of their simplicity and scalability. In this tutorial, you will implement JWT authentication in an Express.js application, using MongoDB and the Passport.js library. By the end of this tutorial, you will create an authentication system with user registration, login, token refresh, and a protected route. You will create the following endpoints:

POST /api/v1/auth/register: Registers a new user.
POST /api/v1/auth/token: Authenticate a user and return a JWT.
POST /api/v1/auth/token/refresh: Refreshes the JWT.
POST /api/v1/auth/whoami: Protected route, that retrieves the details of the authentication user.

Authentication Workflow

The diagram below shows the authentication workflow for the application created in this tutorial:

Prerequisites

Before proceeding with the tutorial, ensure you have the following:

You have Node.js and NPM installed on your computer.
Basic knowledge of Express.js and MongoDB.
You have Git installed on your computer.
A MongoDB instance that runs locally or remotely (e.g. MongoDB Atlas).
A code editor (e.g. VS Code).

Project Setup

For this tutorial, boilerplate code is available in the GitHub repository. Follow these steps to set up the boilerplate code for the application:

Run the command below to clone the repository:

git clone https://github.com/michaelikoko/express-passport-jwt-auth.git

Navigate to the starter directory:
```
cd express-passport-jwt-auth/starter
```
This is the folder structure for the starter directory:
Install the required dependencies:
```
npm install
```
Create a .env file in the current directory, and provide the application's port, MongoDB connection string, and the secret key used in signing tokens. The secret key is confidential and should be a random secure string. You can generate a secret key using OpenSSL:
```
openssl rand -base64 32 
```
The .env should look like this:
```
PORT=3000
MONGODB_URI=mongodb+srv://&lt;username>:&lt;password>@cluster1.menjafx.mongodb.net
SECRET=&lt;your-secret-key>
```
Run the development server:
```
npm run dev
```
In a web browser, navigate to http://localhost:3000/api/v1/docs/ (replace with the appropriate port number) to access the Swagger documentation. This is an interactive interface that you can use to test the application.

Creating The User Schema

With the boilerplate code all set, you will need to create the schema for the user model. The user schema will be created using the mongoose library, and will include the following fields:

email: The email field is unique to each user. It will function as the username.
password: This field will contain a hash of the user's password. Storing passwords as plain text in the database poses significant security risks. To learn more about password hashing, you can check out this article.
firstname: The user's first name.
lastname: The user's last name.

In the models/User.js file, input the following:

const  mongoose  =  require("mongoose");
const  uniqueValidator  =  require("mongoose-unique-validator");

const userSchema = new mongoose.Schema(
  {
    email: {
      type: String,
      required: true,
      unique: true,
      trim: true
    },
    password: {
      type: String,
      required: true,
      trim: true,
      unique: true
    },
    firstName: {
      type: String,
      required: true,
      trim: true,
      minLength: [3, 'First Name too short'],
      maxLength: [50, 'First Name too long']
    },
    lastName: {
      type: String,
      required: true,
      trim: true,
      minLength: [3, 'Last Name too short'],
      maxLength: [50, 'Last Name too long']
    },
  },
  { timestamps: true }
);

userSchema.set('toJSON', {
  transform: (document,returnedObject) => {
    returnedObject.id  =  returnedObject._id.toString()
    delete returnedObject._id
    delete returnedObject.__v
    delete returnedObject.password  //do not reveal password
    delete returnedObject.createdAt
    delete returnedObject.updatedAt
  }
})

userSchema.plugin(uniqueValidator)

module.exports  =  mongoose.model('User', userSchema)

Creating Refresh Token Schema

To improve security, JWT access tokens will be short-lived. When they expire, the client application can use a valid refresh token to get new access tokens. This prevents the user from having to log in every time the access token expires.

In this tutorial, refresh tokens will be stored in the database. This will allow you to securely track and manage issued refresh tokens.

The schema for the refresh token will contain the following fields:

token: The refresh token string. In this tutorial, it is a randomly generated UUIDv4 identifier.
user: This field references the id of the user assigned to the refresh token. It establishes a many-to-one relationship with the User model.
expiryDate: This field indicates when the refresh token will become invalid.

In the models/RefreshToken.js file, input the following:

const mongoose = require("mongoose");
const uniqueValidator = require("mongoose-unique-validator");
const refreshTokenSchema = new mongoose.Schema(
  {
    token: {
      type: String,
      required: true,
      unique: true,
      trim: true,
    },
    user: {
      type: mongoose.Schema.Types.ObjectId,
      ref: "User",
    },
    expiryDate: {
      type: Date,
      required: true,
    },
  },
  { timestamps: true }
);

refreshTokenSchema.plugin(uniqueValidator);

module.exports = mongoose.model("RefreshToken", refreshTokenSchema);

Configuring Passport.js

Passport.js is a well-known authentication library for Node.js. Passport.js is described in the docs as:

Simple, unobtrusive authentication for Node.js

Passport.js provides a set of different authentication strategies, such as JWT, and Oauth2, as well as social login using Google, Facebook, GitHub, and many more.

In this tutorial, you will configure the passport-jwt and passport-http strategies.

Install Passport

To make use of the Passport.js library, you need to first install passport and the passport-jwt and passport-http strategies:

npm install passport passport-jwt passport-http

Create Helper Functions

Before configuring Passport.js, you need to create helper functions for hashing and comparing passwords. As stated earlier in the article, a hash of the user's password will be saved in the database. The bcrypt library can be used to hash passwords.

Install bcrypt using:

npm install bcrypt

In the utils/helper.js file, input the following:


const bcrypt = require("bcrypt");
const saltRounds = 10;

async function hashPassword(password) {
  const salt = await bcrypt.genSalt(saltRounds);
  const passwordHash = await bcrypt.hash(password, salt);
  return passwordHash;
}

async function comparePassword(password, hashPassword) {
  return await bcrypt.compare(password, hashPassword);
}

module.exports = {
  hashPassword,
  comparePassword
};

Create Configuration File

In the middleware directory, create a file named passport.js. The file will contain the code necessary for configuring the authentication strategies. The middleware/passport.js file has the following content:

const passport = require("passport");
const PassportJWT = require("passport-jwt");
const PassportHttp = require("passport-http");
const config = require("../utils/config");
const User = require("../models/User");
const helper = require("../utils/helper");

const options = {
  jwtFromRequest: PassportJWT.ExtractJwt.fromAuthHeaderAsBearerToken(),
  secretOrKey: config.SECRET,
};

passport.use(
  new PassportJWT.Strategy(options, async (payload, done) => {
    try {
      const user = await User.findOne({ _id: payload.id });
      if (user) {
        return done(null, user);
      } else {
        return done(null, false);
      }
    } catch (error) {
      return done(error);
    }
  })
);

passport.use(
  new PassportHttp.BasicStrategy( async (userid, password, done) => {
    try {
      const user = await User.findOne({ email: userid });
      if (!user) {
        return done(null, false);
      }
      const isPasswordCorrect = await helper.comparePassword(password, user.password)
      if (!isPasswordCorrect) {
        return done(null, false);
      }
      return done(null, user);
    } catch (error) {
      return done(error);
    }
  })
);

module.exports = passport;

You start by requiring the passport library, passport-jwt strategy, passport-http strategy, the User schema, the helper functions, and the config object which reads the secret key set in the .env file.

JWT Strategy

To set up an authentication strategy, you pass the strategy instance into the passport.use() method. The passport-jwt strategy instance is constructed using:

new PassportJWT.Strategy(options, verify)

The constructor has two parameters:

options: The options parameter is an object that controls token extraction. The options have several properties, visit the docs for a comprehensive list. In this tutorial, you only made use of the two required object properties:
- secretOrKey: The value of the secretOrKey property is a string containing the secret key used for signing the token.
- jwtFromRequest: A function that accepts a request as a parameter, and extracts and returns the JWT. The passport-jwt strategy provides a couple of inbuilt extractors. To extract the token from the authorization header with the scheme 'bearer', you make use of the fromAuthHeaderAsBearerToken() extractor. Visit the docs for all included extractors.
verify: The verify parameter is a function with two parameters verify(payload, done):
- payload: An object that contains the decoded JWT payload.
- done: A passport error first callback function accepting arguments done(error, user, info).
In the verify function, you check if the id provided in the JWT payload matches any user in the database. This is done using User.findOne({ _id: payload.id }).

If the id belongs to a registered user, you call the done function with no error and the user details:
```
return  done(null, user);
```
If the id doesn't belong to a registered user in the database, you call the done function with no error, and a false value for the user:
```
return done(null, false);
```
If the search fails, and an error occurs, you call the done function with the corresponding value for the error:
```
return done(error);
```
When called successfully, the done function attaches the user's details to the request object.

Basic Strategy

Passport.js HTTP Basic authentication strategy verifies users using a user ID, which is an email in this tutorial, and a password. The passport-http strategy constructors require a verify callback function:

 new  PassportHttp.BasicStrategy(verify)

The verify callback function has three parameters:

userid
password
done

In the verify callback function, you check if the email provided belongs to a registered user. This is done using:

User.findOne({ email: userid })

If the user exists, you then compare the provided password to the stored hashed password. Here, you make use of the comparePassword helper function:

helper.comparePassword(password, user.password)

The done callback function is called appropriately.

Initialize Passport

After creating the configuration, you need to initialize Passport.js authentication modules as middleware in your main application file, app.js.

To initialize Passport.js as a middleware in your application, first require the passport library from the configuration file, /middleware/passport.js. Then, you make use of Passport's built-in middleware function:

 passport.initialize()

Modify the app.js file as follows:

// ...

//import middleware
// ...
const passport = require("./middleware/passport");
// ...

//middleware
// ...
app.use(passport.initialize());
// ...

User Registration Endpoint

In this part of the tutorial, you will create two endpoints:

GET /api/v1/auth: An endpoint that lists all users in the database.
POST /api/v1/auth/register: An endpoint that allows the registration of new users.

The boilerplate code has already taken care of routing, error handling using express-async-errors, and request body validation using express-validator. This means your main focus will be on the controller's logic.

To begin, require the User schema and the helper functions in the controllers/auth.js file:

const User = require("../models/User");
const helper = require("../utils/helper");
// ...

List Users

In the controllers/auth.js file, add the following lines of code to the listUsers function:


//...
async function listUsers(req, res) {
  const users = await User.find({}).exec();
  return res.status(200).json(users);
}
// ...

The listUsers function is pretty straightforward, it queries and returns all users in the database.

Create Users

The code for creating users is implemented in the createUser function. Edit the controllers/auth.js file as follows:

// ...
async function createUser(req, res) {
  const { email, firstName, lastName, password } = req.body;
  const passwordHash = await helper.hashPassword(password);
  const user = await User.create({
    email,
    firstName,
    lastName,
    password: passwordHash,
  });
  return res.status(201).json(user);
}
// ...

The createUser controller first extracts the email, firstName, lastName, and password from the request body. It then hashes the password provided using the helper.hashPassword function and creates a new user in the database.

Testing the User Registration Endpoint

You can navigate to http://localhost:3000/api/v1/docs/ (ensure the appropriate port number is used) to test the user registration endpoints using Swagger UI.

Creating a new user should appear as follows:

Testing the list user endpoint should show the user you created:

User Authentication Endpoint

In this step of the tutorial, you will create the user authentication endpoint. The /api/v1/auth/token endpoint allows users to log in to the application by verifying the credentials provided.

More Helper Functions

Before creating the login endpoint, you need to create three more helper functions:

issueAccessToken: This function generates and returns a signed JWT. The payload is passed as a parameter.

You can use the jsonwebtoken library to create JWTs. Install the jsonwebtoken library using:
```
npm install jsonwebtoken
```
createRefreshToken: This function creates a new refresh token. The user ID is passed as a parameter.

To generate a random UUIDv4 string as the token value, you can use the uuid library. Install the library using:
```
npm install uuid
```

verifyRefreshTokenExpiration: This function checks whether a given refresh token is expired.

Edit the utils/helper.js file as follows:

const bcrypt = require("bcrypt");
const jwt = require("jsonwebtoken");
const config = require("./config");
const { v4: uuidv4 } = require('uuid'); 
const RefreshToken = require("../models/RefreshToken");

const saltRounds = 10;

async function hashPassword(password) {
    // ...
}

async function comparePassword(password, hashPassword) {
// ...
}

function issueAccessToken(payload) {
    return jwt.sign(payload, config.SECRET, { expiresIn: 60 * 2}); //2 mins validity 
}

async function createRefreshToken(userId) {
    let expiryDate = new Date()
    expiryDate.setSeconds(60 * 60 *24) //24 hours validity 
    const token = uuidv4() 
    const refreshToken = await RefreshToken.create({
        token,
        user: userId,
        expiryDate: expiryDate.getTime()
    })
    return refreshToken.token
}

function verifyRefreshTokenExpiration (token) {
    return token.expiryDate.getTime() < new Date().getTime();
}

module.exports = {
    hashPassword,
    comparePassword,
    issueAccessToken,
    createRefreshToken,
    verifyRefreshTokenExpiration
};

Login Controller

The loginUser controller, in the controllers/auth.js file, contains the logic for the user authentication endpoint. Modify the controllers/auth.js file as shown below:

// ...
async function listUsers(req, res) {
    // ...
}

async function createUser(req, res) {
    // ...
}

async function loginUser(req, res) {
  const { email, password } = req.body; 
  const user = await User.findOne({ email });

  if (!user) {
    return res.status(401).json({ error: "Invalid Email" }); 
  }

  const isPasswordCorrect = await helper.comparePassword(
    password,
    user.password
  );

  if (!isPasswordCorrect) {
    return res.status(401).json({ error: "Invalid Password" });
  }

  const payload = {
    email: user.email,
    id: user.id,
  };

  const accessToken = helper.issueAccessToken(payload);
  const refreshToken = await helper.createRefreshToken(user.id);
  return res.status(200).json({
    accessToken,
    refreshToken,
  });
}
// ...

The loginUser controller extracts the login credentials, i.e. email and password from the request body. The function searches for the user in the database with the given email. If no user is found, it returns an error with the 401 Unauthorized status code.

The function proceeds to compare the password provided with the password hash stored in the database using the helper.comparePassword function earlier created. If the passwords don't match, it returns a 401 Unauthorized error, with the appropriate error message.

After the user has been successfully verified, the function creates the payload for the JWT. The payload will contain the user's email and id. It generates a JWT access token using the helper function issueAccessToken passing the payload as a parameter. It also generates a refresh token using the helper function issueRefreshToken. The loginUser controller then returns both tokens as a response.

Testing the User Authentication Endpoint

You can proceed to test the login endpoint using Swagger UI. Passing a valid email and password should give you a response like this:

Token Refresh

As mentioned earlier, access tokens will be short-lived and users will be able to get new access tokens using refresh tokens. This feature will allow users to maintain their authenticated sessions without having to log in again.

In this section, you will write the controller logic for implementing refresh tokens. Add the following code to the controllers/auth.js file:

// ...

const  RefreshToken  =  require("../models/RefreshToken");
async function listUsers(req, res) {
    // ...
}

async function createUser(req, res) {
    // ...
}

async function loginUser(req, res) {
    // ...
}

async function refreshToken(req, res) {
  const { refreshToken: refreshTokenUUID } = req.body; 
  const refreshToken = await RefreshToken.findOne({
    token: refreshTokenUUID,
  }).populate("user");

  if (!refreshToken) {
    return res.status(404).json({ error: "invalid refresh token" 
    });
  }

  const isExpired = helper.verifyRefreshTokenExpiration(refreshToken);

  if (isExpired) {
    await RefreshToken.findByIdAndDelete(refreshToken._id).exec();
    return res.status(403).json({ error: "Refresh token is expired" });
  }

  const payload = {
    email: refreshToken.user.email,
    id: refreshToken.user.id,
  };

  await RefreshToken.findByIdAndDelete(refreshToken._id).exec();
  const newAccessToken = helper.issueAccessToken(payload);
  const newRefreshToken = await helper.createRefreshToken(payload.id);

  return res.status(200).json({
    accessToken: newAccessToken,
    refreshToken: newRefreshToken,
  });
}

// ...

The refreshToken function first extracts the UUIDv4 refresh token passed by the user from the request body. It then searches the database for the token provided by the user. This is done using the RefreshToken.findOne method. The user data associated with the token is retrieved using the .populate("user") method. The user data will be necessary when creating the payload object for a new access token. If the refresh token does not exist in the database, an error with the 404 Not Found status is returned.

The refreshToken controller proceeds to check if the token is expired using the verifyRefreshTokenExpiration helper function. If the token is expired, it is deleted from the database, and an error with 403 Forbidden status is returned.

The function creates the payload object with the user's email and id.

The refresh token rotation technique helps to improve security. It ensures that refresh tokens can only be used once. To invalidate the refresh token after use, the refreshToken function deletes the old refresh token. The function generates a new access token and refresh token using the issueAccessToken and createRefreshToken helper functions. The function then returns the generated tokens to the client.

Testing the Token Refresh Endpoint

You can test the refresh token passing endpoint using Swagger UI. Passing a valid token should give a result that looks like this:

Protected Route

Protected routes are endpoints that can only be accessed by authenticated users. They can be crucial for securing sensitive information and restricting certain actions.

To test the authentication system you just built, you are going to create a protected route. In this tutorial, it is just going to be a simple route that returns the details of the authenticated user.

In the controllers/auth.js file, create the whoami controller function:


// ...

async function listUsers(req, res) {
    // ...
}

async function createUser(req, res) {
    // ...
}

async function loginUser(req, res) {
    // ...
}

async function refreshToken(req, res) {
    // ...
}

async function whoami(req, res) {
  return res.status(200).json(req.user);
}

//...

To use the Passport.js library to create protected routes, add the passport.authenticate middleware is to the route definition. Edit the routes/auth.js as follows:

// ...
const  passport  =  require("../middleware/passport");

//...
router
  .route("/whoami")
  .get(passport.authenticate(["jwt", "basic"], { session: false }), whoami);

module.exports = router;

In the passport.authenticate pass a list of the authentication strategies used as the first parameter. In this application, you made use of the JWT strategy and basic authentication. Therefore, you pass the list: [ "jwt", "basic"].

The { session: false } option tells Passport.js not to maintain a session. This is done because JWT authentication is stateless.

Testing the Protected Route

You can test the protected route using Swagger UI. First, log in to obtain a valid access user token using the /api/v1/auth/token endpoint. Then click on the “Authorize” button in the Swagger UI, pass the access token into the input box under “bearer Auth”, and click the “Authorize” button. This ensures that subsequent requests made with Swagger UI will have the token passed in the request header.

Testing the /api/v1/auth/whoami endpoint should look like this:

Conclusion

In this tutorial, you implemented JWT authentication in an Express.js application using the Passport.js library, and MongoDB.

You started by exploring the workflow for JWT authentication. You proceeded to create the necessary schemas. Furthermore, you configured the Passport.js library for both JWT and basic authentication. You also created the controller logic for user registration, user authentication, token refresh, and protected route endpoints. You also tested the endpoints using the Swagger UI interactive interface.

This article should give you a solid foundation for securing APIs built in Express.js using JWT and Passport.js. For further improvements, you should consider sending tokens as HTTP-only cookies, email verification for users, and password reset endpoint.

References

Server-Side Pagination with Express.js and MongoDB

Michael Ikoko — Wed, 26 Jun 2024 06:04:18 +0000

Introduction

When working with large datasets, various techniques are employed to optimize queries, enhance user experience, and improve performance. One of those techniques is Pagination. Pagination involves dividing large datasets into smaller, manageable subsets.

Pagination can be implemented in two ways:

Client-Side Pagination: In client-side pagination, the client application queries the entire dataset from the server, and pagination logic is handled in the browser. Client-side pagination is easy to implement for small datasets. Client-side pagination also prevents additional queries to the database.
Server-Side Pagination: In server-side pagination, the server returns a subset of the data at a time when queried. Server-side pagination reduces data load on the client and improves performance for large datasets by only fetching necessary data.

In this beginner-friendly tutorial, you’ll implement server-side pagination in Express.js and MongoDB. You’ll create a collection for storing movies in MongoDB and an API endpoint that retrieves data from a MongoDB collection. We’ll cover two methods in this tutorial:

Basic pagination implemented without the use of an external library.
Pagination using the mongoose-paginate-v2 library.

Prerequisites

To follow along with this tutorial, you'll need:

A code editor like Visual Studio Code or any code editor of your choice.
An API client such as Postman for testing your API endpoints.
Node.js installed on your computer.
Git is installed on your computer.
A MongoDB instance either locally or on the web using MongoDB Atlas.
Basic knowledge of Express.js.

Boilerplate Setup

To keep the article concise, I have created a boilerplate code that can be accessed here on GitHub. The boilerplate contains the basic setup for an Express.js application.

To get started with the tutorial:

Clone the repository: Firstly, clone the repository from GitHub using the following command:
```
git clone https://github.com/michaelikoko/Express-Pagination.git
```
Navigate to the project directory: The starter directory contains the boilerplate code. Navigate to the starter using the following command:
```
cd Express-Pagination/starter
```
The starter directory should have the following folder structure:
Install dependencies: Install the needed node dependencies, using any package manager you choose. For NPM run the following command:
```
npm install
```
Connect to MongoDB: Ensure you have a MongoDB instance running locally or on MongoDB Atlas. Create a .env file in the current directory, and provide the application port and database, as shown below:
```
PORT=5090
MONGODB_URI=mongodb+srv://<username>:<password>@cluster1.menjafx.mongodb.net/?retryWrites=true&w=majority
```

Create the Movie Schema: In the file models/Movie.js, define the Movie Schema:

const mongoose = require("mongoose");
const movieSchema = new mongoose.Schema(
  {
    title: {
      type: String,
      required: true,
      minLength: [2, "Movie title length is too short"],
      maxLength: [100, "Movie title length is too long"],
      trim: true,
    },
    director: {
      type: String,
      required: true,
    },
    genre: {
      type: String,
      required: true,
    },
    releaseYear: {
      type: Date,
    },
  },
  { timestamps: true }
);

module.exports = mongoose.model("Movie", movieSchema);

Populate the database: To make testing easier, populate the database with mock data contained in MOCK_DATA.json by running the script in the file populate.js:
```
npm run populate
```
Run the development server: To start the development server, input the following command in the terminal:
```
npm run server
```

Basic Pagination

In this section, we’ll implement basic pagination in Express.js and MongoDB without the use of any external library. We will create an API endpoint that retrieves a subset of movie records from the database based on the values of the specified query parameters. The routes have already been set up in the boilerplate code, so we’ll focus on the controller function. We will be working on the getMoviesCustom function, in the controllers/movies.js file.

We’ll use Movie.find cursor to fetch movies and the skip and limit methods for pagination.

skip: The skip method controls where MongoDB starts returning records. The skip method has only one parameter offset, which is the number of records to be skipped.
limit: The limit method defines the maximum amount of documents to be returned by MongoDB.

Two query parameters are required for basic pagination:

page: This parameter specifies the page to be returned. The page parameter defaults to 1 if not specified. To extract the page query parameter input the following in the getMoviesCustom function:
```
const page = parseInt(req.query.page, 10) || 1;
```
limit: This parameter specifies the number of movies to return per page. The limit parameter defaults to 10. To extract the limit query parameter input the following in the getMoviesCustom function:
```
const limit = parseInt(req.query.limit, 10) || 10;
```

We need to calculate the value of the offset variable. As explained earlier, the offset variable will be passed as the parameter to the skip method. It is calculated based on the requested page number and the number of documents per page. To do this, add the following line in the getMoviesCustom function:

  const offset = (page - 1) * limit;

Let’s assume we want 10 movies to be returned per page. Therefore, the limit variable will have a value equal to 10. The value for the offset variable will be calculated as follows:

For the first page, the page parameter has a value of 1. Therefore offset will have a value equal to 0. This means zero documents are skipped at the beginning.
For the second page, the page parameter has a value of 2. Therefore offset will have a value equal to the value of the limit, which is 10. This means the first 10 documents are skipped.
For the third page, the page parameter has a value of 3. Therefore offset will have a value equal to the value of 2*limit, which is 20. This means the first 20 documents are skipped.

Similar logic applies to subsequent pages.

To retrieve a subset of movie documents based on the calculated offset values and limit, add the following line to the getMoviesCustom function:

  const movies = await Movie.find().skip(offset).limit(limit).exec();

In our API response, we also want to return the following pieces of information:

totalItems: The total number of documents in the Movie collection. This is done using the countDocuments method. In the getMoviesCustom function, add the following line;
```
const totalItems = await Movie.countDocuments({});
```
totalPages: The total number of pages. This is done by dividing the total of documents (totalItems), by the number of documents per page (limit), and rounding off the nearest whole number. To calculate the total number of pages, in the getMoviesCustom function, add the following line:
```
const totalPages = Math.ceil(totalItems / limit);
```

Putting it all together, the getMoviesCustom controller function should look like this:

async function getMoviesCustom(req, res) {
  const page = parseInt(req.query.page, 10) || 1;
  const limit = parseInt(req.query.limit, 10) || 10;
  const offset = (page - 1) * limit;

  const movies = await Movie.find().skip(offset).limit(limit).exec();
  const totalItems = await Movie.countDocuments({});
  const totalPages = Math.ceil(totalItems / limit);

  return res.status(200).json({ totalItems, page, totalPages, movies });
}

Using the `mongoose-paginate-v2` Library

In this section, we’ll implement pagination using the mongoose-paginate-v2 library. An API route has already been created in the boilerplate code, so we’ll focus on the getMoviesLibrary controller function.

The mongoose-paginate-v2 is a pagination library for Mongoose. According to the docs:

The main usage of the plugin is you can alter the return value keys directly in the query itself so that you don't need any extra code for transformation.

To use mongoose-paginate-v2, we need to add the plugin to the schema and make use of the model paginate method. In the model/Movie.js file, make the following adjustments to the schema:

const mongoose = require("mongoose");
const mongoosePaginate = require("mongoose-paginate-v2");

const movieSchema = new mongoose.Schema(
  ...
);

movieSchema.plugin(mongoosePaginate);
module.exports = mongoose.model("Movie", movieSchema);

In the getMoviesLibrary controller function in controllers/movies.js, input the following code:

function getMoviesLibrary(req, res) {
  const { page, limit } = req.query;
  const options = {
    page: parseInt(page, 10),
    limit: parseInt(limit, 10),
  const movies = Movie.paginate({}, options).then((result) => {
    return res.status(200).json({
      totalItems: result.totalDocs,
      currentPage: result.page,
      totalPages: result.totalPages,
      movies: result.docs,
    });
  });
}  
};

The Model paginate method returns a promise, and has three parameters:

query: The query parameter is an object that states the condition for filtering documents. In our case, since we are returning all records, we pass an empty object {}.
options: The options parameter is an object that contains various properties that control how the data is paginated. Some of the object properties include:
- page: The current page number. It automatically defaults to 1 if no value is provided.
- limit: The number of documents per page. It automatically defaults to 10 if no value is provided. You can find a list of all the options object's properties in the documentation.
callback(err, result): The parameter is an optional function that gets executed when the pagination results are returned or there is an error in the query.

The Model paginate method returns an object after the promise is fulfilled. The properties of the returned object provide information about the paginated result. Some of the properties of the object include:

docs: An array of documents for the specified page that matches the query.
totalDocs: The total number of documents in the collection that match the query.
page: The current page number.
totalPages: The total number of pages based on the total documents and the limit.

Visit the documentation for the full list of the object properties.

The mongoose-paginate-v2 library provides the helper class PaginationParameters. The PaginationParameters class enables passing the entire request query parameter to the paginate method. This abstraction eliminates the need to declare the parameters individually in the controller function. To use the helper class, replace the content of getMoviesLibrary with the following:

function getMoviesLibrary(req, res) {
  Movie.paginate(...new PaginationParameters(req).get()).then((result) => {
    return res.status(200).json({
      totalItems: result.totalDocs,
      currentPage: result.page,
      totalPages: result.totalPages,
      movies: result.docs,
    });
  });
}

Testing the API

In this section, we’ll use Postman (or any other API client) to test the behavior of the endpoints. The two API endpoints created in the tutorial are:

/api/v1/movies/custom: This endpoint is routed to the getMoviesCustom controller, which contains the logic for our basic implementation of pagination.
/api/v1/movies/library: This endpoint is routed to the getMoviesLibrary controller, which contains the logic for our implementation of pagination using the mongoose-paginate-v2 library.

Any request made to both endpoints with the same query parameters should give the same results.

Let’s make the following requests:

Make a GET request to /api/v1/movies/customand /api/v1/movies/library. The page and limit parameters were not specified, so they should revert to their default values. The page parameter would have a value of 1, the limit parameter would have a value of 10, and a total of 3 pages. The result should look like this:
Make a GET request to /api/v1/movies/custom?page=2&limit=4 and /api/v1/movies/library?page=2&limit=4. The limit parameter has a value of 4 and the page parameter has a value of 2. The request should result in the API endpoint returning 4 documents. The response should indicate that the current page is 2 out of a total of 8 pages. (After populating the database with MOCK_DATA.json, there should be a total of 30 records). The result should look like this:

Conclusion

You now have a basic understanding of how to implement server-side pagination using Express.js and MongoDB. You created two endpoints, one for basic pagination and the other for pagination using the mongoose-paginate-v2 library.

You can explore additional query features to enhance your application, such as filtering and sorting. For further reading, check out the following resources:

Building a Trivia App with React and Open Trivia Database API

Michael Ikoko — Sun, 04 Feb 2024 11:38:42 +0000

Introduction

This is a beginner-friendly tutorial where you will utilize React and the Open Trivia Database API(Application Programming Interface) to create a trivia application.

This tutorial is valuable to readers at any skill level looking to enhance their proficiency in React and searching for a practical project to apply concepts in React.

In this tutorial, you will implement the following:

State management using React’s Context-API.
Client-side routing using React Router.
Data fetching from an external API using Axios and React-Query.

You will be well acquainted with the concepts listed above at the end of this tutorial.

Prerequisites

Prior knowledge of JavaScript and React is essential for this tutorial.
Node.js installed on your computer.
Access to a web browser for testing and previewing.
A text editor is necessary for writing and modifying code.
It is essential to have a basic knowledge of the React Router library.

Initializing the React Project

Initialize a React project using your preferred method. In this tutorial, you will use Vite and Node Package Manager(NPM).

In a terminal, type the following command:
```
npm create vite@latest
```
Select an appropriate name for the folder. (e.g. Trivia).
Select React as the framework.
Select Javascript as the variant.
Navigate into the project directory using the following command:
```
cd Trivia
```
Install dependencies using the command:
```
npm install
```
Install React Bootstrap using the following command:
```
npm install react-bootstrap bootstrap
```
Install Axios using the following command:
```
npm install axios
```
Install React Query using the following command:
```
 npm install react-query
```

At the end of the steps above, your package.json file should look similar to the image below.

Structuring the Project

In this section, you will establish a project layout to enhance code maintainability and organization. You will be creating two sub-directories inside the src folder, namely:

src/pages
src/components

The directory pages contain views for the different routes in the application. Each file in the pages directory contains a React component that renders a specific page in the application corresponding to a particular route. These components may include smaller modules from the components directory, contributing to a modular structure.

The components directory contains reusable and individual pieces of the user interface. Each file in the directory represents a component that serves as a building block contributing to the overall architecture of the user interface.

Your src directory should look similar to the image below.

State Management with React’s Context-API

createContext lets you create a context that components can provide or read.

In the project's root directory, create a QuizContext.jsx file. This file will contain reducer functions, context, and context provider. The QuizContext.jsx file should have the following content:

import { createContext, useReducer } from 'react'

const optionsReducer = (state, action) => {
  switch (action.type) {
  case 'SET_OPTIONS':
    return action.payload
  default:
    return state
  }
}

const scoreReducer = (state, action) => {
  switch(action.type) {
  case 'SET_SCORE':
    return action.payload
  case 'RESET_SCORE':
    return null
  default:
    return state
  }
}

const QuizContext = createContext()

export const QuizContextProvider = (props) => {
  const [options, optionsDispatch] = useReducer(optionsReducer, [])
  const [score, scoreDispatch] = useReducer(scoreReducer, null)

  return (
    <QuizContext.Provider value={[score, scoreDispatch, options, optionsDispatch]}>
      {props.children}
    </QuizContext.Provider>
  )
}

export default QuizContext

Let’s delve into the contents of the file. Two reducer functions are defined:

optionsReducer: The optionsReducer function is responsible for managing the options for each question.
scoreReducer: The scoreReducer function is responsible for managing the score. A Reducer function is responsible for managing and updating the state of the application based on the action type. A Reducer function is usually a switch statement. It takes the current state and specified action as parameters, and returns a new state based on the action.

The QuizContext is created using the createContext hook.

QuizContext.Provider is a context provider. It is a React component provided by the created context QuizContext, that shares the context values to its child components. The value prop of the provider contains an array with four elements: - score

scoreDispatch
options
optionsDispatch. These values represent the state and dispatch functions for the score and options state. {props.children} renders the children's components that are wrapped by this provider.

Finally, in the main.jsx file, enclose the App component with the Context Provider to integrate the context into your application actively.

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import 'bootstrap/dist/css/bootstrap.min.css'

import { QuizContextProvider } from '../QuizContext.jsx'

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
      <QuizContextProvider>
        <App />
      </QuizContextProvider>
  </React.StrictMode>
)

Setting up React Query

The React Query library is used for managing, caching, and synchronizing data in React applications. It provides a set of hooks that make it easy to fetch, update, and display data while handling various scenarios like caching, background fetching, and optimistic updates.

You will be editing the main.jsx file to set up React Query. To do this:

Initialize a new instance of the QueryClient. This instance manages the caching and state of queries in your React application. You should also set the refetchOnWindowFocus option to false to disable automatic fetching on window focus. By default, React Query automatically fetches queries when the user returns to the application window after it has lost focus.
Wrap the entire application using the QueryClientProvider, providing the configured queryClient to enable React Query functionality.

At the end of this, your main.jsx file should have the following content:

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import 'bootstrap/dist/css/bootstrap.min.css'

import { QuizContextProvider } from '../QuizContext.jsx'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      refetchOnWindowFocus: false, // default: true
    },
  },
})

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <QueryClientProvider client={queryClient}>
      <QuizContextProvider>
        <App />
      </QuizContextProvider>
    </QueryClientProvider>
  </React.StrictMode>
)

Making Requests

Create a file named requests.js in the src directory. This file provides a module that uses Axios to make requests from the Open Trivia Database. The file requests.js should have the following content:

import axios from 'axios'
const baseUrl = 'https://opentdb.com/api.php?amount=10&type=multiple'

export const getQuestions = ({ category, difficulty }) => {
  return axios
    .get(`${baseUrl}&difficulty=${difficulty}&category=${category}`)
    .then((res) => res.data)
}

export const categories = [
  { label: 'General Knowledge', value: 9 },
  { label: 'Entertaiment: Music', value: 12 },
  { label: 'Science and Nature', value: 17 },
  { label: 'Sports', value: 21 },
  { label: 'Geography', value: 22 },
]

export const difficulty = ['easy', 'medium', 'hard']

The getQuestions function is responsible for fetching trivia questions from the Open Trivia Database API. The function takes one parameter which is an object with two properties:

category: It specifies the category of questions. When making requests to the Open Trivia DB each category of questions is represented by a specific number.
difficulty: This parameter specifies the difficulty of the question. There are three difficulties available in the Open Trivia Database API, which are: easy, medium, and hard.

The getQuestions function returns a promise which when resolved returns the data gotten from the Open Trivia Database.

The categories variable is an array of objects. Each object in the array has two properties:

label: The label property represents the descriptive name of each category.
value: The value property represents the numeric identifier of each category used when making requests.

The difficulty variable is an array representing the three available difficulty levels.
Both the categories and difficulty arrays are exported and will be utilized in the form present on the menu page.

Creating Application Pages

In the App component, you'll set up the main structure of the React application using React Router.

Edit the file App.jsx with the following content:


import Navbar from './components/Navbar'
import Menu from './pages/Menu'
import Quiz from './pages/Quiz'
import Result from './pages/Result'
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'

const App = () => {
  return (
    <div className="bg-dark text-white" style={{ minHeight: '100vh' }}>
      <Navbar />
      <Router>
        <Routes>
          <Route path="/" element={<Menu />} />
          <Route path="/quiz/:category/:difficulty/" element={<Quiz />} />
          <Route path='/results' element={<Result />} />
        </Routes>
      </Router>
    </div>
  )
}

export default App

The code above defines the routes for different pages in the application and displays the corresponding components. The React Router library is responsible for routing, and the main structure of the application is set up in the App component.

The Navbar component will consistently appear at the top of the application and will be shared across all the pages in the application. To create the Navbar component, create the Navabar.jsx file in the src/component directory with the following code:

const Navbar = () => {
  return (
    <nav className="navbar bg-none">
      <div className="container">
        <a className="navbar-brand text-light fw-bolder fs-3" href="/">
          TRIVIA
        </a>
      </div>
    </nav>
  )
}

export default Navbar

It is a very simple navigation bar that just contains the name of the application, which when clicked routes to the home page.

The application comprises three pages:

Menu page.
Quiz page.
Result page.

Menu Page

The menu page is the homepage of the application, and its path is specified as: /. The path is routed to the Menu component. To create the component, create the file Menu.jsx in the src/pages directory with the following content:

import { useState } from 'react'
import { Form } from 'react-bootstrap'
import { useNavigate } from 'react-router-dom'
import { categories, difficulty } from '../requests'

const Menu = () => {
  const navigate = useNavigate()

  const [formData, setFormData] = useState({
    category: '',
    difficulty: '',
  })

  const selectCategory = (event) => {
    setFormData((prev) => ({
      ...prev,
      category: event.target.value,
    }))
  }

  const selectDifficulty = (event) => {
    setFormData((prev) => ({
      ...prev,
      difficulty: event.target.value,
    }))
  }

  const startQuiz = (event) => {
    event.preventDefault()
    //console.log(formData)
    navigate(`/quiz/${formData.category}/${formData.difficulty}/`)

  }

  return (
    <div className="container d-flex flex-column align-items-start justify-content-center w-100 py-5 text-white">
      <Form
        className="my-2 d-flex flex-column align-items-center justify-content-center"
        onSubmit={startQuiz}
      >
        <div>
          <div className="h3 my-3">Select Category</div>
          {categories.map((cat) => (
            <Form.Check
              key={cat.value}
              type="radio"
              id={`${cat.label}`}
              label={`${cat.label}`}
              name="category"
              onChange={selectCategory}
              value={cat.value}
            />
          ))}
        </div>

        <div>
          <div className="h3 my-3">Select Difficulty</div>
          {difficulty.map((option) => (
            <Form.Check
              key={option}
              type="radio"
              id={`${option}`}
              label={`${option}`}
              name="difficulty"
              className="text-capitalize"
              onChange={selectDifficulty}
              value={option}
            />
          ))}
        </div>

        <button
          className={`btn btn-primary w-100 my-3 ${
            formData.category === '' || formData.difficulty === ''
              ? 'disabled'
              : ''
          }`}
        >
          Submit
        </button>
      </Form>
    </div>
  )
}

export default Menu

The Menu component contains a form with two sections allowing users to select their preferred quiz category and difficulty level. Both sections utilize radio buttons, enabling users to make a single selection from the provided options. The categories and difficulty arrays, exported in src/requests.js are imported, and mapped to create the options for each section on the form.

The formData state manages the selected category and difficulty. The state variable is an object with two properties: category and difficulty, each representing the user's choices.

The functions selectCategory and selectDifficulty are event handlers that update the state variable formData when the users select a new category or difficulty.

The startQuiz function is the event handler clicks on the submission of the form. It navigates to the quiz page with the selected category as a URL parameter.

Quiz Page

The Quiz page displays the questions based on the category and difficulty selected by the user on the Menu page. It is specified by the path: “/quiz/:category/:difficulty/” and is routed to the Quiz component. In the src/pages directory, create the file Quiz.jsx with the following content:

import { useQuery } from '@tanstack/react-query'
import { useNavigate, useParams } from 'react-router-dom'
import { categories, getQuestions } from '../requests'
import { ProgressBar, Spinner } from 'react-bootstrap'
import { useContext, useState } from 'react'
import Question from '../components/Question'
import QuizContext from '../../QuizContext'

const Quiz = () => {
  const navigate = useNavigate()

  const [isAnswered, setIsAnswered] = useState(false)

  const { category, difficulty } = useParams()
  const [currentQuestion, setCurrentQuestion] = useState(0)

  const [score, scoreDispatch] = useContext(QuizContext)

  const nextQuestion = () => {
    setCurrentQuestion((prev) => prev + 1)
    setIsAnswered(false)
  }

  const finishQuiz = () => {
    if (score === null ){
      scoreDispatch({
        type: 'SET_SCORE',
        payload: 0
      })
    }
    setIsAnswered(false)
    navigate('/results')
  }

  const result = useQuery({
    queryKey: ['questions'],
    queryFn: () => getQuestions({ category, difficulty }),
  })

  //console.log(JSON.parse(JSON.stringify(result)))

  if (result.isLoading) {
    return (
      <div className='d-flex flex-column align-items-center justify-content-center my-5'>
        <Spinner animation='grow'/>
        <div className='my-2 fs-5 lead'>Loading questions ... </div>
      </div>
    )
  }

  if (result.error) {
    return (
      <div className='d-flex flex-column align-items-center justify-content-center my-5'>
        <div className='my-2 fs-5 lead'>An Error Occurred</div>
        <button
          className={`btn btn-primary align-self-end ${
            isAnswered === false && 'disabled'
          }`}
          onClick={nextQuestion}
        >
              Reload
        </button>
      </div>
    )
  }

  const questions = result.data.results

  return (
    <div className="text-white">
      <div className="container my-5">
        <div className="d-flex flex-column justify-content-start align-items-start">
          <div className="d-flex flex-row justify-content-between align-items-center w-100 my-2">
            <div className="bg-info p-2 rounded-1">
              {categories.find(cat => cat.value === Number(category)).label}
            </div>
            <div className="bg-warning p-2 rounded-1">
              {difficulty}
            </div>
          </div>
          <ProgressBar
            animated
            now={Math.round(((currentQuestion + 1) / 10) * 100)}
            className="w-100"
          />
          <span className="my-2">Question {currentQuestion + 1}/10</span>
        </div>
        <div className="my-4 d-flex flex-column justfy-content-center">
          <Question
            question={questions[currentQuestion]}
            setIsAnswered={setIsAnswered}
            isAnswered={isAnswered}
          />
          {questions.length === currentQuestion + 1 ? (
            <button
              className={`btn btn-primary align-self-end ${
                isAnswered === false && 'disabled'
              }`}
              onClick={finishQuiz}
            >
              Finish
            </button>
          ) : (
            <button
              className={`btn btn-primary align-self-end ${
                isAnswered === false && 'disabled'
              }`}
              onClick={nextQuestion}
            >
              Next
            </button>
          )}
        </div>
      </div>
    </div>
  )
}

export default Quiz

The Quiz component is responsible for rendering the quiz interface, navigating between questions, and manages the user’s response to each question.

In the Quiz component the category and difficulty selected from the form in the Menu page are retrieved from the URL parameters using React router’s useParams() function. The questions are fetched from the Open Trivia Database API using the useQuery() hook from the ReactQuery library. The queryFn property specifies the function responsible for data fetching. The value of the queryFn property is an anonymous arrow function that invokes the getQuestions function from src/requests.js passing the object containing the category and difficulty passed as the function parameter. The query result is saved in the variable result. The result variable is an object that holds information about the loading state, error state, and the data returned from the query function call.

The property result.isLoading has a true value during the query’s progress. During this period, a Spinner animation is displayed, to indicate the loading status.

The property result.error has a true value if an error occurs and the query is unsuccessful.

Upon a successful query, the fetched data is extracted from result.data.results and saved to the questions variable.

The Question component is responsible for rendering each quiz question, including the options, and handling user interactions. In the src/components directory, create the file Question.jsx with the following content:

import { useContext, useEffect, useState } from 'react'
import QuizContext from '../../QuizContext'

const shuffle = (array) => {
  return array.sort(() => Math.random() - 0.5)
}

const Question = ({ question, setIsAnswered, isAnswered }) => {
  const [selectedOption, setSelectedOption] = useState('')

  const [score, scoreDispatch, options, optionsDispatch] = useContext(QuizContext)

  useEffect(() => {
    const shuffledOptions = shuffle([
      question.correct_answer,
      ...question.incorrect_answers,
    ])
    optionsDispatch({
      type: 'SET_OPTIONS',
      payload: shuffledOptions,
    })
  }, [question])

  const selectOption = (opt) => {
    setSelectedOption(opt)
    if (opt === question.correct_answer) {
      scoreDispatch({
        type: 'SET_SCORE',
        payload: score + 1,
      })
    }
    setIsAnswered(true)
  }

  const displayedOptions = options
  return (
    <div>
      <div>
        <div className="fs-4 fw-bold lead">
          <div dangerouslySetInnerHTML={{ __html: question.question }} />
        </div>
        <div className="list-group my-3">
          {isAnswered
            ? displayedOptions.map((opt, i) => (
              <button
                key={i}
                type="button"
                className={`list-group-item list-group-item-action my-1 rounded-pill disabled ${
                  opt === question.correct_answer && 'bg-success border border-success text-white'
                } ${
                  opt === selectedOption &&
                    opt !== question.correct_answer &&
                    'bg-danger border border-danger text-white'
                }`}
                disabled
                onClick={() => selectOption(opt)}
              >
                <div dangerouslySetInnerHTML={{ __html: opt }} />
              </button>
            ))
            : displayedOptions.map((opt, i) => (
              <button
                key={i}
                type="button"
                className="list-group-item list-group-item-action my-1 rounded-pill"
                onClick={() => selectOption(opt)}
              >
                <div dangerouslySetInnerHTML={{ __html: opt }} />
              </button>
            ))}
        </div>
      </div>
    </div>
  )
}

export default Question

The Question component receives three props:

question: An object containing the question, the correct option, and the incorrect options. A typical question object looks like this:

            {
      "type": "multiple",
      "difficulty": "easy",
      "category": "Sports",
      "question": "Which player holds the NHL record of 2,857 points?",
      "correct_answer": "Wayne Gretzky",
      "incorrect_answers": [
        "Mario Lemieux ",
        "Sidney Crosby",
        "Gordie Howe"
      ]

isAnswered: A state variable that tracks whether each question has been answered. This variable is declared in the Quiz component.
setIsAnswered: The function responsible for editing the isAnswered variable.

Using the Fisher-Yates algorithm, the shuffle function takes an array and shuffles its elements. The function declared in the useEffect hook calls the shuffle function, and saves the shuffled options to state using the optionsDispatch function, each time the question prop changes. This ensures the options are randomized each time a new question is rendered.

The selectOption function is called when an option is clicked. It updates the state variable selectedOption with the option selected. The function checks if the selected option is correct and updates the score appropriately. It sets the isAnswered state to true to indicate the question has been answered.

Each option is rendered as a button when the question is unanswered, i.e., isAnswered state is false.

When the question is answered, i.e., the isAnswered state variable is true, the correct option is highlighted green. If the incorrect option is selected, it is highlighted in red. All the buttons are disabled to prevent clicking an option twice.

`Results Page`

The results page displays the results of the quiz taken by the user. It is specified by the path: ‘/results’ and is routed to the Result component. In the src/pages directory, create the file Result.jsx with the following content:

import { useContext, useEffect, useState } from 'react'
import QuizContext from '../../QuizContext'
import { useNavigate } from 'react-router-dom'

const Result = () => {
  const [highscore, setHighScore] = useState(localStorage.getItem('highScore'))
  const [score, scoreDispatch] = useContext(QuizContext)
  const navigate = useNavigate()

  useEffect(() => {
    if (score === null) {
      navigate('/')
    } else if (score > highscore) {
      setHighScore(score)
      localStorage.setItem('highScore' ,JSON.stringify(score))
    }
  }, [])

  const goToMainMenu = () => {
    scoreDispatch({
      type: 'RESET_SCORE',
    })
    navigate('/')
  }

  const retakeQuiz = () => {
    scoreDispatch({
      type: 'RESET_SCORE',
    })
    navigate(-1)
  }

  const scorePercentage = Math.round((score / 10) * 100)
  const highScorePercentage = highscore === null ? 0 : Math.round((highscore / 10) * 100)

  return (
    <div className="container d-flex flex-column align-items-center justify-content-center my-5">
      <div className="h3">RESULT</div>
      <div
        className={`${
          scorePercentage > 40 ? 'bg-success' : 'bg-danger'
        } my-2 w-100 p-3 rounded-pill text-center`}
      >
        You scored {score} out of {10} ({scorePercentage}%)
      </div>
      <div className="my-2">Highscore: {highscore || 0} ({highScorePercentage}%)</div>
      <div className="d-flex flex-row align-items-center justify-content-center my-3 w-100 ">
        <button className="btn btn-info w-25 mx-3" onClick={goToMainMenu}>
          Main Menu
        </button>
        <button className="btn btn-info w-25 mx-3" onClick={retakeQuiz}>
          Retake Quiz
        </button>
      </div>
    </div>
  )
}

export default Result

The Result component is responsible for displaying the quiz results updating and displaying the high score.

The highscore state variable stores the high score. Its initial value when the component is rendered is gotten from a previously saved value in the local storage. If the high score value from the local storage is unavailable, the state variable has a value of null.

The user’s score from the already concluded test is gotten from the context using the useContext() hook.

The function in the useEffect hook in the Results component runs only once when the page loads as there are no dependencies. The function first checks if there’s a value for the score state. The score state will have a value of null if the quiz wasn’t taken, which happens when the user navigates to the results page directly. If the score state has a value of null, the application navigates to the homepage using the useNavigate hook. The function then checks if the score value is higher than the highscore. If the condition is true, it updates the highscore state accordingly and saves the high score to local storage.

The Results component provides two navigation buttons labeled as:

Retake Quiz: This button calls the retakeQuiz function when clicked. The retakeQuiz function resets the user’s score and navigates back to the previous page. This effectively allows the user to retake the quiz with the previously selected category and difficulty.
Main Menu: This button calls the goToMainMenu function when clicked. This function resets the user’s score and navigates to the main menu.

Conclusion

At the end of this article, you've built an interactive quiz app using React. Through state management and React Router, you've created a seamless and engaging experience. The application includes features like category and difficulty selection, real-time feedback, and high-score tracking.

Explore the live version here and the code on GitHub here.

References

Using json-server to create a mock back-end for front-end development

Michael Ikoko — Thu, 26 Oct 2023 15:49:15 +0000

Front-end development entails retrieving data from external sources, such as an API, and displaying it on the user interface.
During development, front-end developers are often in a situation where they need to interact with a back-end API, but it is not fully implemented, or readily available. In a situation like this, a mock back-end is extremely usefully.

In this article, we'll consider a tool used for creating mock API called 'JSON server'. We'll build a phonebook application, where we'll perform basic crud operations on the mock server, such as:

Creating new contacts.
Fetching contacts from the phonebook.
Deleting contacts.

Prerequisites

Knowledge of JavaScript and React.
Knowledge of basic operations done using a terminal
A web browser.
Node.JS installed on your computer.
A text editor (preferably VS Code).

A brief overview of json-server

JavaScript Object Notation(JSON) is a text-based format used for structuring data (based on JavaScript object syntax) and exchanging data in web applications. JSON-Server is a tool that creates a mock back-end. It simulates a REST API, with little to no coding in less than a minute.

Why use json-server

Here are several using for using json-server:

Rapid Development: json-server allows you to create a mock back-end quickly. You don't need to set up a full-fledged back-end server or database, making it ideal for prototyping and development in the early stages of a project.
Prototyping: It's an excellent choice for rapidly prototyping applications. You can define your data structure and API endpoints without worrying about setting up a full back-end system.
Isolated Development: It allows you to work on different components of an application in isolation. Front-end and back-end development can progress independently, provided they adhere to the defined API contract.

Create a phonebook application using json-server and React

This section shows how you can practically use json-server. In this section, you will build a phonebook application. The back-end will be mocked using json-server, and the front-end will be created using React. Here's a look at what we'll be building.

Create React application

Firstly, create a React application. You can bootstrap a React application using either Vite or Create React App. To create a React application using Vite and Node Package Manager(NPM):

Type the following command into a terminal npm create vite@latest.
Choose an appropriate project name, e.g phonebook.
Choose React as the framework.
Select JavaScript as the variant.

As shown on the terminal after successfully bootstraping using Vite:

Navigate to the project folder, using cd phonebook.
Install the dependencies using the command npm install

This tutorial will be using React-Bootstrap, and Bootstrap for styling. Although, you can use any styling framework of your preference. To install React-Bootstrap, type the following command into the terminal: npm install react-bootstrap bootstrap

Axios will be used for handling HTTP requests to the server. Install axios using the following command: npm install axios

Setting up json-server

You can install json-server globally using the following command: npm install -g json-server. A global installation is not needed, so to install json-server as a development dependency, use the following command npm install --save-dev json-server

At the root of the project directory, create a db.json file with the following data:

{
  "contacts": [
    {
      "name": "Emma Smith",
      "number": "555-123-4567",
      "id": 1
    },
    {
      "name": "Liam Johnson",
      "number": "555-234-5678",
      "id": 2
    },
    {
      "name": "Olivia Brown",
      "number": "555-345-6789",
      "id": 3
    },
    {
      "name": "Noah Davis",
      "number": "555-456-7890",
      "id": 4
    },
    {
      "name": "Ava Wilson",
      "number": "555-567-8901",
      "id": 5
    }
  ]
}

Start the server using the following command: json-server --watch db.json. By default, the server runs on port 3000.
We can define an alternate port using the --port flag : json-server --port 3001 --watch db.json
The --watch flag looks for a file changes made to the db.json file.

Save the command for starting the server as a script in package.json:

{
    //...
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview",
    "server": "json-server -p3001 --watch db.json"
  },
 }

You can now start the server at the root of the project directory with the following command: npm run server
If you navigate to the address http://localhost:3001/contacts on the browser, you will see the data written to the db.json file displayed in JSON format.

JSON Server automatically saves changes made by PUT, POST, PATCH, or DELETE request to the db.json file.

JSON Server defines routes based on the data provided in the db.json file. Here are the default routes, based on the contents of the phonebook application:

GET /contacts
GET /contacts/1
POST /contacts
PUT /contacts/1
PATCH /contacts/1
DELETE /posts/1

Building the application

Remove the default App.css and the index.css files created by Vite from the src directory.

Create services folder

Extract the code for interacting with the external API into a separate folder called services. This helps in cleaning up the code. In the src directory, create the services folder, add a file there called contact.js, with the following content:

import axios from 'axios'
const baseUrl = 'http://localhost:3001/contacts'

const getAll = async () => {
  const response = await axios.get(baseUrl)
  return response.data
}

const addContact = async (contact) => {
  const response = await axios.post(baseUrl, contact)
  return response.data
}

const deleteContact = async (id) => {
  const response = await axios.delete(`${baseUrl}/${id}`)
  return response.data
}

export default { getAll, addContact, deleteContact }

Manage state using useReducer

This tutorial makes use of React's inbuilt useReducer hook, and the Context API to access and manage the state of the application globally.
To do this:

Create a file at the root of the project directory called ContactsContext.jsx.
In the ContactsContext.js, create the reducer function that will be responsible for handling state changes.
Create the context ContactsContext using React's createContext hook.
Create and export the context provider, ContactsContext.Provider.

import { createContext, useReducer } from 'react'

const contactsReducer = (state, action) => {
  switch (action.type) {
  case 'SET_CONTACTS':
    return action.payload
  case 'ADD_CONTACT':
    return [...state, action.payload]
  case 'REMOVE_CONTACT':
    return state.filter(contact => contact.id !== action.payload.id)
  default:
    return state
  }
}

const ContactsContext = createContext()

export const ContactsContextProvider = (props) => {
  const [contacts, contactsDispatch] = useReducer(contactsReducer, [])

  return (
    <ContactsContext.Provider value={[contacts, contactsDispatch]}>
      {props.children}
    </ContactsContext.Provider>
  )
}

export default ContactsContext

In main.jsx file, wrap the Contacts.Context.Provider around the App component.

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import { ContactsContextProvider } from './ContactsContext.jsx'

import 'bootstrap/dist/css/bootstrap.min.css'

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <ContactsContextProvider>
      <App />
    </ContactsContextProvider>
  </React.StrictMode>
)

Fetching and rendering contacts, and deleting contacts

An important part of this application is fetching contacts from the server, and displaying them on the browser. To do this, create a folder in the src directory called components. In the components folder create the component 'Contacts.jsx:

import { useContext } from 'react'
import contactServices from '../services/contacts'
import ContactsContext from '../ContactsContext'

const Contacts = () => {
  const [contacts, dispatch] = useContext(ContactsContext)

  const deleteContact = async (id) => {
    const response = await contactServices.deleteContact(id)
    dispatch({
      type: 'REMOVE_CONTACT',
      payload: { id },
    })
  }

  return (
    <div className="my-4">
      <table className="table table-striped table-bordered">
        <thead>
          <tr>
            <th scope="col">Contact Name</th>
            <th scope="col">Contact Number</th>
            <th scope="col"></th>
          </tr>
        </thead>
        <tbody className="table-group-divider">
          {contacts.map((contact) => (
            <tr key={contact.id}>
              <td>{contact.name}</td>
              <td>{contact.number}</td>
              <td>
                <button
                  type="button"
                  className="btn btn-danger"
                  onClick={() => deleteContact(contact.id)}
                >
                  Delete
                </button>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  )
}

export default Contacts

Creating new contacts

Create a ContactForm.jsx file in the already created components directory. This component is responsible for creating new contacts.

import { useContext, useState } from 'react'
import { Button, Form, Modal } from 'react-bootstrap'
import contactServices from '../services/contacts'
import ContactsContext from '../ContactsContext'

const ContactForm = ({ show, handleClose }) => {
  const [contacts, dispatch] = useContext(ContactsContext)

  const [name, setName] = useState('')
  const [number, setNumber] = useState('')

  const addContact = async (event) => {
    event.preventDefault()
    const response = await contactServices.addContact({ name, number })
    dispatch({
      type: 'ADD_CONTACT',
      payload: response,
    })
    setName('')
    setNumber('')
    handleClose()
  }

  const handleNameChange = (event) => setName(event.target.value)
  const handleNumberChange = (event) => setNumber(event.target.value)

  return (
    <Modal show={show} onHide={handleClose}>
      <Modal.Header closeButton>
        <Modal.Title>Add Contact</Modal.Title>
      </Modal.Header>
      <Modal.Body>
        <Form onSubmit={addContact}>
          <Form.Group className="mb-3" controlId="formBasicName">
            <Form.Label>Name</Form.Label>
            <Form.Control
              type="text"
              placeholder="Enter Contact Name"
              value={name}
              onChange={handleNameChange}
            />
          </Form.Group>

          <Form.Group className="mb-3" controlId="formBasicNumber">
            <Form.Label>Number</Form.Label>
            <Form.Control
              type="text"
              placeholder="Enter Contact Number"
              value={number}
              onChange={handleNumberChange}
            />
          </Form.Group>

          <Button variant="primary" type="submit">
            Submit
          </Button>
        </Form>
      </Modal.Body>
    </Modal>
  )
}

export default ContactForm

Bringing it all together

In the App.jsx component:

import { useContext, useEffect, useState } from 'react'
import contactServices from './services/contacts'
import ContactsContext from './ContactsContext'

import ContactForm from './components/ContactForm'
import Contacts from './components/Contacts'

const App = () => {
  const [contacts, dispatch] = useContext(ContactsContext)

  const [showContactForm, setShowContactForm] = useState(false)
  const handleCloseContactForm = () => setShowContactForm(false)
  const handleShowContactForm = () => setShowContactForm(true)

  useEffect(() => {
    const getContacts = async () => {
      const response = await contactServices.getAll()
      dispatch({
        type: 'SET_CONTACTS',
        payload: response,
      })
    }
    getContacts()
  }, [dispatch])


  return (
    <>
      <ContactForm
        handleClose={handleCloseContactForm}
        show={showContactForm}
      />

      <nav className="navbar bg-dark">
        <div className="container">
          <a className="navbar-brand text-light" href="#">
            PhoneBook
          </a>
        </div>
      </nav>
      <div className="container py-4">
        <button
          type="button"
          className="btn btn-primary"
          onClick={handleShowContactForm}
        >
          Add New
        </button>
        <Contacts />
      </div>
    </>
  )
}

export default App

Conclusion

This article provided an introduction into json-server, and its importance in front-end web development.

The tutorial showed you how to use json-server to create a mock back-end by building a phonebook application.

Check out the full code used for this tutorial here

Digit	a	b	c	d	e	f	g
0	1	1	1	1	1	1	0
1	0	1	1	0	0	0	0
2	1	1	0	1	1	0	1
3	1	1	1	1	0	0	1
4	0	1	1	0	0	1	1
5	1	0	1	1	0	1	1
6	1	0	1	1	1	1	1
7	1	1	1	0	0	0	0
8	1	1	1	1	1	1	1
9	1	1	1	1	0	1	1

Digit	a	b	c	d	e	f	g
0	1	1	1	1	1	1	0
1	0	1	1	0	0	0	0
2	1	1	0	1	1	0	1
3	1	1	1	1	0	0	1
4	0	1	1	0	0	1	1
5	1	0	1	1	0	1	1
6	1	0	1	1	1	1	1
7	1	1	1	0	0	0	0
8	1	1	1	1	1	1	1
9	1	1	1	1	0	1	1

Forem: Michael Ikoko

Building a Traffic Light Simulator with a Countdown using Arduino and a 7-Segment Display

Introduction

Prerequisites

Circuit Design

Connecting the LEDs

Understanding the 7-Segment Display

The Common Cathode (CC)

Truth Table for Common Cathode 7-Segment Display

The Common Anode (CA)

Connecting the 7-segment Display

Traffic Light Phases

Arduino Code

Pin Configuration

Timing Constants

7-Segment Display Truth Table Array

The setup Function

Helper Functions

Main Loop

Final Code

Simulation in Wokwi

Physical Connection

Conclusion

References

Implementing JWT Authentication with Express, MongoDB, and Passport.js

Introduction

Authentication Workflow

Prerequisites

Project Setup

Creating The User Schema

Creating Refresh Token Schema

Configuring Passport.js

Install Passport

Create Helper Functions

Create Configuration File

JWT Strategy

Basic Strategy

Initialize Passport

User Registration Endpoint

List Users

Create Users

Testing the User Registration Endpoint

User Authentication Endpoint

More Helper Functions

Login Controller

Testing the User Authentication Endpoint

Token Refresh

Testing the Token Refresh Endpoint

Protected Route

Testing the Protected Route

Conclusion

References

Server-Side Pagination with Express.js and MongoDB

Introduction

Prerequisites

Boilerplate Setup

Basic Pagination

Using the mongoose-paginate-v2 Library

Testing the API

Conclusion

Building a Trivia App with React and Open Trivia Database API

Introduction

Prerequisites

Initializing the React Project

Structuring the Project

State Management with React’s Context-API

Setting up React Query

Making Requests

Creating Application Pages

Menu Page

Quiz Page

Results Page

Conclusion

References

Using json-server to create a mock back-end for front-end development

Prerequisites

A brief overview of json-server

Why use json-server

Create a phonebook application using json-server and React

Create React application

The `setup` Function

Using the `mongoose-paginate-v2` Library

`Results Page`

Digit	a	b	c	d	e	f	g
0	1	1	1	1	1	1	0
1	0	1	1	0	0	0	0
2	1	1	0	1	1	0	1
3	1	1	1	1	0	0	1
4	0	1	1	0	0	1	1
5	1	0	1	1	0	1	1
6	1	0	1	1	1	1	1
7	1	1	1	0	0	0	0
8	1	1	1	1	1	1	1
9	1	1	1	1	0	1	1