Forem: UP Mindanao SPARCS

Software Development 101: A Crash Course in Version Control with Git and Github

Nigel John Angel — Sun, 22 Feb 2026 15:51:18 +0000

This article was co-authored by Nicole Marie Eduliantes

Ever tried sending code to your groupmates via Messenger? Or maybe even Discord? Yep… we’ve been there. And trust us, it was not pretty.

Writing code on your own is a breeze. Open your text editor, fire up Python, C, C++, or even whip up a quick webpage with HTML and CSS — easy peasy. But once you start working with others… that’s the exciting part. (Can you feel the sarcasm through the screen?)

Every CS first-year knows the classic horror story: your program works perfectly on your computer, but the moment your groupmates compile it… suddenly your debugger looks like a crime scene. Ask any freshie — they’ve all been through it.

After surviving the tragedy that was our CMSC 18 final project, we decided to save others from the same fate. That’s why we created this step-by-step guide for anyone — CS freshie or not — who’s ever faced the terror of group coding.

This guide is beginner-friendly and covers all the essentials of version control, plus how to implement it using Git and GitHub. And yes, if you’re still wondering what the difference between Git and GitHub is… don’t worry, that’s another canon event for every student out there.

So buckle up! We’re about to take you from a complete version control noob to a Git-and-GitHub master.

Section 1: Introduction to Version Control
- What Is Version Control?
- What Are the Advantages of Implementing Version Control?
- What Is a Version Control System (VCS)?
- What Is a Distributed Version Control System (DVCS)?
Section 2: Introduction to Git and GitHub
- What Is Git?
- Git Components
- What Is GitHub?
- GitHub Concepts
- What Is the Difference Between Git and GitHub?
Section 3: Setting Up Git and GitHub
- Setting Up Git
- Creating a Git Repository
- Setting Up GitHub
- Creating a GitHub Repository
- Remote Repository Configuration
Section 4: Utilizing Git and GitHub
- Git Commands and More Concepts
- Other Useful Commands
- Copying a Repository
- Managing Changes
- Synchronizing Your Code

Section 1: Introduction to Version Control

What Is Version Control?

Version control, also known as source control, is the practice of tracking and managing changes made to source code over time. It allows developers to maintain a detailed history of modifications while establishing a central repository that serves as the authoritative version of the project.

This shared reference makes it the perfect solution for collaborative coding, as it helps teams monitor updates, ensures that everyone works on a consistent and up-to-date version of the same source code, and provides a way to manage conflicting changes.

Attribution: SFDC Panther+

What Are the Advantages of Implementing Version Control?

Collaboration

Version control allows multiple developers to work on the same project simultaneously without interfering with one another by maintaining a shared repository. It also helps detect overlapping changes, making merge conflicts easier to identify and resolve efficiently.

Traceability

Implementing version control preserves a comprehensive history of changes, allowing developers to review past modifications and revert the codebase when errors occur or when specific changes need to be undone. It also provides information on when the changes were made, who made them, and why they were made, enhancing the program’s readability and scalability, especially for long-term development.

Debugging

Version control facilitates the debugging process by enabling developers to systematically identify which specific code modifications contributed to the occurrence of bugs and errors.

Automation

Version control also enables the automation of software releases through Continuous Integration (CI) and Continuous Delivery (CD) workflows. These CI/CD tools can automatically build, test, and deploy new versions of the software whenever updates are pushed.

Now that we know what version control is, the question remains:

How do we put it into practice?

Enter Version Control Systems (VCS) — the essential tools that bring version control to life.

What Is a Version Control System (VCS)?

A Version Control System (VCS) lets you manage your code’s history.

Think of it as a Time Stone on steroids — granting god-like control over your code’s timeline. You can:

Create new timelines (branches)
Rewrite history (modify commits)
Erase realities (delete commits)
Merge alternate timelines safely

Teams collaborate via pull requests, reviewing and approving changes before merging into the main timeline. Every action is tracked, giving you full power to shape, reshape, or reset your code with precision and confidence.

There are several types of Version Control Systems, each with its own features and workflows. Since this article focuses on Git, we will take a closer look at Distributed Version Control Systems (DVCS).

What Is a Distributed Version Control System (DVCS)?

A Distributed Version Control System (DVCS) is a type of VCS in which developers create a full local copy of the repository by cloning the original source code.

This allows them to:

Commit changes locally
Create branches
Perform merges
Experiment safely

All without accidentally modifying the main repository.

By working locally, developers can experiment and manage their changes safely before sharing them with the team. For this reason, DVCS is best suited for projects requiring high collaboration and the ability to work offline.

Now that we’re done with all the “boring” introductory concepts, let’s dive into the world of Git.

Section 2: Introduction to Git and GitHub

What Is Git?

Git is a free and open-source Distributed Version Control System (DVCS) created by Linus Torvalds in 2005. It is currently maintained by a team of open-source contributors led by Junio Hamano.

Today, Git is one of the most widely used VCS tools in the tech community, renowned for its speed, flexibility, and suitability for collaborative development.

Git Components

Repository – Contains all files, folders, and history of a project
Remote Repository – Repository on a server accessible by the team
Local Repository – Copy stored on your computer
Working Tree – Project folder where you edit files
Branch – Separate line of development
Local Branch – Branch in your local repository
Remote Branch – Branch on the remote repository
Staging Area – Area where changes are prepared before committing

What Is GitHub?

GitHub is a cloud-based platform that hosts remote repositories and uses Git as its version control system.

It allows developers to:

View code
Share projects
Collaborate through pull requests
Manage workflows
Review changes

Beyond storage, GitHub provides tools — including AI-powered features — that help teams collaborate more efficiently.

GitHub Concepts

Remote Repository – Repository hosted on GitHub
Fork – Copy of someone else’s repository under your account
Clone – Downloading a local copy of a repository
Pull Request (PR) – Request to merge changes
Upstream – Original repository you forked
Syncing / Pulling from Upstream – Updating your fork with changes

What Is the Difference Between Git and GitHub?

In simple terms, Git is the Version Control System (VCS) that manages changes in code, while GitHub is a cloud-based platform where developers host and share their remote repositories. The actual version control process is carried out using Git, with GitHub serving as a place to store and collaborate on those repositories

Git performs version control.
GitHub facilitates collaboration.

Section 3: Setting Up Git and GitHub

Setting Up Git

Step 1: Download Git

Download Git based on your operating system:

https://git-scm.com/install/

Step 2: Open Git Bash (or Terminal)

After installation, open:

Git Bash (Windows)
Terminal (Mac/Linux)

Step 3: Configure Your Identity

Run the following commands to configure your global Git identity:

git config --global user.name "Your Name"
git config --global user.email "youremail@example.com"

This ensures that your commits are properly labeled.

Step 4: Set Default Editor (Optional but Recommended)

git config --global core.editor "code --wait"

This sets Visual Studio Code as your default Git editor.

Step 5: Set `main` as Default Branch Name

git config --global init.defaultBranch main

This ensures all new Git repositories use main as the default branch.

Step 6: Verify Your Global Configuration

git config --global --list

Ensure the following appear:

user.name=Your Name
user.email=youremail@example.com
core.editor=code --wait
init.defaultbranch=main

Creating a Git Repository

In this section, we will create a Git repository. This is a local repository that exists only on your computer and cannot be accessed by other devices unless you push it to a remote repository such as GitHub.

Step 1: Create or Choose a Project Folder

Create a new project folder or choose an existing one.
Copy its file path.

Step 2: Navigate to Your Project Folder

Open Git Bash and run:

cd [filepath]

Your working directory should now display your selected folder path.

Step 3: Initialize a Git Repository

git init

You should see:

Initialized empty Git repository in [filepath]

Step 4: Create a Python File (`app.py`)

In your code editor, open your project folder and create a file named app.py with the following code:

def greet(name):
    return f"Hello, {name}! Welcome to Git."

def main():
    user_name = "Beginner"
    print(greet(user_name))

if __name__ == "__main__":
    main()

Step 5: Create a `.gitignore` File

Create a file named .gitignore.

This .gitignore file is important since there might be files in our project folder that we don’t want to include in our repository. It tells Git which files and folders should be ignored and not added to commits.

Step 6: Create a `.env` File (Simulating Sensitive Data)

Create a file named .env.

For this demonstration, pretend it contains:

Secret keys
API keys
Passwords

These should never be committed.

Step 7: Configure `.gitignore`

Paste the following into your .gitignore:

# Ignore environment files
.env

# Python cache
__pycache__/
*.pyc

# Virtual environments
venv/
.env/

This ensures that sensitive files and unnecessary system-generated files are not tracked by Git.

Step 8: Stage Your Files

git add .

This will add all new and modified files, excluding those specific in .gitignore, to the staging area.

Step 9: Create Your First Commit

git commit -m "first commit"

This records the changes in the staging area as a new commit in Git’s history. Each commit acts like a save point, so you can later view or restore your project to a previous state if needed.

Step 10: Verify Your Commit History

git log

You should see:

Author
Date
Commit message

Setting Up GitHub

Step 1: Create a GitHub Account

Go to:

https://github.com/

Click Sign Up and complete registration.

Step 2: Setting Up an SSH Key (Optional but Recommended)

Before setting up an SSH key, let’s first understand what it is. This step is optional, since you can also use HTTPS instead of SSH, though SSH is a more secure option.

SSH (Secure Shell) - This is a network protocol that lets one computer communicate securely with another over the internet by encrypting the connection to protect sensitive data. This enables developers to log in to servers, manage files, and run commands remotely.
SSH Key - A “password” used by the SSH to verify your identity. Configuring it to your Github account allows you to perform commands without having to type in your username and password each time.
- Private Key – A secret key that stays on your computer and must never be shared.
- Public Key – A “lock” that can be safely shared and can only be opened using the matching private key on your computer.

Think of Facebook:

Username = Public Key (safe to share)
Password = Private Key (never share)

Remember that it's "technically" safe to share your username with anyone (stranger danger). Your password, however, must stay secret because anyone who knows it can unlock your account and read all your messages, just like someone could break into an SSH connection if they had your private key.

Follow this tutorial to generate your SSH key:

https://medium.com/@kyledeguzmanx/quick-step-by-step-guide-to-generating-an-ssh-key-in-github-d3c6f7e185bb

Creating a GitHub Repository

We will now be creating a GitHub repository, a remote repository on the cloud that can be viewed and accessed by other people if the repository has been set to public.

Step 1: Create a New Repository

Go to the following link and click on New Repository

https://github.com/new

Step 2: Enter Repository Details

Repository name
Description (optional)

No need to modify default settings.

Step 3: Click Create Repository

Remote Repository Configuration

Step 1: Copy Repository URL

On your GitHub repository page:

Click the Code button
Copy the HTTPS or SSH URL

Step 2: Link Local Repository to Remote

In Git Bash:

git remote add origin [repository-url]

This connects your local Git project to the remote repository on GitHub.

Step 3: Rename Branch to `main`

git branch -M main

This renames your current branch to main.

Step 4: Push to GitHub

git push -u origin main

This uploads your local main branch to the remote repository on GitHub and sets it as the default branch for future pushes and pulls

Step 5: Verify Upload

Open your GitHub repository page.

If your files appear under the main branch, your push was successful. Notice that .env was NOT uploaded — thanks to .gitignore.

Section 4: Utilizing Git and GitHub

In this section, we’ll dive deeper into how Git and GitHub are used in real-world collaborative coding. We’ll explore key concepts and commands—and then put them into action by modifying a remote repository ourselves!

Git Commands and More Concepts

Clone – Copies a remote repository to your local machine.

git clone [repository-url]

Staging – Adds changes to the staging area and tells Git which changes you want to include in the next commit.

git add [filename]   # Stages a specific file
git add .            # Stages all changes in the current directory

Commit – Takes a snapshot of your staged changes and adds them to the project’s history. Each commit acts as a restore point you can backtrack to if needed.

git commit -m "[message]"  # Saves your staged changes with a commit message

Cherry-pick – Applies a specific commit from another branch onto your current branch.

git cherry-pick [commit-hash]

Status – Shows the current state of your working directory and staging area.

git status

Commit History – Displays the history of commits in your Git repository.

git log                      # Complete view of commit history
git log --oneline            # Simplified view
git log --oneline --graph --all   # Visual graph of commit history

Branching – Creates a separate line of work so you can develop features or fixes independently without affecting the main code.

git branch                   # List branches
git branch [branch-name]     # Create a new branch
git checkout -b [branch-name]  # Create a branch and switch to it

Merge – Combines changes from one branch into your current branch, creating a unified history.

git merge [branch-name]

Push – Sends your local commits to the remote repository.

git push [remote-repo-name] [branch-name]

Pull – Downloads the latest changes from the remote repository and merges them into your current branch, updating your local code automatically.

git pull [remote-repo-name] [branch-name]

Fetch – Downloads the latest changes from the remote repository to your local repository without merging, allowing you to review them first.

git fetch [remote-name]

Rebase – Reapplies commits from one branch onto another to maintain a linear history.

git rebase [branch-name]

Merge Error – Occurs when two branches have changes to the same line of code (or overlapping changes in the same file) and Git cannot automatically determine which change to keep.

Other Useful Commands

git diff – View unstaged changes.

git diff

git diff --staged – View staged changes.

git diff --staged

git restore [file-name] – Discard changes in a file.

git restore [file-name]

git restore --staged [file-name] – Unstage a specific file.

git restore --staged [file-name]

git reset – Unstage all files.

git reset

git commit --amend – Edit the last commit.

git commit --amend

Copying a Repository

Attribution: dataschool.io

This diagram illustrates the workflow of forking a repository, starting with Fork, then Clone, followed by Update, Commit, Push, and ending with creating a Pull Request.

1. Open the demo repository in your browser

https://github.com/lowCortisolDev/python-merge-demo

This is the original (upstream) repository that you will copy and use for practice.

2. Click the Fork button at the top right of the page

Forking creates your own copy of the repository under your GitHub account, letting you experiment freely without touching the original project. In real group projects, developers usually clone the repository directly. But for this demo, we’ll fork it so that you have a safe space to try things out.

3. In the dialog that appears, click Create Fork

This generates your own remote repository copy that you fully control.

4. Navigate to your forked repository in your GitHub account

You are now viewing your personal remote version of the project. Any changes you make here won’t affect the original repository.

5. Click the Code button and copy the HTTPS link

This link will be used to clone (download) the repository to your computer.

6. On your computer, create another folder named Demo

This folder will store your local repository files.

7. Open Git Bash (or your terminal) and navigate to the folder

cd ~/Documents
cd Demo

You are moving your terminal into the directory where the repository will be cloned.

8. Clone the repository using the link you copied in step 5

git clone [link]  # Paste the link you copied in step 5

Cloning downloads the remote repository and creates a connected local Git repository on your computer.

9. Navigate into the cloned repository folder

You must enter the project directory before making changes. This now serves as your local repository.

10. Open the repository in your Text Editor (VS Code optional but recommended)

Managing Changes

Attribution: Amazon Web Services (AWS)

This diagram shows how changes move between your working tree, staging area, local branches, and the remote repository in Git.

1. Pull the cloned repository on your local Git repository

git pull origin main

Ensures your local repository is synchronized with the latest changes from GitHub before starting new work. This is important as accidentally working on an outdated version will cause a Merge Conflict later on.

2. Create a Second Feature Branch on your local Git repository

git checkout main
git checkout -b feature-analytics

Here, you are switching to main, and then creating a new branch stemming out of it. The new branch will allow you to develop new features without affecting the main branch.

3. Modify `app.py` from feature-analytics branch

This allows you to implement the analytics feature in an isolated development branch. Make sure to modify an existing line of code to demonstrate a merge error.

4. Stage, commit, and push the changes in `feature-analytics` branch

git add .
git commit -m "Add analytics feature"
git push origin feature-analytics

git add moves changes to the staging area, git commit saves changes locally, and git push uploads the branch to GitHub.

5. Merge Two Feature Branches towards the main branch via Pull Request

A Pull Request allows you to review and merge changes safely on GitHub.

6. Go to your GitHub repository and open the Pull requests tab

This is where branch comparisons and merges happen.

7. Click New pull request

8. Set Base to main and Compare to feature-analytics

This means that you are requesting to merge the feature branch into the main branch.

9. Click Create pull request

This submits the request for review and merging.

10. Click Merge pull request, then Confirm merge

If no conflicts exist, GitHub automatically merges the branch into main.

11. Repeat the process but merge feature-logging into main

This will result in a Merge Conflict because we deliberately made both branches modify the same line of code.

12. Click Resolve conflicts

This will allow you to see conflicting sections that must be manually resolved.

13. Resolve the Conflict in GitHub Editor

You must manually combine both versions and remove conflict markers (<<<<<<<, =======, >>>>>>>). Ensure the final code contains both logging and analytics features correctly.

14. Click Mark as resolved, then click Commit merge

This will confirm that the conflict has been properly fixed.

15. Click Merge pull request, then Confirm merge

The feature branch is now successfully merged into main.

Synchronizing Your Code

After merging the two feature branches using a Pull Request, your local repository may not yet reflect the latest changes from GitHub.

1. Switch to the main branch

git checkout main

We need to switch to the main branch first because we’re about to pull the latest changes from the remote repository into our local main branch.

2. Pull the latest changes from GitHub

git pull origin main

Now, our local main branch is completely up to date with the remote version.

3. Delete the merged branches locally (Optional but recommended)

git branch -d feature-logging
git branch -d feature-analytics

You can delete these branches in our local repository to remove clutter. These branches are no longer needed since the changes in these branches have already been applied to main.

4. Delete the merged branches on GitHub (Optional)

git push origin --delete feature-logging
git push origin --delete feature-analytics

This is similar to the previous step, but this will delete the branches in the remote repository.

5. Verify your branch status

git branch

You should now see:

* main

This confirms that only the main branch remains and your repository is fully synchronized.

Your repository is now fully updated, clean, and ready for your next feature

Congratulations!

You’ve just completed Software Development 101: A Crash Course in Version Control with Git and GitHub!

From understanding the basics of version control, to creating branches, resolving merge conflicts, and collaborating with GitHub, you’ve taken your first big steps toward mastering the tools that power modern software development.

Whether you’re a complete beginner or just brushing up your skills, the knowledge you’ve gained here will make teamwork, code management, and project organization far easier—and way less stressful.

Now go forth, commit boldly, merge wisely, and never fear a conflict again!

References

Cover Photo Attribution

https://www.biteinteractive.com/of-git-and-github-master-and-main/

Dancing Pixels: Building an Immersive Audio-Reactive 3D Web Experience with React Three Fiber

Von Jorge — Sun, 22 Feb 2026 15:05:47 +0000

This article was co-authored by @shnnkwhr

We are currently living through one of the most exciting eras of browser graphics in history.

With the real-time rendering tools available today, a solo developer can build interactive 3D experiences that once required an entire studio. We can stream audio, analyze frequencies, animate characters, and run GPU shaders, all inside a single tab. The barrier between imagination and execution has almost disappeared.

But most web experiences are still static. We scroll. We click. We consume. What if the browser didn’t just display content?

What if it sparked? it listened?

Meet LowCortiSparcs, a real-time audio visualizer built using today’s browser graphics technologies, removing the barrier between imagination and execution.

This project demonstrates a modern, end-to-end pipeline for creating interactive, audio-driven 3D web experiences. The workflow begins in Blender, where base character models are created, rigged, cleaned up, and optimized for web performance. These are then exported to Adobe Mixamo for automated skeletal rigging and the application of motion-capture animations. Once the animated characters are brought back into Blender for final web preparation (exporting as lightweight .glb files), they are integrated into a NextJS/React frontend architecture powered by Three.js. At the core of the experience is the Web Audio API, which captures sound frequencies in real-time through an AnalyserNode, feeding that data directly into the React render loop (useFrame). This real-time data dynamically modulates the character's animation speed and mesh scaling, creating a music-reactive visualizer directly in the browser.

Understanding the WebGL Stack (Three.JS)

To bring these 3D assets to the browser, we rely on Three.js. While web browsers natively use WebGL (a JavaScript API) to render 2D and 3D graphics, writing raw WebGL requires complex math and verbose code. Three.js perfectly bridges this gap, since it is a powerful JavaScript library that abstracts away the heavy lifting, allowing developers to create 3D scenes with significantly less code. A standard Three.js project is built upon 3 core components:

the Scene, which acts as a master container operating on a 3D Cartesian coordinate system to hold all objects, lights, and backgrounds;
the Camera, which serves as the viewer's "eyes" and determines what is visible using specific projections (like perspective or orthographic); and
the Renderer, which compiles the scene and camera perspectives to draw the final result onto an HTML <canvas> element.

To actually display objects within this scene, Three.js uses a Mesh, which pairs two essential properties:

the Geometry, which defines its physical mathematical shape; and
the Material, which defines its surface appearance, color, and reactions to light.

Step-by-Step Guide on Building the Project

1. Prerequisites

Before we dive into the code, here is what you need to understand the stack:

React & Hooks: Familiarity with useState , useEffect , and useRef .
Three.js Basics: A conceptual understanding of scenes, cameras, meshes, and materials.
Node.js: Installed on your machine (to run Vite and handle dependencies).

Our main libraries:

@react-three/fiber : A React reconciler for Three.js.
@react-three/drei : Useful helpers for R3F (like useFBX and Environment maps).
zustand : For lightweight global state management

2. Project Setup and System Architecture

3D projects can get messy fast. To keep things lightweight and maintainable, we separate our 3D elements from our audio logic and global state.

3. Building the 3D Model

In order to bring a 3D character to life, we first need the 3D character itself.

Do not worry if you’re not a 3D artist or if you don’t have Blender! For this guide, we’ve provided the files so you can jump straight into coding the visualizer.

Modeling the Mesh

Open Blender and enter “Edit Mode” to start creating our model. Transform a simple cube by using tools such as extrude to create limbs, scale to edit proportions, and loop cuts to add joints or you can simply find models with rigs from Adobe Mixamo.

Texturing and Materials

A 3D model is flat and gray by default. To give it color and depth, we have to assign materials and textures to its faces, giving it visual identity.

The Rigging Process

At this point, we already have the “skin” of our model, but it is still static and unable to move. To fix that, we have to give it a skeleton first. Add an armature, which is a digital skeleton, to the parts that you want to move, such as the model’s arms, legs, and body. A critical step after adding armature is weight painting. This defines which parts and how much of the “skin” should move whenever a “bone” in the model moves.

With the mesh complete and armature in place, our 3D model is now ready to be animated in Adobe Mixamo.

You can get access to the assets here: Asset

4. Sparking up the Heartbeat

Before we can make anything react to sound, we need the sound data itself. Browsers provide a powerful, native Web Audio API for exactly this purpose.

We wrap this logic in a singleton class: AudioController.ts

Creating the Analyzer
To get audio data, we need two main parts: an AudioContext and an AnalyserNode.

// src/core/audio/AudioController.ts

class AudioController {
  context: AudioContext | null = null;
  analyser: AnalyserNode | null = null;
  source: AudioBufferSourceNode | null = null;
  frequencyData: Uint8Array;

  init() {
    // Initialize the Web Audio API context
    this.context = new (
      window.AudioContext || (window as any).webkitAudioContext
    )();

    // Create an AnalyserNode to extract frequency data
    this.analyser = this.context.createAnalyser();

    // FFT (Fast Fourier Transform) size determines the frequency resolution.
    // Higher = more detailed data, but heavier processing.
    this.analyser.fftSize = 256;

    const bufferLength = this.analyser.frequencyBinCount;

    // An array to hold the live frequency data
    this.frequencyData = new Uint8Array(bufferLength);
  }
}

The AnalyserNode acts as a pass-through node that extracts time and frequency data from the audio signal without altering the output.

Extracting the Data
Next, we need a method where the 3D scene can poll 60 times a second to get the current audio levels. This is to ensure that the 3D scene is in sync with the audio, reacting to every vibration of the track without missing a beat.

// src/core/audio/AudioController.ts

getAudioData() {
  if (this.analyser && this.frequencyData) {
    // Populate the array with current frequency data (values 0-255)
    this.analyser.getByteFrequencyData(this.frequencyData);

    // Calculate the average volume of all frequencies combined
    let sum = 0;

    for (let i = 0; i < this.frequencyData.length; i++) {
      sum += this.frequencyData[i];
    }

    const average = sum / this.frequencyData.length;

    return {
      frequencyData: this.frequencyData, // Array for specific bands
      average: average // Single numeric value for overall volume
    };
  }

  return { frequencyData: new Uint8Array(0), average: 0 };
}

By returning average , we have a unified metric (0-255) representing how "loud" the song is at any exact millisecond!

5. Setting up the Low Cortisol Environment

Now that we have audio data, we need a place to put our 3D objects. VisualizerCanvas.tsx is where the declarative magic of React Three Fiber shines.

// src/components/visualizer/VisualizerCanvas.tsx

import { Canvas } from '@react-three/fiber';
import { OrbitControls, Environment, ContactShadows } from '@react-three/drei';
import { Suspense } from 'react';
import FBXVisualizer from '../../features/visualizers/FBXVisualizer';
import FloatingFlowers from '../../features/visualizers/FloatingFlowers';

const VisualizerCanvas = () => {
  return (
    <div className="w-full h-screen bg-black">
      <Canvas camera={{ position: [0, 5, 20], fov: 45 }}>
        {/* Scene Setup */}
        <color attach="background" args={['#050505']} />

        {/* Cyberpunk Lighting */}
        <ambientLight intensity={1.5} />
        <directionalLight position={[10, 20, 10]} intensity={2} />
        <pointLight
          position={[-10, -10, -10]}
          intensity={1}
          color="#ff0080"
        /> {/* Pink */}
        <pointLight
          position={[10, 10, 10]}
          intensity={1}
          color="#00ffff"
        /> {/* Cyan */}

        {/* 3D Elements */}
        <Suspense fallback={null}>
          <FloatingFlowers count={150} />
          <FBXVisualizer />

          {/* Realistic Reflections and grounded shadows */}
          <Environment preset="city" />
          <ContactShadows
            position={[0, -5, 0]}
            opacity={0.5}
            scale={50}
            blur={2}
          />
        </Suspense>

        {/* Allow the user to drag the camera */}
        <OrbitControls makeDefault />
      </Canvas>
    </div>
  );
};

export default VisualizerCanvas;

Using <Suspense> is critical here. Since loading heavy 3D models (useFBX) is asynchronous, Suspense ensures React waits for the assets to download and parse before trying to render them.

6. Giving the 3D Model the LowCortiSpark

This is where the magic happens. We load a baked skeletal animation and tie its speed directly to the audio average we built earlier.

// src/features/visualizers/FBXVisualizer.tsx

import { useRef, useEffect } from 'react';
import { useFrame } from '@react-three/fiber';
import { useFBX } from '@react-three/drei';
import * as THREE from 'three';
import { audioController } from '../../core/audio/AudioController';
import { useAudioStore } from '../../store/useAudioStore';

const FBXVisualizer = () => {
  // Load the FBX model
  const fbx = useFBX('/Hip Hop Dancing (1).fbx');
  const groupRef = useRef<THREE.Group>(null);
  const mixerRef = useRef<THREE.AnimationMixer | null>(null);
  const isPlaying = useAudioStore((state) => state.isPlaying);

  // Setup animation mixer
  useEffect(() => {
    if (!fbx) return;

    if (fbx.animations && fbx.animations.length > 0) {
      const mixer = new THREE.AnimationMixer(fbx);
      const action = mixer.clipAction(fbx.animations[0]); // play first animation
      action.play();
      mixerRef.current = mixer;
    }

    return () => mixerRef.current?.stopAllAction();
  }, [fbx]);

  // Audio-reactive loop
  useFrame((_, delta) => {
    if (!groupRef.current) return;

    const { average } = audioController.getAudioData();

    // Scale dancer based on volume
    const baseScale = 0.02;
    const targetScale = baseScale + (average / 255) * 0.01;
    groupRef.current.scale.lerp(new THREE.Vector3(targetScale, targetScale, targetScale), 0.1);

    // Adjust animation speed with volume
    if (mixerRef.current) {
      let targetSpeed = 0;
      if (isPlaying) {
        targetSpeed = 1.0 + (average / 255) * 0.5; // louder → faster
      }
      mixerRef.current.timeScale = THREE.MathUtils.lerp(mixerRef.current.timeScale, targetSpeed, 0.1);
      mixerRef.current.update(delta);
    }
  });

  return (
    <group ref={groupRef} position={[0, -2, 0]}>
      <primitive object={fbx} />
    </group>
  );
};

