You can deploy the complete MERN application on a Digital Ocean VPS using the same workflow, even if you choose MySQL instead of MongoDB. The only part that changes is the database configuration—everything else in the deployment process remains identical.

I will skip the server creation part in this article, you can use any droplet to follow me along.

First Login to your digital ocean server

ssh root@<server-ip> -i <private-key>

Initial Server Setup with Ubuntu 20.04

Before we jump into the actual deployment, we need to handle a few essential setup tasks on the server. The first step is creating a user account with limited privileges so we don’t rely on the root user for everyday operations. This is an important security practice because it reduces the risk of accidental system‑wide changes or unauthorized access.

Creating a user account with limited privileges

Before we continue with the deployment, let’s create a new user account that we’ll use for day‑to‑day server operations. This is safer than using the root account directly.

adduser <user-name>

This command creates a regular user with limited privileges, which is the recommended way to manage a Linux server

Granting administrative privileges (without becoming full root)

Even though this user is non‑root, we still need the ability to install packages, manage services, and perform system‑level tasks during setup. For that, we can add the user to the sudo group.

This does not give full root privileges permanently. Instead, it allows the user to run specific commands as root using sudo, which is safer because every privileged action requires confirmation

usermod -aG sudo <user-name>

Now the new user can perform administrative tasks when needed, but still operates as a normal user by default

Copying your SSH key to the new user

To log in as this new user using SSH, we need to make sure they have the same SSH key we used earlier. The easiest way is to copy your existing .ssh directory to the new user’s home folder and set the correct ownership.

rsync --archive --chown=asela:asela ~/.ssh /home/asela

This ensures:

• The new user can log in using your existing SSH key.

• File permissions remain correct.

• You don’t need to generate a new key unless you prefer to.

If you want to use a separate SSH key for this user, you can generate a new one and place it in /home//.ssh/authorized_keys instead.

Next, we’ll enable SSH access through UFW (Uncomplicated Firewall). If you’re new to UFW, think of it as a simple tool that controls which network traffic is allowed into your server. By default, most servers keep all ports closed for safety, and UFW helps you explicitly open only the ones you need. For example, SSH uses port 22, so enabling SSH in UFW ensures you can connect to your server remotely without exposing unnecessary services to the internet.

Checking available UFW application profiles

UFW comes with predefined profiles for common services. You can list them with:

ufw app list

This shows entries like OpenSSH, Nginx Full, Nginx HTTP, etc. Each profile contains the ports that service needs.

Allowing SSH connections

If OpenSSH appears in the list, you can allow it directly:

ufw allow OpenSSH

This opens port 22 so you can continue connecting to your server via SSH. If this rule isn’t added, enabling the firewall would block SSH and disconnect you.

Enabling UFW and verifying status

Once SSH is allowed, you can safely enable the firewall:

ufw enable

After enabling, check the status to confirm your rules are active:

ufw status

This should show the services that enabled by the ufw.

Later in the article, we’ll configure UFW more precisely for your application—opening only the required ports and keeping everything else locked down. And if all of this sounds unfamiliar, don’t worry. I’ll walk you through UFW step by step, explain what each rule does, and show you how to keep your server secure without needing deep networking knowledge.

Alright, Now let's switch the user and start doing the server setup

Switching to the new user

Now that the user account is created and SSH access is configured, switch into that user so all remaining setup happens under a safer, non‑root environment.

su - asela

The - ensures you load the user’s full environment, including their home directory and shell configuration

Updating package lists

Before installing anything, refresh your package index so the server knows about the latest versions available in the repositories

sudo apt-get update

This doesn’t install updates yet—it simply updates the list of available packages. It’s a good habit to run this before any installation.

Checking server status with htop

To get a quick overview of your server’s performance—CPU usage, memory usage, running processes—you can use .

htop

htop gives you a live, interactive dashboard that’s much easier to read than the traditional top command. It’s especially useful right after deployment to confirm your server is running smoothly and not overloaded.

Installing Node.js

Node.js isn’t included in Ubuntu’s default repositories in its latest LTS form, so the recommended approach is to use the official NodeSource repository. This ensures you always get the correct and up‑to‑date version.

Start by moving to your home directory:

cd ~

Then download and run the NodeSource setup script for Node.js 20.x (the current LTS release):

curl -sL https://deb.nodesource.com/setup_20.x | sudo -E bash

This script adds the NodeSource PPA and updates your package list automatically. Once that’s done, install Node.js:

Install the nodejs to the server.

sudo apt-get install -y nodejs

Installing build tools for npm package

Some npm packages need to compile native code during installation. To support that, install the build-essential package, which includes GCC, G++, and make.

sudo apt install build-essential

This ensures your environment can handle any package that requires compilation.

Cloning the project repository

With Node.js installed and the server ready, the next step is to bring our project code onto the machine. Use git clone to download your repository:

git clone https://github.com/zaselalk/MERN-Workshop---7th-Batch.git

This creates a new folder containing both the backend and frontend code for your MERN application.

Installing backend dependencies

Before running anything, move into the backend directory and install the required Node packages.

cd client
npm install

At this point, you may notice errors—especially if your backend expects a database connection. That’s completely normal because the database isn’t installed yet. Let’s fix that next.

Installing MySQL Server

Your backend needs a database to store and retrieve data. Install MySQL Server using:

sudo apt install mysql-server

Once installed, run the security script to configure your MySQL instance

sudo mysql_secure_installation

This helps you set a root password, remove anonymous users, disable remote root login, and apply other recommended security settings

Creating the project database

CREATE DATABASE mern_project;

Checking existing MySQL users

Now we want to know the username and password to access the mysql instance via the application.

let's see which users currently exist in your MySQL instance, for that run,

SELECT User, Host FROM mysql.user;

By running above command you can see that there are number of system users available, Let's create new user to use application database, then we can only give the permission for our database.

Creating a dedicated MySQL user

update the user name with your own name and also make sure to add secure password.

CREATE USER 'asela'@'localhost' IDENTIFIED WITH mysql_native_password BY 'password';

