DEV Community: Hesbon limo

Setting up (vite+react) project with shadcn ui.

Hesbon limo — Fri, 10 Oct 2025 09:10:30 +0000

Introduction

while trying to set app my vite react app with shadcn, I realised that the official documentation for shadcn UI had only configuration for typescript while that for react was not there. This forced me to troubleshoot and find a solution and this is what I am going to share in this tutorial.

1 Creating vite project and adding tailwindCSS

In the terminal write this command to create a new react app using vite.

npm create vite@latest

To add tailwind CSS run this command.

npm install tailwindcss @tailwindcss/vite

2 Setting app files.

2.1 index.css

Replace everything in the src/index.css

 @import "tailwindcss";

2.2 jsconfig.json

Note that in that in your vite app this file is missing so you have to create it by using the following command in the terminal.

 touch jsconfig.json

paste the code below in your jsconfig.json file.

 {
  "files": [],
  "references": [
    {
      "path": "./tsconfig.app.json"
    },
    {
      "path": "./tsconfig.node.json"
    }
  ],
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

2.3 Vite.config.js

Remove all the code in the vite.config.js and paste the one below.

 import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite' 
import path from "path"

// https://vite.dev/config/
export default defineConfig({
   plugins: [react(), tailwindcss()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
})

3 Setting up Shadcn.

Run the following command to set up shadcn in your project,

 npx shadcn@latest init

You will be asked a question to configure components.json

Which color would you like to use as base color? › Neutral

4 Adding components to your project

You can now start adding components to your project.
Let's add a button component to the project using the following command.

npx shadcn@latest add button

You can now import the component in the app.js like this.

import { Button } from "@/components/ui/button"

function App() {
  return (
    <div className="flex min-h-svh flex-col items-center justify-center">
      <Button>Click me</Button>
    </div>
  )
}

export default App

Now run, npm run dev and your output should look like this in your browser

Conclusion

This tutorial covers how to set up shadcn with a vite react app. I hope this tutorial was helpful. If you have any feedback feel free to reach out to me at limohesbon7@gmail.com.

Understanding File I/O in Python: Reading, Writing, and Managing Files

Hesbon limo — Mon, 17 Feb 2025 14:20:37 +0000

Introduction

In most programs, we store data temporarily in the code editor, but the data is lost as soon as we exit the program. Let's consider data stored in a list, for example. Once we close the program, all the data in the List is lost.

With file io, we can read from, that is, load data from a file or write to, that is, save data into a file, ensuring that data persists even after ending the program.

The advantages of file I/O

Simple and easy to understand hence, it can be used by both experienced and junior developer
It supports various file formats therefore. It provides flexibility in working with different file formats.
Python provides many built-in functions for file I/O, hence reducing the need for using external libraries, which are not reliable sometimes.
Python file I/O provides functionality for error handling.

Disadvantages of file I/O

It does not provide perform well for large files compared to low-level languages like C and C#.
It consumes memory space, which can lead to memory issues in memory-constrained environments.
Python file I/O has limited concurrency hence, it is less suitable for highly parallel tasks.

Practical uses of file I/O in Python

File I/O is fundamental for storing and retrieving data in applications and databases. It's used in automating tasks such as report generation and data transformation in big data.

Additionally, it's used when handling downloads and uploads in web development.

File modes

File modes are used to perform different tasks, such as reading and appending files. Here are some of the common modes:

'+': Update mode.Used to open a file for both reading and writing.
'a': Append mode. Opens the file for appending.
'b': Binary mode. Used when dealing with files in the binary mode.
'r': Read mode. Opens the file for reading.

- `'w'`: Writing mode. Opens the file for writing.

Opening and writing files

The open function in Python is used to open a file in Python for reading or writing. Let's write a program that opens a file, allows the user to enter data, and finally saves.

cars= input("what is the model of your car?")

file= open('cars.txt','w')
file.write(f'{cars}\n')
file.close()

In the code above, we are declaring a variable called cars used to store the input of the car model. We then open a file called cars.txt with the writing mode. Finally, we save the file by closing. The code above works perfectly, but the problem is that even though we write as many car models as we want, we will get only the last value. This is because the write mode overwrites the previous entry.

Now, let's solve the problem by writing a program that uses the append file mode.

cars= input("what is the model of your car?")

file= open('cars.txt','a')
file.write(f'{cars}\n')
file.close()

Let's add three models of cars, that is, Mazda, Honda, and Subaru, and see the output.

mazda
honda
subaru

The cars.txt file looks like the one above. Hence, our problem is solved.

Reading from files

Now let's see how we can read from files:

with open("cars.txt", "r") as file:
    lines = file.readlines()

for line in lines:
    print(f"My car is a, {line.rstrip()}")

The readlines method reads all the lines from the file and stores them in a list, while the rstrip method removes extra newline characters.

The output looks like the one below:

My car is a, mazda
My car is a, honda
My car is a, subaru

We can further simplify the code by reading line by line using rstrip without readlines.

with open("cars.txt", "r") as file:
    for line in file:
        print(f"My car is a, {line.rstrip()}")

The output from the terminal is the same as the previous one.

Let's move on and sort the names of the cars before printing.

cars = []

with open("cars.txt", "r") as file:
    for line in file:
        cars.append(line.rstrip())

for car in sorted(cars):
    print(f"My car is a, {car}")

The output looks like the one below:

My car is a, honda
My car is a, mazda
My car is a, subaru

As evident from the output, the cars have been sorted using the first letter.

Working with CSV Files

Comma-separated values (CSV) files are commonly used in big data and storing tabular data. Let's create a simple CSV file named students.csv as follows.

George, Kilimanjaro
 Ronald,Elgon
 Frank,Kilimanjaro
 Washington,Elgon

We can open the file and read it using Python as follows.

students = []

with open("students.csv", "r") as file:
    for line in file:
        name, house = line.rstrip().split(",")
        students.append({"name": name, "house": house})

for student in sorted(students, key=lambda student: student["name"]):
    print(f"{student['name']} is in {student['house']}")

The code above reads the file, stores each data in a dictionary, and then sorts and prints students by name.
For more complex CSV data, the CSV Python module is used. It can process CSV data with commas inside the data.

Writing to CSV FIles

Let's write data to a CSV file using the CSV module as shown below.

import csv

name = input("What's your name? ")
house = input("What's your house? ")

with open("students.csv", "a") as file:
    writer = csv.DictWriter(file, fieldnames=["name", "house"])
    writer.writerow({"name": name, "house": house})

The code above prompts the user to enter a name and a house and then write to it using the append method.

Conclusion

File I/O is very important as it allows users to read and write data into files. In this article, we have discussed what file I/O is and its advantages and disadvantages. We also discussed the application of file I/O in the real world. We then looked into file modes, opening and writing files, and then working with CSV files. You can check out my GitHub link for more here.

How to authenticate a Flask API using JWT.

Hesbon limo — Mon, 17 Feb 2025 10:34:02 +0000

Introduction

Security is one of the most important aspects of any organization. API authentication is one way in which APIs are secured, making sure that only authorized users access sensitive data from protected servers.

JSON Web Token (JWT) is a common method of user authentication and authorization standard used to exchange data securely. Made of three components, a header, a payload, and a signature, here are the steps involved in the authorization process:

Authentication. The client sends the user credentials to the server, and the server authenticates the client and generates JWT containing the users' information
Issuing the token. The JWT created by the server is sent to the client which is stored for future use.
Sending the token. When the client wants to access a protected resource it sends the JWT in the authorization header of the http request.
Verifying the token. The server receives the request and uses the secret key that was used to sign in to verify the JWT. If the JWT is valid, the server extracts the information contained in it and determines which action is the client authorized to perform.
Authorizing the request. If the user is authorized, the server responds with the data requested else it returns an error message.

In this article, we are going to discuss how to authenticate a Flask API step by step.

Steps

Step 1: Installing Flask and JWT

First, let's create a folder in the VS Code code editor as follows:

mkdir flask-auth

Now, let's create a virtual environment and activate it inside this folder as follows:

python3 -m venv env

source env/bin/activate

Next, let's install Flask and JWT using the following commands:

pip install flask

pip install PyJWT

After installing Flask and JWT, let's make a file called app.py using the following command:

touch app.py

Now, let's create a folder that hold our login.html and name it templates as follows:

mkdir templates

Inside the templates folder create a file called login.html as follows:

touch login.html

After completing all these steps, your project folder should look like this:

Step 2: Importing necessary libraries

Inside the app.py file we had created in the previous step write the following code:

import jwt
from flask import Flask, request, jsonify, make_response, render_template, session, flash
from datetime import datetime, timedelta
from functools import wraps

Let's discuss the imports above;

jwt: It imports PYjwt which is used to encode and decode JSON Web Tokens.
Flask: This is the core of the Flask web framework. It is used to create the instance for the web application.
request: Used to create HTTPS requests.
jsonify: It is used to convert Python dictionaries into JSON responses.
make_response: It is used to create custom HTTP responses.
render_template: It is used to render HTML templates using jinja2, which is the templating engine that flask uses.
session: It allows you to store and access variables of the current user between requests.
flash: It is used to display an error or success message to the user.
datetime: It is a class that represents date and time.
timedelta: Represents the difference between two dates and times. It is mainly used to set the expiration time of Json Web Tokens.
wraps: This is used to decorate functions, preserving their metadata (like name, docstring, etc.) when they are wrapped by another function. It’s often used in scenarios like creating custom decorators.

Step 3: Creating Flask instance

Before creating the Flask instance follow these steps to create a secret key.

In the terminal, run the following commands:

python3

then:

import uuid

then:

uuid.uuid4().hex

Now copy the secret key and paste it into your app instance. Replace secret with your secret key:

app = Flask(__name__)
app.config['SECRET_KEY'] = 'secret'

Step 4: Define the public Route

Let's define a public route that can be accessed by anyone without authorization using the following code:

@app.route('/public')
def public():
    return 'This is a public page'

Run the application and open the following URL in the browser:

http://127.0.0.1:5000/public

It should look like this in your browser;

Step 5: Define an auth route

Let's define an auth route that can only be accessed by users who are registered on the app. We will also use the token_required decorator to make sure that users with token access the route:

@app.route('/auth')
@token_required
def auth():
    return 'You are verified. Welcome to your dashboard!'

Now let's define the token_required function which will be used for authorized routes.

def token_required(func):
    @wraps(func)
    def decorated(*args, **kwargs):
        token = request.args.get('token')
        if not token:
            return jsonify({'Alert!': 'Token is missing'}), 401
        try:
            payload = jwt.decode(token, app.config['SECRET_KEY'], algorithms=['HS256'])
        except jwt.ExpiredSignatureError:
            return jsonify({'Alert!': 'Token has expired'}), 401
        except jwt.InvalidTokenError:
            return jsonify({'Alert!': 'Invalid Token'}), 401
        return func(*args, **kwargs)  # Correctly return the wrapped function
    return decorated

Let's breakdown the code above;
The @token_required decorator is applied to the function to make sure that only requests with a valid JWT token can access the route.
In line five we are retrieving the token from the request’s query parameters using request.args.get('token'). If the token is missing the condition becomes true hence, the 401 error is returned.

Inside line seven the code tries to decode the provided token using jwt.decode(token, app.config['SECRET_KEY'], algorithms=['HS256']). If the token has expired, the code catches the ExpiredSignatureError and returns the 401 unauthorized error.

Line 11 checks if the token is invalid and if the condition is true, it returns the 401 unauthorized error.

Let's run the app on the terminal and enter the following URL in the terminal:

http://127.0.0.1:5000/auth

The output should look like the one below:

We are getting the expected output that Token is missing because we are not yet logged in. Let's move to the next step and see how we can get the token.

Step 6: Define the login method

We need to define a login route that we will use to log in to the app and access the token. We will pass the username and the password and if they match the ones in the route the login session variable will be set to True. Here is the code for the login route:

@app.route('/login', methods=['POST'])
def login():
    username = request.form.get('username')
    password = request.form.get('password')

    if username and password == '123456':  # Fix incorrect comparison
        session['logged_in'] = True
        token = jwt.encode({
            'user': username,
            'exp': datetime.utcnow() + timedelta(seconds=150)  # Use 'exp' for expiry
        }, app.config['SECRET_KEY'], algorithm='HS256')

        return jsonify({'token': token})  # No need for `.decode('utf-8')`
    else:
        return make_response('Unable to verify', 403, {
            'WWW-Authenticate': 'Basic realm="Authentication Failed!"'
        })

Let's go ahead and breakdown the code above;

The condition from line sis checks if the username and the password are correct. If the two are correct, the code creates a JWT token and allows the user to log in. If the username and the password are not correct, the code from line fourteen is executed where the system returns a 403 Forbidden error, saying "Unable to verify".
Now let's go ahead and define a login.html template that will display the login form. In the login.html folder that we had created earlier, add this code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login</title>
</head>
<body>
    <form action="/login" method ='POST'>
        <input type="username" name="username" placeholder="username"><br><br>
        <input type="password" name="password" placeholder="password"><br><br>
        <input type="submit" value="Login">
    </form> 

</body>
</html>

Run the app once again and input any username and password as 123456:

http://127.0.0.1:5000

The output after inputting the correct password should look like this:

After logging in we get the token as shown above.

Let's use the token to access the data in the private route. Open JWT.io and paste the token as shown below:

Now we can access the data as shown above.

Final Thoughts

In this article, we have discussed the importance of API security in your application and how JWT authentication works. We also developed different routes of a Flask API and also learned how to come up with a secret key.

Finally, we used a JWT token to access data on the JWT.io website. In conclusion, I recommend checking out my GitHub link here for the code.

Mastering WebSockets with Socket.IO: A Comprehensive Guide

Hesbon limo — Sat, 15 Feb 2025 19:21:53 +0000

What is a WebSocket?

WebSocket is a communication protocol that enables two-way communication between a server and a client over a long-lived connection. A protocol is a set of rules and conventions that dictate how data is being transmitted between two or more computer devices.

Basically websockets are a set of ideas about one particular way where we work with data. Unlike traditional APIs and HTTP connections, websockets allow for real-time communication making it ideal for chart applications and sports betting sites.

The major difference between HTTP and WebSockets is how the client and the server communicate. HTTP requests send a request to the server then the server sends a response to the client and then the connection ends.

On the other hand, WebSockets sends a handshake request to the server and if the server is capable of supporting the websocket protocol it will send back a confirmation. Once the connection is established both parties can send and receive information without waiting for the request-response cycle.

Even though web sockets are long-lived they include mechanisms for detecting and handling dropped connections and inactivity. For example, you could specify that if neither the server nor the client has sent a message in the last ten minutes the connection should be stopped.

Picture this in an online chatting app. Two users are able to chat in real time with the application showing whether the other party is online, typing or has deleted a message. That is the real-world application of WebSockets.

Building a CRUD Operation using socket.io

We are going to build a CRUD application where you can create, read, update, and delete text using socket.io.

Setting up the environment

Prerequisites

Make sure node.js has been installed in your environment. If not, run the following command in your terminal globally:

sudo apt install -y nodejs

After installation, run the following command to check the version of node js installed:

node -v

Setting up the backend

In your code editor, create a folder named server. After creating the folder, run the following command in your terminal, to install the necessary node modules, run this command:

npm install

To install the socket.io package in your backend folder, run this command:

npm install socket.io

Setting up the frontend

In your code editor, create a folder named client. After creating the client folder, run npm install to install the necessary node modules. After installing the node modules, it's time to install the socket.io package in your frontend folder using the following command:

npm install socket.io

Implementing the frontend

In the client folder you had created earlier, create a React app using vite by running the following command:

npm create vite@latest

After creating the React app we are going to write our code in the app.jsx. Here is the code:

import { useEffect, useState } from "react";
import { io } from "socket.io-client";
import "./App.css";
import { v4 as uuidv4 } from "uuid";

function App() {
  const [formInputs, setFormInputs] = useState({});
  const [crudData, setCrudData] = useState([]); // Initialize as an empty array
  const [isEdit, setIsEdit] = useState(false);
  const socket = io("http://localhost:3000");

  const handleInput = (event) => {
    const { name, value } = event.target;
    setFormInputs((prev) => ({ ...prev, [name]: value }));
  };

  const handleSubmit = () => {
    if (!formInputs.name || !formInputs.age || !formInputs.number) {
      console.error("All fields must be filled before submitting.");
      return;
    }

    const newData = {
      ...formInputs,
      id: uuidv4(), // Generate a unique ID for the new data
    };

    socket.emit("data", newData); // Send the new data to the server
    setFormInputs({}); // Clear the input fields after submission
  };

  const handleEdit = () => {
    if (!formInputs.id) {
      console.error("No item selected for editing.");
      return;
    }

    console.log("Submitting edited data:", formInputs);
    socket.emit("editData", formInputs); // Emit the edited data to the server
    setIsEdit(false); // Reset edit mode
    setFormInputs({}); // Clear the form inputs
  };

  const handleDelete = (id) => {
    console.log("Deleting item with ID:", id);
    socket.emit("deleteData", id); // Emit the delete request to the server
  };

  useEffect(() => {
    // Listen for updated CRUD data from the server
    socket.on("crudData", (response) => {
      console.log("Updated data received from server:", response);
      if (Array.isArray(response)) {
        setCrudData(response); // Update the UI with the latest data
      } else {
        console.error("Unexpected response format:", response);
      }
    });

    return () => {
      socket.off("crudData"); // Clean up listener
    };
  }, []);

  const getEditData = (data) => {
    setFormInputs(data);
    setIsEdit(true);
  };

  return (
    <>
      <h1>CRUD Operations</h1>
      <div className="form-fields">
        <input
          onChange={handleInput}
          className="input-field"
          name="name"
          placeholder="Enter your name"
          value={formInputs.name || ""}
        />
        <input
          onChange={handleInput}
          className="input-field"
          name="age"
          placeholder="Enter your age"
          value={formInputs.age || ""}
        />
        <input
          onChange={handleInput}
          className="input-field"
          name="number"
          placeholder="Enter your phone number"
          value={formInputs.number || ""}
        />
      </div>
      <button onClick={isEdit ? handleEdit : handleSubmit}>
        {isEdit ? "Edit" : "Add"} Data
      </button>
      <table>
        <thead>
          <tr>
            <th>Name</th>
            <th>Age</th>
            <th>Phone Number</th>
            <th>Actions</th>
          </tr>
        </thead>
        <tbody>
          {Array.isArray(crudData) && crudData.length > 0 ? (
            crudData.map((data, index) => (
              <tr key={index}>
                <td>{data.name}</td>
                <td>{data.age}</td>
                <td>{data.number}</td>
                <td>
                  <button onClick={() => getEditData(data)}>Edit</button>
                  <button onClick={() => handleDelete(data.id)}>Delete</button>
                </td>
              </tr>
            ))
          ) : (
            <tr>
              <td colSpan="4">No data available</td>
            </tr>
          )}
        </tbody>
      </table>
    </>
  );
}

export default App;

Let's discuss this frontend code in detail. First, we start with the imports in lines 1 to 4:

useState and useEffect: These are React hooks for managing state and side effects.
io: This is simply a socket.io package used for real-time communication to the server.
uuidv4: This is used to create a unique ID for each input in the application.

Now let's move to the initialization from lines 7 to 10:

formInput: This is for storing the form inputs from the user of the app that is name, age, and phone number.
crudData: This is used to store data sent to the server or received from the server.
isEdit: It's used to check if the button is in the submit or edit mode.

In line 10 we are connecting the frontend to the server which is running in local host port 3000.

The handleInput function in line 12 is used to update the formInputs state as the user types in the values.

The handleSubmit function is used to submit the new data to the server. It works by checking if all the fields have been entered, if they are, it will create a new ID for the data and send it to the server. Finally, it clears the input field after the data has been submitted.

After that, we move to the handleEdit function from line 32. The function works by checking if an input field has been selected for editing. If so, It will emit the edited data to the server. Then it resets the edit mode and clears the input field.

handleDelete function is used to delete data from the UI and also submit the delete request to the server using socket.io for real-time communication.

The useEffect hook is used to check for any updates to the crudData from the server then it updates it in our UI. By ui, I mean the frontend or what you see in the browser.

getEditData function enables us to edit our data by setting the isEdit state to true.

The return method from lines 70 to 130 is used to render the UI. It displays the input fields for name, age, and phone number and a button that switches between edit and add. It also displays all the data we have and buttons to edit and delete each entry.

Implementing the Backend

Now let's move to the backend and discuss the nodejs code.

In the server folder create a file and name it server.js.

const { createServer } = require("http");
const { Server } = require("socket.io");

// Create the HTTP server
const httpServer = createServer();
const io = new Server(httpServer, {
  cors: {
    origin: "http://localhost:5173", // Allow requests from the frontend
  },
});

let crudData = []; // Array to store all CRUD data

io.on("connection", (socket) => {
  console.log("A client connected");

  // Send the current data to the newly connected client
  socket.emit("crudData", crudData);

  // Handle receiving new data from the client
  socket.on("data", (data) => {
    console.log("Received new data:", data);

    // Add the new data to the array
    crudData.push(data);

    // Broadcast the updated data to all connected clients
    io.emit("crudData", crudData);
  });

  // Handle editing data
  socket.on("editData", (response) => {
    console.log("Edit data received:", response);

    // Find the index of the item to be edited
    const currentIndex = crudData.findIndex((data) => data.id === response.id);

    if (currentIndex !== -1) {
      // Update the item
      crudData[currentIndex] = { ...crudData[currentIndex], ...response };

      // Broadcast the updated data to all clients
      io.emit("crudData", crudData);
      console.log("Updated data broadcasted:", crudData);
    } else {
      console.error("Item not found for editing");
    }
  });

  // Handle deleting data
  socket.on("deleteData", (id) => {
    console.log("Delete request received for ID:", id);

    // Filter out the item to delete
    crudData = crudData.filter((data) => data.id !== id);

    // Broadcast the updated data to all clients
    io.emit("crudData", crudData);
    console.log("Updated data after deletion:", crudData);
  });

  // Handle client disconnect
  socket.on("disconnect", () => {
    console.log("A client disconnected");
  });
});

// Start the server
httpServer.listen(3000, () => {
  console.log("Server is connected and listening on http://localhost:3000");
});

In lines 1 and 2, we are declaring an HTTP server and initializing socket.io for real-time communication.

Lines 4 to 10 create an HTTP server associated with socket.io and then connect to the front end which is running in port 5173 using the CORS policy which prevents it from blogging the connection. In line 12 we are declaring an empty array to store all the inputs from the frontend.

The io.on event in line 14 is an event that connects to the client and emits all the data in the server to the newly connected client. Socket.on the event in line 21 handles new data from the client and publishes the data in the crudData array using the push array method. It then broadcast the newly added data to the client using io.emmit.

In line 32 we have the socket.io editaData event which handles data editing in the server. When the user clicks edit in the client, the server searches for the data using the findIndex method. If it exists it updates the data in the crudData array then it broadcasts the edited data to the client.

The socket.io deleteData event in line 52 handles the deleting of data in the server. When the client initiates a delete function, the server finds the data using its ID and deletes it from crudData array using the filter method. The event then broadcasts the updated data to the client.

Testing

I am going to show you how real-time communication works with web sockets by opening two tabs and also show the server side.

As you can see from the video, initially, I had two entries in my applications then I added the third one and it immediately updated. Then I switched to another tab and there were also three entries same as the previous tab. I also deleted one entry and it was updated in both tabs.

When I switch to the server you can see the updated data after deletion. I then edited the name of the first entry from kiprop rono to kiprop kiptoo and it updated both in the server and the ui.

Conclusion

Socket.io is a very powerful tool that is used by various chat applications and betting apps for their real-time communication.

In this article, we have discussed what are WebSockets, WebSockets vs HTTP protocol, and its common application. We have also built a real-time CRUD application using react, socket.io, and node Js.

For more information, check out my GitHub link here.

Mastering PostgreSQL: A Beginner's Guide

Hesbon limo — Thu, 13 Feb 2025 19:23:28 +0000

What is PostgreSQL

PostgreSQL is a free and open-source object-relational database management system. It is one of the most popular and trustable database systems that is used by most organizations, especially startups, for their backend development. PostgreSQL supports most of the backend frameworks such as Flask, Django, node js, and java springboot.

The advantages of PostgreSQL is that:

It's open source
It's robust and powerful enough to work on high-performance tasks
It's backed by a strong community of developers.

How to install PostgreSQL

Before you start working with PostgreSQL, you need to download it first. The installation process may vary depending on your operating system, but it supports major operating systems.

You can download PostgreSQL Here. In this article, we are going to download it on Ubuntu, which is a Linux distribution sub-system.

To download, run this command in your terminal:


sudo apt install -y postgresql-common

sudo /usr/share/postgresql-common/pgdg/apt.postgresql.org.sh

After installation, you have to check its status using this command


sudo systemctl status postgresql

If everything is installed correctly, you will see a message that PostgreSQL is running.

Creating your first PostgreSQL database

Open your terminal and follow these steps as you create your first database

Step 1. Connect to the server

Before connecting to the server, switch to the PostgreSQL user using the following command:


sudo -i -u postgres

psql

To connect to the PostgreSQL server, you need to create a user with password using the following command:


CREATE USER myuser WITH PASSWORD 'mypassword';

Replace "myuser" with what you want to be your username and "mypassword" with your actual password.

Step 2. Create a database

Create a database using the following command. Replace "sampledb" with the name of your database:


CREATE DATABASE sampledb;

The terminal should look like this;

Step 3. Switch to the created database

Switch to the database using the following command:


\c sampledb

Step 4. Create a table

Let's create a simple table named students with columns for student ID, student name, student program, and student stream using this SQL command:


CREATE TABLE students(std_id INT PRIMARY KEY,std_name VARCHAR(240) NOT NULL, std_program VARCHAR(240) NOT NULL,std_stream VARCHAR(120) NOT NULL);

Step 5. Insert data into the table

Use the commands below to add data to the table:


INSERT INTO students(std_id, std_name, std_program, std_stream) VALUES(1, 'Kiprop Too', 'BENG', 'North');

INSERT INTO students VALUES(2, 'Kiprono Too', 'BTECH', 'West');

INSERT INTO students VALUES(3, 'Kiprono Nano', 'BTECH','East');

Step 6. Query data from the table

Use the command below to retrieve data from the Students table:


SELECT * FROM students;

Here is the output:

Step 7. Update data in the table

We are going to update the stream in column 3 from East to South:


UPDATE  students SET std_stream='South' WHERE std_id=2;

The output should look like this:

Step 8. Delete data from the table

Let's delete the last column from the table using this command:


DELETE FROM students WHERE  std_id=3;

The output should look like this:

Constraints in PostgreSQL

Constraints are rules that are declared in tables or columns of a database that are used to validate the data entered before being stored in the database.

Examples are:

UNIQUE: This constraint makes sure that a value is unique, for example, an email.
FOREIGN KEY: Foreign key is used to link a table with another table in one-to-many relationships or many-to-many relationships
PRIMARY KEY: This is used to show something that uniquely identifies our data.
NOT NULL: This makes sure that a value is not omitted or should not be blank.

Here is an example of FOREIGN KEY constraint being applied


CREATE TABLE students(std_id INT PRIMARY KEY,std_name VARCHAR(240) NOT NULL, std_program VARCHAR(240) NOT NULL,std_stream VARCHAR(120) NOT NULL);

Learn more about constraints here

Indexing for performance in PostgreSQL.

Indexing is something that improves the overall performance of a database. It is a shortcut for retrieving data quickly from a database. Picture this: it's like a table of contents in a book where you can locate what you want without flipping through the pages. Common types of indexing are B-tree index and Hash index.

Let's see examples of B-tree and Hash index indexes.

Hash index


-- Create a hash index on a single column

CREATE INDEX idx_column_name ON table_name USING hash (column_name);

B-tree index


-- Create a B-tree index on a single column

CREATE INDEX idx_column_name ON table_name (column_name);


-- Create a B-tree composite index on multiple columns

CREATE INDEX idx_multi_column ON table_name (column1, column2);

Here is an article that explains more about indexing.

Restoring and backing up data in PostgreSQL.

Regular backups are important for safeguarding data in your database.

Here's a simple command to back up data:


pg_dump -U your_username -d sampledb > backup.sql

Rstore data:


psql -U your_username -d new_database &lt; backup.sql

Conclusion

PostgreSQL is a very useful database management tool which is used by both startups and well established companies for their backened.

This article covered the basic setup of PostgreSQL as well as how to perform CRUD functionalities. As you continue using PostgreSQL, learn more about advanced queries, indexing, and constraints to improve your proficiency. You can reach out to me via X Here for more interaction.

Happy coding!!

The Most Important JavaScript Array Methods to Understand

Hesbon limo — Tue, 11 Feb 2025 10:19:59 +0000

An array in JavaScript is a global data structure use to store data. A global data structure is one which can be accessed everywhwere in your code.

Arrays are important because it allows you to iterate over the stored data one by one because their indices are known. The biggest advantage of JavaScript arrays lies in the array methods.

JavaScript array methods are built in functions that allow efficient traversal and manipulation of arrays. They provide functionalities like removing, searching and iterating through array elements, enhancing code readability and productivity.

In this article we are going to cover fifteen most used array methods, which will make you a better JavaScript developer.

1. map

The map method allows you to loop on each element in the array and manipulate them according to your preference

The map method creates a new array.

Here's an example of how to use the map method

const numbers = [4,5,6,7,8];

const timesBy2 = (number) =>  number * 2;

const newNumbers = numbers.map(timesBy2)

console.log(newNumbers)

[output]
[ 8, 10, 12, 14, 16 ]

In the code above, the map method loops through each number in the array called numbers and multiplies it by two.

2. filter

The filter() array method creates a new array and returns the elements of the original array that passes a specific test implemented by a provided function.

Here's a code block showing how the filter method works

 const numbers = [2,3,4,5,6,7];

const evens = (number) =>  number % 2 === 0;

const newNumbers = numbers.filter(evens)

console.log(newNumbers)

 [output]
 [// output 2,4,6]

In the code above, we write a function which tests the array of numbers and returns only the even numbers using the filter method.

3. slice

The slice method returns selected elements in an array from a start index to a (not inclusive) given end as a new array

The method does not alter the original array.

const numbers = [2,3,4,5,6,7];

const newNumbers = numbers.slice(2, 4)

console.log(newNumbers)

[output]
[ 4,5 it selects from index 2 to 4 ]

The code above selects elements starting from index two to four but four will not be included in the output therefore, it will return index two and three.

4. splice

The splice method is used to add, remove or replace elements in an array. It overites the old array and returns an new array.

Let's see how we use it to remove elements from an array

const numbers = [2,3,4,5,6,7];

numbers.splice(2,2)

console.log(numbers)

[output]
[ 2, 3, 6, 7]

The code above removes two array elements starting from index two.

The code below shows how to use splice to add elements into an array

// adding elements
const fruits = ['mango', 'banana', 'pawpaw'];

fruits.splice(2, 0, 'apples', 'oranges' )

console.log(fruits)

[output]
[ 'mango', 'banana', 'apples', 'oranges', 'pawpaw' ]

In the code above, we are adding two items from index two while deleting none from the original array.

Let's see how to use it to replace items

const fruits = [ 'mango', 'banana', 'apples', 'oranges', 'pawpaw' ]

fruits.splice(1,1, 'blueberry')

console.log(fruits)

[output]
[ 'mango', 'blueberry', 'apples', 'oranges', 'pawpaw' ]

In the code above, we are replacing one item from index one while also deleting an item in index one from the original array.

5. forEach

The forEach method loops through an array and executes a provided function for each array element. In the code below we are printing all the elements from an array once

const names = ['Boni', 'Alex', 'Clinton', 'Kevin'];

names.forEach((name) => {console.log(name)});

[output]
[
Boni
Alex
Clinton
Kevin
]

6. some

The some method checks if some of the elements meets a certain condition passed in the function and returns true is some meet the condition and false if none meets the condition.

const numbers = [2,3,4,5,6,7];

const greaterThan1 = (number) =>  number > 1;

const isGreaterThan1 = numbers.some(greaterThan1)

console.log(isGreaterThan1)

[output]
[true]

The code above checks if some numbers are greater than one and returns true because some numbers meet the condition otherwise it would have returned false.

7. every

The every method iterates through an array and checks if all the elements satisfies a certain condition passed via a callback function. It is used to verify if all the elements in an array satisfies a certain condition. It returns true if all elements satisfies the condition otherwise false.

const numbers = [2,3,4,5,6,7];

const greaterThan1 = (number) =>  number > 4;

const isGreaterThan1 = numbers.every(greaterThan1)

console.log(isGreaterThan1)

[output]
[false]

The code above returns false since all the numbers are not greater than four.

8. fill

The fill method fills specified elements into an array and overites the original array giving a new array. If the start and end positions are not specified it fills the whole array with the new element.

const fruits = ["Banana", "Pawpaw", "Apple", "Orange"];
fruits.fill("Avocado");

console.log(fruits)

[output]
[ 'Avocado', 'Avocado', 'Avocado', 'Avocado' ]

In the code above, the start and end position is not specified so it fills the whole array with Avocado

Now let's see the one where start and end positions are specified.

 const fruits = ["Banana", "Pawpaw", "Apple", "Orange"];
fruits.fill("Avocado", 2,4);

console.log(fruits)

 [output]
 [ 'Banana', 'Pawpaw', 'Avocado', 'Avocado' ]

The code above fills the array starting from index two to four but four not being included with the new element.

9. push

The push method adds new elements to the end of an array and changes the old array returning the new modified array. You can add a single element or many.

const cars = ['Toyota', 'Mazda', 'Honda']
cars.push('Mitsubishi', 'Nissan', 'Ford')

console.log(cars)

[output]
[ 'Toyota', 'Mazda', 'Honda', 'Mitsubishi', 'Nissan', 'Ford' ]

10. pop

The pop method removes the last element of an array and returns a new array with a missing last element.

const cars = ['Toyota', 'Mazda', 'Honda','Mitsubishi', 'Nissan', 'Ford'];
cars.pop();

console.log(cars);

[output]
 [ 'Toyota', 'Mazda', 'Honda', 'Mitsubishi', 'Nissan' ]

In the code above, the last element which is 'Ford' has been removed.

11.unshift

The method adds new elements to the beginning of an array. You can add a single element or multiple elements to the new array. It overwrites the original array.

 const fruits = ["Pawpaw", "Orange", "Apple", "Mango"];
fruits.unshift("Cucumber","Pineapple");

console.log(fruits)

 [output]
 [ 'Cucumber', 'Pineapple', 'Pawpaw', 'Orange', 'Apple', 'Mango' ]

12.shift

The shift method removes the first element of an array and returns a new array by overwriting the original array.

Here's is an example

const fruits = [ 'Cucumber', 'Pineapple', 'Pawpaw', 'Orange', 'Apple', 'Mango' ];

fruits.shift();

console.log(fruits)

[output]
[ 'Pineapple', 'Pawpaw', 'Orange', 'Apple', 'Mango' ]

13. find

The find method is used to search for an element in an array. I t returns the first element which satisfies the condition passed ina a callback function. If no element satisfies the conditon it returns undefined.

```javascript =
const numbers =[1,2,3,4,5,6,7];

const number = numbers.find((number) => number > 5);

console.log(number);





```text=
[output]
[6]

The code above returns 6 since it's first element to meet the condition greater than 5.

14. findIndex

The findIndex returns the position of the first element that satisfies a condition that was passed. It returns -1 if no match is found. It does not overwrite the original array. It returns true or false.

Here's an example

const numbers =[1,2,3,4,5,6,7];

const number = numbers.findIndex((number) => number > 5);

console.log(number);

[output]
[5]

The code above returns 5 because 5 is the index of the first number that satisfies the condition greater than five.

15. includes

The includes method checks if a specific element is present in an array. It returns true if its present or false if it's not present.

const numbers = [1,2,3,4]

console.log(numbers.includes(3))

[output]
[5]

Conclusion

JavaScript array methods are very important built-in functions used to write scalable and readable code. This article covered fifteen most used array methods. I would recommend reading Javascript oficial documentation here in order to understand more about the array methods. Here is a link to my github for reference.

Happy coding

The Most Important Javascript Array Methods to Understand

Hesbon limo — Tue, 11 Feb 2025 10:00:02 +0000

An array in JavaScript is a global data structure used to store data. A global data structure is one which can be accessed everywhwere in your code.

Arrays are important because it allows you to iterate over the stored data one by one because their indices are known. The biggest advantage of JavaScript arrays lies in the array methods.

In this article we are going to cover fifteen most used array methods, which will make you a better JavaScript developer.

1. map

The map method allows you to loop on each element in the array and manipulate them according to your preference

The map method creates a new array.

Here's an example of how to use the map method

const numbers = [4,5,6,7,8];

const timesBy2 = (number) =>  number * 2;

const newNumbers = numbers.map(timesBy2)

console.log(newNumbers)

[output]
[ 8, 10, 12, 14, 16 ]

In the code above, the map method loops through each number in the array called numbers and multiplies it by two.

2. filter

The filter() array method creates a new array and returns the elements of the original array that passes a specific test implemented by a provided function.

Here's a code block showing how the filter method works

 const numbers = [2,3,4,5,6,7];

const evens = (number) =>  number % 2 === 0;

const newNumbers = numbers.filter(evens)

console.log(newNumbers)

 [output]
 [// output 2,4,6]

In the code above, we write a function which tests the array of numbers and returns only the even numbers using the filter method.

3. slice

The slice method returns selected elements in an array from a start index to a (not inclusive) given end as a new array

The method does not alter the original array.

const numbers = [2,3,4,5,6,7];

const newNumbers = numbers.slice(2, 4)

console.log(newNumbers)

[output]
[ 4,5 it selects from index 2 to 4 ]

The code above selects elements starting from index two to four but four will not be included in the output therefore, it will return index two and three.

4. splice

The splice method is used to add, remove or replace elements in an array. It overites the old array and returns an new array.

Let's see how we use it to remove elements from an array

const numbers = [2,3,4,5,6,7];

numbers.splice(2,2)

console.log(numbers)

[output]
[ 2, 3, 6, 7]

The code above removes two array elements starting from index two.

The code below shows how to use splice to add elements into an array

// adding elements
const fruits = ['mango', 'banana', 'pawpaw'];

fruits.splice(2, 0, 'apples', 'oranges' )

console.log(fruits)

[output]
[ 'mango', 'banana', 'apples', 'oranges', 'pawpaw' ]

In the code above, we are adding two items from index two while deleting none from the original array.

Let's see how to use it to replace items

``` JavaScript =
const fruits = [ 'mango', 'banana', 'apples', 'oranges', 'pawpaw' ]

fruits.splice(1,1, 'blueberry')

console.log(fruits)





```text=
[output]
[ 'mango', 'blueberry', 'apples', 'oranges', 'pawpaw' ]

In the code above, we are replacing one item from index one while also deleting an item in index one from the original array.

5. forEach

The forEach method loops through an array and executes a provided function for each array element. In the code below we are printing all the elements from an array once

const names = ['Boni', 'Alex', 'Clinton', 'Kevin'];

names.forEach((name) => {console.log(name)});

[output]
[
Boni
Alex
Clinton
Kevin
]

6. some

The some method checks if some of the elements meets a certain condition passed in the function and returns true is some meet the condition and false if none meets the condition.

const numbers = [2,3,4,5,6,7];

const greaterThan1 = (number) =>  number > 1;

const isGreaterThan1 = numbers.some(greaterThan1)

console.log(isGreaterThan1)

[output]
[true]

The code above checks if some numbers are greater than one and returns true because some numbers meet the condition otherwise it would have returned false.

7. every

const numbers = [2,3,4,5,6,7];

const greaterThan1 = (number) =>  number > 4;

const isGreaterThan1 = numbers.every(greaterThan1)

console.log(isGreaterThan1)

[output]
[false]

The code above returns false since all the numbers are not greater than four.

8. fill

const fruits = ["Banana", "Pawpaw", "Apple", "Orange"];
fruits.fill("Avocado");

console.log(fruits)

text=
[output]
[ 'Avocado', 'Avocado', 'Avocado', 'Avocado' ]

In the code above, the start and end position is not specified so it fills the whole array with `Avocado`

Now let's see the one where start and end positions are specified.

JavaScript=
const fruits = ["Banana", "Pawpaw", "Apple", "Orange"];
fruits.fill("Avocado", 2,4);

console.log(fruits)

text=
[output]
[ 'Banana', 'Pawpaw', 'Avocado', 'Avocado' ]


The code above fills the array starting from index two to four but four not being included with the new element.

## 9. push
The `push` method adds new elements to the end of an array and changes the old array returning the new modified array. You can add a single element or many.

JavaScript
const cars = ['Toyota', 'Mazda', 'Honda']
cars.push('Mitsubishi', 'Nissan', 'Ford')

console.log(cars)

text=
[output]
[ 'Toyota', 'Mazda', 'Honda', 'Mitsubishi', 'Nissan', 'Ford' ]


## 10. pop
The `pop` method removes the last element of an array and returns  a new array with  a missing last element.

JavaScript=
const cars = ['Toyota', 'Mazda', 'Honda','Mitsubishi', 'Nissan', 'Ford'];
cars.pop();

console.log(cars);

text=
[output]
[ 'Toyota', 'Mazda', 'Honda', 'Mitsubishi', 'Nissan' ]


In the code above, the last element which is 'Ford' has been removed.


## 11.unshift
 The method adds new elements to the beginning of an array. You can add a single element or multiple elements to the new array. It overwrites the original array.

JavaScript=
const fruits = ["Pawpaw", "Orange", "Apple", "Mango"];
fruits.unshift("Cucumber","Pineapple");

console.log(fruits)

text=
[output]
[ 'Cucumber', 'Pineapple', 'Pawpaw', 'Orange', 'Apple', 'Mango' ]


## 12.shift
The `shift` method removes the first element of an array and returns a new array by overwriting the original array.

Here's is an example

JavaScript=
const fruits = [ 'Cucumber', 'Pineapple', 'Pawpaw', 'Orange', 'Apple', 'Mango' ];

fruits.shift();

console.log(fruits)

text=
[output]
[ 'Pineapple', 'Pawpaw', 'Orange', 'Apple', 'Mango' ]


## 13. find
The `find` method is used to search for an element in an array. I t returns the first element which satisfies the condition passed ina a callback function. If no element satisfies the conditon it returns undefined.

javascript =
const numbers =[1,2,3,4,5,6,7];

const number = numbers.find((number) => number > 5);

console.log(number);

text=
[output]
[6]

The code above returns 6 since it's first element to meet the condition greater than 5.

## 14. findIndex

The `findIndex` returns the position of the first element that satisfies a condition that was passed. It returns -1 if no match is found. It does not overwrite the original array. It returns true or false.

Here's an example

javascript
const numbers =[1,2,3,4,5,6,7];

const number = numbers.findIndex((number) => number > 5);

console.log(number);

text=
[output]
[5]


The code above returns 5 because 5 is the index of the first number that satisfies the condition greater than five.

## 15. includes
 The `includes` method checks if a specific element is present in an array. It returns true if its present or false if it's not present.

javascript=
const numbers = [1,2,3,4]

console.log(numbers.includes(3))

text=
[output]
[5]



## Conclusion
JavaScript array methods are very important built-in functions used to write scalable and readable code. This article covered fifteen most used array methods. I would recommend reading Javascript oficial documentation [here](https://developer.mozilla.org/en-US/docs/Web/JavaScript) in order to understand more about the array methods. [Here](https://github.com/limoh653/JS-Array-methods) is a link to my github for reference.


Happy coding

What is Redux Toolkit: When and How to use it Effectively?

Hesbon limo — Fri, 24 Jan 2025 05:42:45 +0000

What is redux

Redux is a predictable state management tool for JavaScript apps. A state is something that keeps the app running for example when you are asked to select gender in a website, the state is either male or female.

Imagine that you are a customer of four banks and in each of those banks you have two accounts. Those will make eight accounts in total. Without Redux, when you want to ask balance or deposit you will have to visit each of the four banks. But with Redux all of these will be stored in one central location called a store.

Why redux

Redux make state management easier. Managing states of small applications is not hard but once an application has a lot of components with different states it becomes harder to manage. Components are independent and reusable pieces of code.

Let's return to the example of banks above. Assuming you have twenty accounts with different banks and some of the banks are in other countries managing the accounts without redux would be nearly impossible.

Advantages of using redux

1. Centralized state management

One of the advantage of using Redux is the ability to manage state in a centralized manner. In React application state is managed in components. However, when an application has so many components it becomes difficult to track the components.

2. Predictable state changes

Redux enforces strict rules on how state is changed. It returns a new state insted of mutating the existing one therefore making it straight forward to predict the change of a state.

3. Simplifies data flow

In a React application data flow may become complex especially when components have to share state. In React data is passed from parent to child using props. Redux simplifies this by allowing any component to access a global state from a central store.

4.Makes debugging easy

Redux offers powerful tools such as Redux DevTools which can be intergrated with the browser. These allows the developer to see states in real time and easily identify errors in the code.

5. Improved code maintainability and readability

Redux separates states with the main UI logic making it easy to maintain and read code. Actions and reducer are also kept distinct making it easy to read code file structure.

Components of redux

1. Redux store

Its the central bucket which stores all the states of an application. It should be maintained as a single source of the application.

2. Actions

States in redux are read only. Therefore, when you want to update or delete something in the store you need to express your intentions by emmitting or dispatching an action.

3. Reducer

Reducer takes in two things, the current state and the action. They the update it to one entity the new state.

4. Dispatcher

The dispatcher is a function used to send actions e.g add Todo to the redux store which is then processed by the reducer and updated accordingly.

Here is a diagram showing the redux components in detail

Example Project - To Do List Application

Now that you know the basics of Redux, it's time to apply this knowledge in creating a real world app. We will build a simple To Do application where you can add and delete tasks.

Step 1: Prequisites

To build this app you will need a code editor eg sublime text or VS code. For this tutorial I will use Visual Studio Code
.

Step 2: Setting up the Project

Create a new react app by running the following command in the terminal.Make sure you replace "your-project-name" with the name of your project.

npm create vite@latest your-project-name -- --template react
cd your-project-name
npm install

The above command will create a new react app and install the necessary dependancies.

Step 3: Getting Started with Redux

Redux requires some dependancies for it to function well, namely:

Redux: The main library that enables the Redux architecture
React redux: Enables connection between the React components and the Redux store
Redux DEvTools Extension: Connects your Redux application to redux Devtools
redux Toolkit: It makes it easier to create Redux store and intergrate middleware like Redux-thunk

Install them using npm as shown below:

npm install\
redux
react-redux\
@reduxjs/toolkit\
redux-devtools-extension

Step 4: How to create the redux store

Now that we have installed everyting and our setup is ready, navigate to the src folder and create a file and name it store.js:

import { configureStore } from '@reduxjs/toolkit';


export const store= configureStore({
    reducer: [],
})

The function of the configireStore we have imported in the first line will help us create the store. We will then create the store by declaring a function named store.

Next, we create an empty reducer where all our state will be handled. Finally in line 4 we export the store so that we can use it in the application.

Step 5: Setting up the reducers and actions in the file structure

Now let's create the reducer in our application. for these code I will combine the reducer and the actions. An action is simply what happens in the application e.g deleting task.

Inside the src directory create a new folder called features, and inside that folder create a file called todoSlice.js.

// src/features/todoSlice.js
import { createSlice } from '@reduxjs/toolkit';
const initialState = {
  todos: [],
};

const todoSlice = createSlice({
  name: 'todos',
  initialState,
  reducers: {
    addTodo: (state, action) => {
      // Ensure you are adding the new todo with an id and text
      const newTodo = {
        id: Date.now(),  // Generate a unique id
        text: action.payload,
      };
      state.todos.push(newTodo);  // Add the new todo to the state
    },
    removeTodo: (state, action) => {
      state.todos = state.todos.filter((todo) => todo.id !== action.payload);
    },
  },
});

export const { addTodo, removeTodo } = todoSlice.actions;
export default todoSlice.reducer;

In line three, we are defining an initial state. In our case an empty array of todos. Then we use the createSlice which is an helper function from the reduxToolkit used to create a slice which is a single piece in the redux.

The slice has the following components:

Initial state. This is the default state.
Reducer. This is a function that handles how a state changes in response to an action e.g addTodo
Action. It is inside the reducer and handles what actually changes e.g remove or add todo

We then export the actions so that we can use them in our components. After that we export the Reducer so that it can be used in the Redux store.

Step 6 : Connecting the store to the main application

The Provider from the react-redux library is all we need to connect the redux store to the ToDo application.

First we import the provider from the react react redux. Then we wrap our app component with ths provider function and pass the store as a prop in the main.jsx or index.js.

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.jsx'

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <provider store={store}><App /></provider>
  </StrictMode>,
)

Step 7: Getting started with dispatch actions

Now that we have set up the reducer and the actions we will move on and create components that dispatch the actions.

Let's create a new folder named "components" inside the src directory. In this folder, we will create two files AddTodo.js and todo.js.

The AddTodo.js component will be responsible for adding tasks. Before we proceed lets import the following into the file:

React library for creating react components and useState a React hook that enables you to add state to a functional component
useDispatch: A react-redux hook that provides the dispatch functin which is used to send actions to redux store, triggering state updates.
addTodo: Imports addTodo action from todoSlice which is used to add a new todo item to the Redux store

import React, { useState } from 'react';
import { useDispatch } from 'react-redux';
import { addTodo } from '../features/todoSlice';
import './AddTodo.css'; // Import the CSS file

Now, let's proceed to write code for addTodo.js:

function AddTodo() {
  const [input, setInput] = useState("");
  const dispatch = useDispatch();

  const addTodoHandler = (e) => {
    e.preventDefault();

    if (input.trim()) {
      dispatch(addTodo(input));
      setInput("");
    }
  };

  return (
    <form onSubmit={addTodoHandler} className="add-todo-form">
      <input
        type="text"
        className="add-todo-input"
        placeholder="Enter a Todo..."
        value={input}
        onChange={(e) => setInput(e.target.value)}
      />
      <button type="submit" className="add-todo-button">
        Add Todo
      </button>
    </form>
  );
}

export default AddTodo;

In the code above, we created a component consisting of a button and the input field. When a user clicks "Add Todo" button , the AddTodo function is executed. The function uses the input.trim() to remove leading and trailing white spaces from the input and then dispatches the addTodo action with the new task as the payload.

Now, let's move on to the todo.js responsible for rendering the list of tasks and also deleting tasks.

Let's import the following to achieve this:

React: for creating react components.
useSelector: for retreiving specific pieces of state.
useDispatch: for dispatching actions to redux store.
removeTodo: for deleting an item.

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { removeTodo } from '../features/todoSlice'; // Adjust the import path based on your project structure
import './todo.css'; // Import the CSS file

Now, let's write the code for todo.js.

function Todos() {
  const todos = useSelector((state) => state.todos.todos);
  const dispatch = useDispatch();

  return (
    <div className="todos-container">
      <h1 className="todos-header">Todos</h1>
      {todos.length > 0 ? (
        todos.map((todo) => (
          <div key={todo.id} className="todo-item">
            <div className="todo-text">{todo.text}</div>
            <button
              onClick={() => dispatch(removeTodo(todo.id))}
              className="todo-delete-button"
            >
              Delete
            </button>
          </div>
        ))
      ) : (
        <div className="no-todos">No todos available.</div>
      )}
    </div>
  );
}

export default Todos;

The code above checks If todos.length > 0 (i.e., there are to-do items), the component maps through the todos array and renders each item.
If todos.length === 0, a message (No todos available.) is displayed.

onClick: When the button is clicked, it dispatches the removeTodo action with the todo.id as the payload. This action will remove the specific todo from the Redux store.

Finally, import the components into your App.jsx file and render them.

import React from 'react';
import AddTodo from './components/AddTodo';
import Todos from './components/todo';


function App() {
  return (
    <div className="container mx-auto p-6">
      <h1 className="text-4xl font-bold text-center mb-6">Todo App</h1>


        <AddTodo />
        <Todos />

    </div>
  );
}

export default App;

Step 8: Getting Started with Redux Devtools

To get started, download the Redux DevToolsRedux DevTools Extension Extension for your browser.

After the istallation, your browser DevTools will add a new tab specifically for Redux.

You will then click on the "State" tab within the Redux DevTools to show you the entire state of your Redux store and any actions that have been dispatched and their payloads.

In the Redux DevTools, click "state". This will show you the entire state of your Redux store and the dispatched actions and their payload.

Final Step

After implementing everything as shown in the tutorial the final product should look like the one below.

Conclusion

Redux is a very powerful state management tool used by a lot of developers all over the world. In this article I have discussed in detail what is Redux, it's advantages and finally a demo project on how to use the Redux tool practically. You can search on YouTube more tutorials about Redux and I am confident that you will grasp the content.

End ...

Happy coding.

DEV Community: Hesbon limo

Setting up (vite+react) project with shadcn ui.

Introduction

1 Creating vite project and adding tailwindCSS

2 Setting app files.

2.1 index.css

2.2 jsconfig.json

2.3 Vite.config.js

3 Setting up Shadcn.

4 Adding components to your project

Conclusion

Understanding File I/O in Python: Reading, Writing, and Managing Files

Introduction

The advantages of file I/O

Disadvantages of file I/O

Practical uses of file I/O in Python

File modes

- 'w': Writing mode. Opens the file for writing.

Opening and writing files

Reading from files

Working with CSV Files

Writing to CSV FIles

Conclusion

How to authenticate a Flask API using JWT.

Introduction

Steps

Step 1: Installing Flask and JWT

Step 2: Importing necessary libraries

Step 3: Creating Flask instance

Step 4: Define the public Route

Step 5: Define an auth route

Step 6: Define the login method

Final Thoughts

Mastering WebSockets with Socket.IO: A Comprehensive Guide

What is a WebSocket?

Building a CRUD Operation using socket.io

Setting up the environment

Prerequisites

Setting up the backend

Setting up the frontend

Implementing the frontend

Implementing the Backend

Testing

Conclusion

Mastering PostgreSQL: A Beginner's Guide

What is PostgreSQL

How to install PostgreSQL

Creating your first PostgreSQL database

Step 1. Connect to the server

Step 2. Create a database

Step 3. Switch to the created database

Step 4. Create a table

Step 5. Insert data into the table

Step 6. Query data from the table

Step 7. Update data in the table

Step 8. Delete data from the table

Constraints in PostgreSQL

Indexing for performance in PostgreSQL.

Restoring and backing up data in PostgreSQL.

Conclusion

The Most Important JavaScript Array Methods to Understand

1. map

2. filter

3. slice

4. splice

5. forEach

6. some

7. every

8. fill

9. push

10. pop

11.unshift

12.shift

13. find

14. findIndex

15. includes

Conclusion

The Most Important Javascript Array Methods to Understand

1. map

2. filter

- `'w'`: Writing mode. Opens the file for writing.