Breaking down the useFrame hook
In React Three Fiber, useFrame executes roughly 60 times a second (the requestAnimationFrame loop). By fetching getAudioData() inside this loop, we are constantly getting the newest amplitude data. We then manipulate mixerRef.current.timeScale . By altering timeScale , we are literally speeding up or slowing down the playback of the skeletal animation based on how loud the song is.

7. Creating Infinite Ambience: Instanced Particles

To truly sell the immersive experience, we need background elements. Instead of rendering 150 individual mesh components (which would destroy framerates), we use THREE.InstancedMesh .

// src/features/visualizers/FloatingFlowers.tsx

import { useRef, useMemo } from 'react';
import { useFrame } from '@react-three/fiber';
import * as THREE from 'three';
import { audioController } from '../../core/audio/AudioController';

const FloatingFlowers = ({ count = 150 }) => {
  const meshRef = useRef<THREE.InstancedMesh>(null);
  const dummy = useMemo(() => new THREE.Object3D(), []);

  // Generate random particles behind the dancer
  const particles = useMemo(() => {
    const temp = [];
    for (let i = 0; i < count; i++) {
      temp.push({
        x: (Math.random() - 0.5) * 60,
        y: (Math.random() - 0.5) * 60,
        z: -15 - Math.random() * 30, // far in the background
        scale: Math.random() * 0.8 + 0.2,
        speed: Math.random() * 0.01 + 0.005,
      });
    }
    return temp;
  }, [count]);

  // Animate particles
  useFrame(() => {
    if (!meshRef.current) return;

    const { average } = audioController.getAudioData();
    const audioBoost = (average / 255) * 0.05; // boost speed on beat

    particles.forEach((particle, i) => {
      // Float upwards, faster on louder beats
      particle.y += particle.speed + audioBoost;

      // Reset to bottom if too high
      if (particle.y > 30) particle.y = -30;

      dummy.position.set(particle.x, particle.y, particle.z);

      // Pulse size with music
      const audioScale = particle.scale + (average / 255) * 0.5;
      dummy.scale.set(audioScale, audioScale, audioScale);

      dummy.updateMatrix();
      meshRef.current.setMatrixAt(i, dummy.matrix); // apply transform
    });

    meshRef.current.instanceMatrix.needsUpdate = true; // notify Three.js
  });

  return (
    <instancedMesh ref={meshRef} args={[null, null, count]}>
      <torusKnotGeometry args={[0.5, 0.15, 64, 8]} />
      <meshStandardMaterial
        color="#ff0080"
        emissive="#ff0080"
        emissiveIntensity={0.5}
        roughness={0.2}
        metalness={0.8}
      />
    </instancedMesh>
  );
};

This single <instancedMesh> draws 150 highly-detailed Torus Knots in one batch. Just like the dancer, their vertical velocity ( audioBoost ) and their physical size ( audioScale ) are mathematically tethered to the audio average.

Conclusion

Congratulations! By following this guide, you've successfully transformed a static 3D model into a digital performer through React Three Fiber and the Web Audio API, bridging the gap between raw sound data and 3D geometry.

But, this is just the first step. The real-time audio visualizer we built in this tutorial can still be taken further, whether you want to change the colors of the particles based on the audio frequency, or shake the camera when the sound reaches a certain threshold, the possibilities are all up to you!

Now that you've stepped into the realm of creative coding, make the web browser your playground and see what else you can bring to life.

If you want to follow through the Github repository or analyze the spark of the code itself, you may do so here! LowCortiSparcs

A Beginner’s Guide to Building a REST API with Express.js, PostgreSQL, and Postman

Enrico Tia — Sun, 22 Feb 2026 15:05:26 +0000

Co-authored by: Rhea Grace Catacutan

Ever wonder how websites 'talk'?

We know that databases store the information, but a REST API is the bridge that lets you actually move it. Here is how to build a simple API that creates, retrieves, and manages your data using Express, PostgreSQL, and Postman.

Workshop Proper

Prerequisites

To follow this guide, you will need the following tools:

Node: A runtime environment to run JavaScript and server files.
PostgreSQL: A database server to store the information used in your API.
VSCode: A code editor for writing your backend logic.
Postman: A tool used to test and debug HTTP requests.

If you do not have any of the following software for this workshop, go to the following links for installation:

Node - https://nodejs.org/en/download
PostgreSQL - https://www.enterprisedb.com/downloads/postgres-postgresql-downloads
VSCode - https://code.visualstudio.com/download
Postman - https://www.postman.com/downloads/

Getting Started

1. Initialize Node Project

We would create a new folder and open terminal to initialize the project with default configurations:

npm init -y

When executed, the console must output something like this:

Wrote to C:\Users\<path_of_working_directory>\package.json

Note: package.json stores all the configurations of the node project

2. Install Required Dependencies

We would be using the express (node.js web application framework), cors, pg (PostgreSQL), dotenv (environment variables) modules.

# We can install the modules individually:
npm install <module_name>

# Or install all the required modules in one line
npm install express cors pg dotenv

When installing modules, the console must return something like this:

added 82 packages, and audited 83 packages in 5s

24 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

3. Install Nodemon

Nodemon allows to run server/node.js files in real time; it updates itself when changes are being saved. The -g flag means we are downloading this globally, meaning this module can be reused by other node projects.

npm install -g nodemon

Setup Database Connection

Setup environment variables in a .env file. (NOTE: When using Github, always add it in the .gitignore to keep credentials private. Never show it in a repo)

# .env
# Sample env variable configuration
DB_USER=postgres
DB_PASSWORD=<database_password>
DB_HOST=localhost
DB_PORT=5432
DB_DATABASE=<database_name>
# 5432 is the default port where the database is stored

Create Database using Postgres in either psql CLI or pgadmin interface. Using psql CLI for database: Press enter for everything aside from the password. Type the password you used when setting up your Postgres. (NOTE: It may look blank when you type but it is recording your keystrokes.)

From here, you can now create your database.

CREATE DATABASE your_db_name;

To use the database you have created we type \c <database_name> in the CLI to use the database you created.

Table creation using pgAdmin Look for your database and open the query tool.

Here is a sample query to create a table. Say you want to keep track of the records of the clients in a company:

CREATE TABLE client_records (
  id SERIAL PRIMARY KEY,
  username VARCHAR(100) NOT NULL,
  payment_status VARCHAR(50),
  commission_status VARCHAR(50),
  deadline DATE
);

Click run (the play button) to execute the query. (Note: it is possible to run the query in the psql CLI by simply copy pasting the query above)

Configure database connection node file (database.js)

//database.js
const {Pool} = require('pg');
require('dotenv').config();

const pool = new Pool({
    user: process.env.DB_USER,
    host: process.env.DB_HOST,
    database: process.env.DB_DATABASE,
    password: process.env.DB_PASSWORD,
    port: process.env.DB_PORT,
});

module.exports = pool;

Create backend code (index.js). This is where you will place your routing logic for your REST API.

//index.js

//include module headers
const express = require('express');
const pool = require('./database');
const cors = require('cors');

//initialize port number your server wants to listen to
const PORT = 8000;

//Create an express app. This is where operations in the 
//backend are used.
const app = express();

//Declare middleware.
//Allow the server to load resources from other origins
app.use(cors());
//Parse JSON data in requests
app.use(express.json());

//routing methods go here.

//Listen for connections. This creates the localhost server.
app.listen(PORT, () =>{
    console.log(`Server running at http://localhost:${PORT}`)
});

What is REST API

REST stands for Representational State Transfer. It is an API that interacts with the server to transfer data, resources, and allows communication between the frontend and the backend systems. It is a simple and versatile API to use and implement as it is highly scalable and uniform.

There are 4 common routing methods for RESTful APIs: GET, POST, PUT, and DELETE. These would correspond to the CRUD operations: Create (POST), Read (GET), Update (PUT), and Delete (DELETE)

Let's get our hands dirty with it.

Note that the format of each routing method is as follows

app.<route_method>(<route_path>, async(req, res) =>{ 
    try {
        //query, template, params
        //parse result
    }
    catch {
        //code to run when an error occurs
    }
});

GET METHOD (READ) - used to retrieve or show data or resources. This is typically supported with the SELECT clause in database query.

Note: Status 500 - Internal Server Error

app.get('/test', async (req, res) => {
    try {
        //Say we want to get contents of the database
        const result = await pool.query("SELECT * FROM table");
        //The * wildcard would represent all columns from the selected table.
        //You may list specific colums to display specific data.

        //Parse the result in JSON format
        res.json(result.rows);
    } catch (error) {
        //catch error
        console.error(error);
        res.status(500).send("An error occurred in the server");
    }
});

Sample Database:

//index.js
app.get('/test', async (req, res) => {
    try {
        const result = await pool.query("SELECT * FROM client_records");
        res.json(result.rows);
    } catch (error) {
        console.error(error);
        res.status(500).send("An error occurred in the server");
    }
});

POST METHOD (CREATE) - create or add new resources or data. This is supported with the INSERT clause in the database query

Status 201: Content Created

app.post('/test', async (req, res) => {
    try {
        //We could create a template for parameters we would add in our database
        const {param1, param2} = req.body;

        //query new data into database. Note the order of placeholders in the query as it is replaced by the selected parameters.
        const result = await pool.query(
            "INSERT INTO table (param1, param2) VALUES ($1, $2) RETURNING *",
            [param1, param2]
        );
        //The first item in the array is what will we be returning in our created resource. The other rows are probably junk and are not needed.
        res.status(201).json(result.rows[0]);

        //send configuration of resource
        console.log("Resource created successfully");
    } catch (error) {
        console.error(error);
        res.status(500).send("An error occurred in the server.");
    }
});

Sample Database:

//index.js
app.post('/test', async (req, res) => {
    try {
        const { username, payment_status, commission_status, deadline } = req.body;
        const result = await pool.query(
            "INSERT INTO client_records (username, payment_status, commission_status, deadline) VALUES ($1, $2, $3, $4) RETURNING *",
            [username, payment_status, commission_status, deadline]
        );
        res.status(201).json(result.rows[0]);
        console.log("Resource created successfully");
    } catch (error) {
        console.error(error);
        res.status(500).send("An error occurred in the server.");
    }
});

PUT METHOD (UPDATE) - update or modify an existing resource or data.

app.put('/test/:param1', async (req, res) => {
    try {
        //Create template for target parameter(s).
        const { param1 } = req.params;

        //Create template for parameter(s) we want to change 
        const { param2 } = req.body;

        //Query to modify resource
        const result = await pool.query(
            `UPDATE table SET username = $2 WHERE param1 = $1 `,
            [param1, param2]
        );
        res.status(201).json(result.rows[0]);

        //send confirmation of resource
        console.log("Resource updated successfully");
    } catch (error) {
        console.error(error);
        res.status(500).send("An error occurred in the server.");
    }
});

Sample Database:

//index.js
app.put('/test/:id', async (req, res) => {
    try {
        const { id } = req.params;
        const { username, payment_status, commission_status, deadline } = req.body;
        const result = await pool.query(
            "UPDATE client_records SET username = $1, payment_status = $2, commission_status = $3, deadline = $4 WHERE id = $5 RETURNING *",
            [username, payment_status, commission_status, deadline, id]
        );
        res.status(201).json(result.rows[0]);
        console.log("Resource updated successfully");
    } catch (error) {
        console.error(error);
        res.status(500).send("An error occurred in the server.");
    }
});

DELETE METHOD (DELETE) - Deletes an existing resource or data

app.delete('/test/:param1', async (req, res) => {
    try {
        //set target parameter
        const { param1 } = req.params;

        //query to delete with the target parameter
        const result = await pool.query(
            "DELETE FROM table WHERE param1 = $1",
            [param1]);
        //confirm deletion
        console.log("Resource deleted successfully");
        res.status(204).send(); 
    } catch (error) {
        console.error(error);
        res.status(500).send("An error occurred in the server.");
    }
});

Sample Database:

//index.js
app.delete('/test/:id', async (req, res) => {
    try {
        const { id } = req.params;
        const result = await pool.query(
            "DELETE FROM client_records WHERE id = $1",
            [id]);
        console.log("Resource deleted successfully");
        res.status(204).send(); 
    } catch (error) {
        console.error(error);
        res.status(500).send("An error occurred in the server.");
    }
});

For a complete reference of the status code refer to https://www.restapitutorial.com/httpstatuscodes

How to know if each of these methods are working fine?

We would use nodemon to run our backend code

nodemon index.js

Note: Ctrl+C to stop the server

We would test each method in Postman to see if the method works completely fine using the database we have created earlier, in this example, the client_db database.

METHOD 1: GET
Type http://localhost:8000/test to retrieve the data from your database.

(As you can see, when you type this down our database is still empty. We will change that by using the POST method.)

METHOD 2: POST

Go to Body. Set to raw and JSON.
Type down values for each attribute.

Sample input:

JSON

{   
"username": "vaizravana",
"payment_status": "Fully Paid",
"commission_status": "Completed",
"deadline": "2025-07-12"
}

Click Send.

Now let’s check using GET method. We now have successfully created our first data.

METHOD 3: PUT

To change the values, use the PUT method. In this example, we want to alter the payment_status and commission_status of himari.

(Post this input to have 2 data set on your database.)

JSON

{
"username": "himari",
"payment_status": "Partially Paid",
"commission_status": "Work in Progress",
"deadline": "2026-02-26T16:00:00.000Z"
}

You must get this kind of output in Postman

Now, add the index of what you want to change to the url. In this case,

http://localhost:8000/test/2

Go to Body. Set to raw and JSON.
Write down all the attributes and change what is needed.

Sample input:

JSON

{
"username": "himari",
"payment_status": "Fully Paid",
"commission_status": "Completed",
"deadline": "2026-02-26T16:00:00.000Z"
}

Click Send. The changes have been now added.

METHOD 4: DELETE

To choose what data to delete, just add the index at the end of the url.

http://localhost:8000/test/2

Click Send.

“id” : 2 has now been deleted.

Conclusion

Congratulations! You have successfully created a REST API! You may use this interface in your own website or software and connect with the frontend (if you want), or now that you know how to create a basic REST API, you can experiment further with different routing methods, query optimization, more on express.js and node, and others.

Based on experience, learning how to use and implement API for the first time feels like climbing a steep mountain without any proper equipment or tools, especially when it is required for a project. However, learning REST API is straightforward, as it uses familiar HTTP requests such as the GET, POST, PUT, and DELETE. It is also highly scalable with its statelessness, making it process server-side requests very quickly. Moreover, Express.js provides templates for each routing method making RESTful APIs simpler to implement.

References:

When Two Intelligences Collide: Prompt Engineering Becomes the Bridge

Ezra-Ysabela-Gellecania — Sun, 22 Feb 2026 15:01:33 +0000

(Cover Photo Source: The Council of Europe)

This article was co-authored by Nas John Lumapas

Introduction

When two different intelligences collide, communication between them won’t be smooth. Humans communicate linguistically, while AI, like all computers, communicates through binary and code.

To understand how we bridge this gap, we must look at the history of Human–AI Interaction (HAX).

According to the Interaction Design Foundation (2025):

1950s–1960s – AI systems were built using symbolic logic and rule-based reasoning.
1970s–1980s – Neural networks, fuzzy logic, genetic algorithms, and expert systems emerged.
1990s–2000s – Machine learning and deep learning led to conversational agents.
Early 2020s – The “AI Boom” brought Large Language Models (LLMs) into everyday life.

We moved from rigid, command-line computing to graphical interfaces and now to conversational AI systems like ChatGPT and Google Gemini.

We are living in what many call “The Age of AI.”

After reading this article, you will:

Learn about what prompt engineering is
Know how AI interprets prompts
Find out the common mistakes when making prompts
Learn effective prompt engineering with core prompting techniques
Know how to use AI responsibly
Be a part of the future of human-AI interaction

What Is Prompt Engineering?

(Photo Source: Fortune)

According to Amazon Web Services (AWS), prompt engineering is:

The process of guiding generative AI to generate desired outputs.

Google Cloud defines it as:

The art and science of designing and organizing prompts for AI.

When the printing press was invented in the 15th century, literacy increased dramatically. Similarly, generative AI is the innovative tool of our generation. Learning prompt engineering increases our digital literacy in the AI era.

In simple terms, prompt engineering is the key to unlocking the treasure chest that is AI and finding the treasures that we want.

How AI Interprets Prompts

(Photo Source: Forbes)

When you enter a prompt:

The AI processes it using Natural Language Processing (NLP).
It breaks your input into smaller units called tokens (tokenization).
It predicts the most likely next word based on learned patterns.
It generates a response.

Machine learning (ML), as described by IBM (2025), trains algorithms to recognize patterns and make predictions.

At its core:

AI does not “understand” like humans, it predicts based on patterns.

The quality of output depends heavily on:

Clarity
Specificity
Context
Constraints

Poor prompts can lead to:

Generic answers
Hallucinations
Logical errors

Prompt engineering is essentially optimizing inputs to improve outputs.

Common Mistakes in Prompt Engineering

1. Vague and General Questions

Ambiguous prompts force AI to guess, which may result in hallucinations.

AI hallucination = confidently generating false or misleading information.
Example:

Prompt:

Tell me about learning coding.

Output:

In 2026, learning to code has shifted from "memorizing syntax" to "**systems thinking**." With AI now able to generate perfect boilerplate in seconds, the value of a developer lies in their ability to debug, architect, and understand the "why" behind the code.

Here is a guide to getting started in the current landscape.

---

## 1. Choose Your "Launchpad" Language

Don't stress over picking the "perfect" language—most principles translate across all of them. Pick based on what you want to build:

| Goal | Recommended Language | Why? |
| --- | --- | --- |
| **AI & Data Science** | **Python** | The industry standard for machine learning and automation. |
| **Web Development** | **JavaScript / TypeScript** | Essential for building anything that runs in a browser. |
| **Mobile Apps** | **Swift (iOS) or Kotlin (Android)** | Modern, safe, and officially backed by Apple/Google. |
| **Enterprise/Systems** | **Java or Go** | Used for massive, scalable backend systems and cloud infrastructure. |

---

## 2. The 2026 Learning Strategy: "Problem-First"

The old way was watching 40-hour video courses. The new way is **Contextual Learning**:

* **Build Before You're Ready:** Start a tiny project (like a "To-Do" list or a tip calculator) on day one.
* **The "Break It" Rule:** When AI gives you a working snippet, intentionally change a line to see how it breaks. This teaches you how the code actually functions.
* **Learn "On Demand":** Instead of learning every type of loop, only learn the one you need to solve the specific problem in front of you.

---

## 3. Use AI as a Mentor, Not a Crutch

Tools like **Cursor**, **GitHub Copilot**, and **Gemini Code Assist** are your best friends—if used correctly.

* **Avoid:** "Write a login page for me"  Copy/Paste  Done. (You learn nothing).
* **Adopt:** "Explain the logic of this authentication function line-by-line."
* **Verification is the New Coding:** Your job is no longer just writing code; it's *verifying* that the AI's code is secure, efficient, and fits your specific needs.

---

## 4. Helpful Tools & Resources

* **Gemini Guided Learning:** You can use my **Guided Learning** mode to break down complex topics step-by-step. Just ask me to "Help me learn [topic]" and click the **Learn** chip.
* **Interactive Environments:** Use **Replit** or **Google Cloud Shell Editor** to write code in your browser without any complex setup.
* **AI-First Editors:** **Cursor** is a popular fork of VS Code that has AI deeply integrated into the workflow, making it easier to see how changes affect your whole project.

> **Pro Tip:** If you can't explain what a block of code does in plain English, you don't "own" that code yet. Delete it and ask the AI to explain the concept again until it clicks.

**Would you like me to create a 30-day personalized learning roadmap for a specific language like Python or JavaScript?**

Proper Prompt:

Prompt:

I am a complete beginner with zero coding experience. I want to learn Python so I can eventually automate simple tasks at my office job.

Please give me a 4-week learning roadmap. For each week, tell me:

What concept to focus on

One specific practice exercise

Which free resource to use (website or YouTube channel)

Assume I can study 1 hour per day.

Output:

Learning to code is a superpower for the modern office, and Python is the perfect "Swiss Army Knife" for it. Since you have 1 hour a day, we’ll focus on the "80/20 rule": learning the 20% of Python that will do 80% of your office work.

Here is your 4-week roadmap to becoming an office automation hero.

---

## **Week 1: The Building Blocks**