Granting database privileges

Once the user exists, you need to give them permission to work with your project database:

GRANT ALL ON mern_project.* TO 'asela'@'localhost';

This grants full access (SELECT, INSERT, UPDATE, DELETE, etc.) to all tables inside the database, but only for this database. The user cannot touch other databases on the server.

Applying the changes

MySQL caches privilege information, so you must reload it:

FLUSH PRIVILEGES;

This ensures the new permissions take effect immediately

Now let's try to up the server by providing the database information. Once the server is on the vps, we can test that using the curl command.

Now let's available our application for outside users as well. for that we need a web server. let's install the nginx.

Installing Nginx as the web server

Nginx will act as the front-facing web server for your application. Install it using:

sudo apt install nginx

After installation, confirm that the service is running, You should see it listed as active (running).

systemctl status nginx

Enabling UFW and allowing necessary services

Before enabling the firewall, make sure SSH is allowed so you don’t lock yourself out. Since you already enabled SSH earlier, now you can safely turn on UFW:

sudo ufw enable

To see the available application profiles

sudo ufw app list

You’ll typically see profiles like:

• Nginx Full

• Nginx HTTP

• Nginx HTTPS

• OpenSSH

Since we plan to serve application through Nginx, let's allow the full profile:

sudo ufw allow 'Nginx Full'

Then verify the firewall status by sudo ufw status , confirms that Nginx and SSH are allowed while all other ports remain protected

Opening a custom port (for testing only)

Let's do experiment with temporarily expose our Node.js server directly, you can open port 3000 by using following command.

sudo ufw allow 3000/tcp

This allows external access to your Node.js app running on port 3000.

Why exposing port 3000 directly is not ideal

Direct exposure is fine for development or internal tools, but not great for production because:

• No HTTPS

• No caching or rate limiting

• No protection from malformed requests

• No domain support

That’s why most production setups use Nginx as a reverse proxy. Let's remove that rule and enable the reverse proxy,

Remove the rule

Find the specific number of the rule by running the first command and then delete that rule using the second command.

sudo ufw status numbered
sudo ufw delete <number>

Config the Nginx Reverse Proxy

Navigate to the Nginx sites‑available directory and create a new configuration file for our app:

sudo nano /etc/nginx/sites-available/mern

Add the following server block:

server {
    listen 80;
    server_name [ip or domain];

    location / {
        proxy_pass http://localhost:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}

This tells Nginx to listen on port 80 (HTTP) and forward all incoming requests to your Node.js app running on localhost:3000. The headers ensure WebSocket support and proper request forwarding.

Enabling the configuration

Nginx only loads configurations that exist inside sites‑enabled. Create a symbolic link from your new config file:

sudo ln -s /etc/nginx/sites-available/myapi /etc/nginx/sites-enabled/

This activates the configuration without duplicating files

Testing and reloading Nginx

Before applying changes, test the configuration for syntax errors and if there is no any error run the reload command to reload the configurations.

sudo nginx -t
sudo systemctl reload nginx

If that process success, the server should be working properly. Then we can also map the domain and setup SSL, for that we need to map the domain to the api

Setup the DNS record to the VPS public IP and update the server block to that newly pointed domain. after we can also install the SSL for the site.

sudo apt install certbot python3-certbot-nginx

make sure that server name on the block has set properly. the run the following command to setup the SSL.

 sudo certbot --nginx -d mern.zasela.site

Let's build the react app.

Before building the app make sure to update the backend URL with new URL.

npm run build

sudo cp -r dist/ /var/www/mern-client/

We also want to create a server block for the client as well. make sure to update the server name.

server {
    listen 80;
    server_name [server_ip];

    root /var/www/mern-client;
    index index.html;

    location / {
        try_files $uri /index.html;
    }
}

After enable the config as we did in the API

sudo ln -s /etc/nginx/sites-available/mern-client /etc/nginx/mern-client

reload the server to see the site.

sudo systemctl reload nginx

You might notice that we need to stop the server because it's running on the terminal, we can run that in background using pm2, with more capabilities.

Installing PM2

Next let’s install PM2, a process manager for Node.js applications. PM2 makes it possible to daemonize applications so that they will run in the background as a service.

sudo npm install pm2@latest -g

Now you can start Application by pm2 start hello.js

I usually use Docker when I want to maintain the same runtime for both production and development environments.

One day, I came across a tool called “DevContainer.” I had first learned about it a few months earlier and wondered why it was necessary for maintaining a consistent environment across devices when we already have Docker for that purpose.

And so, on that day, I thought there might be something to this, but it wasn’t useful for me at the time. I decided to remember the name for the day I’d want to use DevContainer. That day is today.

Now I realize DevContainer isn’t just a Docker wrapper, but a feature-rich tool that makes it easy to replicate our development environment.

If you’ve spent enough time wrestling with inconsistent dev setups, you eventually reach a point where I was also struggle.

That’s where Dev Containers really change the game. While doing my research, I ran into the hassle of installing countless tools just to recreate the supporting environment. It was a nightmare, so I decided to check out the Dev Container.

The Docker doesn’t care about your editor, your extensions, your debugging tools, or your onboarding experience. It’s not supposed to — But Dev Container does.

Inside a Dev Container, we can define: programming language versions, build tools,VS Code extensions etc.

In simple term DevContainer is fully configured workstation is with the help of container that any other developer can replicate easily, without sending hundred of WA message for you asking “why this package is not running on my laptop - who knows actually 😒.

Dev Containers: Your entire development environment in a box

A Dev Container takes the idea of “environment consistency” and pushes it all the way to your editor.

It doesn’t just run your app. It runs you — your tools, your workflow, your coding habits.

Inside a Dev Container, you can define:

• Programming language versions

• Build tools

• Linters and formatters

• VS Code extensions

• debugging configuration

• environment variables

• Post‑create automation scripts

• Even your Git settings

It’s your development laptop, but reproducible, shareable, and version‑controlled. That’s why in the earlier I said this is a way to ship your laptop to another developer.

And the best part is that, VS Code orchestrates everything. You open the project, and it builds the environment for you. No manual Docker commands. No “install this first.” No “works on my machine.”

The philosophical difference

I know that at first the concept might not be familiar, and you still wonder why we need a devcontainer when we already have Docker to maintain a consistent environment. I was also

Here’s the simplest way I internalize it:

• Docker cares about the application.

• Dev Containers care about the developer.

Refer the full table to get broad idea about the difference between docker and dev container.

Docker vs Dev Container

When looking at a table you can see that the DevContainer gives us a capabilities to reproduce the developer environment very easily.

Honestly, not much — except that once you get used to Dev Containers, you start wondering why you ever installed toolchains directly on your OS. Your machine becomes lighter. Cleaner. Less fragile.

And your projects become more portable, more reproducible, and easier to maintain.

Final thought

Docker gave us consistent application environments. Dev Containers give us consistent developer environments. If Docker is the engine, the Dev Container is the entire workshop built around it.

Let’s see how we create a DevContainer environment in action in future article, if you can’t wait until that article, just ask from your favorite LLM 😎.

Have a nice day 👋..

Now let’s move on to what we plan to do today, But when tried to log in to the server for the first time today, I got this:

I was a bit confused by this error at first because I had already logged in to the server via SSH on day 2. After doing some searching, I realized that when I was using Linux Mint before installing the new OS, I had also connected to the old laptop through SSH on my local network. At that time, the laptop’s local IP was 192.168.8.132, but on day 2 I used the x.x.x.133 IP instead

Since my computer had saved the SSH details for the laptop when it was using the .132 IP, it detected something was wrong. From the computer’s perspective, I was actually the imposter.

The reason is simple: the server’s fingerprint changed. SSH blocks the connection to protect you from a man‑in‑the‑middle attack, where someone might pretend to be your server and intercept your data. In this case, I’m the “imposter” because I replaced the old system with a new one.

To fix this, I told my machine to forget the previous fingerprint

ssh-keygen -R 192.168.8.132

After I try to login to server again and now I’m able to login without any problem.

More Problems

Now I can log in to the account, but I still have another problem. When I close the lid of my laptop, the laptop turns off, which causes the server to shut down. To fix this, I edited the logind.conf file

sudo nano /etc/systemd/logind.conf

I change the HandleLidSwitch=ignore to prevent my laptop shut down when the lid close, Once I restart the logind server, Now I’m able to close the lid, But still my server up and running.

Then I ran into another issue: when I tried to use the sudo command, I got an error saying that sudo was not found. I was a bit confused because I assumed every Linux system included the sudo command — but later I discovered that this isn’t always the case.

When I looked into the issue, I learned that…

But I prefer to use the sudo command with my personal account (I’m still not entirely sure whether this is recommended, but let’s see). So I decided to install the sudo package.

apt update && apt install sudo

After I added my personal account to the sudo group, I was able to use the sudo command from my personal account as well.

Install Ollama

Now let’s do some experiments with Ollama. First, we’ll install Ollama and try an open‑source model. Later, we can try some cool things with Docker as well.

curl -fsSL https://ollama.com/install.sh | sh

But before run this command, I also wanna install curl to my linux system.

The I install llama3.2

It’s working! Now the llama3.2:latest (3B) model is running on my server locally without any cost.

What’s next? Next, I plan to install a web UI so my other devices can access it through a browser. Let’s check that out in action on Day 4 😎

Until then, see you guys!

If you don’t know about the Terraform, It’s a Infrastructure as Code (IaC) tool created by HashiCorp that lets us define, provision, and manage cloud and on‑prem infrastructure. Basically we able to version control and automate infrastructure setup.

Today my task is to setup Virtual Private Cloud (VPC),

If you don’t know about the VPC — Its a virtual network dedicated to your AWS account. It is logically isolated from other virtual networks in the AWS Cloud. It gives you full control over your networking environment.

Don’t confuse with the virtual machine concept, I also confuse in first time… !

Think of an AWS VPC as the building or the private property, while a Virtual Machine (called an EC2 instance in AWS) is the computer you place inside one of the rooms.

It gives full control over,

• IP Address Ranges: Choosing your own private IP space.

• Subnets: Dividing your network into smaller sections (e.g., a "Public" section for web servers and a "Private" section for databases).

• Routing: Deciding which traffic can go to the internet and which stays internal.

• Security: Using Firewalls (Network ACLs and Security Groups) to lock down access.

Here is a side by side comparison ,

Move to the Question

This question was very easy one and my task is to Create a VPC named xfusion-vpc in us-east-1 region with 192.168.0.0/24 IPv4 CIDR using terraform.

Here is the code example.

resource "aws_vpc" "xfusion-vpc" {
    cidr_block = "192.168.0.0/24"

    tags = {
        Name = "xfusion-vpc"
    }
}

If you don’t have any idea about the terraform code, let me example the code,

Here we define the resource called “aws_vpc”, that names as “datacenter_vpc”, this name like a variable name that we can refer the created VPC in our infrastructure.

cidr_block = "192.168.0.0/24": This defines the IP address range for your network. The /24 means you have a range of 256 IP addresses (from 192.168.0.0 to 192.168.0.255).

tags: This is a map of labels. Setting the Name tag to datacenter-vpc is what actually makes that name show up in the "Name" column of AWS Management Console.

That’s pretty much everthing that I want to do for complete this task, but make sure that in order to run this code, we needed to setup the provider, In this case aws. I’m not set the provider here because KodeKloud do it for me.

I was always asked my self why I did learn this, but I didn’t ask that question from LLM, because at the time LLM are not much popular. Today I did it because those days I try to improve my Maths knowledge.

So I started to learn about matrix, but not as the boring theory, instead with some examples in python. I sat down with an AI tutor ( Gemini) , and instead of memorizing boring formulas, I learned how to actually play with the numbers.

Here’s a recap of what I learned, from the basics of grids to editing images with pure math.

1. The Matrix: It’s Just a Spreadsheet

The biggest "Aha!" moment came right at the start. A matrix isn’t magic; it’s just a grid. It’s a way to organize data into Rows (horizontal) and Columns (vertical).

If you have a list of numbers, that’s a vector. If you stack them up, that’s a matrix.

We describe them by their size (Dimensions). A 2 × 3 matrix has 2 rows and 3 columns. Simple, right?

2. The Rules of Engagement

I learned that you can’t just smash two matrices together. There are rules:

• Addition / Subtract : We can only add or sub matrices if they are the exact same size. It’s like stacking egg cartons—the cups have to line up.

• Multiplication (The Boss Level): This was tricky! To multiply Matrix A and Matrix B, the columns of the first one must match the rows of the second. And you don’t just multiply numbers; you do a "Row by Column" swipe (the Dot Product).

3. The Magic of Identity

I discovered the Identity Matrix (I). It’s a square grid filled with 0s, but with a diagonal line of 1s down the middle. It acts like the number 1.

If we multiply any matrix by the Identity Matrix, nothing changes. It’s the "neutral" gear of Linear Algebra.

4. Coding It in Python

Theory is nice, but code is better. I fired up Python and used a library called NumPy, here is the notebook that I have tried, feel free to play with it.

https://gist.github.com/zaselalk/19d292a73f93b9f432b0277dd16b2934

5. The Grand Finale: Images ARE Matrices!

This was the coolest part. I learned that every digital photo is just a giant matrix of numbers representing brightness.

I wrote a few lines of Python to generate a 100 x 100 matrix, and when I visualized it, it wasn't just numbers—it was a picture! That was soo cool 😎

My Takeaway

Math isn't just about solving for x. It's the engine behind the images we see, the games we play, and the data we analyze. Today, I stopped looking at matrices as homework and started seeing them as tools.

Alright now it’s time for try the new OS, In day 01 you might remember that I downloaded and update the bootable device with Debian 13, then let’s see what to do today.

I start the install debian-13.3.0-amd64-netinst and when I go through the process, I got steps like setup domain, setup admin password (/root) and setup user account by giving the full name, username, password.

Then I came the process to setup the disk, At that process the Linux installation ask me to whether follow the guided setups or manual steps to install the system. I selected the manual method, because wanna fresh installation.

Then I got the following screen,

I have the deleted all the partitions in both SSD (sda) and the HDD (sdb), and I created two manual partitions for the server to run,

• 536MB - EFI System partition

• 127.5GB - ext4 partition for server

The EFI System Partition (ESP) is a critical, OS-independent partition that serves as the storage location for bootloaders, kernel images, and drivers used by the system firmware during startup.

As I found about the ESP, this act like a bridge between the firmware and the operating system. instead of a "boot sector," the ESP holds the actual .efi binary files (like grubx64.efi) that the motherboard loads to start OS.

This is also a platform independent and I found that a single ESP can hold bootloaders for multiple operating systems (like Windows and Linux) if needed.

Refer the image how that looks after the server install successfully. (This is after server setup - you are time travelling).

But there is a something notable, that I haven’t setup the swap for my installation, When I did little search about the swap, I discovered that I can either setup the swap when I install the OS or after setup the OS.

So, I decided to find what are the difference between these two approaches and what will be the suitable for me.

Here what I did found,

1. Setting Up Swap in Installation (Partition Method)

During the installer, we would create a dedicated "Swap Partition" on SSD, that method associated with following advantages and disadvantages.

2. Setting Up Swap Later (Swap File Method)

   Once Debian is installed, we able to create a "Swap File" (a large file sitting on root partition that acts like RAM). This method associated with following advantages and disadvantages,

If we compare the overall process in both approach it looks like this,

To came to the conclusion, I got selected the Swap file method, since my Dell has 8GB of RAM, I likely won't even need swap for a minimal Debian server and small AI models like Llama-3.2 1B. There for I skipping it now.

Then If I hit a "Memory Out" error later while running a models or working I plan to create a swap file later.

Before getting a decision I also consider about the performance difference in the both approaches, Here what I got through Gemini,

For me “Swap File” method seems its flexibility for future DevOps projects as well, because I can adjust the swap storage as needed in future.

Then I continue and I follow the few more steps like select the mirror server and other minor settings.

Finally I got to select the software that want to install to the OS, In that screen I only selected the SSH Server And Standard Utility to keep the my server more lightweight but make sure essential software are installed.

SSH server is essential for managing server from remotely and standard system utility included the essential command line tools like following,

Key Categories of Included Tools

• Text Editors: Basic terminal-based editors like nano or vim-tiny for editing configuration files.

• Networking Tools: Utilities for managing connections and troubleshooting, such as iputils-ping, curl, and wget.

• File Management: Tools for handling archives and file systems, including tar, gzip, bzip2, and parted.

• Process Management: Basic monitors like top to view system resource usage and manage running tasks.

• System Documentation: Access to manual pages through the man-db system to look up command usage offline.

• Hardware Detection: Small utilities that help the kernel identify and interact with your specific laptop components.

That’s all after few minutes I got my brand new (yet laptop is old) server, with lot of memory to play for me. In simple term, now I have bigger ground to play, look at my resource usage now 👇

What do you think ? It’s glad to hear yours opinion on the comment section 👇

Alright that’s it for today, let’s meet in day 3 with more exciting story, most probably my next goal is to setup llama, let’s see what happen next. see you all in the day 03.

Thank you for reading… ! 😎

This isn't just about getting a machine running; it's about deeply understanding the underlying tech. I hope to learn lot of fundamental concepts throughout the process and hope to share my experience with you.

Also appreciate your supportive comments and ideas, because I’m not an expert at all and I learn things by searching and asking by AI.

Here’s a breakdown of what I’ve been up to, and more importantly, what I’ve learned (sometimes the hard way!).

The "Before": My Trusty (but Thirsty) Linux Mint Laptop

My Dell Inspiron, sporting an Intel Core i3-7100U and 8GB of RAM, was running Linux Mint 21. While Mint is fantastic for daily use, my inxi -Fxxxrz output revealed its Achilles' heel for my new ambitions: 80% RAM usage just at idle! That's not going to cut it when I want to run large language models (LLMs) and Docker containers.

The goal became clear: strip down the OS to the absolute essentials to free up as much RAM as possible.

I chose Debian, because Gemini tell me to try that..

When I search thought what will be the best OS to try for me that can learn things and setup my AI and DevOps environment while learning, Gemini suggest me to try the Debian 12, but when I search on the Bing I discovered that Debian 13 is also available.

Then Why I try some old, staff, So I decided to learn something new and ignore the Gemini suggested Debian 12 "Bookworm" and download the Debian 13 "trixie", Because I don’t trust AI always.

As Gemini mentioned here are the feature that I can achieve through the Debian

1. Minimalism & Performance: A headless Debian server (no fancy graphical desktop environment) can idle at an incredible 150-200MB of RAM. This means nearly 7.5GB of my 8GB RAM is available for actual AI tasks!

2. Industry Standard: Debian is the bedrock for many enterprise servers and forms the base for Ubuntu, making it invaluable for real-world DevOps skills.

3. Stability: For a dedicated lab, I need something that won't randomly break, letting me focus on my projects, not OS debugging.

The Gemini also suggest me to try “Arch Linux” as “As an undergraduate, nothing teaches you how Linux actually works better than an Arch installation”. But right now I think It’s better to try the “Debian way" fist and then move to the Arch later.

The actual reason is that always I use the Debian based OS for my servers and then I wanna study how to build the Debian base server from ground up.

Navigating the ISO Minefield: "Free" vs. "Non-Free" Firmware

This was my first major learning curve! First I login into to the my laptop using SSH though the local network. That was the first time I log to my laptop using the ssh , Most time I used the Anydesk for that.

Then I downloaded the mini.iso , using the wget command and I also explore the current available block devices using the lsblk command which is stands for List Block Devices.

Once I got onedrive block, I decided to flashed downloaded os into it, I used the dd commands for that. (a powerful tool that overwrites everything, so always double-check your target drive, folks!).

I thought I was golden, but then the installer hit me with this:

The Revelation: My Wi-Fi and Ethernet need "Non-Free" Firmware!

The messages ath10k/QCA9377 and then later rtl_nic weren't just random errors. They were the installer politely (but firmly!) telling me that my Qualcomm Atheros Wi-Fi and Realtek Ethernet chips needed proprietary binary files to function.

These are "non-free" not because you have to pay for them, but because their source code isn't openly available, which conflicts with Debian's strict "free software" philosophy in its default installers.

The Solution: I had to scrap that mini.iso and download the official Debian 13 Netinst ISO that includes non-free firmware. This version is a godsend for modern laptops as it bundles those closed-source blobs, allowing the hardware to actually turn on.

Then I started to make bootable device using newly download ios, use the same dd commands, let’s see what happened next in day 02 blog.

I'm excited to get this server online and start diving into Docker, Ollama, and building my first Agentic AI prototypes. Stay tuned for Part 2!

In this article, we explore the core principles, methodologies, and both advantages and disadvantages of object orientation.

Object Orientation: A Paradigm Shift in Software Development

At its core, object orientation is a paradigm that views systems as collections of interacting and interrelated objects. Each object encapsulates both data (attributes) and behavior (methods), mirroring real-world entities and their interactions.

Object-oriented systems development emphasizes building modular, self-contained modules that facilitate reusability, modifiability, and scalability.

GIF

Why Object Oriented Approach ?

Object orientation offers numerous benefits compared to traditional procedural approaches to software development:

• Reusability: Objects and classes can be reused across different projects, reducing development time and effort.

• Increased Quality: The modular design of object-oriented systems promotes better code organization and reduces the likelihood of errors.

• Faster Development: Reusable components and modular design lead to faster development cycles and improved time-to-market.

• Maintainability: Changes to one part of the system can be localized, minimizing the impact on other components, thus enhancing maintainability.

• Scalability: Object-oriented systems can easily accommodate changes in requirements and scale to meet evolving needs.

• Modularity: The modular structure of object-oriented systems promotes better code organization, making it easier to manage and extend.

What are the Disadvantages ?

While object-oriented analysis and design (OOAD) offers numerous advantages, it's important to acknowledge its limitations and potential drawbacks.

Here are some disadvantages associated with the object-oriented approach:

• Complexity: Object-oriented systems can become complex, especially as the number of classes and their interactions increase. Managing the complexity of large-scale object-oriented projects requires careful design and planning.

• Learning Curve: Transitioning from procedural programming to object-oriented programming may pose a steep learning curve for developers, particularly those unfamiliar with the concepts of classes, objects, inheritance, and polymorphism.

• Performance Overhead: Object-oriented systems may incur performance overhead compared to procedural counterparts. The overhead arises from features such as dynamic dispatch, inheritance, and polymorphism, which can introduce runtime inefficiencies.

• Inheritance Issues: While inheritance promotes code reuse, it can also lead to issues such as tight coupling between classes, the fragile base class problem, and difficulty in understanding class hierarchies. Inappropriate use of inheritance can result in rigid, inflexible designs.

You know more from your experience or not agree with me, feel free to comment your ideas.

Now Let's move to the process In Object oriented development process we called "Object-Oriented Development Lifecycle", there are three main steps.

The Object-Oriented Development Lifecycle

1. Object-Oriented Analysis (OOA): This phase focuses on identifying and describing objects or concepts within the problem domain.

2. Object-Oriented Design (OOD): In OOD, structures are developed to define software objects and their interactions. It involves defining classes, specifying attributes, and determining how objects collaborate to fulfill system requirements.

3. Object-Oriented Programming (OOP): OOP involves implementing the designed objects in a programming language. It translates the abstract design into executable code, where classes are instantiated as objects, and methods are invoked to perform specific tasks.
   This is the step that we get a help of Object oriented programming language like JAVA.

There is a another important thing that you should now that is,

Core Principles of Object Orientation

1. Abstraction: Abstraction involves representing only the essential aspects of a system while hiding irrelevant details.

2. Encapsulation: Encapsulation involves bundling data and methods into a single unit (class) and restricting access to the internal state of objects. It promotes information hiding, data integrity, and modular design.

3. Inheritance: Inheritance allows classes to inherit attributes and behaviors from parent classes, enabling code reuse and promoting hierarchy and specialization.

4. Polymorphism: Polymorphism enables objects to exhibit different behaviors based on their context or inputs. It allows for flexibility and extensibility by enabling the same method to behave differently in different contexts.

Conclusion

Object-oriented analysis and design represent a paradigm shift in software development, offering a more intuitive, modular, and maintainable approach to building complex systems.

Event though it have some disadvantages overall It provide well define approach to building complex systems. Then choose wisely according to your requirement.

Hello everyone, Today I'll tell you how to create a simple 8 X 8 chess pattern using HTML, CSS and a little JS.

Complete Source Code: https://github.com/zaselalk/Chess-Pattern-CSS-JS

First things first, Here's my little piece of HTML code.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chess-Pattern-CSS-JS </title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="board">
    </div>   
    <script src="script.js"></script>
</body>
</html>

What Next?

Now Let's add some styles for our chessboard pattern,

style.css.

#board{
    display: flex;
    flex-wrap: wrap;
    width: 640px;
    height: 640px;
    border:1px solid black;
    background-color: #fff;

  }

Explain

• Use #board Element as a Flex-Container and Add display:flex property to it.

• Add flex-warp property to make sure that your square warp to lines.

• Define our chess board width and height.

• use 1px border and white as `background-color' to make sure your chess board more decent.

Next, We're going to Style small square on a chessboard, in this Code there're Two types of squares,
Which are,
*.esquare - Square that in even line
*.osquare - Sqaure in odd line

Two Types? But Why?

That's because chessboard have 64 squares and there're 8 squares in one line. There're 8 lines on board. But these lines are not in the same pattern.

As an example, If we select black squares and numbered them.Look you can see they are changing as odd and even pattern.

Now let's Back to our code.

style.css .

`

.esquare, .osquare{
    width: 80px;
    height: 80px;
    border:1px solid black;
    box-sizing:border-box;
  }

Nice! We Finished most of CSS Codes and finally we have to style our Black Squares like chess pattern. Let's achieve this.

more code for style.css

 .esquare:nth-of-type(2n){
    background-color: #000;
  }
  .osquare:nth-of-type(2n+1){
    background-color: #000;
  }

Explain

As I said this is the final part of our CSS code. Within this part , We're going to design pattern of black squares in our chessboard.

As I mention before, We group squares as esqaures and osqaures to style our chessboard.

Now you are end of line and final one is our js file.

But Why JS?

The truth is normally JS isn't use for the simple codes like this, But to have a more clean code I added little JS code to multiply .square elements.

Here is My Js Code
script.js

const board = document.getElementById('board');
let patterneven = " <div class='esquare'></div>" ;
let patternodd = " <div class='osquare'></div>" ;

for(i=0;i<4;i++){
    board.innerHTML += patterneven.repeat(8);
    board.innerHTML += patternodd.repeat(8);
}

Using JS to create a loop so that we could easily make our code more clear and Easy to enhanced.

Mission complete !, Now you have Chess Pattern 😎

Would you like to try Live demo ? Then click the link below.

Live Demo: http://gestyy.com/epXRuq

Do you know this is my first post for dev.to and feel free to add comments about this post.

A few days ago, I was working on developing a library system for my school using a MERN stack.

During this project, I had to import around 12,000 excel records into my Mongo Atlas database because library staff already maintained their book and student information in excel sheets.

When looking for a way to import this data into a Mongo Atlas cluster, I found a tool called "mongoimport."

Mongoimport is a MongoDB database tool that was released as a standalone tool after MongoDB 4.4. If you are using a higher version than Mongo 4.4, you have to install it.

Hense installation is different for each operating system please follow the official guide for installation.

With this tool, I was able to import data into my database by following the steps described below.

First, I deleted all unnecessary columns and titles in the excel sheet. Mongoimport commands allow you to give column titles with the appropriate types.

After that, I saved my file as a CSV file; I used LibreOffice, but you could also use Google Sheets if you prefer.

Now we are ready to import our file to the mongo database.

Please keep in mind that if you use unique key validation in the collection and haven't created a collection yet, I recommend that you should manually add at least one document to your collection. Otherwise, validations will not work properly while importing a CSV file.

In the below example, I used two-column "Name, Barcode." with their types, More types in Mongo can be found in mongoimport documentation.

Also don't forget to update <connecttionString>,<collectionName>, <CSVpath> with your own values.

mongoimport --uri <connecttionString> --collection <collectionName> --type csv --file <CSVpath> -f "Name.string(),Barcode.string()" --columnsHaveTypes

Enclosing fields in double quotes will prevent shell errors.

Done! Isn't it simple? You can use this technique to import Excel into MongoDB starting today.

The main difference between the two operators is how they handle falsy values for example consider following code.

const value = false;
console.log(value || 500); // Output: 500
console.log(value ?? 500); // Output: false

In this scenario, the output is different in each operator.

But Why ?

The reason is ?? operator return default value only if left side value is null or undefined while || operator consider following scenarios,

1. false: The boolean false value.

2. 0: The number zero (integer).

3. -0: The negative zero (integer).

4. 0n: The BigInt zero.

5. NaN: Not-a-Number, a special value that represents the result of an undefined or unrepresentable mathematical operation.

6. null: A null value, representing the absence of any value or object.

7. undefined: A value that is automatically assigned to variables that have just been declared or to object properties that do not exist.

8. "": An empty string.

Here is an example code

console.log(false || 'default'); // Output: 'default'
console.log(0 || 42);            // Output: 42
console.log(NaN || 100);         // Output: 100
console.log(null || 'Hello');    // Output: 'Hello'
console.log(undefined || 123);   // Output: 123
console.log('' || 'Fallback');   // Output: 'Fallback'

Now let’s compare this code with ?? operator

console.log(false ?? 'default'); // Output: false
console.log(0 ?? 42);            // Output: 0
console.log(NaN ?? 100);         // Output: NaN
console.log(null ?? 'Hello');    // Output: 'Hello'
console.log(undefined ?? 123);   // Output: 123
console.log('' ?? 'Fallback');   // Output: ''

As you see the ?? operator only return it’s right-side value if left-side value is null or undefined.

In conclusion, understanding the differences between the **||**and ?? operators in JavaScript is essential for assigning default values correctly, depending on whether you want to consider all falsy values or only **null**and undefined .

Both Hashnode and Medium are popular blogging platforms, each with its own set of features and advantages. Here's a comparison between the two to help you make an informed decision:

Hashnode:

Pros:

1. Free: Hashnode offers a free plan with no restrictions on custom domains, content ownership, or monetization options.

2. Custom Domain: You can easily set up a custom domain to enhance your personal brand.

3. Content Ownership: You retain full ownership of your content, which can be important for long-term credibility and SEO.

4. Developer-Focused: The platform is tailored towards developers, with a built-in audience interested in technical content.

5. Markdown Support: You can write and format your articles using Markdown, which is a popular and easy-to-learn markup language.

6. Community Engagement: Hashnode has a supportive and interactive community, where you can get feedback and engage with other writers.

Cons:

1. Smaller Audience: Hashnode has a smaller overall audience compared to Medium, which may result in fewer views for non-technical content.

2. Limited Exposure: The platform's focus on the developer community may limit the exposure of non-technical content.

3. Fewer Design Options: The customization options for the look and feel of your blog are limited.

Medium:

Pros:

1. Large Audience: Medium has a vast user base, providing you with more potential readers and increased exposure for your content.

2. Curated Content: Medium's curation team selects and promotes high-quality articles, which can lead to increased visibility.

3. Elegant Design: The platform offers a clean and minimalist design, allowing your content to shine without distractions.

4. Simple to Use: Medium's editor is user-friendly and easy to learn, even for beginners.

5. Diverse Topics: Medium caters to a wide range of topics, making it suitable for writers in various niches.

6. Monetization: Medium offers the Partner Program, allowing you to earn money from your content based on engagement.

Cons:

1. Paywall: Medium's paywall may deter some readers from accessing your content, potentially limiting your reach.

2. Content Ownership: Medium has more control over your content and can remove it if it violates their terms.

3. Limited Customization: The platform offers limited customization options, making it harder to establish a unique brand identity.

4. No Custom Domain: Medium does not offer custom domains, which may not be ideal for personal branding.

5. Monetization Restrictions: The Partner Program is not available in all countries, and your earnings may be impacted by Medium's curation and promotion policies.

By comparing my needs I decided to start publishing content with hasnode.

In conclusion, if you are a developer or prefer a platform with custom domains, content ownership, and a strong community, Hashnode may be the better choice for you. On the other hand, if you want a platform with a larger audience, more diverse topics, and the potential to earn money from your content, Medium could be the right fit.

Tailwind provides a large number of utility classes that you can use to style your elements. For example, you can use classes like text-blue-500 or bg-green-100 to apply color to text or backgrounds. It also provides a number of responsive utility classes, so you can easily create responsive layouts that look good on all screen sizes.

To set up Tailwind in a Vite React project, you will need to do the following:

1. Install the Tailwind CSS package from npm by running the following command:

npm install tailwindcss

2. Next, you will need to create a Tailwind configuration file. To do this, run the following command:

npx tailwind init

3. This will create a tailwind.config.js file in the root of your project. You can modify this file to customize the Tailwind configuration as needed.

4. Next, you will need to add the Tailwind CSS styles to your project. There are a few different ways to do this, but one option is to create a tailwind.css file in the src directory of your project and import the Tailwind styles like this:

@tailwind base;
@tailwind components;
@tailwind utilities;

5. Then, in your React components, you can use the Tailwind classes to style your elements. For example:

import React from 'react';

function App() {
  return (
    <div className="bg-blue-500 text-white p-4">
      This is a blue container with white text and padding.
    </div>
  );
}

6. Finally, you will need to add the tailwind.css file to your project's build process. If you are using Vite, you can do this by adding the following lines to your vite.config.js file:

import { vitePresetReact } from 'vite-preset-react';
import tailwind from 'tailwindcss';

export default {
  ...vitePresetReact,
  plugins: [tailwind()],
};

This will configure Vite to process the tailwind.css file using the Tailwind plugin, and include the resulting styles in your project.

After completing these steps, you should be able to use Tailwind CSS in your Vite React project.

To set up a PWA (Progressive Web App) in a Vite React app, you will need to follow these steps:

1. Install the vite-plugin-pwa package by running the following command:

npm install vite-plugin-pwa

2. Create a pwa.config.js file in the root of your project, and add the following code to it:

module.exports = {
  name: 'My App', // The name of your app
  short_name: 'MyApp', // The short name of your app
  theme_color: '#fff', // The theme color of your app
  background_color: '#fff', // The background color of your app
  display: 'standalone', // The display mode of your app
  scope: '/', // The scope of your app
  start_url: '/', // The start URL of your app
  icons: [
    {
      src: './icon.png', // The path to your app icon
      sizes: [96, 128, 192, 256, 384, 512], // The sizes of your app icon
    },
  ],
}

3. Import the createPWA function from the vite-plugin-pwa package, and use it to create a PWA plugin for your Vite app. Add the following code to your src/vite.config.js file:

import { createPWA } from 'vite-plugin-pwa'

const pwaPlugin = createPWA({
  config: require('./pwa.config.js'),
})

export default {
  // Your other Vite config options...
  plugins: [pwaPlugin],
}

4. Build your Vite app using the vite build command. This will generate the necessary files for your PWA, including the manifest.json file and the icon files.

5. Serve your Vite app using a web server, such as serve. This will allow you to test your PWA and see if it works as expected.

After completing these steps, your Vite React app should be set up as a PWA. You can test it by visiting your app in a web browser and checking if it meets the criteria for a PWA, such as being installable, offline-capable, and responsive.

For more information refer official documentation

HeroIcons have Beautiful hand-crafted SVG icons, by the makers of Tailwind CSS. Which can be easily used with react projects.

How to Use In Your Project

Photo by Balázs Kétyi / Unsplash

There are a few ways you can use HeroIcon with your projects.

The quickest method for using these icons is just to copy the source code from heroicons.com and paste it into your JSX code.

<svg class="h-6 w-6 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
  <path
    stroke-linecap="round"
    stroke-linejoin="round"
    d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
  />
</svg>

SVG code

The example below is show How we can create a reusable Icon component with SVG which can be easily customised and can use in many places in your application.

Using this kind of component you are able to add custom class names, width and height. also, you may add more props as you wish.

import React from "react";

export default function DarftIcon({ className, width, height }) {
  let classNames = "";
  width ? (classNames += `w-${width} `) : (classNames += `w-6 `);
  height ? (classNames += `h-${height} `) : (classNames += `h-6 `);
  className && (classNames += `${className} `);

  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      className={classNames}
      fill="none"
      viewBox="0 0 24 24"
      stroke="currentColor"
      strokeWidth={2}
    >
      <path
        strokeLinecap="round"
        strokeLinejoin="round"
        d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
      />
    </svg>
  );
}