* **Focus:** **Syntax, Variables, and Data Types.** You need to learn how to store information (like names, prices, or dates) and how to talk to the computer.
* **Practice Exercise:** Create a "Salary Calculator." Ask the user for their hourly rate and hours worked per week, then have Python print out their total monthly pay after a 10% tax deduction.
* **Resource:** **[Programming with Mosh (YouTube)](https://www.youtube.com/user/programmingwithmosh)** – Watch his "Python Tutorial for Beginners" (first 60 minutes).

---

## **Week 2: The "Brain" (Logic & Loops)**

* **Focus:** **If-statements and Loops.** This is where automation happens. "If" statements let Python make decisions (e.g., *if* the price is over $100, flag it), and "Loops" let Python do repetitive work (e.g., check *every* row in a list).
* **Practice Exercise:** Build a "Password Validator." Write a script that asks for a password. If the password is "Secret123", print "Access Granted." If not, use a loop to let them try again up to 3 times.
* **Resource:** **[FreeCodeCamp (YouTube)](https://www.youtube.com/c/Freecodecamp)** – Search for their "Scientific Computing with Python" playlist or their 4-hour Python beginner course.

---

## **Week 3: Handling Files & Text**

* **Focus:** **Reading and Writing Files.** In an office, your data lives in files. You’ll learn how to open a `.txt` or `.csv` file, change the text inside, and save a new version.
* **Practice Exercise:** The "Automatic File Organizer." Create a script that looks at a list of filenames (like `report_2025.txt`, `image1.jpg`, `data.csv`) and "sorts" them by printing out which folder they should go into based on their extension.
* **Resource:** **[Automate the Boring Stuff with Python](https://automatetheboringstuff.com/)** – Read **Chapter 9: Reading and Writing Files** (the website is free to read).

---

## **Week 4: The Office Superpower (Excel & CSV)**

* **Focus:** **The Pandas Library.** Most office work is just moving data around in Excel. Python has a tool called "Pandas" that can read 10,000 rows of Excel data in a fraction of a second.
* **Practice Exercise:** Download a sample CSV of sales data. Use Python to find the total sum of the "Sales" column and save only the rows where the "Status" is "Pending" into a new file.
* **Resource:** **[Corey Schafer (YouTube)](https://www.youtube.com/user/schafer5)** – Look for his "Pandas Tutorial" series. He is widely considered the best teacher for clear, technical breakdowns.

---

### **How to stay on track:**

1. **Don't memorize:** You don't need to remember every command. Professional coders Google things 50 times a day.
2. **Use an IDE:** Download **VS Code** (free) to write your code. It will highlight your errors and make learning much easier.
3. **Consistency > Intensity:** 1 hour every day is much better than a 7-hour marathon on Sunday.

**Would you like me to generate a simple "starter script" for Week 1 that you can try running right now?**

2. Omitting Crucial Context

AI cannot read your mind. Provide:

Social-historical context
Cultural context
Temporal details
Physical constraints
Authorial intent

3. Overloading With Too Many Tasks

Too many instructions can confuse the model and cause it to overlook important parts of your request.
Example:

Prompt:

I'm planning a 10-day trip to Japan in the spring. Please create a detailed day-by-day itinerary for Tokyo, Kyoto, and Osaka. For each day, suggest restaurants for breakfast, lunch, and dinner that are budget-friendly. Also, give me a full packing list for spring weather, teach me 50 basic Japanese phrases, explain the entire history of Japanese tea ceremonies, compare the Shinkansen bullet train to the JR Rail Pass and tell me which is better, list the top 10 cultural etiquette rules I must know, and recommend the best pocket Wi-Fi rental companies. Oh, and also tell me how to use a Japanese toilet.

Output:

Japan in the spring is a dream—cherry blossoms, crisp air, and a perfect blend of high-tech and history. Since you’re hitting the "Golden Route" (Tokyo, Kyoto, Osaka), here is your comprehensive guide to doing it right in 2026.

---

## 📅 10-Day "Golden Route" Itinerary

### **Tokyo (Days 1–4)**

* **Day 1: Arrival & Shinjuku.** Drop bags, head to Shinjuku Gyoen for blossoms, and see the Tokyo Metropolitan Govt Building (Free views).
* *Lunch:* **Ichiran Shinjuku** (Famous tonkotsu ramen).
* *Dinner:* **Omoide Yokocho** (Yakitori in "Piss Alley").


* **Day 2: Harajuku & Shibuya.** Meiji Jingu Shrine, Takeshita Street, and the Shibuya Crossing.
* *Lunch:* **Kyushu Jangara Ramen** (Harajuku).
* *Dinner:* **Genki Sushi** (Conveyor belt fun in Shibuya).


* **Day 3: Asakusa & Akihabara.** Senso-ji Temple and the electric town.
* *Lunch:* **Asakusa Kagari** (Udon/Soba).
* *Dinner:* **Coco Ichibanya** (Iconic Japanese curry).


* **Day 4: TeamLab Borderless & Odaiba.** Futuristic art and bay views.
* *Lunch:* **DiverCity Plaza Food Court** (Huge variety).
* *Dinner:* **Yano-tei** (Budget-friendly Teppanyaki).



### **Kyoto (Days 5–7)**

* **Day 5: Arashiyama.** Bamboo Grove and Monkey Park.
* *Lunch:* **Otsuka** (Famous roast beef bowls).
* *Dinner:* **Musashi Sushi** (Sanjo-dori).


* **Day 6: Higashiyama.** Kiyomizu-dera, Sannenzaka/Ninenzaka streets, and Gion.
* *Lunch:* **Nishiki Market** (Street food samples).
* *Dinner:* **Chao Chao Gyoza** (Pontocho area).


* **Day 7: The Classics.** Fushimi Inari (gates) and Kinkaku-ji (Golden Pavilion).
* *Lunch:* **Kura Sushi** (Near Fushimi).
* *Dinner:* **Kyoto Ramen Koji** (Inside Kyoto Station).



### **Osaka (Days 8–10)**

* **Day 8: Osaka Castle & Dotonbori.** History by day, neon lights by night.
* *Lunch:* **Tokumasa** (Curry udon near the castle).
* *Dinner:* **Mizuno** (Okonomiyaki in Dotonbori).


* **Day 9: Universal Studios Japan (USJ).** Super Nintendo World is a must.
* *Lunch/Dinner:* Eat within the park or at **CityWalk** (Lawson convenience store for budget).


* **Day 10: Nara Day Trip.** Bowing deer and the Great Buddha.
* *Lunch:* **Nakatanidou** (Fresh mochi and snacks).
* *Dinner:* **Shinsekai Kushikatsu** (Deep-fried skewers) before heading home.



---

## 🚄 Shinkansen vs. JR Pass (2026 Update)

**Verdict: Buy individual tickets.**
Following the massive price hikes in 2023/24, a 7-day JR Pass now costs **¥50,000**. A round-trip ticket from Tokyo to Osaka costs roughly **¥29,000**. Unless you are going all the way to Hiroshima or Hokkaido and back within 7 days, the JR Pass is no longer worth it.

> **Tip:** Buy your Shinkansen tickets via the **SmartEX** app or at the station machines.

---

## 🎒 Spring Packing List

Spring (March–May) is beautiful but fickle. It can be 18°C during the day and 7°C at night.

* **Clothing:**
* Light puffer jacket (Uniqlo Heattech is your friend).
* Layers: T-shirts + light sweaters/cardigans.
* **Walking shoes** (You will walk 15k+ steps daily).
* One "nice" outfit for temples or upscale dining.


* **Essentials:**
* **Portable Power Bank** (Phone batteries die fast with Google Maps).
* Compact umbrella (or buy a "konbini" one for ¥500 if it rains).
* Coin purse (Japan is still very cash-heavy).



---

## 🗣️ 10 Essential Phrases (50 is a lot! Start here):

1. **Arigatou gozaimasu** (Ah-ree-gah-toe go-zai-mass) – Thank you.
2. **Sumimasen** (Su-me-mah-sen) – Excuse me/Sorry.
3. **Kore o kudasai** (Ko-re oh ku-dah-sai) – I’ll take this, please.
4. **Okaikei onegaishimasu** (Oh-kai-kay oh-neh-guy-she-mass) – Check, please.
5. **...wa doko desu ka?** (...wa doh-ko dess-ka?) – Where is ...?
6. **Eigo?** (Ay-go?) – English?
7. **Oishii!** (Oy-shee!) – Delicious!
8. **Wakarimasen** (Wah-kah-ree-mah-sen) – I don't understand.
9. **Hai / Iie** (Hi / Ee-eh) – Yes / No.
10. **Irasshaimase!** (Ee-ra-shai-ma-seh) – Welcome! (You’ll hear this in every shop).

---

## 🍵 History of the Tea Ceremony (*Chanoyu*)

* **9th Century:** Tea arrives from China via monks.
* **12th Century:** Zen monk Eisai introduces powdered green tea (matcha).
* **15th Century:** It evolves from a luxury for elites into a spiritual practice.
* **16th Century:** **Sen no Rikyu** perfects the "Wabi-cha" style, emphasizing simplicity, humility, and the aesthetic of imperfection (*Wabi-sabi*).

---

## ⛩️ Top 10 Etiquette Rules

1. **No Tipping:** It can actually be seen as confusing or rude.
2. **Escalators:** Stand on the **Left** in Tokyo; **Right** in Osaka.
3. **Silence on Trains:** No phone calls; keep talking to a whisper.
4. **Trash:** There are no public bins. Carry a small bag for your trash.
5. **Shoes Off:** Remove shoes at temple entrances and indoor restaurants with tatami.
6. **Chopsticks:** Never stick them vertically in rice (funeral rite).
7. **Bowing:** A small nod is enough for most interactions.
8. **Tattoos:** Check "tattoo-friendly" lists if you plan to visit an Onsen (hot spring).
9. **Walking & Eating:** Generally frowned upon; step to the side of the street to eat.
10. **Cash Trays:** Place money in the small tray at the counter, not directly in hands.

---

## 📶 Best Pocket Wi-Fi & 🚽 The Toilet Guide

* **Wi-Fi:** **Japan Wireless** or **Ninja WiFi** are the industry leaders. Pick up at the airport.
* **The Toilet:** 1.  **The Panel:** Usually on the wall or the side of the seat.
2.  **The Icons:** Blue spray = Rear; Pink spray = Front/Feminine.
3.  **Stop:** The big orange/red square button.
4.  **Flush:** Often a separate lever on the tank or a sensor on the wall labeled **大** (Big) or **小** (Small).

**Would you like me to find the specific cherry blossom forecast dates for your travel window?**

Proper Prompt:

Prompt:

I am a complete beginner with zero coding experience. I want to learn Python so I can eventually automate simple tasks at my office job.

Please give me a 4-week learning roadmap. For each week, tell me:

What concept to focus on

One specific practice exercise

Which free resource to use (website or YouTube channel)

Assume I can study 1 hour per day.

Output:

Learning to code is a superpower for the modern office, and Python is the perfect "Swiss Army Knife" for it. Since you have 1 hour a day, we’ll focus on the "80/20 rule": learning the 20% of Python that will do 80% of your office work.

Here is your 4-week roadmap to becoming an office automation hero.

---

## **Week 1: The Building Blocks**

* **Focus:** **Syntax, Variables, and Data Types.** You need to learn how to store information (like names, prices, or dates) and how to talk to the computer.
* **Practice Exercise:** Create a "Salary Calculator." Ask the user for their hourly rate and hours worked per week, then have Python print out their total monthly pay after a 10% tax deduction.
* **Resource:** **[Programming with Mosh (YouTube)](https://www.youtube.com/user/programmingwithmosh)** – Watch his "Python Tutorial for Beginners" (first 60 minutes).

---

## **Week 2: The "Brain" (Logic & Loops)**

* **Focus:** **If-statements and Loops.** This is where automation happens. "If" statements let Python make decisions (e.g., *if* the price is over $100, flag it), and "Loops" let Python do repetitive work (e.g., check *every* row in a list).
* **Practice Exercise:** Build a "Password Validator." Write a script that asks for a password. If the password is "Secret123", print "Access Granted." If not, use a loop to let them try again up to 3 times.
* **Resource:** **[FreeCodeCamp (YouTube)](https://www.youtube.com/c/Freecodecamp)** – Search for their "Scientific Computing with Python" playlist or their 4-hour Python beginner course.

---

## **Week 3: Handling Files & Text**

* **Focus:** **Reading and Writing Files.** In an office, your data lives in files. You’ll learn how to open a `.txt` or `.csv` file, change the text inside, and save a new version.
* **Practice Exercise:** The "Automatic File Organizer." Create a script that looks at a list of filenames (like `report_2025.txt`, `image1.jpg`, `data.csv`) and "sorts" them by printing out which folder they should go into based on their extension.
* **Resource:** **[Automate the Boring Stuff with Python](https://automatetheboringstuff.com/)** – Read **Chapter 9: Reading and Writing Files** (the website is free to read).

---

## **Week 4: The Office Superpower (Excel & CSV)**

* **Focus:** **The Pandas Library.** Most office work is just moving data around in Excel. Python has a tool called "Pandas" that can read 10,000 rows of Excel data in a fraction of a second.
* **Practice Exercise:** Download a sample CSV of sales data. Use Python to find the total sum of the "Sales" column and save only the rows where the "Status" is "Pending" into a new file.
* **Resource:** **[Corey Schafer (YouTube)](https://www.youtube.com/user/schafer5)** – Look for his "Pandas Tutorial" series. He is widely considered the best teacher for clear, technical breakdowns.

---

### **How to stay on track:**

1. **Don't memorize:** You don't need to remember every command. Professional coders Google things 50 times a day.
2. **Use an IDE:** Download **VS Code** (free) to write your code. It will highlight your errors and make learning much easier.
3. **Consistency > Intensity:** 1 hour every day is much better than a 7-hour marathon on Sunday.

**Would you like me to generate a simple "starter script" for Week 1 that you can try running right now?**

4. Not Iterating

Prompt engineering is iterative.
Refine → Test → Improve.

5. Not Including Constraints

Tell AI both:

What to do
What not to do

6. Forgetting to Specify Output Format

LLMs default to unstructured paragraphs.

Instead, request:

Bullet points
Tables
JSON
Step-by-step
Code blocks

Structured outputs improve clarity and usability.

7. Not Using Prompting Techniques

Without techniques, you’re underutilizing AI.

Step-by-Step Guide to Effective Prompt Engineering

(Photo Source: CertiProf)

Not all prompting techniques are equal. Each produces different behavioral responses.

Using the wrong technique may cause:

Hallucinations
Token waste
Logical failure

Before prompting, choose an LLM such as Google Gemini, ChatGPT, or another preferred model. Prompting techniques generally work across platforms.

Core Prompting Techniques

1. Role Prompting

Assign a role to shape tone, expertise, and reasoning.

Template

Role: [Assign a role]

Task: [Define the task]

Context: [Provide necessary data]

Constraint: [Define limitations]

Example (Software Development)

Role: Act as a Senior Frontend Developer who mentors junior developers.

Task: Review my CSS code below. I am trying to center a "Profile Card"
perfectly in the middle of the web page.

Context:
.background-container {
  display: flex;
  justify-content: center;
}

Constraint: You are strictly forbidden from giving me the missing CSS
properties. Instead, explain the difference between the "main axis" and the
"cross axis" in Flexbox. Then ask me one guiding question.

Role prompting shapes how the AI behaves — mentor, critic, tutor, consultant, etc.

2. Zero-Shot Prompting

No examples are provided. The AI relies purely on its training.

Template

Instruction: Define the rule
Context: Provide necessary data
Task: Generate response

Best for:

Translation
Summarization
Sentiment classification
Simple transformations

3. Few-Shot Prompting

Provide examples to establish a pattern.

Template

Context 1: Example input
Output 1: Example output

Context 2: Example input
Output 2: Example output

Context n: New input
Output n:

This improves consistency and formatting accuracy.

4. Chain-of-Thought Prompting

Encourages step-by-step reasoning.

Ideal for:

Mathematics
Logic
Complex problem-solving

Example

Find the integral:

∫ x cos(x) dx

Reasoning:

Identify as product of algebraic and trigonometric functions.
Choose Integration by Parts.
Let u = x and dv = cos(x)dx.
Apply formula uv − ∫vdu.

Final Answer:

x sin(x) + cos(x) + C

Chain-of-thought prompting improves transparency and logical clarity.

Real-World Applications of Prompt Engineering

Software Development

(Photo Source: n8n Blog)

AI assists with:

Code generation
Debugging
Explaining logic
Refactoring

However, the quality of code depends heavily on prompt structure.

Role prompting works well for:

Code reviews
Mentorship simulation
Enforcing best practices

Education and Learning

(Photo Source: Discovery Education)

AI can:

Act as a tutor
Generate quizzes
Provide step-by-step math solutions
Explain topics at varying levels of difficulty

Chain-of-thought prompting is particularly powerful in education.

But remember:

Output quality depends on input quality.

Ethical Considerations and Responsible Use

(Photo Source: TechHQ)

AI is powerful, but imperfect.

Risks include:

Bias
Hallucinations
Data privacy concerns
Academic dishonesty
Overdependence

Avoid sharing:

Personal identifiers
Confidential data
Sensitive credentials

Responsible AI use requires awareness of institutional and company policies, as well as international ethical frameworks such as UNESCO’s principles on AI ethics.

These include:

Do no harm
Privacy protection
Transparency
Accountability
Human oversight
Fairness and non-discrimination

After reading this article, remember not only the techniques, but also the ethics of using AI. In our community, we stand by responsible and ethical prompt engineering.

The Future of Human–AI Interaction with Prompt Engineering

AI is evolving from a niche tool into a foundational skill.

Prompt engineering is expanding into context engineering — designing not just prompts, but entire AI interaction environments.

Modern LLMs now:

Ask clarifying questions
Suggest refinements
Automate improvements
Offer structured response options

AI is evolving alongside us.

Even if AI advances rapidly, responsible prompt engineering ensures:

Ethical outputs
Human-centered systems
Rights-based AI development

To Conclude

Artificial Intelligence is not truly “artificial.”

It is:

Inspired by humans
Built by humans
Used by humans
Affecting humans

Prompt engineering is no longer a niche skill.

It is becoming a core literacy of the AI age.

When two intelligences collide, prompt engineering becomes the bridge.

References

Amazon Web Services. (2026). What is Prompt Engineering?
Bergmann, D. (2025). What is Machine Learning? IBM.
Google Cloud. (2026). Prompt Engineering for AI Guide.
Harvard University. (2023). Getting Started with Prompts.
UNESCO. (2026). Ethics of Artificial Intelligence.
OpenAI. (2025). Usage Policies.
Interaction Design Foundation. (2025). What is Human-AI Interaction?

No Wifi? No Problem: Using ElectricSQL ⚡ to Implement Local-First Syncing

Vonne Chelsea Reese Sumbeling — Sun, 22 Feb 2026 14:26:38 +0000

This article was co-written with @yujiazuhata

Blackouts, slow signals, bad connection, or a forgotten internet bill— ever had any of these ruin your experience while working?

If you want to avoid these problems, going local-first on building your webs and apps is the way. Saving your data locally and automatically syncing it up whenever possible— imagine Git but for your data!

Here we’ll guide you through the implementation of ElectricSQL to build local-first, and hopefully you’ll pick up something along the way.

☁️ Cloud-First Syncing ☁️

What is Cloud-first?

A cloud-first approach means prioritizing the cloud technology for application deployments and the like. Going Cloud-First means being economically flexible and having a competitive edge, especially nowadays where businesses are heavily leaning towards this approach.

Cloud Disadvantages

Cloud-first is not always the optimal choice as it has its own disadvantages; cost inefficiencies, security concerns, and latency changes leading to performance challenges. It is important to note that a cloud service relies on a stable internet connection, thus the lack of it in certain environments— such as airlines and warehouses— severely impacts the intended usefulness of this approach.

🏠 Then Why Local-First? 🏠

What is Local-first?

The main idea of going local-first is that the user's data will be kept on their device in a local database, which will then sync to the cloud in the background whenever possible. Going local-first offers a fast and cheap way to build apps and decreases resource requirements— a few beneficial reasons among many others.

Local-first Framework

Paradigm Shift

A paradigm shift is currently happening in the software industry, from cloud-controlled systems to local-first ones, due to the user’s want for data ownership and control. This too however, is not the last time a shift will happen, in the future a more balanced local and cloud infrastructure combination will be found.

Read more about the Paradigm Shift here.

⚡ ElectricSQL ⚡

Why ElectricSQL?

ElectricSQL is the bridge, or rather, the synchronization layer that connects a local database to PostgreSQL using logical replication. It is a Postgres sync engine that enables the developers to build apps with a local SQL database and a PostgreSQL database.
Users can make changes locally, ElectricSQL syncs to PostgreSQL, the changes made will be received by other users and vice versa, and the conflicts will be resolved using rich CRDTs.

Local-first with ElectricSQL Framework

Integrating ElectricSQL to Your Web App for Local-first Syncing: A Beginner-friendly Guide 🧭

Interested but scared, or feeling overwhelmed? Worry not! This step-by-step guide will help you experience your first local-first syncing.
With the brief session out of the way, let’s get started on the how-to part.

Guide 1: No Existing React App? Worry Not!

Step 0: The Pre-requisites (What You Need Before You Start)
Before dropping local-first syncing into your existing web application, ensure you have the following ready:

Make sure Docker Desktop is installed and running on your machine. This application/tool is necessary for running the local database and sync engine. You may go to , download the version for your computer (Mac or Windows), double-click the installer, and follow the setup wizard.
Make sure Node.js is also installed. This will be used for managing your backend and frontend packages.
Basic PostgreSQL Knowledge.

Step 1: Wiring Up the Sync Engine
ElectricSQL acts as a middleman between your PostgreSQL database and your frontend app. It requires a Postgres database with logical replication enabled. The easiest way to run both locally for development is using Docker Compose.

Create a new project folder. In this tutorial, the developers named the project folder as “Project Folder Name”.
Create a new “docker-compose.yml” file in your project's root folder. Make sure your computer isn't hiding file extensions. The file must end in .yml, not .yml.txt. Here's what the new YAML file should look like in your project’s root folder.

Open the newly created YAML file and add the configuration for Postgres and Electric to it. Feel free to modify the PostgreSQL database name, user, and password (don’t forget to also change the succeeding database name, user, and password later!).

services:
  postgres:
    image: postgres:16-alpine
    environment:
      POSTGRES_DB: your_app_db
      POSTGRES_USER: postgres
      POSTGRES_PASSWORD: password
    ports:
      - '5432:5432'
    command:
      - -c
      - wal_level=logical # Crucial for Electric to detect changes

  electric:
    image: electricsql/electric:latest
    environment:
      - DATABASE_URL=postgresql://postgres:password@postgres:5432/your_app_db
      - ELECTRIC_INSECURE=true # For local development only
    ports:
      - '3000:3000'
    depends_on:
      - postgres

DON'T FORGET TO SAVE

Open a new terminal on VS Code and run this command. Attached also is a successful result:
```
docker compose up -d
```
A successful run of the previous command in step 4 creates a new container on Docker. To confirm this creation, open Docker Desktop and check whether the infrastructure was created. Here is an example of what a successful creation looks like:
Almost done with Step 1! Now it’s time to connect to your database. But first, make sure your container is turned on. (under the Actions column). If the container is turned off, the database is essentially powered down, and subsequent steps may fail. Here’s what it should look like:
in your terminal. This command allows you to run PostgresSQL commands in your terminal.
```
docker compose exec postgres psql -U postgres -d your_app_db
```
Once successful, your terminal prompt will change to your_app_db=# (the # symbol means you have full admin privileges). This is what we call the PostgreSQL Command Prompt. This is what we call the From here, you are ready to create the tables your app needs:
For our example project, the developers created a table with the name ‘todos’ and with attributes id, title, and key. Once you run the SQL statement in your PostgreSQL command prompt, you should be able to see the result CREATE TABLE, to know that your table was created. Run this query:
```
CREATE TABLE todos (id UUID PRIMARY KEY, title VARCHAR(255) NOT NULL, completed BOOLEAN DEFAULT false);
```
Once you see the “CREATE TABLE” result on the terminal, that means the table has been successfully created. And we are done with step 1!

Step 2: Build the Backend API
ElectricSQL magically handles the "Read Path" by automatically syncing data from your database directly to the frontend. However, to get new data into the database (the "Write Path"), we still need a standard backend API. Let's build a quick Node.js and Express server to catch our new tasks and save them to PostgreSQL

Open a new terminal, create an api folder, and set it up. To do so, run these commands one at a time on your new terminal.
```
mkdir api
cd api
npm init -y
npm install express pg cors
```
Here is what a successful run looks like. You should see the new packages added and etc.

Create an index.js file inside the api folder. If working on VS Code, right-click on the api folder and select ‘New File’. If not, manually create the file on File Explorer. Then, paste this code inside that new JavaScript file:

#JavaScript
const express = require('express');
const cors = require('cors');
const { Client } = require('pg');

const app = express();
app.use(cors());
app.use(express.json()); 

const db = new Client({
  connectionString: 'postgresql://postgres:password@localhost:5432/your_app_db'
});
db.connect().then(() => console.log('✅ Connected to PostgreSQL'));

app.post('/todos', async (req, res) => {
  try {
    const { id, title } = req.body;
    await db.query(
      'INSERT INTO todos (id, title, completed) VALUES ($1, $2, $3)',
      [id, title, false]
    );
    res.status(201).json({ message: 'Saved!' });
  } catch (error) {
    res.status(500).json({ error: 'Error saving task' });
  }
});

app.listen(3001, () => console.log('🚀 API running on port 3001'));

DON'T FORGET TO SAVE

Finally, run the node index.js command to start your backend server. This is what a successful result looks like:

Step 3: Writing the React App (Simple Task Tracker) with Local First Syncing
With our database engine running and our backend API ready to catch new data, it is time to build the face of our application! In this step, we will spin up a fresh React frontend. We will wire it up to read data directly from Electric's local memory in zero milliseconds, and use an "Optimistic UI" to ensure adding a task feels instantly fast—even if your user completely loses their Wi-Fi connection.

Open a new terminal window, and create a Vite React app by running this command:
```
npm create vite@latest client -- --template react-ts
```
Click ‘No’ for using Vite Beta 8 and ‘Yes’ to installing with npm and start now. It should look like this:
Open a new terminal inside the client folder and install the dependencies. Here are the commands:
```
cd client
npm install @electric-sql/react uuid
npm install -D @types/uuid
```

Then paste this code to App.tsx. This is our React app.

// src/App.tsx
import React, { useState, useEffect } from 'react';
import { useShape } from '@electric-sql/react';
import { v4 as uuidv4 } from 'uuid';

function App() {
  const [title, setTitle] = useState('');
  const [optimisticTodos, setOptimisticTodos] = useState<any[]>([]);

  // 1. THE READ PATH
  const { data: todos, isLoading } = useShape({
    url: 'http://localhost:3000/v1/shape',
    params: { table: 'todos' },
  });

  const serverTodoIds = new Set(todos?.map((t: any) => t.id) || []);
  const pendingTodos = optimisticTodos.filter(t => !serverTodoIds.has(t.id));
  const allTodos = [...(todos || []), ...pendingTodos];

  // This listens for your computer to reconnect to Wi-Fi.
  // When it does, it quietly loops through any pending tasks and sends them to the server.
  useEffect(() => {
    const handleReconnection = async () => {
      console.log("Wi-Fi detected! Syncing waiting tasks...");

      for (const task of pendingTodos) {
        try {
          await fetch('http://localhost:3001/todos', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ id: task.id, title: task.title }),
          });
          // Note: Once the server receives it, Electric will sync it down, 
          // and the "Syncing..." badge will automatically disappear!
        } catch (error) {
          console.warn("Still failing to sync task:", task.title);
        }
      }
    };    

    // Tell the browser to listen for the "online" event
    window.addEventListener('online', handleReconnection);

    // Cleanup the listener when the component unmounts
    return () => window.removeEventListener('online', handleReconnection);
  }, [pendingTodos]);

  // 2. THE WRITE PATH
  const addTodo = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!title) return;

    const newId = uuidv4();
    const newTask = { id: newId, title: title, completed: false, isPending: true };

    setOptimisticTodos(prev => [...prev, newTask]);
    setTitle('');

    try {
      await fetch('http://localhost:3001/todos', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ id: newId, title: newTask.title }),
      });
    } catch (error) {
      console.warn("You are offline! Task is waiting to sync.");
    }
  };

  const toggleComplete = async (id: string, currentStatus: boolean) => {
    try {
      await fetch(`http://localhost:3001/todos/${id}`, {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ completed: !currentStatus }),
      });
    } catch (error) {
      console.warn("Cannot update database while offline.");
    }
  };

  if (isLoading) return <div style={{ textAlign: 'center', marginTop: '40px', color: '#0e3768', fontSize: '1.5rem' }}>Syncing local database...</div>;

  return (
    <div style={{ 
      display: 'flex', 
      flexDirection: 'column', 
      alignItems: 'center', 
      justifyContent: 'center', 
      minHeight: '100vh', 
      width: '100vw',
      backgroundColor: '#f1f2f6', 
      fontFamily: '"Segoe UI", Roboto, Helvetica, Arial, sans-serif',
      padding: '20px',
      boxSizing: 'border-box',
      position: 'absolute',
      top: 0,
      left: 0
    }}>
      <div style={{ 
        width: '100%', 
        maxWidth: '550px', 
        backgroundColor: 'white', 
        padding: '50px 40px', 
        borderRadius: '16px', 
        boxShadow: '0 10px 25px rgba(14, 55, 104, 0.1)' 
      }}>

        <div style={{ textAlign: 'center', marginBottom: '40px' }}>
          <h1 style={{ margin: '0 0 8px 0', color: '#0e3768', fontSize: '2.4rem', fontWeight: '800' }}>
            Simple Task Tracker
          </h1>
          <p style={{ fontStyle: 'italic', color: '#555555', margin: 0, fontSize: '1.1rem', opacity: 0.8 }}>
            keeping tasks online even on offline mode
          </p>
        </div>

        <form onSubmit={addTodo} style={{ display: 'flex', gap: '12px', marginBottom: '30px' }}>
          <input 
            value={title} 
            onChange={(e) => setTitle(e.target.value)} 
            placeholder="What needs to be done?" 
            style={{ 
              flex: 1, 
              padding: '14px 16px', 
              borderRadius: '8px', 
              border: '2px solid #b0d8e3', 
              fontSize: '1.1rem',
              color: '#0e3768',
              backgroundColor: '#f1f2f6',
              outline: 'none'
            }}
          />
          <button type="submit" style={{ 
            padding: '14px 28px', 
            borderRadius: '8px', 
            border: 'none', 
            backgroundColor: '#0e3768', 
            color: '#f1f2f6', 
            cursor: 'pointer', 
            fontSize: '1.1rem',
            fontWeight: 'bold',
            boxShadow: '0 4px 6px rgba(14, 55, 104, 0.2)'
          }}>
            Add
          </button>
        </form>

        <ul style={{ listStyle: 'none', padding: 0, margin: 0 }}>
          {allTodos.map((todo: any) => (
            <li key={todo.id} style={{ padding: '16px 0', borderBottom: `2px solid #b0d8e3` }}>
              <label style={{ display: 'flex', gap: '16px', cursor: 'pointer', alignItems: 'center', opacity: todo.isPending ? 0.6 : 1 }}>
                <input 
                  type="checkbox" 
                  checked={todo.completed} 
                  onChange={() => toggleComplete(todo.id, todo.completed)} 
                  disabled={todo.isPending}
                  style={{ transform: 'scale(1.4)', accentColor: '#0e3768', cursor: 'pointer' }}
                />
                <span style={{ 
                  textDecoration: todo.completed ? 'line-through' : 'none', 
                  fontSize: '1.2rem', 
                  color: todo.completed ? '#b0d8e3' : '#0e3768',
                  fontWeight: '500',
                  flex: 1
                }}>
                  {todo.title}
                </span>

                {todo.isPending && (
                  <span style={{
                    fontSize: '0.8rem', 
                    backgroundColor: '#efe897', 
                    color: '#555555', 
                    padding: '4px 10px', 
                    borderRadius: '12px',
                    fontWeight: 'bold'
                  }}>
                    Syncing...
                  </span>
                )}
              </label>
            </li>
          ))}

          {allTodos.length === 0 && (
            <p style={{ textAlign: 'center', color: '#555555', fontStyle: 'italic', marginTop: '20px', fontSize: '1.1rem' }}>
              No tasks yet. Add one above!
            </p>
          )}
        </ul>

      </div>
    </div>
  );
}

export default App;

DON'T FORGET TO SAVE

Open a new terminal and run these commands:
```
cd client
npm run dev
```
Press CTRL and then click the local link highlighted in teal to visit the Simple Task Tracker
And voila! You have successfully integrated your first local-first sync with a web app using ElectricSQL! You can now keep track of your tasks even offline!

Guide 2: Integrating ElectricSQL into an Existing React App

Already have a working React frontend built with Vite or Next.js? Choose this path. We will skip the boilerplate and jump straight into the magic. You will learn how to replace your standard API loading spinners with Electric's zero-latency useShape hook, effortlessly upgrading your current web app into a fully offline-capable experience.

Step 0: The Pre-requisites (What You Need Before You Start)
Before dropping local-first syncing into your existing web application, ensure you have the following ready:

Make sure Docker Desktop is installed and running on your machine. This application/tool is necessary for running the local database and sync engine. You may go to , download the version for your computer (Mac or Windows), double-click the installer, and follow the setup wizard.
Make sure Node.js is also installed. This will be used for managing your backend and frontend packages.
An existing React app with a working frontend (built with Next.js, etc.) where you want to add instant syncing.
Basic PostgreSQL Knowledge

Create a new project folder. In this tutorial, the developers named the project folder as “Project Folder Name”.
Create a new “docker-compose.yml” file in your project's root folder. Make sure your computer isn't hiding file extensions. The file must end in .yml, not .yml.txt. Here's what the new YAML file should look like in your project’s root folder.

services:
  postgres:
    image: postgres:16-alpine
    environment:
      POSTGRES_DB: your_app_db
      POSTGRES_USER: postgres
      POSTGRES_PASSWORD: password
    ports:
      - '5432:5432'
    command:
      - -c
      - wal_level=logical # Crucial for Electric to detect changes

  electric:
    image: electricsql/electric:latest
    environment:
      - DATABASE_URL=postgresql://postgres:password@postgres:5432/your_app_db
      - ELECTRIC_INSECURE=true # For local development only
    ports:
      - '3000:3000'
    depends_on:
      - postgres

DON'T FORGET TO SAVE