HeroIcon also provides Library for React to use their icon easily and like reusable components as we did earlier.

To use this library First, you need to install @heroicons/react it on npm by running the following command.

npm install @heroicons/react

Now each icon can be imported individually as a React component:

import { BeakerIcon } from '@heroicons/react/24/solid'

function MyComponent() {
  return (
    <div>
      <BeakerIcon className="h-6 w-6 text-blue-500"/>
      <p>...</p>
    </div>
  )
}

If you need 24x24 outline icons you can be imported them from @heroicons/react/24/outline.

20x20 size can also be used in this library by import like this.

• @heroicons/react/24/outline for 20x20 outline Icons

• @heroicons/react/24/solid for 20x20 solid Icons

To See more guides and all icons provided by HeroIcons you can visit their site.

Here is an example of how to use the React-Bootstrap package to add a button to your React app:

1. First, install the React-Bootstrap package by running the following command:

npm install react-bootstrap bootstrap

2. Import the React-Bootstrap components that you want to use in your app. For example, to use the Button component from React-Bootstrap, you would add the following import statement to your JavaScript file:

import { Button } from 'react-bootstrap';

3. Use the imported React-Bootstrap components in your app. For example, to add a button to your app, you would use the <Button> component like this:

<Button variant="primary">Click me!</Button>