Open a new terminal on VS Code and run this command. Attached also is a successful result:
```
docker compose up -d
```
A successful run of the previous command in step 4 creates a new container on Docker. To confirm this creation, open Docker Desktop and check whether the infrastructure was created. Here is an example of what a successful creation looks like:
Almost done with Step 1! Connect to your database (postgresql://postgres:password@localhost:5432/your_app_db) and create the tables your app needs.

Step 2: Implement the "Read Path" in Your React App
ElectricSQL exclusively handles the read path (PostgreSQL → Client) in order for data from your database directly into the browser's local memory in milliseconds.

Navigate to your frontend project folder and install the client:
```
# Bash
npm install @electric-sql/react
```

Replace your standard API fetching logic (like useEffect or React Query) with Electric's useShape hook. A "Shape" automatically subscribes to a table or query and keeps it perfectly synced with the server.

#TypeScript
import { useShape } from '@electric-sql/react';

function YourComponent() {
  // ✅ The new way: Live-syncing database connection
  const { data: syncedData, isLoading } = useShape({
    url: 'http://localhost:3000/v1/shape',
    params: { table: 'your_table_name' },
  });

  if (isLoading) return <div>Syncing local database...</div>;

  return (
    <ul>
      {syncedData.map(item => <li key={item.id}>{item.title}</li>)}
    </ul>
  );
}

Step 3: Keep Your Existing Backend for the "Write Path"

Because ElectricSQL streams data down to the client, you still need a standard backend API, such as Express, Django, Laravel, etc., to handle sending data up to the server. Your existing security and business logic do not need to change.

Whenever a user creates or updates an item in your app, send a standard HTTP request to your backend.

// Example Express backend route
app.post('/api/items', async (req, res) => {
  const { id, name } = req.body;
  // Write the change to Postgres
  await db.query('INSERT INTO your_table_name (id, name) VALUES ($1, $2)', [id, name]);
  res.send({ success: true });
});

When Postgres updates, Electric automatically detects the change and pushes it to all connected frontend clients instantly.

Step 4: Add "Optimistic UI" for True Offline Support
To make your app feel instantaneous and work offline, you must hide the network delay of your Write Path. You do this by updating the user interface immediately, before the server confirms the save.

Create a local temporary state (a "waiting room") for new items.
When a user submits data, add it to the local state instantly.

Attempt the fetch request in the background.

#TypeScript
// 1. Instant local update
setPendingItems(prev => [...prev, newItem]);

// 2. Background sync
try {
  await fetch('http://localhost:3001/api/items', {
    method: 'POST',
    body: JSON.stringify(newItem),
  });
  // Note: Once the server saves it, Electric streams the official row back down, 
  // and you can remove the item from your `pendingItems` state!
} catch (error) {
  console.warn("You are offline. The app will sync when reconnected.");

💻 Deployment 💻

Opening the App from Scratch

Make sure that your container in Docker Desktop is turned on.
Open a new terminal in VS Code and open the api folder start the index.js node. Run these commands individually and you will get a confirmation message if successful:
```
cd api
node index.js
```
Start the React frontend by opening a new terminal window and navigating into your frontend folder. Then, spin up your local React server by running these commands:
```
cd client
npm run dev
```
View your application by looking at your terminal output and Ctrl + Click (or Cmd + Click on Mac) the http://localhost:5173/ link. Your browser will open, and you will see your fully functioning, local-first web application.
And that's it! This is the entire process for opening the application.

📈Advantages of Using ElectricSQL📈

ElectricSQL makes local syncing simpler and easier, allowing developers to focus more on app features. Since it has real time data synchronization users will always have the updated information, helping make collaboration more smooth sailing. Moreover, ElectricSQL uses rich CRDTs to automatically and seamlessly handle data conflicts.

📉Disadvantages of Using ElectricSQL 📉

That said, ElectricSQL is not without its disadvantages— since it is designed to sync with PostgreSQL, using ElectricSQL limits the possible database systems you can use. There is also the risk of syncing large data which can lead to service instability. All in all, ElectricSQL is fairly new and has its fair share of downsides, but with continuous development it can improve in due time.

Here you can track its development.

Conclusion 🎉🎉

Congratulations! You have successfully built your local-first app!
Simply by following this guide, you have gained first-hand experience in local-first architecture with the use of ElectricSQL. If it suits your niche or piques your interest, you can continue by making more websites and apps where you focus on more complex features and implement ElectricSQL to further enhance your skills.
Who knows? Maybe you’ll be the one to find the optimal balance between local and cloud, after all—

“The future belongs to those who learn more skills and combine them in creative ways.” — Robert Greene.

Sources

Leveraging a Vector Database for Semantic Search with ChromaDB: A Beginner’s Guide

Ed Ian Jay Baguio — Sun, 22 Feb 2026 13:15:05 +0000

Sybil Micarandayo is a co-author of this article.

🔎 Here’s our First QUERY = Search-Answers…

Imagine a situation where you ever searched for “Apple”, and the computer looked for the exact letters A-P-P-L-E.

But what if you wanted information about “fruit” or “Steve Jobs"?

This is the failure of traditional keyword search. It requires a perfect 1-to-1 match of characters.

Fortunately, modern AI solves this using a vector database to interpret context, allowing the computer to understand that a search for Apple might actually be a quest for fruit or Steve Jobs based on the context of the data.

What Makes A VECTOR DATABASE Different?

A Vector Database is “Contextual”, they don’t look at words, they look at meaning. While traditional databases are “Literal”, they look for each character match. If two ideas are similar, they sit close together, regardless of the words used to describe them.

If two ideas are similar, they are placed close together in vector space

It represents data as mathematical points in space, like a vector model or 3D graph that captures semantic meaning. These points are stored as Vector Embeddings, a long list of numbers that represent coordinates.

A Vector Embedding model acts as a translator:

It analyzes the human meaning of a query and matches it against a vast set of sources based on conceptual similarity rather than just text.

However, these embeddings need a place to be stored and managed. This is where ChromaDB comes in.

Why Use ChromaDB?

ChromaDb serves as a memory bank that stores and retrieves vector embeddings together with their associated metadata.

ChromaDB is a specialized database specifically designed for handling unique requirements of vector embeddings. Its production expanded rapidly in 2023 as an open-source, “AI-native” database which means built for AI applications rather than adding AI features to traditional databases. It offers optimized storage and lightning-fast querying by using vector indexing techniques such as approximate nearest neighbor search which quickly finds similar data points in large datasets. It is remarkably simple to set up and can run in your Python environment, ideally on version 3.12.

Now, let us try to build our own Semantic Search Engine. But don’t worry, this demonstration is beginner-friendly. First, make sure to have the following before proceeding with our demonstration.

✅ PREREQUISITE:

Download Git bash
Open Source code Editor (e.g. VS Code, Cursor, etc)
Prepare a Python Environment/Extension

LET’S BUILD IT

Now, let’s try to build our own semantic search engine through this entry-level demonstration script in VS Code!

A. Open your VS Code

Ensure that the Python extension is installed
Create a folder “Semantic Search”

B. Install the Dependencies

On you terminal (Git Bash), run: pip install chromadb sentence-transformers This code installs:
ChromaDB - a vector database
Sentence Transformers - an embedding model for converting text into vectors.

This library is the translator that turns human language into a format that computers can understand.

Note: the first run may download the embedding model

C. Click the Command Palette (or Ctrl+Shift+P (Windows/Linux) or Cmd+Shift+P (macOS).

Search for Python Create Environment
Then, click “venv”: to create virtual environment (This ensures your project has its own isolated dependencies.)
Select Python Interpreter version 3.12

D. Create a file in python
semantic_search.py

E. Import required library

import os
import shutil

import chromadb
from chromadb.utils import embedding_functions
from chromadb.errors import InternalError

This library starts with ChromaDB (vector database) locally on your computer.

Think of it as opening a mini database memory where your AI data will be stored.

F. Set up the vector database (Persistent)

DB_PATH = "./chroma_semantic_search_db"

def _create_client_and_collection(path, collection_name):
   client = chromadb.PersistentClient(path=path)

   # Sentence Transformers
   embedding_function = embedding_functions.SentenceTransformerEmbeddingFunction(
       model_name="all-MiniLM-L6-v2"
   )

   # get_or_create_collection: reuse existing DB if it exists
   collection = client.get_or_create_collection(
       name=collection_name,
       embedding_function=embedding_function,
   )
   return client, collection

This loads a pre-trained embedding model that understands human meaning.

This model converts sentences into vectors so the computer can understand meaning, not just words.

Persistent means the vector database is saved to disk, not just kept in RAM. ChromaDB can run in-memory or persist to disk. For a “real” app, we use persistence.

With chromadb.PersistentClient(path="./chroma_semantic_search_db"):

vectors + documents are written into files under chroma_semantic_search_db (e.g. chroma.sqlite3)
If you stop the script and run it again later, the data is still there and can be queried

Sentence Transformers: local model, no API key needed. Good for beginners.

G. Error-handling Around Chroma Client (IMPORTANT!)

def get_or_create_collection(path=DB_PATH, collection_name="documents"):
   """
   Create a ChromaDB client and get (or create) a collection with embeddings.
   The embedding function converts text into vectors that capture meaning.

   If the underlying SQLite database is corrupted (e.g. "database disk image is malformed"),
   automatically reset the on-disk Chroma DB and recreate it.
   """
   try:
       return _create_client_and_collection(path, collection_name)
   except InternalError as e:
       # Handle corrupted SQLite DB by clearing and recreating the Chroma directory.
       if "database disk image is malformed" not in str(e):
           raise

       print(
           f"Detected corrupted ChromaDB database at '{path}' "
           "(database disk image is malformed). Resetting the database directory..."
       )

       # Remove the existing persistent directory and recreate it fresh.
       if os.path.exists(path):
           shutil.rmtree(path)

       return _create_client_and_collection(path, collection_name)

This is important for safe initialization and automatic DB reset

Note: Upon the initial execution following a corruption event, the system is expected to print a message indicating the detection of a corrupted database and the initiation of a reset. It should then proceed with normal operation. Subsequent executions should begin cleanly with a new vector database; consequently, you might need to re-add or re-seed any necessary data.

H. Create a Collection

INITIAL_DOCS = [
   "Amazon Web Services is a cloud computing platform.",
   "Python is used in machine learning.",
   "Artificial Intelligence enables automation.",
]


def seed_documents(collection, initial_docs=None):
   """Add initial documents if the collection is empty. Returns count added."""
   if initial_docs is None:
       initial_docs = INITIAL_DOCS
   existing = collection.count()
   if existing > 0:
       return 0  
   for i, doc in enumerate(initial_docs):
       collection.add(documents=[doc], ids=[f"doc_{i}"])
   return len(initial_docs)

Every text you store here will be automatically converted into vectors using the embedding model.

I. Add a Document

 add_document(collection, document, doc_id, stored_docs_set):
   """
   Add one document to the collection. ChromaDB will compute its embedding
   automatically using the collection's embedding_function.
   """
   key = document.strip().lower()
   if not key:
       return False, "Cannot add an empty sentence."
   if key in stored_docs_set:
       return False, "Duplicate sentence; not added."
   collection.add(documents=[document.strip()], ids=[doc_id])
   stored_docs_set.add(key)
   return True, "Sentence added successfully."

When you add a document to ChromaDB, the system processes your text with the embedding model and then stores the resulting vector. That’s why later you can search “by meaning”: everything in the DB is already stored as vectors.

J. Semantic Search (TOP-K)

def search_documents(collection, query, n_results=3):
   """
   Query by meaning: the query is embedded and compared to all document
   vectors. Returns the top-n_results closest matches and their distances.
   Lower distance = more similar.
   """
   query = query.strip()
   if not query:
       return None, "Please enter a non-empty search query."

   results = collection.query(
       query_texts=[query],
       n_results=min(n_results, collection.count() or 1),
       include=["documents", "distances"],
   )

   docs = results["documents"][0]
   dists = results["distances"][0]
   if not docs:
       return [], "No documents in the database yet. Add some with the 'add' command."

   return list(zip(docs, dists)), None

This section provides an answer to a user's question based on meaning, rather than on the exact phrasing. It utilizes the same embedding model used for adding documents: the user query is converted into a vector, which is then compared against the vectors of all stored documents. The top-k results are the k documents with vectors closest to the query vector (in this case, k = 3).

K. Main Application Loop

def main():
   print("Initializing Semantic Search (Vector DB with ChromaDB)...\n")

   client, collection = get_or_create_collection()
   stored_docs = set()
   # Rebuild in-memory duplicate set from existing collection (optional; for demo we track new adds)
   try:
       all_data = collection.get(include=["documents"])
       for doc_list in (all_data.get("documents") or []):
           for d in doc_list or []:
               if d:
                   stored_docs.add(d.lower())
   except Exception:
       pass

   added = seed_documents(collection)
   if added:
       for d in INITIAL_DOCS:
           stored_docs.add(d.lower())
       print(f"Seeded {added} sample documents.\n")

   # Next ID for newly added documents
   id_counter = collection.count()

   print("========================================")
   print(" SEMANTIC SEARCH (ChromaDB Demo)")
   print("========================================")
   print("Commands:")
   print("  add    -> Add a sentence to the vector database")
   print("  search -> Search by meaning (top results + scores)")
   print("  exit   -> Quit\n")

   while True:
       command = input("Enter command (add / search / exit): ").strip().lower()

       if command == "add":
           new_doc = input("Enter a sentence to store: ")
           success, msg = add_document(
               collection, new_doc, f"doc_{id_counter}", stored_docs
           )
           if success:
               id_counter += 1
           print(msg + "\n")

       elif command == "search":
           query = input("Enter your search query: ")
           results, err = search_documents(collection, query, n_results=3)
           if err:
               print(err + "\n")
               continue
           print("\nTop matching results (lower distance = more similar):")
           for rank, (doc, dist) in enumerate(results, 1):
               print(f"  {rank}. [distance: {dist:.4f}] {doc}")
           print("-----------------------------\n")

       elif command == "exit":
           print("\nExiting. Your vector database is saved at:", DB_PATH)
           break

       else:
           print("Unknown command. Use: add, search, or exit.\n")


if __name__ == "__main__":
   main()

The core of the application is a small Command Line Interface (CLI) loop that orchestrates all functions. This loop initializes the application, loads an existing data collection or creates a new one, and can optionally pre-populate it with data (seed). It then enters a continuous cycle, prompting the user to select and execute one of the available commands: add, search, or exit.

Application Flow:

a. Startup: Create a persistent client and collection (get_or_create_collection). Rebuild the in-memory set for duplicate checks. Seed sample documents if the collection is empty (seed_documents). Set the id_counter. Print the menu (add/search/exit).

b. Loop (while True): Read a command.

add: Prompt for a sentence, call add_document(), and update id_counter.
search: Prompt for a query, call search_documents(..., n_results=3), and print the top matching results (rank, distance, text).
exit: Print the database save location and break.

c. After exit: Data is persisted in chroma_semantic_search_db due to using PersistentClient.

Summary: The main application loop repeatedly takes a command to add a document, search with top-k semantic search, or exit, with all data persistently stored on disk.

TEST IT YOURSELF!

🧪 Now that your semantic search program is ready, let’s test it properly by entering meaningful search queries and verifying the results.

You can do a search query, add documents or knowledge or exit the program.

A. Run the program
In your terminal, run and execute your Python file:

python semantic_search.py

B. Test Semantic Search Queries

Try the following queries:

Enter command (add / search / exit): search
Enter your search query: cloud services platform

Enter command (add / search / exit): search
Enter your search query: language used for AI models

C. Add your Own Document

You can add more sentences to test better.

Enter command (add / search / exit): add

Enter a sentence to store: AWSCC is a community where you can gain hands-on cloud skills, access AWS esources, work on real projects,and get support for certification.

Now try searching:

Enter command (add / search / exit): search

Enter your search query: What is AWSCC?

And find out what's the result.

⚠️LIMITATION

However, there are also cons with using vector databases.

It does not automatically remove duplicates.
Stores every embedding independently.
Identical or very similar sentences may be taken in repeated results.

In Semantic Retrieval Systems, this is called Redundant Semantic Retrieval.

And please understand that this is not a Question-Answering (QA) system. This does not mean that a semantic search engine can generate direct answers to user queries. Instead, it just provides back documents that are semantically similar with our query based on vector similarity.

In our demo we added a simple duplicate check so the same sentence isn’t stored twice; ChromaDB itself does not do this for you.

If we want to generate an answer or build context-aware or natural language responses, we need to combine this with a Large Language Model (LLM) within a Retrieval-Augmented Generation (RAG) pipeline.

What we built is a retrieval system, and not a generation system.

This is what our system is actually implying:

🤔 Oooops, you might be thinking now that this could be useless.

Nuh - - uh, Not at all.

Even though this is not a QA System, semantic search alone can be used in many aspects, especially here in our university to elevate the services we can offer.

It can be used for:

1. University Knowledge Base Search
2. Freshie Guide Primer
3. UPMin Enrollment FAQ Retrieval System
And even
4. Document Search for our Organization

In fact, before chatbots could generate answers, they also need to retrieve information. Our system can also become a backend retrieval system for them.

This may look underwhelming, but this system can be actually very helpful, even for students and school organizations. It’s practical, applicable, and very relevant.

We believe that’s all of it for now, and we hope to share with you more articles soon, maybe about LLM already so we could do the QA or even ELEVATE our game even higher!

📴Here’s our final QUERY = EXIT.

From Zero to Full-Stack: Getting Started with Your First MERN (MongoDB, Express.js, React.js, Node.js) Architecture Project

Feevol Into — Sun, 22 Feb 2026 12:59:23 +0000

This article is co-authored by @feevol_into and @kwiinnn

I. Introduction to Tech Stack

Have you ever wondered how websites are built from the ground up? A web application is like a house. You need a solid foundation, a frame, plumbing, and a beautiful interior. In the software world, the combination of tools used to build this house is called a tech stack. It is a collection of programming languages, software, and tools that work together to create a fully functioning application.

What is MERN?

One of the most popular combinations for building modern web applications is the MERN stack. MERN is an acronym that stands for four different technologies that seamlessly connect to handle everything from the user interface to the database. Developers love it because it uses JavaScript for everything. You only need to know one primary language to build the entire project.

Let us break down the four key pieces of this puzzle.

MongoDB

MongoDB is the database of the operation. Whenever a user creates an account or saves a post, that information needs a place to live securely. Instead of storing data in rigid tables with rows and columns, MongoDB stores it in flexible documents that look a lot like standard JavaScript objects. This makes it incredibly easy for developers to save and retrieve complex data without having to translate it back and forth.
Express.js

Next is Express.js. Think of Express as the traffic cop of your server. It is a framework that runs on the backend and listens for requests from the user. When someone clicks a button to load their profile, Express catches that request, talks to the database to get the right information, and sends the data back to the user. It simplifies the process of building the server and organizing how the application responds to different actions.
React.js

React.js is what the user actually sees and interacts with. It is a popular library built for creating user interfaces. React allows developers to build reusable pieces of a website called components. A button, a navigation bar, and a search form can all be individual components. When data changes, React efficiently updates only the parts of the screen that need to change, making the website feel incredibly fast and smooth.
Node.js

Finally, there is Node.js. Traditionally, JavaScript could only run inside a web browser. Node.js changed the game by providing an environment that allows JavaScript to run directly on a computer or server. It acts as the engine that powers Express.js and connects the whole backend together. Because of Node, developers can build fast and scalable network applications using the exact same language they use for the front of the website.

Where MERN is used

The MERN stack is incredibly versatile and powers everything from simple single page applications to massive enterprise systems. It is particularly popular for building interactive user interfaces and real time data processing platforms. Because it relies heavily on reusable components and quick rendering, it is the go to choice for modern web applications.

Macro Stakeholders

At the macro level, large enterprises and entire industries rely on MERN for its scalability and performance under heavy traffic.
- Tech Giants - Massive companies like Meta and Netflix use components of the MERN stack to deliver seamless experiences to millions of users globally.
- ECommerce Platforms - Online stores use MERN to handle real time inventory updates, secure transactions, and dynamic product searches.
- Healthcare and Logistics - Industries requiring fast data retrieval use MongoDB and Node to process massive datasets, such as tracking patient records or managing global supply chains.
Micro Stakeholders

At the micro level, the stack is favored by smaller teams, startups, and individual developers who need to move quickly.
- - Startups and Entrepreneurs - The stack is open source and free, allowing new businesses to build a Minimum Viable Product very quickly without massive upfront software costs.
- - Small Development Teams - Because the entire stack uses JavaScript, a small team can collaborate seamlessly across both the server and the user interface without needing separate experts for different programming languages.
- - Independent Developers - For someone already familiar with building user interfaces using React and managing code repositories on GitHub, learning the rest of the MERN stack is the fastest route to becoming a full stack developer. It allows a single person to architect complete software as a service platforms, such as a localized supply management system, entirely on their own.

Benefits of MERN

Single Language Environment - The biggest advantage is that JavaScript is used from top to bottom. This eliminates the need to switch mentally between different languages for the server and the browser, making development significantly faster.
Rapid Development - With a massive open source community, developers have access to countless pre-built tools. You do not have to reinvent the wheel for standard features like user authentication or database routing.
High Performance - Node uses a non blocking architecture that handles multiple network requests simultaneously without slowing down. Coupled with React updating only the necessary parts of the screen, applications feel lightning fast.
Easy Scalability - MongoDB stores data flexibly, meaning you can easily adjust your database structure as your application grows and new features are added over time.

II. Creating your first project

When creating a project, it always starts with the ideation and features

STEP 1 — IDEATE (What do I want to build?)

For this beginner’s guide, let’s make a To-Do List Website.

A to-do list full-stack website is one of the best starter projects because it teaches you:

how frontend talks to backend
how backend talks to database
how data persists
how CRUD works in real life applications

You are not just building a list — you are building a complete system.

STEP 2 — FEATURES (What can my to do list website do?)

Since we’re having a full-stack website, we must implement CRUD features.

CRUD FEATURES	Meaning	In our To do list website:
CREATE	Add data	Add a new task
READ	View data	Show all tasks
UPDATE	Modify data	Mark task as completed / edit text
DELETE	Remove Data	Delete a task

So the website we’ll make will be able to:

Add a task
View all tasks
Edit a task
Mark task as completed
Delete a task

Now that we know what to build — we move to the environment setup.

STEP 3 — INSTALLATIONS

1. Installing Node.js

Node.js is the engine that will run your JavaScript code outside of a web browser. Installing it is very straightforward.

Step 1 | Go to the official https://nodejs.org/en website and navigate to the downloads section.

Step 2 | You will see two download buttons. Always choose the LTS version. LTS stands for Long Term Support and it is the most stable version for building applications.

Step 3 | Once the file downloads, open it to launch the installer.

Step 4 | Click next through the installation wizard. You can leave all the default settings exactly as they are. Make sure you accept the license agreement.

Step 5 | After installing open your terminal and verify:

node -v
npm -v

2. Setting up MongoDB Atlas (Recommended for beginners)

A FREE Cloud database, no local setup problems

Step 1 | Go to https://cloud.mongodb.com
Step 2 | Sign up

Step 3 | Create New Project → name it “todo_website”

Step 4 | Create a Cluster. Choose:
- FREE
- Provider: AWS
- Region: Singapore (ap-southeast-1)
- closest to PH → lowest latency

Step 5 | After creating your cluster, Database Access will pop up and create a new database user with a username (“todo-user”) and password. Save these credentials somewhere safe — you will need them later.
Step 6 | Go back to your cluster and click Connect. Choose Connect to your application.

Step 7 | You will see a connection string that looks something like this:

mongodb+srv://<username>:<password>@cluster0.mongodb.net/todo_db?retryWrites=true&w=majority

Copy this string. Replace and with the credentials you just created. This is your MongoDB URI — think of it as the address your backend will use to talk to your database.

Make sure your driver is Node.js since this is the framework we are using for the backend and select the latest version

STEP 4 — SETTING UP YOUR PROJECT FOLDERS

When you build a full stack application, you are essentially building two separate projects that talk to each other. Because of this, it is best practice to create one main project folder that contains two separate subfolders. One folder is for your React frontend and the other is for your Node backend.

The Server Folder (Node + Express + MongoDB) This is where you will write all your Node and Express code. It handles the database connections and the secret backend logic.
The Client Folder (React) This is your frontend folder where your React application lives. It holds all the visual components the user will see and interact with.

Keeping these completely separate prevents your code from getting messy and makes it much easier to host your website later on.

Step 1 | Open VSCode
Step 2 | Create the ROOT folder. This folder will serve as your project folder.

mkdir todo-website

mkdir creates a new folder.

Step 3 | Open your root folder, todo-website, in VSCode You are now inside your project's home.
Step 4 | Open your terminal in VSCode and enter this to create your backend folder, server:

mkdir server

STEP 5 — SETTING UP THE BACKEND

Inside your todo-website folder, move into your newly created server folder:

cd server

While mkdir creates you a folder, cd moves you into it.

Now initialize it as a Node.js project by running:

npm init -y

The -y flag automatically answers "yes" to every setup question, which is perfectly fine for our purposes. This command creates a package.json file — think of it as your project's birth certificate. It records the project name, version, and most importantly, every package your backend depends on.

Running NPM Install

When you start a new project, you need tools to help you build it. NPM stands for Node Package Manager. It is a massive online library of free code written by other developers.
When you type the command npm install followed by a package name in your computer terminal, your system reaches out to this library, downloads the specific code you requested, and adds it directly to your project. This is how you bring Express, React, and database connection tools into your application.
Setting Up Pre Installed Files
Whenever you initialize a new project or run an install command, your system automatically creates a very important file called package.json. Think of this file as the recipe book or the master list for your project.

It does not contain the actual heavy code for the tools you downloaded. Instead, it simply lists the names and version numbers of every single package your project needs to run properly. If you share your code with another developer, they do not need to download all your heavy files. They just need your package.json file, and their computer will know exactly what tools to download to make the code work.

1. Installing Backend Dependencies

Your backend needs several packages to function. Install them all at once with this command:

npm install express mongodb mongoose dotenv cors

Here is what each one does and why you need it:

express is the web framework that lets you create routes and handle HTTP requests. Without it, you would have to write hundreds of lines of low-level Node.js code just to accept a simple request from your frontend.
mongodb is the official Node.js driver for MongoDB. It is what actually handles the low-level communication between your application and your MongoDB Atlas cluster. Mongoose is built on top of it — meaning Mongoose uses the mongodb package under the hood to do its work. While Mongoose alone can sometimes pull it in as a dependency automatically, explicitly installing it yourself ensures you have the correct version, avoids version mismatch issues, and is simply the proper practice when working with MongoDB Atlas.
mongoose is the tool that connects your backend to MongoDB. It also lets you define the shape of your data using something called a Schema, which you will see shortly.
dotenv lets you store sensitive information (e.g. API, Passwords, etc.) like your MongoDB URI in a separate .env file instead of hardcoding it into your source code. This is a critical habit — you never want to push your database credentials to GitHub or share them publicly.
cors stands for Cross-Origin Resource Sharing. By default, browsers block requests that come from a different address than the server. Since your React frontend will run on port 5173 and your backend will run on port 3000, they are technically on different "origins." The cors package tells your backend to allow these cross-origin requests.

After installation, you will notice a new folder called node_modules has appeared. This folder contains all the actual code for every package you installed. It will be very large — this is normal. You should never manually edit anything inside it and you should never push it to GitHub. We will cover how to handle that in a moment.

2. Creating the .env File

Inside your server folder, create a file named .env:

MONGO_URI=your_mongodb_connection_string_here
PORT=3000

Replace your_mongodb_connection_string_here with the connection string you copied from MongoDB Atlas earlier. This file is your backend's private configuration. It never gets shared, uploaded, or committed to version control.

To make sure it stays private, create a .gitignore file in your server folder and add these:

node_modules
.env

This tells Git to ignore those two entries completely.

3. Creating the Server File

Now create the most important file in your backend — server.js. This is the entry point, the file that starts everything up when you run your backend.

Create the file:

touch server.js

touch command allows you to create a file through the terminal.

Open server.js in your code editor and paste the following:

const express = require('express');
const mongoose = require('mongoose');
const cors = require('cors');
require('dotenv').config();

const app = express();

// Middleware
app.use(cors());
app.use(express.json());

// Routes
const taskRoutes = require('./routes/tasks');
app.use('/api/tasks', taskRoutes);

// Connect to MongoDB and start server
const PORT = process.env.PORT || 3000;

mongoose
  .connect(process.env.MONGO_URI)
  .then(() => {
    console.log('Connected to MongoDB');
    app.listen(PORT, () => {
      console.log(`Server is running on port ${PORT}`);
    });
  })
  .catch((err) => {
    console.error('Failed to connect to MongoDB:', err.message);
  });

Let us break this down line by line so you understand exactly what is happening.

require('dotenv').config() loads your .env file so that process.env.MONGO_URI and process.env.PORT become available throughout your code.
app.use(cors()) tells Express to allow requests from your React frontend.
app.use(express.json()) tells Express to automatically parse incoming request bodies that are in JSON format. Without this, when your frontend sends task data to your backend, the backend would not be able to read it.
app.use('/api/tasks', taskRoutes) connects your routes file to the server and says that any URL beginning with /api/tasks should be handled by that file.
mongoose.connect(process.env.MONGO_URI) establishes the connection to your MongoDB Atlas cluster. Only after this connection is confirmed does the server begin listening for requests.

STEP 6 — DEFINING YOUR DATA MODEL

In MongoDB, data is stored as documents — they look a lot like JavaScript objects. But before we start storing tasks, we need to tell Mongoose what a task looks like. We do this by creating a Model. In layman’s terms, we’re trying to create a blueprint or template for our data that will be stored in the database.

Create the models folder and the Task model:

#inside the server folder. terminal should be server

mkdir models
touch models/[Task.js](http://task.js)

Open models/Task.js and paste this:

const mongoose = require('mongoose');

const taskSchema = new mongoose.Schema(
  {
    title: {
      type: String,
      required: true,
      trim: true,
    },
    completed: {
      type: Boolean,
      default: false,
    },
  },
  {
    timestamps: true,
  }
);

module.exports = mongoose.model('Task', taskSchema);

This schema tells Mongoose that every task document in your database will have exactly three pieces of information: a title that is a required string, a completed flag that defaults to false when a new task is created, and timestamps — createdAt and updatedAt — which Mongoose adds automatically when you set timestamps: true.

module.exports at the bottom makes this model available to other files in your project, specifically your routes file, which needs it to perform database operations.

STEP 7 — BUILDING YOUR API ROUTES

Routes are where you define what happens when your frontend sends a specific type of request to a specific URL. This is where all four CRUD operations live.

Create the routes folder and the tasks route file:

mkdir routes
touch routes/tasks.js

Open routes/tasks.js and write the following:

const express = require('express');
const router = express.Router();
const Task = require('../models/Task');

// CREATE — POST /api/tasks
router.post('/', async (req, res) => {
  try {
    const task = new Task({ title: req.body.title });
    const savedTask = await task.save();
    res.status(201).json(savedTask);
  } catch (err) {
    res.status(400).json({ message: err.message });
  }
});

// READ — GET /api/tasks
router.get('/', async (req, res) => {
  try {
    const tasks = await Task.find().sort({ createdAt: -1 });
    res.status(200).json(tasks);
  } catch (err) {
    res.status(500).json({ message: err.message });
  }
});

// UPDATE — PUT /api/tasks/:id
router.put('/:id', async (req, res) => {
  try {
    const updatedTask = await Task.findByIdAndUpdate(
      req.params.id,
      { title: req.body.title, completed: req.body.completed },
      { new: true }
    );
    res.status(200).json(updatedTask);
  } catch (err) {
    res.status(400).json({ message: err.message });
  }
});

// DELETE — DELETE /api/tasks/:id
router.delete('/:id', async (req, res) => {
  try {
    await Task.findByIdAndDelete(req.params.id);
    res.status(200).json({ message: 'Task deleted successfully' });
  } catch (err) {
    res.status(500).json({ message: err.message });
  }
});

module.exports = router;

Each block here corresponds directly to one of your CRUD features. The POST route takes the title from the request body, creates a new Task document, saves it to MongoDB, and returns the saved task back to the frontend. The GET route fetches all tasks from the database, sorted from newest to oldest. The PUT route finds a specific task by its ID — which MongoDB assigns automatically — and updates its title, its completed status, or both. The DELETE route finds a task by its ID and removes it from the database entirely.

Notice that every route is wrapped in a try/catch block. This is because all database operations are asynchronous — they take time. The async/await syntax lets you write this asynchronous code in a way that reads almost like regular sequential code, and the catch block handles any errors gracefully by sending a readable error message back to the frontend instead of crashing the server.

Testing Your Backend

Before building the frontend, it is a good habit to confirm your backend works correctly on its own. Run the backend server:

node server.js

You should see two messages in your terminal:

Connected to MongoDB
Server is running on port 5000

If you see both of these, your backend is fully functional.

STEP 8 — SETTING UP THE FRONTEND WITH REACT

Now we build the part that your users will actually see and interact with. Open a new terminal window, navigate back to your root todo-website folder, and run:

npm create vite@latest client -- --template react
cd client
npm install

We are using Vite here because it is significantly fast, light, and what most professional React developers use today. The --template react flag tells Vite to set up a React project specifically.

After running npm install, Vite will have created a frontend folder with its own node_modules, its own package.json, and a basic React application ready to run.

Now install one additional package for the frontend — axios. Axios is an HTTP client that makes it easy to send requests from your React app to your Express backend:

npm install axios

1. Cleaning Up the Vite Defaults

Vite gives you some starter files you do not need. Open src/App.jsx and replace everything inside it with a clean slate:

import { useState, useEffect } from 'react';
import axios from 'axios';
import TaskForm from './components/TaskForm';
import TaskList from './components/TaskList';
import './App.css';

const API_URL = 'http://localhost:3000/api/tasks';

function App() {
  const [tasks, setTasks] = useState([]);

  const fetchTasks = async () => {
    const response = await axios.get(API_URL);
    setTasks(response.data);
  };

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

  const addTask = async (title) => {
    await axios.post(API_URL, { title });
    fetchTasks();
  };

  const updateTask = async (id, updates) => {
    await axios.put(`${API_URL}/${id}`, updates);
    fetchTasks();
  };

  const deleteTask = async (id) => {
    await axios.delete(`${API_URL}/${id}`);
    fetchTasks();
  };

  return (
    <div className="app">
      <h1>My To-Do List</h1>
      <TaskForm onAdd={addTask} />
      <TaskList tasks={tasks} onUpdate={updateTask} onDelete={deleteTask} />
    </div>
  );
}

export default App;

App.jsx is the brain of your frontend. It holds your tasks in state using useState, fetches them from your backend when the page first loads using useEffect, and passes the four CRUD functions down to the child components that need them. Notice that every CRUD operation calls fetchTasks() afterward — this is what keeps your displayed list in sync with what is actually stored in your database.

2. Creating the Components

Create the components folder:

mkdir src/components

Create three files: TaskForm.jsx, TaskList.jsx, and TaskItem.jsx then paste the code below to their respective files.

src/components/TaskForm.jsx — handles adding new tasks:


import { useState } from 'react';

function TaskForm({ onAdd }) {
  const [title, setTitle] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    if (!title.trim()) return;
    onAdd(title);
    setTitle('');
  };

  return (
    <form onSubmit={handleSubmit} className="task-form">
      <input
        type="text"
        placeholder="Add a new task..."
        value={title}
        onChange={(e) => setTitle(e.target.value)}
      />
      <button type="submit">Add Task</button>
    </form>
  );
}

export default TaskForm;

src/components/TaskList.jsx — renders the full list of tasks:

import TaskItem from './TaskItem';

function TaskList({ tasks, onUpdate, onDelete }) {
  if (tasks.length === 0) {
    return <p className="empty">No tasks yet. Add one above!</p>;
  }

  return (
    <ul className="task-list">
      {tasks.map((task) => (
        <TaskItem
          key={task._id}
          task={task}
          onUpdate={onUpdate}
          onDelete={onDelete}
        />
      ))}
    </ul>
  );
}

export default TaskList;

src/components/TaskItem.jsx — handles editing, completing, and deleting individual tasks:

import { useState } from 'react';

function TaskItem({ task, onUpdate, onDelete }) {
  const [isEditing, setIsEditing] = useState(false);
  const [editTitle, setEditTitle] = useState(task.title);

  const handleEdit = () => {
    if (isEditing && editTitle.trim()) {
      onUpdate(task._id, { title: editTitle });
    }
    setIsEditing(!isEditing);
  };

  return (
    <li className={`task-item ${task.completed ? 'completed' : ''}`}>
      <input
        type="checkbox"
        checked={task.completed}
        onChange={() => onUpdate(task._id, { completed: !task.completed })}
      />
      {isEditing ? (
        <input
          type="text"
          value={editTitle}
          onChange={(e) => setEditTitle(e.target.value)}
          className="edit-input"
        />
      ) : (
        <span className="task-title">{task.title}</span>
      )}
      <button onClick={handleEdit} className="btn-edit">
        {isEditing ? 'Save' : 'Edit'}
      </button>
      <button onClick={() => onDelete(task._id)} className="btn-delete">
        Delete
      </button>
    </li>
  );
}

export default TaskItem;

TaskItem has its own local state for the editing mode. When a user clicks Edit, the task title becomes an editable input field. When they click Save, it sends the updated title to your backend through the onUpdate function passed down from App.jsx. The checkbox triggers a completion toggle — every time it changes, it flips the completed boolean in your database.

3. Adding Basic Styles

Step 1 | Open src/App.css and replace its contents with the following to make your app presentable:

#root {
  max-width: 1280px;
  margin: 0 auto;
  padding: 2rem;
  text-align: center;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Poppins', sans-serif;
  background: #f3f3f3;
  color: #333;
}

.app {
  width: 1000px;
  max-width: 600px;
  margin: 60px auto;
  padding: 30px;
  background: white;
  border: 1px solid #FF6200;
  border-radius: 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

h2 {
  text-align: center;
  font-family: 'Poppins', sans-serif;
  font-size: 20px;
  font-weight: 800;
  margin-bottom: -5px;
  color: #FF6200;
}

h1 {
  text-align: center;
  font-family: 'Poppins', sans-serif;
  font-size: 50px;
  font-weight: 800;
  margin-bottom: 24px;
  color: #040042;
}

.task-form {
  display: flex;
  gap: 10px;
  margin-bottom: 24px;
}

.task-form input {
  flex: 1;
  padding: 10px 14px;
  border: 1px solid #ebebeb;
  border-radius: 10px;
  font-size: 14px;
}

.task-form button {
  padding: 10px 18px;
  background: #FF6200;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 14px;
}

.task-form button:hover {
  padding: 10px 18px;
  background: #040042;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}

.task-list {
  list-style: none;
}

.task-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
}

.task-title {
  flex: 1;
  font-size: 15px;
}

.task-item.completed .task-title {
  text-decoration: line-through;
  color: #FF6200;
}

.edit-input {
  flex: 1;
  padding: 6px 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 14px;
}

.btn-edit {
  padding: 4px 12px;
  border-radius: 4px;
  border: 2px solid #00B087;
  background: rgb(5, 137, 106);
  border-radius: 6px;
  cursor: pointer;
  color: white;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 13px;
}

.btn-delete {
  padding: 6px 12px;
  background: #cf1500;
  border: 2px solid #ff0707;
  border-radius: 6px;
  cursor: pointer;
  color: white;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 13px;
}

.empty {
  text-align: center;
  color: #aaa;
  margin-top: 20px;
}

Step 2 | Open src/index.css and replace its contents with the following to make your app further presentable:

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');

:root {
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;

  color-scheme: light dark;
  color: rgba(255, 255, 255, 0.87);
  background-color: #242424;

  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  display: flex;
  place-items: center;
  min-width: 320px;
  min-height: 100vh;
}

h1 {
  font-size: 3.2em;
  line-height: 1.1;
}

STEP 9 — RUNNING YOUR FULL-STACK APP

You need two terminal windows open simultaneously — one for the backend, one for the frontend.

Terminal 1 — Start the backend:

cd  todo-app/server
node server.js

Terminal 2 — Start the frontend:


cd  todo-app/client
npm run dev

Vite will give you a local URL, typically http://localhost:5173. Open that in your browser. You should see your To-Do List app fully running. Type a task into the input field and click Add Task — it appears in the list instantly. Refresh the page — it is still there, because it is saved in MongoDB. Check the checkbox — it gets crossed out. Click Edit — the title becomes editable. Click Delete — it disappears from both the screen and the database.

Every single one of these actions travels the full length of your stack: from your React component, through Axios to your Express server, through Mongoose to MongoDB Atlas, and back — all in a fraction of a second. That is a full-stack MERN application working exactly as it should.

STEP 10 — HOW IT ALL CONNECTS: THE FULL PICTURE

Now that your application is running, it is worth pausing to understand the journey that data takes every time a user interacts with your website. This mental model is the most valuable thing you can take away from this project.

When a user types a task and presses Add Task, the following happens in sequence. React captures the input through a controlled state and calls addTask() in App.jsx. Axios sends a POST request with the task title in the request body to http://localhost:3000/api/tasks. Express receives that request on your backend server and routes it to the POST handler in routes/tasks.js. Mongoose creates a new Task document using your schema and calls .save() to write it to your MongoDB Atlas cluster in the cloud. MongoDB confirms the save and returns the newly created document, including its auto-generated _id. That document travels back through Mongoose, through Express, through your HTTP response, back to Axios on the frontend, where fetchTasks() is triggered and React re-renders the updated list on screen.

This cycle — React talks to Express, Express talks to MongoDB, MongoDB responds, React updates — is the heartbeat of every MERN application, no matter how large or complex it grows.

Yey! You have now finished your FIRST FULL STACK PROJECT!

References

What Is the MERN Stack? Introduction and How it Works

Advantages for using Mern Stack Development

Why does your Startup needs MERN Stack?

MERN Stack Development Trends 2025: What USA CTOs Need to Know?

Github Repository

https://github.com/feevolinto/todo-website

How to Generate Business Leads Using Google Maps, IDS, and Python

Adriane Nathaniel Peña — Sun, 22 Feb 2026 12:45:58 +0000

This article was co-authored by @brenth_daryllmozo_ad9f09

Introduction

Lead generation is one of the most important skills in freelancing, digital marketing, and entrepreneurship. Many beginners assume they need expensive software or paid databases to find potential clients, but that’s not always true. With the right approach, you can generate targeted business leads completely free using tools that are already available to everyone. In this guide, I’ll walk you through how to use Google Maps together with a Chrome extension called Instant Data Scraper to extract business information and turn it into actionable leads.

This method is especially useful for freelancers offering services like web development, SEO, social media management, automation, or digital marketing. It’s also a great starting point for students and aspiring agency owners who want to practice outreach without investing in
premium lead generation tools.

Extension Overview

The idea behind this method is simple. Businesses list their information publicly on Google Maps, including their name, address, phone number, website, reviews, and ratings. Instead of manually copying this information one by one, we use a browser extension called Instant Data Scraper to extract the visible data into a downloadable file. From there, we clean the data, identify opportunities, and use it for outreach.
This entire workflow requires no coding knowledge and no paid subscriptions. You’re essentially turning Google Maps into a free business directory and using automation to speed up the process.

Why is Google Maps a Powerful Lead Source?

Google Maps is more than just a navigation tool. It is one of the largest public databases of local businesses in the world. Companies voluntarily provide their contact information so customers can find them easily. Because of this, Google Maps contains real, active businesses that are already operating in specific cities and industries.
When you search for a niche like “Dental Clinic in Manila” or “Coffee Shop in Cebu,” you immediately get access to dozens or even hundreds of potential leads. The information is updated regularly, which makes it more reliable than many outdated business directories. This makes it an ideal place to start when building local or niche-specific prospect lists.

What is Instant Data Scraper?

Instant Data Scraper is a free Chrome extension that automatically detects structured data on a webpage and allows you to export it as a CSV or Excel file. It works by analyzing page elements and identifying repeating patterns such as business listings. The tool is beginner-friendly because it does not require programming knowledge or technical setup. Once installed, it can extract visible information directly from your browser.
This makes it perfect for scraping business listings from Google Maps search results without manually copying each entry.

Step 1: Install the Chrome Extension.

Open your Google Chrome browser and go to the Chrome Web Store. In the search bar, type Instant Data Scraper and select the correct extension from the results. Click “Add to Chrome” and confirm the installation. Once installed, you should see the extension icon in your browser toolbar.

Step 2: Open Google Maps.

After installing the extension, go to Google Maps in your browser. Make sure you are using the web version, not the mobile app, since the extension works directly inside the browser.

Step 3: Search for a Specific Niche and Location.

In the Google Maps search bar, type a business category along with a city or area. For example, you can search for “Dental Clinic in Manila” or “Coffee Shop in Cebu.” Be specific with your keywords to ensure your leads are targeted and relevant to your service.

Step 4: Scroll to Load More Results.

Once the search results appear on the left-hand panel, scroll down slowly. Google Maps loads more listings as you scroll, so continue scrolling until no new businesses appear. This ensures you capture as many leads as possible.

Step 5: Activate Instant Data Scraper.

Click the Instant Data Scraper icon in your Chrome toolbar. The tool will automatically analyze the page and attempt to detect structured data from the business listings. Wait a few seconds while it identifies the available information.

Step 6: Review the Extracted Data.

A preview window will appear showing the detected fields, such as business names, ratings, addresses, or other visible details. Carefully review the preview to make sure the data looks accurate and properly structured before exporting.

Step 7: Export the Data.

Once you are satisfied with the extracted information, click the “Export CSV” button. The file will download to your computer, allowing you to open it in Excel or Google Sheets for cleaning and organization.

Defining the "Lead Score"

Categorize:
High-Value Web Dev Lead (+50): Absence of a website indicates a critical need for a digital storefront. This is the primary trigger for outreach.

Proven Active Business (+25): A review count > 30 confirms the business is operational and has a consistent customer flow, making them more likely to have a marketing budget.

Reputation Management Opportunity (+25): A rating of 4.1 or below highlights a "reputation gap." This provides an entry point for offering automated review-generation systems or customer feedback loops.

CONVERT YOUR CSV FILE SCORING USING AUTOMATION SCRIPT USING PYTHON

Manual filtering in Excel is slow and prone to human error. The Python script simplifies the process through three steps:

Step 0: Environment Setup & Library Import

Before processing, the script prepares the workspace by importing Pandas and NumPy. These are the industry-standard tools for data science.

Step 1: Intelligent Data Loading

The script reads the CSV file exported from the scraper. It doesn't just "open" it; it prepares it for analysis by identifying column names (like name,ASWgTc,website, rating, or review_count).

Step 2: Executing the Scoring Algorithm

This is the "Brain" of your automation. The script runs a function called calculate_score on every single row simultaneously.

import pandas as pd
import numpy as np

def run_lead_scorer(input_file, output_file):
    try:
        # 1. Load the dataset
        df = pd.read_csv(input_file)

        # 2. Define the scoring logic
        def calculate_score(row):
            score = 0

            # CRITERIA 1: Website Presence (50 pts)
            # Most scrapers name this column 'website' or 'Website'
            web_col = 'website' if 'website' in df.columns else 'Website'
            if pd.isna(row.get(web_col)) or str(row.get(web_col)).strip() == "":
                score += 50

            # CRITERIA 2: Review Count / Activity (25 pts)
            # Targeting active businesses (30+ reviews)
            rev_col = 'review_count' if 'review_count' in df.columns else 'Review Count'
            reviews = row.get(rev_col, 0)
            try:
                if float(reviews) >= 30:
                    score += 25
            except:
                pass # Handle cases where review count isn't a number

            # CRITERIA 3: Rating / Reputation Gap (25 pts)
            # Targeting businesses with room for improvement (< 4.1 stars)
            rate_col = 'rating' if 'rating' in df.columns else 'Rating'
            rating = row.get(rate_col, 0)
            try:
                if 0 < float(rating) <= 4.1:
                    score += 25
            except:
                pass

            return score

        # 3. Apply Scoring
        df['Lead_Score'] = df.apply(calculate_score, axis=1)

        # 4. Filter and Sort (High-Value only)
        # We only keep leads that scored 75 or 100
        high_priority_df = df[df['Lead_Score'] >= 75].sort_values(by='Lead_Score', ascending=False)

        # 5. Export results
        high_priority_df.to_csv(output_file, index=False)

        print(f"✅ Success!")
        print(f"Total leads analyzed: {len(df)}")
        print(f"High-value prospects found: {len(high_priority_df)}")
        print(f"File saved as: {output_file}")

    except FileNotFoundError:
        print("❌ Error: 'leads.csv' not found. Please check your filename.")
    except Exception as e:
        print(f"❌ An error occurred: {e}")

# Run the script
if __name__ == "__main__":
    run_lead_scorer('leads.csv', 'high_priority_prospects.csv')

The Weights: +50 pts if the Website is missing (High-value web dev lead).
+25 pts if Reviews are > 30 (Proven active business).
+25 pts if Rating is 4.1 (Reputation gap).

Step 3: Exporting the "Hit List"

The final step saves the cleaned, ranked, and filtered data into a brand-new CSV file: leads.csv.

This simple method ensures you save time scrolling and more time talking to the high-value clients who are practically being curioused and wanting to explore or to engage with services you want to offer.

The Outreach Phase "Result"

The Strategy: Instead of saying "Hire me to build a website," you say "I noticed your door is locked." By highlighting a missing link or a bad rating, you are providing a mini-consultation for free.

The Final Result

By following this workflow, you’ve transformed a boring static map into a high-potential database of opportunities as a freelancer.
Before: You were "looking for work" and hoping someone would notice you.
After: You are an expert identifying specific business lapses and positioning yourself as the bridge to fix them.
This systematic approach turns cold outreach into a warm, problem-solving conversation. You aren't just a freelancer anymore; you're a strategic partner.

Reference

https://chromewebstore.google.com/detail/instant-data-scraper/ofaokhiedipichpaobibbnahnkdoiiah?pli=1

First few steps to 6 Figures: A Beginner’s Guide to Building a Real-Time Mini IDS Using Python

Joshua Yacob Papica — Sun, 22 Feb 2026 12:42:29 +0000

This article was co-authored by @reydocs.

Introduction

If you have ever taken a look at network traffic logs, you’ll notice constant connection attempts from users. While some come from legitimate ones, others are clearly suspicious due to repeated failures.

This is where Intrusion detection systems, or IDS, come in. An IDS monitors network activity and identifies suspicious behavior such as repeated failed login attempts or unusual access patterns, allowing organizations to take action as soon as unusual activity appears.

In this article, you will learn how to create your own hybrid IDS consisting of different IDS types while only using Python. By the end, you’ll even see how to visualize your results with an interactive dashboard.

Types of IDS
Project Overview
Tools and Technologies Used
Setting Up Your Environment
Packet Capture Engine
Traffic Analysis Engine
Detection Engine
Alert System
Simulating the IDS
Combining It All Together
Visualizing the data using Streamlit
To sum it up
Potential Improvements
Final Thoughts

TYPES OF IDS

Before we go into creating our own IDS, we must first understand the different types of IDS and what they do.

Network IDS(NIDS)

NIDS is a security tool that is used to monitor your network traffic for suspicious activity by performing Traffic Monitoring, Analysis, and Alerts.

Host IDS(HIDS)

HIDS monitors system logs for signs of suspicious activity to detect unusual behaviours associated with either human users or applications.

Signature IDS

Signature-based IDS is a system either on the network or host and identifies threats by comparing the system activity to a database of known attack patterns or signatures to detect unusual behavior.

Anomaly IDS

Anomaly-based IDS identifies unusual behavior by learning patterns of normal activity and flagging deviations from that baseline.

PROJECT OVERVIEW

This Mini IDS tutorial was built to demonstrate how intrusion detection works at a fundamental level and to create a simplified system that monitors authentication activity, detects unusual behavior, and generates alerts.

TOOLS AND TECHNOLOGIES USED

This project relies entirely on Python and its ecosystem of libraries, including:

Scapy - Captures and inspects network packets in real time.
Scikit-learn - Provides the Isolation Forest Algorithm for detecting anomalies in network traffic
python-nmap - Scans and maps network hosts and open ports to identify potential threats.
NumPy - Performs numerical operations and processes
Logging - Python’s built-in-module for generating alerts and recording suspicious activity
Queue & Threading - Enables efficient handling of multiple packets simultaneously
Pandas - Reads CSV files and organizes traffic for data analysis
Streamlit - Builds an interactive dashboard to visualize network activity and detected threats.

Having introduced the technologies that power our IDS, let’s take a look at how they fit together in the system’s overall architecture, from packet capture to visualization.

Our mini IDS captures network packets and records them as logs. Then, they are analyzed by the detection engine using signature rules and anomaly detection to identify suspicious activity. When a threat is found, the alert system generates warnings, which are then displayed on a Streamlit dashboard for visualization

SETTING UP YOUR ENVIRONMENT

Before building the core modules, make sure you have an IDE that supports Python 3.10 or later. It’s recommended to use a virtual environment (venv) to keep your project dependencies isolated. You can create one with:

python -m venv venv

Then activate it by typing the following:

source venv/bin/activate  # for macOS/Linux

venv\Scripts\activate.bat # for Windows(Command Prompt)

venv\Scripts\Activate.ps1 # For Windows (PowerShell)

Then Install the following:

pip install scapy
pip install python-nmap
pip install numpy
pip install scikit-learn
pip install pandas

SETTING UP STREAMLIT

Since we will be using Streamlit to visualize the data given by our mini IDS, you should also learn how to install your Streamlit.

pip install streamlit

After installing, you can verify its installation by running this command:

streamlit hello

After installing and setting up everything, we can now proceed to building the core components.

LET’S BEGIN!

Since our IDS is a hybrid system of signature and anomaly-based IDS, it will comprise of four main components:

A packet capture system
A traffic analysis module
A detection engine
An alert system

Important Note: Network interface names differ depending on the operating system. Before running the IDS, ensure that the interface parameter in the code matches your system’s active network interface. Refer to the README in the repository for guidance.

THE PACKET CAPTURE ENGINE

We’ll start with the packet capture engine and for this, we will use Scapy. Scapy is a networking library that allows users to perform network-related tasks using Python.

We’ll define our PacketEngine class that will serve as the basis for our IDS.

from scapy.all import sniff, IP, TCP
from collections import defaultdict
import threading
import queue
#PACKET CAPTURE ENGINE
class packetCapture:
    def __init__(self): #initializes the class
        #stores captured packets
        self.packet_queue= queue.Queue()
        #controls when the packet capture should stop
        self.stop_capture= threading.Event()

    #acts as a handler for each captured packets
    #checks if packets have IP or TCP layers
    def packet_callback(self, packet):
        if IP in packet and TCP in packet:
            self.packet_queue.put(packet)

    def start_capture(self, interface="eth0"):
        def capture_thread():
            sniff(iface=interface,
                  prn=self.packet_callback,
                  store=0,
                  stop_filter=lambda _: self.stop_capture.is_set())
        self.capture_thread = threading.Thread(target=capture_thread)
        self.capture_thread.start()
    def stop(self):
        self.stop_capture.set()
        self.capture_thread.join()

Let’s walk through the code to understand what each line of code does and its functions.

The __init__ method initializes the class by creating a queue.Queue where the captured packets are stored and a threading.Event to control whether the capturing of packets should be stopped. The packet_callback serves as a handler for the captured packets and also checks if the captured packets have both IP or TCP layers, and if they do, they are added to the queue for further processing.

The start_capture method starts capturing packets on a specified interface, with eth0 as the default interface since it captures packets from your Ethernet interface.

The function runs a separate thread to execute Scapy’s sniff function to continuously capture packets on the interface. The stop_filter parameter ensures that capturing stops when stop_capture is triggered.

The stop method stops the capture by triggering the stop_capture event and waits for the thread to finish, ensuring smooth termination. This design allows for real-time packet monitoring and capturing without blocking the main thread.

THE TRAFFIC ANALYSIS ENGINE

We will now build the Traffic Analysis Engine. This module will process the captured packets and extract important features.

#TRAFFIC ANALYSIS MODULE  
from scapy.all import sniff, IP, TCP
from collections import defaultdict
import threading
import queue

class trafficAnalyzer:
    def __init__(self):
        self.connections = defaultdict(list)
        self.flow_stats = defaultdict(lambda:{
            'packet_count' : 0,
            'byte_count': 0,
            'start_time': None,
            'last_time': None
        })

    def analyze_packet(self, packet):
        if IP in packet and TCP in packet:
            ip_src = packet[IP].src
            ip_dst = packet[IP].dst
            port_src = packet[TCP].sport
            port_dst = packet[TCP].dport

            flow_key = (ip_src, ip_dst, port_src, port_dst)

            stats = self.flow_stats[flow_key]
            stats['packet_count'] += 1
            stats['byte_count'] += len(packet)
            current_time = packet.time

            if not stats['start_time']:
                stats['start_time'] = current_time
            stats['last_time'] = current_time  

            return self.extract_features(packet, stats)

    def extract_features(self, packet, stats):
        # Using max() to ensure duration is never strictly 0, avoiding ZeroDivisionError
        duration = max(stats['last_time'] - stats['start_time'], 0.0001)

        return {
            'packet_size': len(packet),
            'flow_duration': duration,
            'packet_rate': stats['packet_count'] / duration,
            'byte_rate': stats['byte_count'] / duration,
            'tcp_flags': packet[TCP].flags,
            'window_size': packet[TCP].window
        }

In this module, we defined the trafficAnalyzer class to analyze the network traffic. We can track connection flows here and calculate statistics for the packets in real-time. We used the defaultdict data structure in Python for managing connections and data flow statistics by organizing them into different unique flows.

The __init__ method initializes two things: the connections and flow_stats. The connections attribute stores the list of related packets, while flow_stats stores the statistics for each flow, including packet_count, byte_count, start_time, and last_time.

The analyze_packet method analyzes and processes each packet. If the packets contain IP or TCP layers, it extracts the source IP and destination IP ports, creating a flow_key to identify the flow. It updates the statistics by incrementing the packet count, adding the packet size to the byte count, and adjusting the start time and last time of the flow.

The extract_features method computes the details of the captured packets. These include the packet size, flow duration, packet rate, byte rate, TCP flags, and the TCP window size. These features are useful in identifying patterns and malicious behaviors in the network traffic.

THE DETECTION ENGINE

Now, we will build the Detection Engine that will implement the signature and anomaly based detection mechanisms.

from sklearn.ensemble import IsolationForest
from sklearn.exceptions import NotFittedError # Added this import
import numpy as np

class detectionEngine:
    def __init__(self):
        # Corrected the typo here as well
        self.anomaly_detector = IsolationForest(
            contamination=0.1,
            random_state=42
        )
        self.signature_rules = self.load_signature_rules()
        self.training_data= []

    def load_signature_rules(self):
        return {
            'syn_flood': {
                'condition': lambda features: (
                    features['tcp_flags'] == 2 and # SYN flag
                    features['packet_rate'] > 100
                )
            },
            'port_scan': {
                'condition': lambda features: (
                    features['packet_size'] < 100 and
                    features['packet_rate'] > 50
                )
            }
        }

    def train_anomaly_detector(self, normal_traffic_data):
        self.anomaly_detector.fit(normal_traffic_data)

    def detect_threats(self, features):
        threats = []
        # Signature detection always runs
        for rule_name, rule in self.signature_rules.items():
            if rule['condition'](features):
                threats.append({'type': 'signature', 'rule': rule_name, 'confidence': 1.0})

        feature_vector = np.array([[
            features['packet_size'],
            features['packet_rate'],
            features['byte_rate']
        ]])

        # This block prevents the NotFittedError from crashing the app
        try:
            from sklearn.exceptions import NotFittedError
            anomaly_score = self.anomaly_detector.score_samples(feature_vector)[0]
            if anomaly_score < -0.5:
                threats.append({
                    'type': 'anomaly',
                    'score': anomaly_score,
                    'confidence': min(1.0, abs(anomaly_score))
                })
        except (NotFittedError, AttributeError):
            pass # Skip anomaly check if model isn't ready

        return threats

This module defines a hybrid system, utilizing signature and anomaly-based detection methods. We used the IsolationForest model to detect anomalies and also used its pre-defined rules and functions to detect and identify anomalous patterns.

In this code block, the train_anomaly_detector method is used to train the IsolationForest model using a dataset of normal traffic measures. This ensures that the model knows what the “normal” traffic looks like beforehand to differentiate different traffic patterns.

The detect_threats method evaluates the network traffic features for potential threats using two approaches:

Signature-based Detection: It iteratively goes through the pre-defined rules and applies each rule to the traffic. If the traffic matches a rule, the system flags it as a signature-based threat and records it with high confidence.
Anomaly-based Detection: It processes the feature vector (packet_size, packet_rate, and byte_rate) through the IsolationForest model and calculates an anomaly score. If the score indicates a threat, the engine triggers it as an anomaly and produces an anomaly score that reflects the threat’s severity.

Finally, we return the aggregate list of identified threats with their respective annotations or tags (either signature or anomaly), the score that triggered the anomaly, and its confidence score showing the severity and whether it is a threat.

THE ALERT SYSTEM

This module will be responsible for processing and organizing the logs in a more structured manner.

import logging
import json
from datetime import datetime
import pandas as pd
import os

class alertSystem:
    def __init__(self, log_file="ids_alerts.log"):
        self.logger = logging.getLogger("IDS_Alerts")
        self.logger.setLevel(logging.INFO)

        handler = logging.FileHandler(log_file)
        formatter = logging.Formatter(
            '%(asctime)s - %(levelname)s - %(message)s'
        )
        handler.setFormatter(formatter)
        self.logger.addHandler(handler)

    def generate_alert(self, threat, packet_info):
        alert = {
            'timestamp': datetime.now().isoformat(),
            'threat_type': threat['type'],
            'source_ip': packet_info.get('source_ip'),
            'destination_ip': packet_info.get('destination_ip'),
            'confidence': threat.get('confidence', 0.0),
            'details': threat
        }

        self.logger.warning(json.dumps(alert))

        if threat['confidence'] > 0.8:
            self.logger.critical(
                f"High confidence threat detected: {json.dumps(alert)}"
            )
        alert_df = pd.DataFrame([alert])
        if os.path.exists("alerts.csv"):
            alert_df.to_csv("alerts.csv", mode='a', header=False, index=False)
        else:
            alert_df.to_csv("alerts.csv", index=False)

The __init__ method initializes a logger named IDS_Alerts with INFO logging to catch alert information. It writes logs to a specific file ids_alerts.log. The FileHandler directs the captured logs to the file, and the Formatter formats them.

The generate_alert method is responsible for creating structured entries. Each alert shows key information such as the timestamp of detection, the type of threat, the source and destination IPs involved, its confidence level, and additional threat-specific information. These alerts are logged as WARNING level messages in JSON format.

If the confidence level is high (higher than 0.8), the alert is escalated and logged as a CRITICAL level message. This method is extensible, allowing for additional notification mechanisms, such as sending the alerts via email, etc.

SIMULATING THE IDS

Now that you have built the IDS, we will now try to run a simulation for it. We will need a file to train our Isolation Forest model to determine the normal and abnormal patterns in the packets and another file to generate the log attempts.

import numpy as np
from detectionEngine import detectionEngine
from alertSystem import alertSystem

# Initialize engine
engine = detectionEngine()
alerts = alertSystem(log_file="test_alerts.log")

# Train the anomaly detector with mock normal traffic
normal_traffic = np.array([
    [60, 10, 600],   # packet_size, packet_rate, byte_rate
    [70, 12, 840],
    [65, 8, 520]
])
engine.train_anomaly_detector(normal_traffic)

# Example features that will trigger signature-based alert
features = {
    'packet_size': 60,
    'packet_rate': 120,  # > 100 triggers SYN flood rule
    'byte_rate': 720,
    'tcp_flags': 2  # SYN flag
}

# Detect threats
threats = engine.detect_threats(features)

# Generate alerts
for threat in threats:
    packet_info = {
        'source_ip': '192.168.1.5',
        'destination_ip': '192.168.1.3'
    }
    alerts.generate_alert(threat, packet_info)

print("Alerts generated. Check test_alerts.log")

In this code, we created a test_alerts script to train our model to determine which traffic is normal or abnormal. It creates a "normal" baseline and feeds a "malicious scenario" into the engine. This allows us to verify whether the detection logic works without having to risk your machine to a real cyber attack.

import pandas as pd
import random
from datetime import datetime, timedelta

# Config
num_entries = 1000
users = ['alice', 'bob', 'charlie', 'dave']
ip_pool = ['192.168.1.' + str(i) for i in range(2, 20)] + ['10.0.0.' + str(i) for i in range(2, 20)]
status_options = ['success', 'fail']

# Generate logs
logs = []
start_time = datetime.now() - timedelta(days=1)

for _ in range(num_entries):
    timestamp = start_time + timedelta(seconds=random.randint(0, 86400))
    user = random.choice(users)
    ip = random.choice(ip_pool)
    status = random.choices(status_options, weights=[0.8,0.2])[0]
    logs.append([timestamp, user, ip, status])

# Create CSV
df_logs = pd.DataFrame(logs, columns=['timestamp', 'username', 'ip_address', 'status'])
df_logs.to_csv('simulated_auth_logs.csv', index=False)

print("simulated_auth_logs.csv created!")

In this code, we created a LogAttempts script to generate “mock” data for the system. It creates a history of “fake” user logins and generates 1000 random login attempts using a list of fake users and random IP addresses. This ensures that the dashboard will not look empty, and it needs to be run at least once before running the miniIntrusionDetectionSystem and dashboard.py.

COMBINING IT ALL TOGETHER

Now that we have our 4 modules, we can now start putting them all together to create a functional IDS solution.

from alertSystem import alertSystem
from detectionEngine import detectionEngine
from packetCapture import packetCapture
from trafficAnalyzer import trafficAnalyzer
import queue
from scapy.all import IP, TCP
import pandas as pd
import numpy as np  # needed for feature arrays

class intrusionDetectionSystem:
    def __init__(self, interface="Wi-Fi"):
        self.packet_capture = packetCapture()
        self.traffic_analyzer= trafficAnalyzer()
        self.detection_engine = detectionEngine()
        self.alert_system = alertSystem()

        self.interface = interface

        # --------------------------
        # Train anomaly detector from CSV
        # --------------------------
        try:
            df = pd.read_csv("simulated_auth_logs.csv")
            df['packet_size'] = df['status'].apply(lambda x: 1 if x == 'fail' else 0)
            packet_counts = df.groupby('ip_address').cumcount() + 1
            df['packet_rate'] = packet_counts
            df['byte_rate'] = packet_counts  # simple placeholder
            training_data = df[['packet_size', 'packet_rate', 'byte_rate']].values
            self.detection_engine.train_anomaly_detector(training_data)
            print("Anomaly detector trained from simulated_auth_logs.csv")
        except FileNotFoundError:
            print("simulated_auth_logs.csv not found. Anomaly detection will not work.")

    def start(self):
        print(f"Starting IDS on Interface {self.interface}")
        self.packet_capture.start_capture(self.interface)

        training_samples = []
        is_trained = False # Flag to prevent premature detection
        import time
        start_time = time.time()

        print("Phase 1: Collecting baseline traffic (5 seconds)...")

        while True:
            try:
                packet = self.packet_capture.packet_queue.get(timeout=1)
                features = self.traffic_analyzer.analyze_packet(packet)

                if features:
                    # Check if we are still in the training phase
                    if not is_trained:
                        training_samples.append([
                            features['packet_size'],
                            features['packet_rate'],
                            features['byte_rate']
                        ])

                        # Once we have 5 seconds of data, train the model
                        if time.time() - start_time > 5:
                            print(f"Training model on {len(training_samples)} packets...")
                            self.detection_engine.train_anomaly_detector(training_samples)
                            is_trained = True
                            print("Phase 2: IDS is now ACTIVE.")

                    # Only run detection if the model is ready
                    else:
                        threats = self.detection_engine.detect_threats(features)
                        for threat in threats:
                            packet_info = {
                                'source_ip': packet[IP].src,
                                'destination_ip': packet[IP].dst,
                                'source_port': packet[TCP].sport,
                                'destination_port': packet[TCP].dport
                            }
                            self.alert_system.generate_alert(threat, packet_info)

            except queue.Empty:
                continue
            except KeyboardInterrupt:
                print("Stopping IDS.....")
                self.packet_capture.stop()
                break

if __name__ == "__main__":
    ids = intrusionDetectionSystem()
    ids.start()

Here, the intrusionDetectionSystem sets up its core parts: packetCapture for capturing packets on the network interface, trafficAnalyzer for extracting packet features and analyzing them, detectionEngine for identifying threats using both signature and anomaly-based detection methods, and alertSystem for logging and escalating threat alerts. The interface parameter specifies which network interface to monitor, defaulting to the system default (in this case, "Wi-Fi" for Windows and "en0" for Mac).

The start function executes the IDS, beginning monitoring on the specified interface and entering a continuous loop to process incoming packets. For each captured packet, the system uses the trafficAnalyzer to extract features and analyze them for potential threats with the detectionEngine. If threats are detected, detailed alerts are generated through the alertSystem.

VISUALIZING THE DATA USING STREAMLIT

Optionally, if you want to visualize the logs being detected by your system, you can use Streamlit to do so. We’ll have a quick run through on how to create a simple dashboard for your IDS.

import os
import streamlit as st
import pandas as pd


st.title("Python Mini IDS Dashboard")


# Load CSVs
logs = pd.read_csv("simulated_auth_logs.csv", parse_dates=['timestamp'])
alerts = pd.read_csv("alerts.csv", parse_dates=['timestamp']) if os.path.exists("alerts.csv") else pd.DataFrame()


# Display Logs
st.subheader("Login Logs")
st.dataframe(logs)


# Display Alerts
st.subheader("Alerts")
if not alerts.empty:
    st.dataframe(alerts)
else:
    st.write("No alerts detected yet.")


# Visualize Failed Logins
st.subheader("Failed Logins by User")
failed_logins = logs[logs['status'] == 'fail'].groupby('username').size()
st.bar_chart(failed_logins)


# Top IPs with Failed Logins
st.subheader("Top 10 IPs by Failed Logins")
top_ips = logs[logs['status'] == 'fail'].groupby('ip_address').size().sort_values(ascending=False).head(10)
st.bar_chart(top_ips)

In this code, the dashboard connects to the IDS by reading two different files: simulated_auth_logs.csv, which contains the general login history (who logged in, from where, and whether they succeeded or not), and alerts.csv, which loads alerts detected by the detectionEngine.

The tables use st.dataframe() to display the raw logs in a scrollable table. If alerts.csv contains detected threats, they are displayed in the table; otherwise, the table shows a "No alerts detected yet" status message.

The dashboard also uses two graphs to help you spot patterns. You can view failed user logins to identify if a specific account is being targeted and highlight which IP addresses are causing the most trouble, making it easier to identify a potential attacker’s address.

Streamlit is great for visualizing data. If you want to further enhance your understanding about building your own dashboard, you can read this article.

TO SUM IT UP

Creating this mini IDS gives you a hands-on look at how systems can monitor network activity and flag unusual events. You’ve seen how Python and a few key libraries can be combined to build something practical from scratch. While this provides a solid foundation, there is always room to enhance the system further.

POTENTIAL IMPROVEMENTS

While our mini IDS effectively identifies suspicious activity in simulated traffic, there are a few areas where it could be enhanced. For example, adding more refined detection rules could help catch subtle or complex attack patterns. Integrating real-time threat intelligence would allow the system to respond to emerging threats faster. Improving packet processing efficiency could also make the IDS more responsive under high network load.

FINAL THOUGHTS

Congratulations! By completing this project, you’ve taken your first real step into the world of cybersecurity. Keep building, keep experimenting, and remember, every line of code you write brings you closer to that 6‑digit career you’re aiming for.

Github repository:

SPARCS_miniIDS GitHub

Reference:

https://www.freecodecamp.org/news/build-a-real-time-intrusion-detection-system-with-python/

Introduction to Mobile Game Dev: How to Build a Basic Chess Game on Mobile in Flutter

Tyshaun Louis Siga — Sun, 22 Feb 2026 11:45:07 +0000

This article is co-authored by Ryan Lucas Canama

"I want to make a game on my phone, but where do i start?"

Whether you mentally said yes or even if you don’t even relate, read on to learn how to make a chess game using Flutter.

What is Game Development?

Game development is the process of creating a video game from an initial idea all the way to a finished, playable product. Game development is one of the best environments for learning programming and systems thinking because feedback is immediate and tangible. You write code, run the game, and see exactly what syour logic does in motion and in real time.

It's also a fun way to learn programming because you're making a game — since when is making games ever not fun?!

Introduction to Flutter and Virtual Machines

Flutter is an open source UI toolkit by Google where a single codebase can be used for cross-platform applications such as for mobile, web and desktop. It has many advantages such as Hot Reload where you can instantly see the changes you make, the dart language that is strongly typed and fast, and as previously mentioned, its cross-platform application.

In order to run games we need a virtual machine, Android Studio both developed by Google, goes on hand in hand with Flutter. It provides the ability to create emulators for multiple devices in order to simulate how an application runs on its intended environment with the luxury of being able to edit and run your changes in real time.

Why use Flutter to start Mobile Game Development?

Apart from being mainly used as a UI toolkit throughout its release, flutter has become a serious contender for mobile game development—specifically for indie developers and logic-based projects.

The average road map on being a game developer usually goes from mastering 2D "logic based" and "Game loop" focused games then pivot more on to 3D games using tools like Unity, Godot, and Unreal Engine. Flutter can be helpful as a starting point to mobile game dev because of it's beginner friendly dart programming language and acts as a gentler entry into the workspace.

If your goal is to go professional or build complex games, treat Flutter as a stepping stone and plan to move to Unity or Godot eventually.

Why Build A Chess Game?

Chess is a surprisingly excellent first "real" project — not because it's easy (it isn't), but because of what it forces you to learn.

You'll implement an 8x8 board using a 2D array and flat arrays. This teaches you coordinate systems, indexing, and how games represent spatial data — foundational for almost every game type.

it also teaches you on Object-Oriented Design by modeling pieces using classes and objects.

Let's Start!

Be careful that this tutorial assumes that you have already installed the pre-requisite softwares needed to run a mobile android dev environment!

Required pre-requisites:

In case you don't have Flutter installed yet, click here.
For the Android emulator, if you haven't installed it yet, click here.
For setting up a Virtual Device on Android Studio, click here

Setting up a new project

Assuming that you have downloaded the needed prerequisites (Install Flutter, Flutter Extension on VSCode, Android emulator on Android Studio), start a new project on VSCode by simply heading to the command palette by clicking on View>command palette>Flutter: new project or use Ctrl+Shift+p, then click on the new projec,t then click Application. It will act as a template for our game.

Once clicked and a folder has been created, name your project as you please, but follow Flutter’s project naming rule:

just wait for a few minutes until flutter has fully created the config files. The terminal on Vs code will display this output once the config files are finished:

//Terminal
[chess_game] flutter create --template app --overwrite .
Creating project ....
Resolving dependencies...
Downloading packages...
Got dependencies.
Wrote 130 files.


All done!
You can find general documentation for Flutter at: https://docs.flutter.dev/
Detailed API documentation is available at: https://api.flutter.dev/
If you prefer video documentation, consider: https://www.youtube.com/c/flutterdev


In order to run your application, type:


  $ flutter run


Your application code is in .\lib\main.dart.


exit code 0

Now we can start setting up our game!

Set up Game Board and Environment

Prepare Emulator on VScode

Ater finishing the installation of the config files, set up the virtual machine that will be needed to emulate the game.
By clicking the No device button at the bottom of VSCode, Select the android emulator that you have set up on Android Studio to boot it up.

It is recommended to boot up the emulator before running the flutter project because it takes more time to run than the project itself.
-Author

You can stop, restart and hot reload the emulator with the control panel

Set up `main.dart`

Next, head to the lib folder and click on the main.dart file

After taking a look at the main.dart pre-built code, delete everything inside the stateless widget because we don't need them for our game.

import 'package:flutter/material.dart';


void main() {
  runApp(const MyApp());
}


class MyApp extends StatelessWidget {
  const MyApp({super.key});


  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: GameBoard(


      ),
    );
  }
}

Create `game_board.dart` file

After cleaning the main.dart, create a new file on the lib folder and name it game_board.dart,
This is where we’ll be making all the main features of our chess game including initializing the pieces and the moves of individual pieces. After creating the file create a stateless widget:

//game_board.dart
import 'package:flutter/material.dart';


class Game_board extends StatelessWidget {
  const Game_board({super.key});


  @override
  Widget build(BuildContext context) {
    return const Placeholder();
  }
}

Then replace the const Placeholder with a scaffolding widget and add a gridview.builder as body of the widget. The gridview.builder along with the itemBuilder callback function creates a scrollable grid over the entire screen which will act as a basis on our game board.

//game_board.dart
class Game_board extends StatelessWidget {
  const Game_board({super.key});


  @override
  Widget build(BuildContext context) {
    return Scaffold(


      body: GridView.builder(gridDelegate:
       const SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 8),
       itemBuilder: (context, index) => Text(index.toString()),

    ));
  }
}

Since this is not the output that we want, let’s adjust the gridview a little bit by adding an item count to limit the numbers on the screen:

//game_board.dart
class Game_board extends StatelessWidget {
  const Game_board({super.key});


  @override
  Widget build(BuildContext context) {
    return Scaffold(


      body: GridView.builder(
      physics: const NeverScrollableScrollPhysics(),
      gridDelegate:
      const SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 8),
      itemCount: 8*8,
      itemBuilder: (context, index) => Center//puts the number in the center of the square
      (child: Text(index.toString())),

    ));
  }
}