That's it! You can now use the React-Bootstrap components in your app and style them with the styles from the Bootstrap library.

To use the useState hook, you need to import it at the top of your component file:

import React, { useState } from 'react';

After importing useState, you can use it in your functional component by calling it inside the component. The useState hook takes an initial state as an argument and returns an array with two elements: the current state value and a function that updates the state.

For example, if you want to create a count state variable that is initially set to 0, you can use useState like this:

function MyComponent() {
  const [count, setCount] = useState(0);

  // other component code here...
}

This code sets the count variable to 0 and assigns the setCount function to update the value of count.

To update the value of count, you can call the setCount function and pass the new value as an argument. For example:

setCount(1); // sets count to 1
setCount(count + 1); // increments count by 1

You can use the useState hook multiple times in a single component to create multiple state variables.

Here is an example of a functional component that uses useState to keep track of a count and a value:

function MyComponent() {
  const [count, setCount] = useState(0);
  const [value, setValue] = useState('');

  // other component code here...
}

In this example, the component has two state variables: count and value. The count the variable is initially set to 0, and the value the variable is initially set to an empty string. The component has two functions, setCount and setValue, to update the values of these state variables.

The useState a hook is a powerful tool that enables you to add state to functional components in React. The state is an essential part of any app that has dynamic data, and the useState the hook makes it easy to manage the state in your functional components.

The useState hook takes an initial state value as an argument and returns an array with two elements: the current state value and a function that updates the state. You can use the returned function to update the state value, and the state value will be updated in the component automatically.

You can use the useState hook multiple times in a single component to create multiple state variables. This is useful when you need to manage different pieces of state in your component.

Here is an example of how you might use useState to manage a form input in a functional component:

function MyForm() {
  const [inputValue, setInputValue] = useState('');

  function handleChange(event) {
    setInputValue(event.target.value);
  }

  return (
    <form>
      <input type="text" value={inputValue} onChange={handleChange} />
    </form>
  );
}

In this example, the MyForm the component has a state variable called inputValue that is initially set to an empty string. The handleChange the function is called whenever the user types something into the form input, and it updates the inputValue state variable with the current value of the input. This ensures that the input value is always up-to-date and in sync with the state.

The useState a hook is a versatile tool that can help you manage the state of your React apps. It is easy to use and can make your code more concise and maintainable.

Read more about useState hook in react documentation

Here is an example of how to use the useCallback hook:

Copy codeimport React, { useState, useCallback } from 'react';

function Example() {
  // Declare a state variable and a function to update the state
  const [count, setCount] = useState(0);

  // Declare a function that will be passed as a prop to a child component
  const handleClick = useCallback(() => {
    setCount(count + 1);
  }, [count]);

  return (
    <div>
      <p>You clicked {count} times</p>
      <ChildComponent onClick={handleClick} />
    </div>
  );
}

function ChildComponent(props) {
  return (
    <button onClick={props.onClick}>
      Click me
    </button>
  );
}

In this example, the handleClick the function is wrapped with useCallback, and the count variable is passed as the second argument to useCallback. This means that the handleClick function will only be re-created if the count variable changes. This prevents the child component from re-rendering every time the parent component re-renders, and improves the performance of the app.

React documentation about useCallback