But even after removing the excess squares, it would still be scrollable so we would need to put physics: const NeverScrollableScrollPhysics(), as shown above

To make actual tiles without numbers, make a folder within lib named “components” and within that, make a file called “squares_gb.dart”. inside the file, we make a boolean named isWhite and initialize it to the constructor, then return a container widget and a calling method color in order for the squares to turn light green and if not, it turns darker green.

//squares_gb.dart
import 'package:flutter/material.dart';




class SquaresGb extends StatelessWidget {
  final bool isWhite;
  const SquaresGb({super.key, required this.isWhite});




  @override
  Widget build(BuildContext context) {
    return Container(
      color: isWhite ? Colors.green[200] : Colors.green[700],


    );
  }
}

Then, create a folder inside the lib folder and name it helper_methods, that way, you can refer to it later on and make the code cleaner by just referring to the helper. Now, inside the recently made folder, we insert the code below so that we can make a checkered pattern.

//helper_methods.dart
bool isWhite(int index){
int x = index ~/ 8;// for Row
       int y = index % 8; // for Column


       bool isWhite =(x + y) % 2 == 0;//Alternates colors
       return isWhite;
}

Set up Images on pubspec.yaml

Now that you have made your game board, let's set up the pieces! What you have to do first is gather all the needed images into one folder.

And make sure to use .png images that are color black so it can be customized later!
-Author

Now drag the folder into your lib folder along with the dart files that belong on your code.

Now head back to VSCode and head to the pubspec.yaml file and "uncomment the assets section”.

From:

#pubspec.yaml
flutter:


  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true


  # To add assets to your application, add an assets section, like this:
  # assets:
  #   - images/a_dot_burr.jpeg
  #   - images/a_dot_ham.jpeg

To:

#pubspec.yaml
flutter:


  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true


  # To add assets to your application, add an assets section, like this:
  assets:
  - lib/images/
  #   - images/a_dot_ham.jpeg

Then run on the terminal

#Terminal
flutter pub get

This should be the output

#Terminal
Resolving dependencies... 
Downloading packages... 
  characters 1.4.0 (1.4.1 available)
  matcher 0.12.17 (0.12.18 available)
  material_color_utilities 0.11.1 (0.13.0 available)
  meta 1.17.0 (1.18.1 available)
  test_api 0.7.7 (0.7.9 available)
Got dependencies!
5 packages have newer versions incompatible with dependency constraints.
Try `flutter pub outdated` for more information.

Now the game can access your images folder when needed!

Creation of pieces and selection function

Now that we have set our images, create a new file named chess_ pieces.dart in here, we can put the specifications of our different chess types:

//chess_pieces.dart
enum ChessPieceType {pawn, rook, knight, bishop, king, queen,}


class ChessPieces {
  final ChessPieceType type;
  final bool isWhite;
  final String imagePath;


  ChessPieces({
    required this.type,
    required this.isWhite,
    required this.imagePath,});


}

We clarified there on the constructor that in order to create a ChessPieces object, we need to pass an image, a color, and a piece type.

Set that aside and create a folder named “values” and a file called “color_values.dart”, this will be for our background and foreground color. We separate this from the code above so our code would look cleaner and would not overlap with other functions.

//color_values.dart
import 'package:flutter/material.dart';


var backgroundClr =  const Color.fromARGB(255, 1, 99, 1);
var foregroundClr = const Color.fromARGB(201, 142, 228, 120);

Now we can go back to the squares_gb.dart and add the ChessPieces boolean to the squares:

//squares_gb.dart
import 'package:chess_sparcs/components/chess_pieces.dart';
import 'package:flutter/material.dart';


class SquaresGb extends StatelessWidget {
  final bool isWhite;//decides the color of the pieces
  final ChessPieces? pieces; //add Chess Pieces to squares
const SquaresGb({
    super.key,
    required this.isWhite,
    required this.pieces,
 });


  @override
  Widget build(BuildContext context) {
 return Container(
       child: pieces != null ? Image.asset(pieces!.imagePath,
        color: pieces!.isWhite ? Colors.white : const Color.fromARGB(255, 105, 1, 1),
        ) : null, //returns the image and color of the piece otherwise, none will appear
   }
}

Let us also return to our game_board.dart since we added the ChessPieces object into the square’s constructor, we might as well create a 2D List of all the positions in the board that will have a piece on.

//game_board.dart
class GameBoard extends StatefulWidget {
  const GameBoard({super.key});


  @override
  State<GameBoard> createState() => _GameBoardState();
}


class _GameBoardState extends State<GameBoard> {
  // 2D list representing the ChessBoard
    late List<List<ChessPieces?>> board; // we use late to  declares a chess board that will be set up later.
  //...the rest of your code in game_board

Now, before we initialize our 2D list lets create a void function to initialize our game board pieces entirely:

  //game_board.dart
  @override
  void initState() {
    super.initState();
    _initalizeBoard();
  }
 void _initalizeBoard() {
    //initialize the board withe nulls, no pieces in those positions
    List<List<ChessPieces?>> Newboard = List.generate(
      8,
      (index) => List.generate(8, (index) => null),
    );
}

Now, inside our void function, we will input the initial positions of all of our chess pieces, starting with the pawns:

//game_board.dart
//place pawns
    for (int i = 0; i < 8; i++) {
      Newboard[1][i] = ChessPieces(
        //black pawn
        type: ChessPieceType.pawn,
        isWhite: false,
        imagePath: 'lib/images/pawn_transparent.png',
      );
      Newboard[6][i] = ChessPieces(
        //white pawn
        type: ChessPieceType.pawn,
        isWhite: true,
        imagePath: 'lib/images/pawn_transparent.png',
      );
    }

Now, as you can see, the boolean isWhite is now a requirement in all pieces, because it is now the one that decides if it's a white or black piece.

For Rooks:

//game_board.dart
//place rooks
    Newboard[0][0] = ChessPieces(
      //black rook
      type: ChessPieceType.rook,
      isWhite: false,
      imagePath: 'lib/images/Rook_transparent.png',
    );
    Newboard[0][7] = ChessPieces(
      //black rook
      type: ChessPieceType.rook,
      isWhite: false,
      imagePath: 'lib/images/Rook_transparent.png',
    );
    Newboard[7][0] = ChessPieces(
      //black rook
      type: ChessPieceType.rook,
      isWhite: true,
      imagePath: 'lib/images/Rook_transparent.png',
    );
    Newboard[7][7] = ChessPieces(
      //black rook
      type: ChessPieceType.rook,
      isWhite: true,
      imagePath: 'lib/images/Rook_transparent.png',
    );

For Knights:

//game_board.dart
//place knights
    Newboard[0][1] = ChessPieces(
      //black knight
      type: ChessPieceType.knight,
      isWhite: false,
      imagePath: 'lib/images/knight_transparent.png',
    );
    Newboard[0][6] = ChessPieces(
      //black knight
      type: ChessPieceType.knight,
      isWhite: false,
      imagePath: 'lib/images/knight_transparent.png',
    );
    Newboard[7][1] = ChessPieces(
      //white knight
      type: ChessPieceType.knight,
      isWhite: true,
      imagePath: 'lib/images/knight_transparent.png',
    );
    Newboard[7][6] = ChessPieces(
      //white knight
      type: ChessPieceType.knight,
      isWhite: true,
      imagePath: 'lib/images/knight_transparent.png',
    );

For Bishops:

//game_board.dart
//place bishops
    Newboard[0][2] = ChessPieces(
      type: ChessPieceType.bishop,
      isWhite: false,
      imagePath: 'lib/images/Bishop_transparent.png',
    );
    Newboard[0][5] = ChessPieces(
      type: ChessPieceType.bishop,
      isWhite: false,
      imagePath: 'lib/images/Bishop_transparent.png',
    );
    Newboard[7][2] = ChessPieces(
      type: ChessPieceType.bishop,
      isWhite: true,
      imagePath: 'lib/images/Bishop_transparent.png',
    );
    Newboard[7][5] = ChessPieces(
      type: ChessPieceType.bishop,
      isWhite: true,
      imagePath: 'lib/images/Bishop_transparent.png',
    );

For Queens:

//game_board.dart
//place queens
    Newboard[0][3] = ChessPieces(
      type: ChessPieceType.queen,
      isWhite: false,
      imagePath: 'lib/images/queen_transparent.png',
    );
    Newboard[7][3] = ChessPieces(
      type: ChessPieceType.queen,
      isWhite: true,
      imagePath: 'lib/images/queen_transparent.png',
    );

For Kings:

//game_board.dart
 //place kings
    Newboard[0][4] = ChessPieces(
      type: ChessPieceType.king,
      isWhite: false,
      imagePath: 'lib/images/king_transparent.png',
    );
    Newboard[7][4] = ChessPieces(
      type: ChessPieceType.king,
      isWhite: true,
      imagePath: 'lib/images/king_transparent.png',
    );

And for the pieces to be shown, we must return the board to Newboard:

//game_board.dart
//..Chesspieces initial position
 board = Newboard;
//..End of void function
}

As we are done with the pieces, we can head back to the GridView.builder and pass the requirements that we added to the constructor earlier, as well as the row and column of the squares.

//game_board.dart
//..the rest of your code
 @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: backgroundClr,//bg color from color_values.dart
body:GridView.builder(
              itemCount: 8 * 8,
              physics: const NeverScrollableScrollPhysics(),
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 8,
              ),
              itemBuilder: (context, index) {
                //gets row and col position from square
                int row = index ~/ 8;
                int col = index % 8;


                return SquaresGb(
                  isWhite: isWhite(index),
                  pieces: board[row][col],
                );
              },
            ),
    );
  }

It would likely look more like this:

Now that we have placed our chess pieces, let's try to select them!
First, we’ll have to go back to our square_gb.dart and add a new boolean called isSelected in the class and its constructor:

//square_gb.dart
class SquaresGb extends StatelessWidget {
  final bool isWhite;
  final ChessPieces? pieces;
  final bool isSelected;


  const SquaresGb({
    super.key,
    required this.isWhite,
    required this.pieces,
    required this.isSelected,
    });

Then let’s make the square change its color depending on whether it has been selected or not.

//square_gb.dart
//..constructor
@override
  Widget build(BuildContext context) {


    Color? squareColor;
    //if selected square is amber
    if(isSelected){
        squareColor = Colors.amberAccent;
    }
    //if not, square is green or light green
    else{
      squareColor = isWhite ? foregroundClr : backgroundClr;
    }
  }

After that, we head back to the game_board.dart again to create a variable for the selected piece.

//game_board.dart
class _GameBoardState extends State<GameBoard> {
  // 2D list representing the ChessBoard
  late List<List<ChessPieces?>> board;

  //current piece being selected on board
  //if no piece then it is null
  ChessPieces? selectedPiece;
}


//..the rest of your code

Then let's also add the column index of the selected piece:

//game_board.dart
class _GameBoardState extends State<GameBoard> {
  // 2D list representing the ChessBoard
  late List<List<ChessPieces?>> board;

  //current piece being selected on board
  //if no piece then it is null
  ChessPieces? selectedPiece;
  //row index of selected piece
  // default value (-1) inidicates no pieces have been selected
  int selectedRow = -1;


  //col index of selected piece
  // default value (-1) inidicates no pieces have been selected
  int selectedCol = -1;
}

After that, create a void function that initializes when a user selects a piece.

//game_board.dart
 void piecesSelected(int row, int col) {
    setState(() {
      //No piece has been selected yet, this is the first selection
     if (board[row][col]!= null) {
          selectedPiece = board[row][col];
          selectedRow = row;
          selectedCol = col;
        }
    });}

Then head down to create a checker if the square has been selected or not and return it:

//game_board.dart
 //..GridView.Builder
//checker if seleceted or not
        bool isSelected = selectedRow == row && selectedCol == col;

return SquaresGb(
                  isWhite: isWhite(index),
                  pieces: board[row][col],
                  isSelected: isSelected,
            );

Select chess pieces

We have implemented the logic for selecting but there is something wrong... We can't touch it! In order to fix that we must head to the squares_gb.dart to add a GestureDetector to detect our taps.

//squares_gb.dart
return GestureDetector(
    onTap: onTap,
      child: Container(
        color: squareColor,
        child: pieces != null ?
        Image.asset(
        pieces!.imagePath,
        color: pieces!.isWhite ? Colors.white : const Color.fromARGB(255, 105, 1, 1),
        ) : null,
      )
)

But in order to continue, the Gesture detector states that it needs to initalize a void function declared and initialized at the constructor in order to work functionally.

So let’s add that

//squares_gb.dart
class SquaresGb extends StatelessWidget {
  final bool isWhite;
  final ChessPieces? pieces;
  final bool isSelected;
  final void Function()? onTap;


  const SquaresGb({
    super.key,
    required this.isWhite,
    required this.pieces,
    required this.isSelected,
    required this.onTap,
    });
}

//squares_gb.dart
return GestureDetector(
      onTap:  onTap,//GestureDetector now works
      child: Container(
        color: squareColor,
        child: pieces != null ?
        Image.asset(
        pieces!.imagePath,
        color: pieces!.isWhite ? Colors.white : const Color.fromARGB(255, 105, 1, 1),
        ) : null,

      ),
    );

Once added we head back to the game_board.dart to pass the newly required onTap on the SquaresGb.

//game_board.dart
return SquaresGb(
                  isWhite: isWhite(index),
                  pieces: board[row][col],
                  isSelected: isSelected,
                  onTap: () => piecesSelected(row, col),
                );

Now restart your emulator and try to select one of the pieces. It would most likely look like this:

Raw Valid Moves

To know what valid moves each piece has, we implement the following:

At game_board.dart, we add this:

//game_board.dart
  //A list of valid moves  for the currently selected pieces
  //each move is represented as a list with 2 elements: row and col
  List<List<int>> validMoves = [];

//game_board.dart
// if a  piece is selected, calculate it’s valid moves
validMoves = calculateRawValidMoves(selectedRow, selectedCol, selectedPiece);

(but there is a difference between raw and real valid moves which we will get to later!)

and then, we make a List called candidateMoves.

//game_board.dart
 //Calculate Raw Valid Moves
  List<List<int>> calculatedRawValidMoves(
    int row,
    int col,
    ChessPieces? pieces,
  ) {
    List<List<int>> candidateMoves = [];


//different directions based on their color
int direction = pieces!.isWhite ? -1 : 1; //up or down moves

After that, we should make another helper method in our helper_methods.dart file since this method would be used a lot and it is to check if a specific row and column is in the board.

//helper_methods.dart
bool isInBoard(int row, int col){
  return row >= 0 && row < 8 && col >= 0 && col < 8;
}

Declaration of Individual moves

Now, we make different cases based on different pieces. The process is basically similar for all pieces with all unique moves added to the List<List<int>> candidateMoves.

For Pawns:

//game_board.dart
switch (pieces.type) {
      case ChessPieceType.pawn:
        // Move forward one square if not blocked
        if (isInBoard(row + direction, col) &&
            board[row + direction][col] == null) {
          candidateMoves.add([row + direction, col]);
        }
        // Move forward two squares from starting position if both squares are empty
        if ((row == 1 && !pieces.isWhite) || (row == 6 && pieces.isWhite)) {
          if (isInBoard(row + 2 * direction, col) &&
              board[row + 2 * direction][col] == null &&
              board[row + direction][col] == null) {
            candidateMoves.add([row + 2 * direction, col]);
          }
        }
        // Capture diagonally to the left if an enemy piece is there
        if (isInBoard(row + direction, col - 1) &&
            board[row + direction][col - 1] != null &&
            board[row + direction][col - 1]!.isWhite != pieces.isWhite) {
          candidateMoves.add([row + direction, col - 1]);
        }
// Capture diagonally to the right if an enemy piece is there
        if (isInBoard(row + direction, col + 1) &&
            board[row + direction][col + 1] != null &&
            board[row + direction][col + 1]!.isWhite != pieces.isWhite) {
          candidateMoves.add([row + direction, col + 1]);
        }
        break;

now, we add this line at the end so it returns all the moves that was added in candidateMoves.

//game_board.dart
return candidateMoves;

but to return it, we go back in the squares_gb.dart , we add bool isValidmove to indicate if it is a valid move or not.

//squares_gb.dart
 class SquaresGb extends StatelessWidget {
  final bool isWhite;
  final ChessPieces? pieces;
  final bool isSelected;
  final bool isValidmove;

we also add this requirement to the constructor

//squares_gb.dart
required this.isValidmove,

then, to have a separate color for when its a valid move, we add an else if under the squareColor if statements:

//squares_gb.dart
    else if(isValidmove){
      squareColor = Colors.blueAccent;
    }

then we go back to the game_board and add the following line for the scaffold:

//game_board.dart
                //CHECK if valid move
          bool isValidmove = false;
                for (var position in validMoves) {
                  //compare row and columns
                  if (position[0] == row && position[1] == col) {
                    isValidmove = true;
                  }
                }

Now we do one for Rooks:

//game_board.dart
 case ChessPieceType.rook:
       // Rooks move vertically and horizontally until blocked by an ally, an enemy, or the board edge
        var directions = [
          [-1, 0], //up
          [1, 0], //down
          [0, -1], //left
          [0, 1], //right
        ];
        for (var direction in directions) {
          var i = 1;
          while (true) {
    // Calculate next square in current direction
            var newRow = row + i * direction[0];
            var newCol = col + i * direction[1];
    // Stop if out of board bounds   
          if (!isInBoard(newRow, newCol)) {
              break;
            }
            if (board[newRow][newCol] != null) {
// If enemy piece, add as valid capture move then stop 
        if (board[newRow][newCol]!.isWhite != pieces.isWhite) {
                candidateMoves.add([newRow, newCol]); //kill as rook
              }
    // Stop regardless — blocked by ally or after capture
              break; 
            }
// Square is empty, rook can move here, continue in same direction
           candidateMoves.add([newRow, newCol]);
            i++;
          }
        }
        Break;

Now for Knights:

//game_board.dart
 case ChessPieceType.knight:
        // Knights move in an L-shape: 2 squares in one direction, 1 in the other
          var knightMoves = [
          [-2, -1], //up 2 left 1
          [-2, 1], //up 2 right 1
          [-1, -2], //up 1 left 2
          [-1, 2], //up 1 right 2
          [1, -2], //down 1 left 2
          [1, 2], //down 1 right 2
          [2, -1], //down 2 left 1
          [2, 1], //down 2 right 1
        ];
        for (var move in knightMoves) {
          var newRow = row + move[0];
          var newCol = col + move[1];
    // Skip if move lands outside the board
          if (!isInBoard(newRow, newCol)) {
            continue;
          }
          if (board[newRow][newCol] != null) {
       // If enemy piece, add as valid capture then skip to next move
            if (board[newRow][newCol]!.isWhite != pieces.isWhite) {
              candidateMoves.add([newRow, newCol]); 
            }
 // Skip if blocked by ally
            continue; 
          }
          candidateMoves.add([newRow, newCol]);
        }
        break;

for Bishops:

//game_board.dart
 case ChessPieceType.bishop:
        // Bishops move diagonally in 4 directions until blocked by an ally, an enemy, or the board edge


        var directions = [
          [-1, -1], //up left
          [-1, 1], //up right
          [1, -1], // down left
          [1, 1], // down right 
        ];


        for (var direction in directions) {
          var i = 1;
          while (true) {
    // Calculate next square in current diagonal direction 
            var newRow = row + i * direction[0];
            var newCol = col + i * direction[1];
    // Stop if out of board bounds
            if (!isInBoard(newRow, newCol)) {
              break;
            }
            if (board[newRow][newCol] != null) {
    // If enemy piece, add as valid capture then stop 
              if (board[newRow][newCol]!.isWhite != pieces.isWhite) {
                candidateMoves.add([newRow, newCol]); 
              }
// Stop regardless — blocked by ally or after capture
              break;
            }
// Square is empty, bishop can move here, continue diagonally
            candidateMoves.add([newRow, newCol]);
            i++;
          }
        }
        break;

For Queens:

//game_board.dart
  case ChessPieceType.queen:
        // Queen combines rook + bishop: slides in all 8 directions until blocked by an ally, an enemy, or the board edge         
var directions = [
          [-1, 0], //up
          [1, 0], // down
          [0, -1], // left
          [0, 1], //right
          [-1, -1], // up left
          [-1, 1], //up right
          [1, -1], //down left
          [1, 1], //down right
        ];
        for (var direction in directions) {
          var i = 1;
          while (true) {
    // Calculate next square in current direction
            var newRow = row + i * direction[0];
            var newCol = col + i * direction[1];
// Stop if out of board bounds
            if (!isInBoard(newRow, newCol)) {
              break;
            }


            if (board[newRow][newCol] != null) {


// If enemy piece, add as valid capture then stop
              if (board[newRow][newCol]!.isWhite != pieces.isWhite) {
                candidateMoves.add([newRow, newCol]);
              }
// Stop regardless — blocked by ally or after capture
            break;  
           }


// Square is empty, queen can move here, continue in same direction
            candidateMoves.add([newRow, newCol]);
            i++;
          }
        }
        break;

And lastly for the Kings:

//game_board.dart
case ChessPieceType.king:
        //King moves in all 8 directions but only one square at a time
        var directions = [
          [-1, 0], //up
          [1, 0], // down
          [0, -1], // left
          [0, 1], //right
          [-1, -1], // up left
          [-1, 1], //up right
          [1, -1], //down left
          [1, 1], //down right
        ];
        for (var direction in directions) {
// Calculate the single square in current direction
          var newRow = row + direction[0];
          var newCol = col + direction[1];


    // Skip if out of board bounds
          if (!isInBoard(newRow, newCol)) {
            continue;
          }
          if (board[newRow][newCol] != null) {
      // If enemy piece, add as valid capture then skip to next direction
            if (board[newRow][newCol]!.isWhite != pieces.isWhite) {
              candidateMoves.add([newRow, newCol]); //Kill as King
            }
    // Skip if blocked by ally
            continue; 
          }
// Square is empty, king can move here
          candidateMoves.add([newRow, newCol]);
        }
        break;
    }
// Return all valid candidate moves for the piece   
    return candidateMoves;
  }

if you want to test it fast, you can add the following line of code in the board initialization to put a piece in the middle and see if it moves correctly.

//game_board.dart
newBoard[3][3] = chessPiece(
  type: ChessPieceType.queen,
  isWhite: true,
  imagePath: 'lib/images/queen.png',
);

Moving of pieces

Now that you have made the possible moves lets actually set the pieces in motion! In order
to move the pieces create a void function movePieces within the game_board.dart to get started and add the following:

//game_board.dart
//MOVE PIECES
  void movePiece(int newRow, int newCol) {
    //move the piece and clear the old spot
    board[newRow][newCol] = selectedPiece;
    board[selectedRow][selectedCol] = null;

    //clear selection
    setState(() {
      selectedPiece = null;
      selectedRow = -1;
      selectedCol = -1;
      validMoves = [];
    });

and we would call it when we select a piece so inside the pieceSelected, we add the following:

//game_board.dart
      //if there is a piece selected and user taps on valid square that is a valid move, then move there
      else if (selectedPiece != null &&
          validMoves.any((element) => element[0] == row && element[1] == col)) {
        movePieces(row, col);
      }

An optional minor visual change is to change the margins of the valid moves’ square color. If you want to do that, you can put the following code in the squares_gb.dart file and within the GestureDetector: (feel free to tweak it to your own tastes)

//squares_gb.dart file
        margin: EdgeInsets.all(isValidmove ?  6 : 0),

Meanwhile, in the pieceSelected, we would need to tweak it since if we try to capture an opponents piece, it will just assume that we are selecting it instead. so to fix that, we would need to input:

//game_board.dart
// If no piece is currently selected AND the tapped cell has a piece on it
if (selectedPiece == null && board[row][col] != null) {
  // Only allow selection if the piece belongs to the current player
  if (board[row][col]!.isWhite == isWhiteTurn) {
   // Select the piece and store its position
    selectedPiece = board[row][col];
    selectedRow = row;
    selectedCol = col;
  }
}
// If a piece is already selected AND the newly tapped cell also has a piece
// that belongs to the same player (i.e. not an enemy piece)
else if (board[row][col] != null &&
    board[row][col]!.isWhite == selectedPiece!.isWhite) {
  // Switch the selection to the newly tapped friendly piece
  selectedPiece = board[row][col];
  selectedRow = row;
  selectedCol = col;
}

To implement checks and checkmates:

We first initialize the kings position before the code to initialize the board

//game_board.dart
  //initial position of kings
  List<int> whiteKingPosition = [7, 4];
  List<int> blackKingPosition = [0, 4];
  bool checkStatus = false;

next, we make an isKinginCheck method to determine if the current player’s king is in check

//game_board.dart
 // Determine if the given player's king is currently in check
bool isKingInCheck(bool isWhiteKing) {
  // Get the current position of the king we're checking
  List<int> kingPosition = isWhiteKing
      ? whiteKingPosition
      : blackKingPosition;
}

then, we apply so that every time we move a piece, we first check the checkmate before the check and we will also add an action TextButton to start over the game when someone has been checkmated. So this snippet of code would go to the last part of movePieces:

//game_board.dart
// Determine game state after the move: evaluate checkmate before check
// since checkmate takes priority over simply being in check
bool mated = isCheckmate(!isWhiteTurn);
bool checked = isKingInCheck(!isWhiteTurn);



if (mated) {
  // Checkmate — suppress the check indicator and prompt the end game dialog
  checkStatus = false;
  showDialog(
    context: context,
    builder: (context) => AlertDialog(
      title: const Text('CHECK MATE!'),
      actions: [
        TextButton(onPressed: resetGame, child: const Text('Play Again?'))
      ],
    ),
  );
} else if (checked) {
  // The king is in check but still has valid moves — flag it for the UI
  checkStatus = true;
} else {
  // No check or checkmate — clear any existing check indicator
  checkStatus = false;
}


// Hand control to the other player
isWhiteTurn = !isWhiteTurn;

then directly afterwards,

//game_board.dart
//Check if enemy pieces can attack the king
      for (int i = 0; i < 8; i++) {
        for (int j = 0; j < 8; j++) {
          //skip empty square and pieces of  the same color of king
          if (board[i][j] == null || board[i][j]!.isWhite == iswhiteKng) {
            continue;
          }
          List<List<int>> pieceValidmoves = calculatedRealValidMoves(
            i,
            j,
            board[i][j],false
          );
          //check if the king's position is in this piece's valid moves
          if (pieceValidmoves.any(
            (move) => move[0] == kingPosition[0] && move[1] == kingPosition[1],
          )) {
            return true;
          }
        }
      }
      return false;
    }

Add this in game_board.dart as an indicator that a king is being checked

//game_board.dart
          //GAME STATUS
          Text(checkStatus ? "CHECK!" : ""),

Since we have called a function earlier named resetGame let's build the method now

//game_board.dart
//Reset to new Game
void resetGame(){

  Navigator.pop(context);
  _initalizeBoard();
  checkStatus = false;
  WhitePiecesKilled.clear();
  BlackPiecesKilled.clear();
  whiteKingPosition = [7, 4];
  blackKingPosition = [0, 4];
  setState(() {});
  isWhiteTurn = true;
}

Now we can reset the game if someone is being checkmated!

Real Valid Moves

Up until now, we were only counting the raw valid moves but not all raw valid moves are real valid moves such as raw valid moves counting the ability to put your king in check when in reality, that is not allowed.

To count the real valid moves we would need to make another method to calculate and simulate the real valid moves of the pieces

//game_board.dart
 // Calculate REAL Valid Moves (filters out moves that would leave your king in check)
List<List<int>> calculatedRealValidMoves(
  int row,
  int col,
  ChessPieces? pieces,
  bool checkSimulation,
) {
  List<List<int>> realValidMoves = [];


  // First, get all technically possible moves without any check-safety filtering
  List<List<int>> candidateMoves = calculatedRawValidMoves(row, col, pieces);


  // If check simulation is enabled, we need to verify each move is safe
  if (checkSimulation) {
    for (var move in candidateMoves) {
      int endRow = move[0];
      int endCol = move[1];


      // Simulate the move on a copy of the board and check if our king
      // would still be in check after it — only add the move if it's safe
      if (safeSimulatedMove(pieces!, row, col, endRow, endCol)) {
        realValidMoves.add(move);
      }
    }
  } else {
    // Skip check simulation (used internally to avoid infinite recursion
    // when safeSimulatedMove itself calls this function)
    realValidMoves = candidateMoves;
    }
  return realValidMoves;
}

And then we add this to temporarily apply a move on the board to determine whether it would leave the current player's king in check.

//game_board.dart
// Simulate a future move to check if it would leave our king in check
bool safeSimulatedMove(ChessPieces pieces, int startRow, int startCol, int endRow, int endCol) {

  // Save the piece currently at the destination so we can restore it later
  ChessPieces? originalDestinationPiece = board[endRow][endCol];


  // If the moving piece is the king, we need to track its new position
  // since isKingInCheck uses the stored king position to find it on the board
  List<int>? originalKingPosition;
  if (pieces.type == ChessPieceType.king) {
    originalKingPosition = pieces.isWhite ? whiteKingPosition : blackKingPosition;


    // Temporarily update the king's tracked position to the destination
    if (pieces.isWhite) {
      whiteKingPosition = [endRow, endCol];
    } else {
      blackKingPosition = [endRow, endCol];
    }
  }


  // Apply the move on the board
  board[endRow][endCol] = pieces;
  board[startRow][startCol] = null;


  // Check if our own king is under attack in this simulated board state
  bool kingInCheck = isKingInCheck(pieces.isWhite);


  // Undo the move — restore the board to its original state
  board[startRow][startCol] = pieces;
  board[endRow][endCol] = originalDestinationPiece;


  // If the king moved, restore its tracked position as well
  if (pieces.type == ChessPieceType.king) {
    if (pieces.isWhite) {
      whiteKingPosition = originalKingPosition!;
    } else {
      blackKingPosition = originalKingPosition!;
    }
  }


  // The move is safe only if the king is NOT in check after it
  return !kingInCheck;
}

Display of Killed Pieces

Now that we can move around and kill pieces, let’s display the killed pieces on opposite sides of the board. Let's head to the game_board and create a list of the pieces that have been taken by either side!

//game_board.dart
 // _GameBoardState


// Tracks white pieces that have been captured by the black player
List<ChessPieces> whitePiecesKilled = [];


// Tracks black pieces that have been captured by the white player
List<ChessPieces> blackPiecesKilled = [];

//game_board.dart
// void movePiece()
// If the destination square is occupied by an enemy piece, capture it
if (board[newRow][newCol] != null) {
  // Identify the piece being captured
  var killedPiece = board[newRow][newCol];


  // Add it to the appropriate captured pieces list based on its color
  if (killedPiece!.isWhite) {
    whitePiecesKilled.add(killedPiece); // white piece captured by black
  } else {
    blackPiecesKilled.add(killedPiece); // black piece captured by white
  }
}

Now we go down to the GridView.builder and wrap it with a column widget

//game_board.dart
 //..the rest of the code
       Column(
              children:[ GridView.builder(
                itemCount: 8 * 8,
                physics: const NeverScrollableScrollPhysics(),
                gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                  crossAxisCount: 8,
                ),
                itemBuilder: (context, index) {
                  //gets row and col position from square
                  int row = index ~/ 8;
                  int col = index % 8;

                  //checker if selected or not
             bool isSelected = selectedRow == row && selectedCol == col;

                  //CHECK if valid move
                  bool isValidmove = false;
                  for (var position in validMoves) {
                    //compare row and columns
                    if (position[0] == row && position[1] == col) {
                      isValidmove = true;
                    }
                  }
                  return SquaresGb(
                    isWhite: isWhite(index),
                    pieces: board[row][col],
                    isSelected: isSelected,
                    onTap: () => piecesSelected(row, col),
                    isValidmove: isValidmove,
                  );
                },
              ),
              ]
            ),

Now we need to create a space where we can display the killed pieces we can accomplish this with the Expanded widget

The white ones at the top

//game_board.dart
body: Column(
  children: [
    // Display all white pieces that have been captured by the black player
    Expanded(
      child: GridView.builder(
        itemCount: whitePiecesKilled.length, // number of captured white pieces
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 7, // display up to 7 pieces per row
        ),
        itemBuilder: (context, index) => DeadPieces()
      ),
    ),
)

The black ones at the bottom

//game_board.dart
//Black pieces taken
        Expanded(
  child: GridView.builder(
    itemCount: blackPiecesKilled.length, // number of captured black pieces
    gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
      crossAxisCount: 7, // display up to 7 pieces per row
    ),
    itemBuilder: (context, index) => DeadPieces()
  ),
),

Now we create another file in our components folder named “dead_pieces.dart”. The only things we need here are the image path and the boolean .isWhite to indicate if it is a white piece or not.

//dead_pieces.dart
import 'package:flutter/material.dart';




class DeadPieces extends StatelessWidget {
  final String imagePath;
  final bool isWhite;
  const DeadPieces({super.key,
  required this.imagePath,
  required this.isWhite});


  @override
  Widget build(BuildContext context) {
    return Image.asset(imagePath, color: isWhite ? Colors.grey : const Color.fromARGB(255, 109, 57, 57),
    );
  }
}

Now lets apply the DeadPieces again

White top:

//dead_pieces.dart
Expanded(
            child: GridView.builder(
              itemCount: WhitePiecesKilled.length,
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 7,
              ),
              itemBuilder: (context, index) => DeadPieces(
                imagePath: WhitePiecesKilled[index].imagePath,
                isWhite: true,//Added requirements
              ),
            ),
          ),

Black bottom:

//dead_pieces.dart
 //Black pieces taken
          Expanded(
            child: GridView.builder(
              itemCount: BlackPiecesKilled.length,
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 7,
              ),
              itemBuilder: (context, index) => DeadPieces(
                imagePath: BlackPiecesKilled[index].imagePath,
                isWhite: false,//Added requirements
              ),
            ),
          ),

Now that we have displayed the pieces that have been killed, let’s move on and create the turning based-system!

Here is what it looks like:

Turn-Based System

Now that we have displayed the pieces that have been killed, let’s move on and create the turning based-system!

First, we must declare on our game_board.dart a boolean term that indicates whose turn it is.

//game_board.dart
//a boolean to indicate turns
  bool isWhiteTurn = true;
//..the rest of your code

Then we go back to our void pieceSelected to update the logic, we added a feature that checks the piece that belongs to the current player!

//game_board.dart
void piecesSelected(int row, int col) {
    setState(() {
      //No piece has been selected yet, this is the first selection
      if (selectedPiece == null && board[row][col] != null) {
        if (board[row][col]!.isWhite == isWhiteTurn) {
          selectedPiece = board[row][col];
          selectedRow = row;
          selectedCol = col;
        }
      }

Then we add this at the bottom of the void function in order to flip turns

//game_board.dart
//Change turns
    isWhiteTurn = !isWhiteTurn;

We have successfully created the turn-based system!.

Our Chess game is officialy finished try it yourself and with friends!

Conclusion:

Congratulations!! You just made a chess game using Flutter. Turns out it wasn’t so simple after all! Despite it being ancient 2D chess, you actually just made a big leap towards game development. You just learnt how game logic and mobile development can come together. Starting with the Flutter setup, where we gradually built the board, pieces, and logic, you can see how a full application comes from small, manageable parts.

When you understood and followed along this article, you now know how a 2D grid can be coded and how Object Oriented Programming works since we used classes, objects, and constructors. The selection of pieces and movements also highlights how to use conditionals and state updates to control what is shown on the screen.

You can even improve upon your logic building by adding modern chess moves that weren’t originally in our design or maybe new mechanics to explore!.

Now that you know how to make a game on Flutter, maybe you can try making checkers! Who knows, maybe this article was read by a future successful game developer like you? So don’t let your sparks of curiosity fizzle out, keep on coding, and have fun learning!

References

A Beginner's Guide to Implementing One-Click Social Authentication with Node.js and HTML

Diane Mahusay — Sun, 22 Feb 2026 10:36:37 +0000

This article was co-authored with Jed Somera

Introduction:

The debate between a developer and a UI designer is like a fight between a heavy padlock and a sliding door. The developer wants a 10-step login process because they believe more hurdles make the house safer from hackers. To them, every extra password or code is a brick in a strong wall. On the other hand, the designer wants a "one-click" button to get the user inside as fast as possible without getting frustrated. The designer fears that if the door is too hard to open, the user will just give up and leave. It’s a constant battle to find a balance where the door is safe enough to keep bad people out, but easy enough that the owner doesn't hate using it.

So, we compiled a detailed beginner’s guide and tutorial on implementing one-click auth to satisfy both developers and UI designers.

What is Social Auth?

Social authentication lets users log into websites using their existing social media accounts instead of creating new credentials from scratch. Think about creating an account on social media (like Pinterest and YouTube) using Google because you are too lazy to create an account, or the process of creating one is too long. Tapping "Sign in with Google" is essentially telling the new app to use your existing Google identity. Google confirms who you are, and you're instantly logged in and ready to scroll.

The benefits extend beyond sign-up. Users no longer need to remember multiple passwords, reducing password fatigue, while simplifying account recovery and providing consistent experiences across devices.

Why use Social Auth?

Social authentication is a universal digital keycard, letting you access multiple sites without creating unique, vulnerable passwords for each. Instead of storing your password (your "key"), a website asks a trusted provider, like Google or Apple, to verify your identity. You log in privately with the provider, which then gives the website a temporary pass confirming your permission to enter. Instead of building complex security systems, developers implement an OAuth 2.0 flow. You log in privately with the provider, which then gives the website a temporary pass confirming your permission to enter.

The OAuth 2.0 flow is the modern industry standard for secure inter-website communication. It works by giving a requesting website a temporary "digital keycard" instead of your master password. This OAuth service ensures the website only accesses approved data (like your profile or email) and never sees your actual password.

What are JWTs?

Think of JWT (JSON Web Token) like a passport. Instead of the immigration officer checking a big list of names (database) at who’s valid to fly every time you want to go abroad, they just look at your passport. If the passport is verified (the signature), you are granted access to fly.

How Does It Work?

When you want to log in, there are two important things to keep in mind: Authentication and Authorization. Authentication is the process of verifying who you are using your credentials. Authorization is checking what you’re allowed to do using a token. This is where JWT shines. A JWT consists of three parts:

Header: This contains the metadata about the type of token and the algorithm used to make the token.
Payload: This contains the data itself, including the User ID, name, expiration date, etc. It is important to note that JWTs are encoded/hashed, not encrypted. Like a passport, anyone can read them, so never put sensitive data like passwords inside.
Signature: This is the “security seal”. The server uses a secret key to sign the token. This mechanism ensures that the payload can be trusted. The server takes a secret value, uses the header and payload, hash it, and combines it with the two previous parts.

What does this achieve?

The Server Does Not Have to “Remember” You (Stateless) Traditionally, a dedicated server called sessions had to keep a giant list of every person logged in. If your system has a million people logged in, the server would not handle it efficiently and lead to slow response times. With JWT, the server doesn’t have to store anything. It just looks at your “passport”, verifies the passport, and grants you access. This makes the app faster and easier to scale.
It is Impossible to Fake Using JWT, the token is locked with a “Secret Key” that only the server knows. If an attacker changes even one letter in the token,
It is Lightning Fast Traditionally, a database would be needed to authorize a user. Using hashing to verify a signature is faster. Since the check happens in milliseconds, the user doesn’t see long loading screens. Everything is snappy and smooth. Additionally, due to its “Self-Contained” nature, it doesn’t just say “I am user #1”; It includes the user’s ID, Roles, Authorization Level, and expiration date directly in its form. Because of this, the system doesn’t need to cross-check with the server every time it’s used.
Eliminates the “It works on my device.” Whether you are on a phone, a laptop, or a tablet, the “passport” works the same way. It does not rely on old-school browser strategies like cookies. It also works identically whether your backend is written in Node.js or Python, and whether your client is a web browser, a mobile app, or an IoT device.

Tech Stack Overview

To build this one-click experience without taking shortcuts, we are using a lightweight and transparent stack that lets us control every part of the it.

Tech	Usage
Node.js	Serves as the backend runtime for handling server-side logic and API requests.
Express.js	Manages web routing and creates the callback endpoints for the authentication flow.
Passport.js	Middleware for Node.js that simplifies authentication by providing a standardized "Strategy" system to handle complex login processes.
HTML/CSS	Defines the structure and styling of the login interface to meet UI/UX standards.
Dotenv	Secures the application by storing sensitive API keys and secrets in environment variables.
OAuth 2.0	The standard protocol used to securely handshake with providers like Google or GitHub.

HTML (HyperText Markup Language) is a fundamental "skeleton" of any website. Running directly within a user's web browser (such as Chrome, Safari, or Firefox), this code instructs the browser precisely what elements to display. Similar to a restaurant menu, HTML clearly defines the content's structure, signaling items like "This is a heading," "This is a paragraph," and "This is a button."

While Node.js is the server-side "engine" that powers your application, distinct from the HTML the user sees in their browser. Think of Node.js as the "Chef" working behind the scenes. This runtime environment enables developers to use JavaScript for crucial server-side operations, such as interacting with databases and communicating with external APIs, performing all the heavy lifting.

If Node.js is the “chef” itself, Express.js is the manager who makes sure everything runs smoothly. Without a manager, customers wouldn't know where to sit or how to order. It is in charge of the Routing and Middleware. When a user types http://localhost:3000/auth/google, Express is the host that directs people to the right "rooms" in your code. Additionally, it uses “Middleware” to pass data through different steps–like checking your .env secrets or verifying a token–before finishing the request,t just like “garnishing” a food before it reaches the customer.

Lastly, Passport.js is your professional “Identity Expert”. Instead of you manually handling the back-and-forth paperwork with Google, Passport takes over and manages the entire security handshake for you. It uses specialized "Strategies" to recognize different types of logins, acting like a bouncer who is specifically trained to verify Google IDs. Through this, you can keep your code clean and focus on building your app while a specialist guards the front door.

Pre-requisite

For this guide, we’ll be using Windows (Command Prompt/PowerShell).

Download Node.js. Go to (https://nodejs.org/en/download), select your device, and click Download.
Run the Installation. Open the downloaded file and follow the installation wizard. For most users, the default settings are perfect.
Verify the Installation. Once the installer finishes, you need to make sure your computer sees Node.js. Put this in your Command Prompt:

node -v
npm -v

OAuth Service

The OAuth service acts as a digital middleman, helping two different websites communicate securely. Instead of you giving a new website your actual Google password, the OAuth service steps in to handle a trusted introduction. When you click "Sign in with Google," you are temporarily leaving the new website to sign in directly to Google’s secure servers. Google confirms who you are and asks if you're okay with sharing basic details, like your name or email, with that specific site.

The Client ID and Client Secret act as a digital ID for your website. The Client ID is the public username; it tells Google which app is requesting a "trusted introduction," allowing Google to display the correct name and logo on the sign-in screen. Since it's public, the Client ID can safely be included in your code or "Sign in with Google" button link.

The Client Secret is your website's private password, known only to Google and your server. Your server uses this secret to prove its identity to Google after a user grants login permission. You must keep it hidden and never share it or post it online. If compromised, a third party could impersonate your site and steal user "digital passes."

Here are the steps to get your Client ID and Client Secret:

Choose an OAuth Provider There are several kinds of providers you can use. You can search platforms like Meta, Microsoft, or even GitHub to find what interests you.

We’ll be using Google Cloud Console

Create your Client ID and Client Secret

Step 1: Create a New Project
On the upper left corner, click “Select a project’

A pop-up will appear with your previous projects, BUT click “New project.”

After clicking the New Project, it will direct you to this. Under Name, give your project an appropriate name. Then Click “Create.”

Step 2: Create your credentials

Once the project is created, select it, and a Dashboard will be shown. In the center, API’s is there, click the “Go to APIs overview.”

Find the credentials on the left side and select them for you to create your Client ID and Client Secret.

In the upper corner, you’ll see “Create credentials”, then choose
“OAuth client ID.”

If you see an alert to configure consent screen, click it. It will direct you to the Branding tab, then select “Get Started”. It will lead you to this tab.

Name the app that you’ll be going to do (in our case is Social-Auth). Fill up all the necessary info, then click “Create.”

Step 3: Create your own OAuth Client
After you click Create, you will now see the button “Create OAuth Client”. Click it, and set the application type to “Web Application”.

Crucial Step: add (http://localhost:3000/auth/google/callback) under the Authorized redirect URls. (Reminder: This is not what everyone uses, but since we are following through the tutorial, that’s the URL/port we are going to use)

A pop-up with the Client ID and Client Secret will be shown. Download the JSON file for easy viewing of the information.

Once you click DONE, the new Client ID will be added to the list. You can edit/delete the name or add URLs going forward.

Why does a callback matter?

As you noticed, in the Authorized redirected URLs, we added a localhost callback link. That’s because when the user clicks “Sign in with Google”, it will redirect the user to Google’s secure login page. After the user enters their credentials and clicks "Allow," Google needs to know exactly where to send that user (and their secret authorization code) back to.

So, without adding the callback to the Authorized redirected URLs, the social auth will not happen.

Building a simple “Sign in with Google” Using HTML

In an OAuth 2.0 flow, the HTML button isn't just a UI element; it is a trigger. When a user clicks it, they are essentially saying, "I trust this application to talk to Google on my behalf." Without this button, there is no way for the user to initiate the secure redirection to the provider.

Create an HTML file. In your Visual Studio Code (VS Code), first create a folder. You will store all your files there. Then, create a new file, name it index.html

Craft the button. You can now code your Sign in with Google button. If you want to use the exact HTML file from this tutorial, you can access it through this link: (https://github.com/takezo06/social-auth.git)

Building the backend of a simple “Sign in with Google.”

Since the frontend is ready for testing, let us make the logic that works behind the UI/UX.

Folder Structure:

social-auth/
├── public/             <-- Frontend (UI/UX)
│   └── index.html      
├── .env                <-- Security (Secrets)
├── server.js           <-- Backend (Logic & JWT)
├── .gitignore          <-- Git Safety
└── package.json        <-- Dependencies

Step 1: Environment Setup

Create your Project folder:

Windows: Right-click on your Desktop > New > Folder. Name it social-auth.
Mac/Linux: Right-click on your Desktop > New Folder (or use the shortcut Shift + Cmd + N). Name it social-auth.\

Open in VS Code

Open Visual Studio Code.
Go to File > Open Folder (or Open on Mac) and select your social-auth folder.

Open the VS Code Terminal

Go to the top menu and select Terminal > New Terminal. Tip: You can also use the shortcut Ctrl + shift + ~(backtick) on Windows/Linux or Cmd + ` on Mac.
You should see a cursor blinking at the bottom of your screen. This is where we will type our commands.

Initialize the project

Type the following in the VS Code terminal and hit Enter:

npm init -y

This creates a package.json file, which is essentially a "shopping list" of all the tools your project needs.

Install dependencies via VSCode Terminal

npm install express passport passport-google-oauth20 jsonwebtoken dotenv

Wait for the progress bar to finish. This downloads the code for the security and networking features we need.

Create the necessary files

Inside VS Code, click the New File icon (next to the folder name in the sidebar) and create:
server.js: Your backend "brain."
.env: Your secret vault (be careful: the filename starts with a dot!).
A folder named public/: Right-click the sidebar to create a folder. Inside it, create index.html and paste your partner's design code.

Server.js

The backend is split into three main logic blocks:

Authentication (Google Passport): We use the GoogleStrategy to let Google verify the user. We don't need to handle passwords ourselves—Google does the heavy lifting, which is safer for the user and easier for us.
Networking (The Callback): The callbackURL acts as a secure "Return Address." Google will only send the user back to this specific URL, preventing "Man-in-the-middle" attacks.
Authorization (JWT Generation): Once Google confirms the identity, we use jwt.sign() to issue a Stateless JWT.
The Signature: We combine the user's data with our JWT_SECRET to create a hash. If a user tries to change their ID in the token, the math will fail, and the "Bouncer" (server) will reject them.

Phase 2: Connecting to the UI (index.html)

The Button: In public/index.html, ensure your login button link looks like this:

<a href="/auth/google" class="btn-google">Sign in with Google</a>

The Result: When the process finishes, the backend will display the JWT string on the screen, proving the handshake was successful.

Phase 3: Testing

Start the Server: In your VS Code Terminal, type:

node server.js

Visit Your Site: Open your browser and go to http://localhost:3000.
Log In: Click the "Sign in with Google" button. If everything is correct, Google will verify you, and you'll see your JWT string!

Conclusion: Why This Matters

By completing this tutorial, you’ve built more than just a login button—you’ve implemented a modern architecture that balances security, scalability, and user experience.

The Purpose of Google Social-Auth

In this project, Google acts as our Identity Provider. Using an established giant like Google is a massive win for cybersecurity. It means we don't have to worry about storing and hashing passwords ourselves—a task that, if done wrong, could lead to massive data breaches. We "outsource" the most dangerous part of security to experts, ensuring our users' data is protected by world-class infrastructure.

The Power of the JWT

Once Google confirms who the user is, our backend issues a JSON Web Token (JWT). This is the heart of Stateless Authorization. Unlike traditional systems that force the server to remember every single logged-in user (which slows down the site as it grows), the JWT allows the server to verify a user's identity instantly using just math. It is lightweight, secure, and built for the modern web.

The Vital Role of UI/UX

Security is useless if the interface is too confusing to use. The frontend design we integrated isn't just "eye candy"; it is a tool for Trust. By using recognizable branding and a smooth one-click flow, we reduce "User Friction." A high-quality UI/UX ensures that the complex cybersecurity handshake happening in the background remains invisible, providing a seamless experience that makes the user feel both safe and empowered.

Congratulations! You’ve just built a secure, modern social-auth system using OAuth and JWT.

References:

Applying MVC Architecture in Python: Building an Automated Certificate Generator

Aiyesha Threa Caña — Sun, 22 Feb 2026 10:07:37 +0000

Co-authored with Liarrah Lambayao (@ldlambayao)

Have you ever tried to organize your files by placing all of them in a single folder?🤔

Oh, everything quickly became messy and harder to manage. The same way works with software too. When all of the code is placed in a single system, it becomes harder for the developer to manage, maintain, edit and fix the code. Even the possibility of scaling and improving it would become more difficult. This is where MVC Architecture comes in, a clean and structured way to keep everything organized and manageable.

MVC Architecture is a software design that is frequently used by developers in the frontend and backend.

What is MVC Architecture?

MVC stands for Model-View-Controller. It concerns making things easier to manage, maintain, and make the code clear and organized. Projects without MVC are like putting all of your eggs in a single basket; if a single part of the code malfunctions, the whole system is at risk.

Applying MVC would make things easier as it separates the system into three different components/roles: Model, View, and Controller.

The Model holds and manages the data, and in this case, the recipient’s information and certificate data. If the data changes, the model will tell the view about it.
View is what the user sees in the application. It displays the data from the Model and updates when the underlying data changes.
The Controller is what ties everything together. It processes user input and connects the Model and View components. It receives the user input and decides what to do with it.

Project Overview

To demonstrate how MVC is applied in practice, this article walks through the development of a simple automated certificate generator in Python. As certificates are an essential part of recognizing accomplishments and creating them manually can be tedious, this project reads information such as the date, name, etc., from a .txt file and generates certificates accordingly.

Although automating certificates is a common beginner-friendly project that focuses on getting the task done with Python libraries, this article takes a different approach by highlighting how the Model-View-Controller (MVC) architecture can be applied to organize code and build a cleaner, more modular solution.

This article takes an example from a pre-existing repository in GitHub and refactors it into a Model–View–Controller structure. By restructuring the original implementation, this project demonstrates how the separation of concerns can improve clarity, modularity, and scalability.

🔗github repository by gunarakulangunaretnam

Current Structure of Repository

certificate generator/
|
|----generated-certificates/    # output directory for generated certificate
|
|----run.py                     # python script
|
|----certificate-template.jpg   # certificate template
|
|----name-data.txt/.xlsx        # file that contains recipients

Python Script

import os
import cv2

list_of_names = []


def delete_old_data():
   for i in os.listdir("generated-certificates/"):
      os.remove("generated-certificates/{}".format(i))


def cleanup_data():
   with open('name-data.txt') as f:
      for line in f:
          list_of_names.append(line.strip())


def generate_certificates():

   for index, name in enumerate(list_of_names):
      certificate_template_image = cv2.imread("certificate-template.jpg")

      cv2.putText(certificate_template_image, 
name.strip(), (815,1500), cv2.FONT_HERSHEY_SIMPLEX, 
5, (0, 0, 250), 5, cv2.LINE_AA)

      cv2.imwrite("generated-certificates/{}.jpg".format(name.strip()), certificate_template_image)

      print("Processing {} / {}".format(index + 1,len(list_of_names)))

def main():
   delete_old_data()
   cleanup_data()
   generate_certificates()



if __name__ == '__main__':
   main()

As can be seen, the Python script works, but everything is placed under a single script, from reading the information to generating certificates, and controlling the program flow, all at once. While it works perfectly, it can be difficult to manage as the program grows; the same goes for any other project.

For example, if we wish to modify the certificate layout, adjust the position of text, or change the data source from a text file to an Excel file, among other things, to do these, we would need to edit the same script. This increases the errors and makes the code longer and more complex than it should be, making it harder to debug, test, and maintain. This is where MVC comes in handy. By separating the data handling, the presentation, and lastly the program logic, the code becomes organized and ready for more scalable implementations.

Thus, this is how we can implement MVC using a new project structure

Project Structure using MVC

certificate generator /
|
|--models/
|   |--model.py
|
|--views/
|   |--view.py
|
|--controllers/
|   |--controller.py
|
|--run.py
|
|--name-data.txt
|
|--certificate-template.jpg
|
|--generated-certificates/

Next, we can now define the model, implement the view, and create the controller before putting it all together.

a. Define the Model

import cv2
import os

# receives list of names from controller and is responsible for rendering the certificates
def generate_certificates(list_of_names):
    for index, name in enumerate(list_of_names):
        certificate_template_image = cv2.imread("certificate-template.jpg")

        cv2.putText(
            certificate_template_image,
            name,
            (688,707), # customize position to move the text to your liking
            cv2.FONT_HERSHEY_SIMPLEX,# customize font with another OpenCV font
            5,# customize font size 
            (0, 0, 0), # customize color
            5, # customize thickness
            cv2.LINE_AA
        )

        cv2.imwrite(
            os.path.join("generated-certificates", f"{name}.jpg"),
            certificate_template_image
        )

        print(f"Processing {index + 1} / {len(list_of_names)}")

In this version, list_of_names is now used as a local variable, which enforces proper data flow.

b. Implement the View

import cv2
import os

# receives list of names from controller and is responsible for rendering the certificates
def generate_certificates(list_of_names):
    for index, name in enumerate(list_of_names):
        certificate_template_image = cv2.imread("certificate-template.jpg")

        cv2.putText(
            certificate_template_image,
            name,
            (688,707), # customize position to move the text to your liking
            cv2.FONT_HERSHEY_SIMPLEX,# customize font with another OpenCV font
            5,# customize font size 
            (0, 0, 0), # customize color
            5, # customize thickness
            cv2.LINE_AA
        )

        cv2.imwrite(
            os.path.join("generated-certificates", f"{name}.jpg"),
            certificate_template_image
        )

        print(f"Processing {index + 1} / {len(list_of_names)}")

Similar to model.py, we no longer depend on the global variable list_of_names. Instead, the function now receives data explicitly and no longer depends on external state.

You may also customize the input text to your liking from its position, font, font size, font color, and thickness. Feel free to explore and tweak as much as you can!

How to identify the accurate position of your text

Open your certificate template with MS Paint
Point your cursor to the space you wish to fill with your text.
Follow the coordinates found at the lower left.

c. Create the Controller

from models.model import delete_old_data, cleanup_data
from views.view import generate_certificates

def run_application():
    delete_old_data()
    list_of_names = cleanup_data()
    generate_certificates(list_of_names)

Similar to the new versions of model.py and view.py, there is no global variable used anymore, and the data is passed explicitly. Making it a better design.

d. Putting it all together

from controllers.controller import run_application  

if __name__ == "__main__":
    run_application()

Acts as the entry point of the program.

An alternative is to use .xlsx files, which might be the most practical and efficient way, especially when handling a large number of recipients. This becomes particularly useful in events where information is often stored in spreadsheets.

To do this, we only have to modify model.py, a perfect scenario of why the separation of concerns is beneficial and how a well-structured architecture makes applications easier to maintain, extend, and eventually adapt to new changes.

Modifying your data source

Install Pandas (if not yet installed)
```
py -m pip install pandas openpyxl
```
Modify your model.py, assuming your Excel file looks like this

name date

person1 date

person2 date

... ...

name-data.xlsx

name	date
person1	date
person2	date
...	...

Update models/model.py to this:

import os
import pandas as pd

def delete_old_data():
    for i in os.listdir("generated-certificates/"):
        os.remove(os.path.join("generated-certificates/", i))

def cleanup_data():
    # Read Excel file
    df = pd.read_excel("name-data.xlsx")

    # Convert each row into a dictionary
    records = df.to_dict(orient="records")

    return records

What changed?
✅ We added pandas
✅ We modified the cleanup_data function to read .xlsx, convert into a list of dictionaries

Modify view.py as needed

import cv2
import os

def generate_certificates(records):
    for index, record in enumerate(records): # used records (dictionary)
        certificate_template_image = cv2.imread("certificate-template.jpg")

    # dictionary key access
        name = str(record["name"])
        date = str(record["date"])

    # name
        cv2.putText(
            certificate_template_image,
            name,
            (688, 707),
            cv2.FONT_HERSHEY_SCRIPT_COMPLEX,
            3,
            (0, 0, 0),
            3,
            cv2.LINE_AA
        )

        # date
        cv2.putText(
            certificate_template_image,
            date,
            (407, 1104),
            cv2.FONT_HERSHEY_SIMPLEX,
            1,
            (0, 0, 0),
            3,
            cv2.LINE_AA
        )

        cv2.imwrite(
            os.path.join("generated-certificates", f"{name}.jpg"),
            certificate_template_image
        )

        print(f"Processing {index + 1} / {len(records)}")

What changed?
✅ Used records instead of list_of_names
✅ Explicit string conversion is necessary for the use of OpenCV
✅ Accommodated additional information so that the view renders multiple pieces of information

Thanks to the MVC-inspired structure, switching from a .txt file to an .xlsx file becomes less of a hassle with the help of the model that keeps data isolated from the rest, thus, preserving the rest of your application’s logic and layout.

Testing

Testing with txt files

Simply run the program in your terminal with

python run.py 
or
py run.py

And let’s say you have 10 recipients of your certificate.

Check the generated-certificates folder, and it should contain all of the certificates of the recipients.

Example:

Testing with xlsx file

Follow the same steps, and it should produce the same set of certificates, but this time, with date included.

Example:

How MVC Made the Project Clear

Using MVC made the project much easier to understand, manage, and maintain. By separating the system into three parts: one handles the data such as the recipient’s name, date, and event details, another part controls the certificate layout and design—how it looks on the screen, and another part manages the user’s actions and ties everything together. Because of the clear separation of roles between them, the system considerably becomes easier to maintain and manage.

While this is a clean, beginner-friendly, MVC-inspired modular architecture, its implementation does not represent a full framework-level MVC with reactive views or even user-driven controllers. Yet, this project applies the very core principle of MVC, which is the separation of concerns. By dividing its data handling, presentation logic, and program control into separate modules, the project becomes more modular, maintainable, and scalable.

Furthermore, debugging became simpler as separation of components means the errors are confined to specific components rather than affecting the entire system. That’s why MVC makes it easier to scale and improve projects in the future.

Hmm, what could possibly go wrong if you put all of your eggs in one basket? 🤔

Not applying MVC would mean that all of the components are in one place; code for interface, logic, and data handling is mixed together. This would signify that in the case of an error, the entire system could be affected, making debugging more difficult. Additionally, making changes in one part of the code would be difficult, as doing so might unintentionally break other parts. This makes the system harder to scale or expand. Without MVC, every part of the code might need adjustments. That would be very tiring…😔

Conclusion

By applying MVC in building an automated certificate generator using python, it ensures that the project will be maintainable, reusable, and easy to scale and expand in the future.

Remember not to put all of your eggs in one basket! 🥚✨

It’s a wrap!🎉 Now you know that understanding MVC would not only help developers structure projects cleanly, but also lay the foundation for advanced design patterns such as MVVM and MVP, which are all principles adopted in clean architecture to create maintainable and scalable software.

So, don’t stop here. Challenge yourself to go beyond the basics—feel free to customize it further, you can enhance it by adding GUI or even deploying it as a web application. Keep innovating, keep refining, and keep learning! 🌟

Happy building! 🚀

References
https://www.codecademy.com/article/mvc-architecture-model-view-controller

Forem: UP Mindanao SPARCS

Software Development 101: A Crash Course in Version Control with Git and Github

Table of Contents

Section 1: Introduction to Version Control

What Is Version Control?

What Are the Advantages of Implementing Version Control?

What Is a Version Control System (VCS)?

What Is a Distributed Version Control System (DVCS)?

Section 2: Introduction to Git and GitHub

What Is Git?

Git Components

What Is GitHub?

GitHub Concepts

What Is the Difference Between Git and GitHub?

Section 3: Setting Up Git and GitHub

Setting Up Git

Step 1: Download Git

Step 2: Open Git Bash (or Terminal)

Step 3: Configure Your Identity

Step 4: Set Default Editor (Optional but Recommended)

Step 5: Set main as Default Branch Name

Step 6: Verify Your Global Configuration

Creating a Git Repository

Step 1: Create or Choose a Project Folder

Step 2: Navigate to Your Project Folder

Step 3: Initialize a Git Repository

Step 4: Create a Python File (app.py)

Step 5: Create a .gitignore File

Step 6: Create a .env File (Simulating Sensitive Data)

Step 7: Configure .gitignore

Step 8: Stage Your Files

Step 9: Create Your First Commit

Step 10: Verify Your Commit History

Setting Up GitHub

Step 1: Create a GitHub Account

Step 2: Setting Up an SSH Key (Optional but Recommended)

Creating a GitHub Repository

Step 1: Create a New Repository

Step 2: Enter Repository Details

Step 3: Click Create Repository

Remote Repository Configuration

Step 1: Copy Repository URL

Step 2: Link Local Repository to Remote

Step 3: Rename Branch to main

Step 4: Push to GitHub

Step 5: Verify Upload

Section 4: Utilizing Git and GitHub

Git Commands and More Concepts

Other Useful Commands

Copying a Repository

1. Open the demo repository in your browser

2. Click the Fork button at the top right of the page

3. In the dialog that appears, click Create Fork

4. Navigate to your forked repository in your GitHub account

5. Click the Code button and copy the HTTPS link

6. On your computer, create another folder named Demo

7. Open Git Bash (or your terminal) and navigate to the folder

8. Clone the repository using the link you copied in step 5

9. Navigate into the cloned repository folder

10. Open the repository in your Text Editor (VS Code optional but recommended)

Managing Changes

1. Pull the cloned repository on your local Git repository

2. Create a Second Feature Branch on your local Git repository

3. Modify app.py from feature-analytics branch

4. Stage, commit, and push the changes in feature-analytics branch

5. Merge Two Feature Branches towards the main branch via Pull Request

6. Go to your GitHub repository and open the Pull requests tab

7. Click New pull request

8. Set Base to main and Compare to feature-analytics

9. Click Create pull request

10. Click Merge pull request, then Confirm merge

11. Repeat the process but merge feature-logging into main

12. Click Resolve conflicts

13. Resolve the Conflict in GitHub Editor

14. Click Mark as resolved, then click Commit merge

15. Click Merge pull request, then Confirm merge

Synchronizing Your Code

1. Switch to the main branch

2. Pull the latest changes from GitHub

3. Delete the merged branches locally (Optional but recommended)

Step 5: Set `main` as Default Branch Name

Step 4: Create a Python File (`app.py`)

Step 5: Create a `.gitignore` File

Step 6: Create a `.env` File (Simulating Sensitive Data)

Step 7: Configure `.gitignore`

Step 3: Rename Branch to `main`

3. Modify `app.py` from feature-analytics branch

4. Stage, commit, and push the changes in `feature-analytics` branch