DEV Community: Dhairya Shah

Running GTA V on AWS EC2: A Cloud Gaming Experiment That Actually Worked

Dhairya Shah — Tue, 13 May 2025 09:27:24 +0000

Introduction

Ever wondered if you could run GTA V in the cloud—not just stream it via a service, but actually install and run the game yourself on an AWS EC2 instance? That’s exactly what I set out to do. To my surprise, it worked—and it worked well.

This post is not your average "how to play games on the cloud" guide. It's a story of pushing AWS to its creative limits, experimenting with spot instances, managing EBS volumes like puzzle pieces, and overcoming all the quirks of running a AAA game on virtual hardware—all on a budget of less than $5.

Let’s dive in.

The Research: Is This Even Doable?

Before launching any EC2 instances, I looked into whether it was technically possible. AWS offers G5 GPU instances with NVIDIA GPUs that support DirectX 12, which sounded promising. But there wasn’t much documentation or community experience around installing and running heavy desktop games like GTA V directly on EC2.

That made the experiment more exciting. I’d be venturing into mostly unexplored territory.

The Technical Challenges

Running GTA V in the cloud presents several hurdles:

Large install size: Around 120 GB of files
GPU requirements: Dedicated graphics power is essential
Cost: GPU instances aren’t cheap
Cross-platform workflow: Managing Linux and Windows instances together

The real challenge turned out to be: how do I download and transfer such a large game efficiently, without spending a fortune?

Installation Options Explored

I tried three approaches before landing on the most efficient one.

Option 1: Install Directly on a GPU Instance (g5.2xlarge)

Pros: Fast GPU, fast network (4–5 Gbps)
Cons: Epic Games throttles downloads
Time: ~2 hours
Cost: ~$1.8/hour = too expensive just to install the game

Option 2: Use a Cheaper EC2 (c5.xlarge)

Pros: Costs ~$0.35/hour
Cons: Throttling still applies, took ~3 hours to download
Total Cost: ~$1.05 — not ideal for budget constraints

✅ Option 3: Use a t2.micro with Legendary CLI

This was the breakthrough.

I launched a t2.micro Debian spot instance (~$0.0016/hour) and used Legendary, a CLI Epic Games client, to install the game.

Download time: ~3.5 hours
Cost: <$0.10 total
Network: 1 Gbps (enough for an overnight download)

This worked smoothly, and by the evening I had GTA V fully installed on my EBS volume.

Moving Game Files to a Windows Instance

Next, I needed to get the files onto a Windows instance with a GPU.

# Install Legendary CLI on Linux
sudo apt update && sudo apt upgrade -y
sudo apt install -y python3 python3-pip git
python3 -m venv venv && source venv/bin/activate
pip3 install legendary-gl

# Authenticate and install
legendary auth
legendary install "Grand Theft Auto V"

Step 1: Mount and Copy Files to an EBS Volume

I attached a new 150 GB EBS volume, formatted it with exFAT for cross-OS support, and copied over the files:

mkfs.exfat /dev/xvdf
mkdir /mnt/gamevol
mount /dev/xvdf /mnt/gamevol
cp -r /path/to/gta5/* /mnt/gamevol/

Step 2: Deal with AZ Mismatch

The t2.micro was in ap-south-1c, but GPU instances were only available in ap-south-1a/b. EBS volumes can't be directly attached across AZs.

Solution: I created a snapshot of the volume and restored it into ap-south-1a. It took ~2 hours to get completed.

Launching the Windows GPU Instance

I spun up a g5.2xlarge (Windows Server 2025) spot instance and attached the EBS volume. But Windows didn’t like the exFAT filesystem—it prompted a reformat.

Pivot to S3

To avoid losing the data:

I uploaded the game files to an S3 bucket from a Linux instance
S3 uploads from EC2 within the same region are free
Upload took ~45 minutes

aws s3 cp /mnt/gamevol/ s3://tmp-s3-server/ --recursive

Then, on the Windows instance:

aws s3 sync s3://tmp-s3-server D:\EpicGames

Final Setup

Once the files were on the Windows machine:

Installed NVIDIA drivers
Installed Epic Games Launcher
Pointed the launcher to the game directory
It started verifying the game files

Then came an error: "Unable to update the Rockstar Launcher." I assumed Rockstar had detected the VM.

The Fix

Turned out to be simple: Run as Administrator. That’s it.

Once I did that, the launcher updated, and the game launched successfully.

The Results

GTA V ran flawlessly on the g5.2xlarge. High settings, smooth graphics, and stable performance.

This wasn’t just about getting a game to run—it was about using cloud infrastructure creatively and efficiently.

Key Stats

Instances launched: 10–15
Total storage used: ~1.5 TB across EBS volumes
Game installation cost: <$0.10 (thanks to t2.micro spot)
Total project cost: Under $5
Performance: 60+ FPS at high settings

What I Learned from This Experiment

This hands-on project taught me more about AWS than any course or tutorial ever could. Here are some key takeaways that deepened my understanding of the AWS Cloud:

Availability Zones Matter for Storage
EBS volumes are tied to specific Availability Zones (AZs), which means they can't be directly attached across AZs. Creating and restoring snapshots is essential for moving data between zones.
S3 + EC2 in the Same Region = Zero Data Transfer Cost
Leveraging S3 for intermediate storage was not only reliable but also cost-effective. Data transfers between EC2 and S3 within the same region are completely free, making it perfect for large file movements.
Using Spot Instances for Cost Efficiency
Spot instances helped me stay well under budget while using powerful compute resources like g5.2xlarge and even t2.micro for setup tasks. It's a smart way to experiment with high-performance instances without burning cash.
Open-Source Tools Can Outperform Official Options
Tools like Legendary (a headless Epic Games CLI) enabled me to bypass bloated GUIs and install games quickly and efficiently—especially useful on low-resource instances.
AWS Cloud Enables Non-Traditional Use Cases
Running a high-end game like GTA V in the cloud isn’t just a tech flex—it proves that AWS can support demanding workloads creatively, as long as you understand the infrastructure limits and plan around them.

Final Thoughts

This project was part cloud engineering, part gaming adventure. It pushed my understanding of EC2, storage, networking, and optimization far beyond the basics.

If you're serious about learning cloud, do something fun and practical. You'll encounter real-world challenges—and solve them in creative ways.

Now, if you’ll excuse me, I’ve got to explore Los Santos. On the cloud.

Disclaimer: This blog post is intended for educational and research purposes only. All product names, logos, brands, and registered trademarks mentioned — including Grand Theft Auto V, Rockstar Games Launcher, Epic Games, and AWS — are the property of their respective owners. No affiliation or endorsement is implied.

The game was legally obtained through a personal Epic Games account, and no part of this project involved unauthorized distribution or piracy. Running commercial software on cloud instances may violate the software's End User License Agreement (EULA). Readers are solely responsible for ensuring compliance with any relevant terms, policies, and conditions.

The implementation shared here is a personal experiment meant to explore technical possibilities with cloud infrastructure. We do not encourage, promote, or take responsibility for any misuse of this information.

How I Connected My Home Network with AWS Regions Using Tailscale and VPC Peering

Dhairya Shah — Wed, 07 May 2025 15:57:56 +0000

Hey there, fellow tech tinkerers! As a developer and cloud enthusiast, I love messing around in my home lab—a trusty Raspberry Pi 5 running my self-hosted setup. But sometimes, I need to tap into the power of AWS for testing, dev work, or hybrid projects. In this post, I’m spilling the beans on how I bridged my home network with two AWS regions (ap-south-1 and us-east-1) using Tailscale, EC2, and VPC Peering. The result? A secure, low-latency network that feels like magic. Let’s dive in!

🧠 Why I Did This

My home lab is my sandbox for coding, experimenting, and breaking things (gently). But when I need AWS’s managed services—like serverless functions or storage—I don’t want to deal with public IPs or clunky SSH setups. My goal was to create a private, secure, and dead-simple network bridge connecting:

My Home Network (192.168.0.0/24)
My AWS VPC in ap-south-1 (172.31.0.0/16)
My AWS VPC in us-east-1 (172.15.0.0/16)

No public exposure, no VPN headaches—just smooth, encrypted access from my home terminal to the cloud.

🛠️ My Toolkit

Here’s what I used to pull this off:

Tailscale: A slick, WireGuard-based mesh VPN that connects my devices and AWS instances like they’re on the same LAN.
Amazon EC2: A lightweight instance to relay traffic between my networks.
VPC Peering: AWS’s way to privately link VPCs across regions.
Linux Routing (ip route, sysctl): Good old Linux commands to handle custom routing.

🔗 Step 1: Getting Tailscale Up and Running

First things first, I installed Tailscale on:

My Raspberry Pi 5 (running Raspbian, because Debian is life) at home.
A tiny EC2 instance in my ap-south-1 VPC (172.31.0.0/16).

After signing both into my Tailscale account (super quick setup, by the way), I told the EC2 instance to advertise the VPC’s CIDR block so my home network could see it:

tailscale up --advertise-routes=172.31.0.0/16 --accept-routes

Boom! My home network could now reach private resources in ap-south-1 through Tailscale—no VPN, no bastion host, just pure simplicity.

🌍 Step 2: Routing VPC Traffic Back Home

To let my home network talk to the ap-south-1 VPC, I turned on IP forwarding on the EC2 instance (because it’s gotta play traffic cop):

sudo sysctl -w net.ipv4.ip_forward=1

Then, on my Raspberry Pi, I added a route to send VPC-bound traffic through the EC2’s Tailscale IP (mine was 100.104.53.61—yours will differ):

sudo ip route add 172.31.0.0/16 via 100.104.53.61

After this, I could curl or ping internal VPC endpoints from my home lab. It felt like my Pi was living in the cloud!

🌐 Step 3: Hooking Up us-east-1 with VPC Peering

Now, I wanted my us-east-1 VPC (172.15.0.0/16) to join the party. Enter VPC Peering:

Requester VPC: ap-south-1 (172.31.0.0/16)
Accepter VPC: us-east-1 (172.15.0.0/16)

I set up the peering connection in the AWS console (pretty straightforward) and updated the route tables:

ap-south-1 Route Table: Added 172.15.0.0/16 to route via the peering connection.
us-east-1 Route Table: Added 172.31.0.0/16 to route via the peering connection.

This let my EC2 instance in ap-south-1 talk to us-east-1 resources. To make us-east-1 accessible from my home network, I updated the EC2’s Tailscale route advertisement to include both VPCs:

tailscale up --advertise-routes=172.31.0.0/16,172.15.0.0/16 --accept-routes

Now my home lab could reach both AWS regions through the EC2 relay. Mind blown!

🔒 Locking It Down

Security’s a big deal, so I made sure to:

Tighten Security Groups: The EC2 instance only allows Tailscale traffic (UDP 41641, TCP 443) and internal VPC traffic.
Skip Public IPs: No NAT gateways or Elastic IPs here—everything’s private and cost-effective.
Use Tailscale ACLs: I set up access controls in the Tailscale admin console to limit which devices can access which CIDRs. Only my trusted devices get through.

✅ What It All Looks Like

Here’s the final network setup:

                            +-----------------------------+
                            |     Home Network (LAN)     |
                            |    CIDR: 192.168.0.0/24     |
                            |   Devices (Raspberry Pi,    |
                            |     Laptop, etc.)           |
                            +-------------+---------------+
                                          |
                                (Tailscale VPN Tunnel)
                                          |
                                          v
                  +----------------------------+
                  |     EC2 Relay Instance     |
                  |  Region: ap-south-1 (Mumbai)|
                  | Private IP: 172.31.x.x      |
                  +-------------+--------------+
                                |
     +--------------------------+---------------------------+
     |                                                      |
     v                                                      v
+------------------+                          +----------------------------+
| ap-south-1 VPC   |                          |  VPC Peering Connection     |
| CIDR: 172.31.0.0/16 |<--------------------->| us-east-1 VPC               |
| Internal Services |                         | CIDR: 172.15.0.0/16         |
| or Subnet A       |                         | Backend / Analytics         |
+------------------+                          +----------------------------+

It’s all private, encrypted, and surprisingly fast—no VPN appliances or public NAT nonsense.

🎯 Wrapping Up

Setting this up has completely transformed my dev workflow. I can now access AWS resources from my home lab just like they’re part of my local network. Tailscale makes hybrid networking super smooth, and VPC Peering keeps traffic between regions fast and private.

If you’re thinking about connecting your home lab to the cloud, I highly recommend giving this a shot—it’s secure, scalable, and honestly, kinda fun to build.

Got questions or cool tips of your own? Let’s chat in the comments or feel free to reach out. Happy networking! 🚀

Cover Photo by Growtika on Unsplash

Getting Started with Rust: A Beginner’s Guide to Rust Programming

Dhairya Shah — Fri, 28 Jun 2024 17:07:37 +0000

Introduction

Rust is a general-purpose programming language that emphasizes performance, type safety, and concurrency. It enforces memory safety, meaning that all references point to valid memory without a garbage collector.

Rust was created as a personal project by Graydon Hoare while working at Mozilla Research in 2006. Today, Rust is adopted by many companies, including Amazon, Discord, Dropbox, Google, and Microsoft.

According to Stack Overflow’s developer survey, 97% of the survey respondents have not used the Rust programming language. So, you will join the 3% who have worked with the Rust programming language.

Let’s begin our Rust journey.

Why Rust?

Before learning Rust, you may wonder why you should learn the Rust programming language when there are similar languages like C and C++.

Let’s explore why it has become a favored language among developers:

Performance: Rust is as fast as C and C++, making it ideal for system-level programming.
Memory Safety: Rust prevents null pointer dereferencing and buffer overflows through its ownership system.
Concurrency: Rust’s concurrency model ensures that data races are caught at compile-time.
Ecosystem and Tooling: Cargo, Rust’s package manager and build system, simplifies dependency management and project configuration.
Community: Rust has a vibrant and welcoming community, with great documentation and support.

Installation

Linux or MacOS Installation

To install the Rust programming language on your Linux or MacOS machine, run the following command:

curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh

After the installation finishes, run the following commands to verify if Rust is installed properly:

rustc --version
cargo --version

If you don’t have curl installed on your machine, run the following command:

sudo apt install curl

Windows Installation

To install the Rust programming language on a Windows system, follow these steps:

First, go to the Rust official page and download the installer for Windows.
After the installation finishes, run the following commands to check if Rust is installed properly:
```
rustc --version
cargo --version
```

Your First Rust Program: Hello World

Let’s write the classic “Hello, World!” program to get a feel of Rust’s syntax and structure.

Create a new Rust project:
```
cargo new hello_world
cd hello_world
```
Navigate to the src directory and open main.rs:
```
cd src
vim main.rs
```
Feel free to open the Rust project in your preferred IDE.

Edit main.rs to print “Hello, World!”:

fn main() {
    println!("Hello, World!");
}

Build and run the program:
```
cargo run
```
This step does the job of both compilation and running, so you don’t need to compile the program manually every time you run it.

Understanding the Code

fn main() { ... }: This defines the main function, which serves as the entry point of a Rust program.
println!: It is a macro in Rust used for printing to the console.

So, this was your first Rust program. How do you feel?

Conclusion

Rust combines the performance and control of low-level languages with modern programming paradigms, making it a powerful tool for developers. From its unique ownership model to its robust ecosystem, Rust offers a rich programming experience.

Here are a few important shell commands we have discussed:

Create a new project: cargo new project_name
Build a project: cargo build
Run a project: cargo run

So, this was it for this article. Stay tuned!

Happy coding in Rust!

How to set up your own proxy server in minutes?

Dhairya Shah — Sat, 27 Jan 2024 04:47:47 +0000

Today, most websites track your online activities by capturing essential information such as IP addresses, cookies, and geolocation. All this information starts associating with the user, and a unique user profile is created over time. This helps the trackers to track the user’s activities over the internet, which in the end results in privacy concerns.

Unlike third-party cookies, there is no straightforward way to opt out of this kind of tracking.

What is a Proxy Server?

1.1 Benefits of using a Proxy Server

So, how to make our proxy server?

2.1 Prerequisites

2.2 Create an Ubuntu Server

2.3 Configuring the Server

2.4 Setting up the proxy locally

2.5 Testing the proxy server

Conclusion

What is a Proxy Server?

A proxy server is an intermediate server that acts as a gateway between the user’s device and the internet. When a user makes a request for a resource, let’s say a website, the request is first sent to the proxy server. The proxy server then forwards the request to the website’s server on behalf of the user.

Benefits of using a Proxy Server

Privacy Protection: Proxy servers can be used to protect the user’s privacy. They are used to hide the user’s actual IP address from the websites they visit.
Improved Performance: Proxy servers can be used to cache the requests that are frequently accessed. This helps in faster response and reduces the bandwidth usage.
Optimal Performance: In a server having large traffic (requests), proxy servers can be used for load balancing. Requests from the users are distributed across multiple servers to provide optimal performance and prevent the single server from being overloaded by the huge traffic.
Enhanced Security: As we discussed earlier, the proxy server provides an additional layer of security by acting as the middleman between the user’s device and the internet. They can filter out the malicious content and block certain types of attacks.

Proxy servers can be operated at different OSI models, including the HTTP proxies, transport proxies (SOCKS proxies), or even the lower layers.

So, how to make our proxy server?

Prerequisites

Any cloud service provider account. (DigitalOcean Recommended)
One Ubuntu 20.04 or later server, with at least 512MB of RAM.

Create an Ubuntu Server

In this tutorial, I will be using DigitalOcean to host my VPS.

Create an account on DigitalOcean, if you haven’t done so yet.

Use my referral link to create an account on DigitalOcean to get $200 worth of credits for 60 days.

Now create a new project.

In the sidebar click New Project:

Enter a name, for example, “Proxy Server”.

Choose something in the “Tell us what it’s for” box, or you can’t create the project. Then click Create Project.

In the next page, click “Skip for now”

The project has now been created.

Now, click on Spin up a Droplet to create a VPS (Virtual Private Server).

This shows the interface for creating a new droplet.

Choose a region where you want your internet activity to be routed through the proxy.

To initiate the installation of Ubuntu on your Droplet, simply pick the Ubuntu option from the 'Choose an image' section.

Now, choose the droplet size. The default selection is the 'Premium Intel/AMD' CPUs, but for our current needs, we don't require that level of power. Instead, opt for the 'Regular' CPU option, which comes with a $4 per month plan. Note that in certain regions, the $4 per month plan may not be accessible, so in such cases, pick the most economical plan offered in that region.

Now go down below, and set up a strong root user password.

Finally, create the Droplet.

It may take some time to boot the server. Once the server starts running, copy the IPv4 address.

Now, we have successfully configured our server setup.

Configuring the Server

Open the terminal, and login to your Ubuntu server using openssh.

ssh root@YOUR_SERVER_IPV4

After you log into your Ubuntu server. Install openssh-server.

apt install openssh-server

Once you have finished installing, log out from the server.

exit

Setting up the proxy locally

On your local machine, open the terminal and run the following command,

ssh -D 2402 -N  -C root@YOUR_SERVER_IPV4

Now open the Firefox browser, and open the settings. In settings, search for the “Proxy”.

Now click on the “Settings”,

Choose, the “Manual Proxy Configuration”, and enter the details in the SOCKS Host input field as shown in the above image.

localhost | PORT: 2402

Now click on OK, and you have successfully configured the proxy.

Testing the proxy server

Before connecting to the proxy server:

After connecting to the proxy server:

Conclusion

So, this is how we can set up a proxy server on our own, and protect our privacy, and maintain anonymity online.

I hope this article, was helpful to you. Thanks for reading!

Follow me on X

Originally published on my blog

Cover Photo by Scott Rodgerson on Unsplash

How to build a REST API with Hono in 5 Minutes?

Dhairya Shah — Fri, 26 Jan 2024 10:51:03 +0000

Today, the REST APIs have become the backbone of modern applications, enabling the seamless connection between the front end and the back end. There are lots of technologies and methods available in the market to build a REST API. In this article, we are going to learn about the Hono which is a fast, simple, and lightweight web framework that runs on Edge.

If you are unfamiliar with the REST APIs, then let me share about them in brief.

What is a REST API?

Imagine you’re at a restaurant, and you want to order some food. You don’t go into the kitchen and cook yourself; instead, you ask the waiter to bring you the dishes you want.

Similarly, in the world of computer networks, REST (Representational State Transfer) is like a waiter, and APIs (Application Programming Interfaces) are like a menu. So, REST API is a set of rules that lets different software applications communicate with each over across the internet (or network).

Here is a popular meme about REST APIs,

As always, our first step is to create an application. In our case, it's an Hono web application, to create run the following command:

Let’s Begin with Hono 🔥

npm create hono@latest hono-tutorial

Now, you will see a bunch of template choices you would like to use. Let’s select Cloudflare Workers, for this tutorial:

? Which template do you want to use?
    aws-lambda
    bun
    cloudflare-pages
❯   cloudflare-workers
    deno
    fastly
    lagon
    nextjs
    nodejs
    vercel

The Hono application is created inside hono-tutorial folder. So open the folder in the terminal and install the required dependencies.

cd hono-tutorial
npm i

After the installation, you can open the project in your favourite IDE.

Creating the API Routes

Open src/index.ts, and there will be a boilerplate code.

import { Hono } from 'hono'

const app = new Hono()

app.get('/', (c) => {
  return c.text('Hello Hono!')
})

export default app

In Hono, a route can be defined in the following manner:

Create your first API route:

Inside, src/index.ts write the following code:

app.get("/name", (c) => {
  return c.json({
    name: "My name is Dhairya!",
  });
});

Now, run the Hono application by running the following command in the terminal.

npm run dev

Open the application in the Postman / Insomnia. In this tutorial, I will be using Insomnia.

{"name":"My name is Dhairya!"}

Tada! You've successfully developed your REST API using Hono; wasn't that simple?

Creating the POST Route:

Similar to the GET method, we can create a POST method API route following the same manner. Here’s how to do that:

app.post("/sports", async (c) => {
  const body = await c.req.parseBody();
  const sports = body["sports"];
  return c.json({
    country: `I love ${sports}!`,
  })
})

In this code, body["sports"] returns the key value of “sports” passed in the form body.

Here’s the curl request for the /sports API route:

curl --request POST \
  --url http://localhost:8787/sports \
  --header 'Content-Type: application/x-www-form-urlencoded' \
  --data sports=Cricket

After calling this api route, the output will look like following:

{
    "country": "I love Cricket!"
}

Similarly, you can create API routes for the different methods i.e. PUT, PATCH, DELETE, OPTIONS.

Conclusion:

Congratulations! You've successfully learned how to build a REST API using Hono in just a few minutes. Here's a quick recap of the key steps:

Complete Source Code:

app.get("/", (c) => {
  return c.text("Hello Hono!");
});

app.get("/name", (c) => {
  return c.json({
    name: "My name is Dhairya!",
  });
});

app.post("/sports", async (c) => {
  const body = await c.req.parseBody();
  const sports = body["sports"];
  return c.json({
    country: `I love ${sports}!`,
  });
});

With these simple steps, you've successfully built a REST API with Hono. Feel free to explore additional features and customization options offered by Hono for more advanced use cases. Happy coding!

For your further reference, you can check out official Hono Docs.

Thanks for reading! Follow me on X

How to create a confetti effect in HTML?

Dhairya Shah — Fri, 16 Jun 2023 16:42:18 +0000

Adding a confetti effect to a website can bring an element of celebration and joy to various interactions. This article will explore how to create a confetti effect in HTML using the famous library, Canvas Confetti, which allows you to generate colorful and animated confetti particles on a web page.

There are lots of ways you can add confetti to your website. But, in this article, I will share a super simple method to add it to your website.

Setting up HTML

Inside your HTML file, we need to link a javascript file to it.

<script type="module" src="confetti.js"></script>

Note: Please ensure that you include type="module" in the script tag; otherwise, the JavaScript code may not function as intended.

<button id="btn">Click me</button>

I have created a button to pop confetti upon clicking the button.

Creating confetti

We’ll be using Canvas Confetti using Skypack.

Inside your javascript file, add the following code to import the required package to our webpage.

import confetti from 'https://cdn.skypack.dev/canvas-confetti';

Once finished importing, create a function to initialize the confetti from the imported package,

function makeConfetti(){
    confetti()
}

Now after creating the function we’ll call it,

const btn = document.getElementById("btn")
btn.addEventListener("click", makeConfetti)

Tada! You have successfully popped confetti in HTML in just two lines of code.

Source code: https://github.com/dhairyathedev/confetti-tutorial

I hope you have learned something new from this article. Thanks a lot for reading till the end, have a great day!

Credits: Banner Image - Photo by Damiano Lingauri on Unsplash

Introducing QRInked - Create and Manage QR Codes

Dhairya Shah — Mon, 22 May 2023 16:22:41 +0000

What I built

I created a web-based application called QRInked that allows users to create and manage QR codes.

Category Submission:

The best category matches my project is Wacky Wildcards

App Link

Here's link to my submission - https://qrinked.dhairyashah.dev/

Screenshots

Description

QRInked is a simple and easy-to-use tool that helps you create and manage QR codes. With QRInked, you can create QR codes for any links, images and many more.

QRInked allows you to create following types of QRs for you and your business:

Website
WIFI
Call
SMS
YouTube
Instagram
Whatsapp
and many more coming...

Created QR codes can be saved online and can be accessed from any device. All QRs are synced on the cloud.

Currently, QR codes can be downloaded in two formats JPG and PNG.

It is fun to create QR codes here, why not give it a try?

Link to Source Code

Source Code link to GitHub - https://github.com/dhairyathedev/qrinked/

Permissive License

This project is under MIT License

Background (What made you decide to build this particular app? What inspired you?)

With the rapid growth of online startups and businesses, an effective approach to capturing users' attention is through the utilization of QR codes. By simply capturing an image of a QR code, users can be directed to the desired destination. This inspired me to conceive an online application that enables the creation and management of QR codes, facilitating businesses in running successful marketing campaigns and attracting users. Hence introducing QRInked, the solution to this challenge.

How I built it (How did you utilize GitHub Actions or GitHub Codespaces? Did you learn something new along the way? Pick up a new skill?)

QRInked was developed by leveraging Next.js in conjunction with GitHub Codespaces and GitHub Actions.

Here's my tech-stack:

Next.js
Supabase
Tailwind CSS
GitHub
Figma
shadcn/ui

The utilization of GitHub Codespaces enabled me to efficiently and effortlessly create my project by providing a virtual development environment.

Additionally, GitHub Actions played a crucial role in automating various tasks for me.

Additional Resources/Info

We welcome any suggestions or updates you may have for QRInked. Please feel free to contribute as it is an entirely open-source project.

What is a slug and how to create one?

Dhairya Shah — Mon, 08 May 2023 14:13:28 +0000

A slug is a piece of text that is attached to the end of a URL (after the backslash "/") that is unique and locates the specific page of a website.

The use of a slug can provide dual benefits for a website. Firstly, it can improve the website's SEO performance. Secondly, it helps visitors to confirm that they have arrived at the correct website they were searching for.

Mainly, slugs can be classified into two major categories:

Randomly generated slug
and a meaningful slug

Check out the following example showing the difference between and randomly generated slug and a meaningful slug:

https://example.com/5p2pd1mj6f # Random

https://example.com/how-to-feed-a-dog # Meaningful

Seeing the above example, you can clearly tell the difference that the second example (from the top) is much better to understand than the first one.

As mentioned earlier, the slugs play a very important role in the SEO score of a website; the meaningful slug provides a good impression to the crawlers and helps rank better on SERP (Search Engine Result Page). When compared to meaningful slugs, the usage of random slugs can create a negative impression on crawlers. Consequently, such slugs are considered spam or may not receive a ranking on the search engine results page (SERP).

Therefore, it’s important to know why slugs are relevant and how to optimize them.

Why is a good URL slug important for SEO?

Have you ever tried to copy a URL with a long stream of a string of randomly generated strings containing symbols, letters, and numbers?

Not only is it irritating to look at in your search bar, but it looks untrustworthy and might prevent you from sharing or linking to that URL.

Now you can imagine the SERP having the same stream of nonsense.

For search engine algorithms to accurately comprehend the data they encounter, it is essential to have unambiguous, streamlined, and optimized content.

By incorporating a concise, lucid, and well-structured URL slug, you can facilitate better comprehension of your web pages by both visitors and search engines. Moreover, your URL slug can also serve as an unexplored source of potential for keyword ranking.

How to create the best URL slugs

Now that we understand the importance of a good URL slug, let's take a look at the best practices to be kept in mind for slug creation.

The following are the best practices for the best URL slug creation:

Keep your slugs short
Use the "-" symbol
Match the slugs to headlines
Use lowercase letters
Avoid adding dates/years to the slug

Manually creating slugs while keeping all these best practices in mind can be a bit frustrating and time-consuming job.

As a result, the following are the few tools that help to create slugs:

If you are a terminal lover, there's also a CLI tool for generating slugs from a string:

Prerequisite - (Node.js should have been installed on your machine)

npx slugdog

Read the docs on NPM.js - http://npmjs.com/slugdog

I use this CLI tool to create slugs for my blog posts.

And you are good to go...

Conclusion

In conclusion, incorporating a well-optimized and meaningful URL slug can bring numerous benefits to a website, including improved SEO performance, better user experience, and the potential for higher keyword rankings. I

t is crucial to avoid using randomly generated slugs, which can have negative consequences on search engine rankings and may be perceived as spam.

By following the best practices for slug creation, such as keeping slugs short, using the "-" symbol, matching slugs to headlines, and avoiding adding dates/years to the slug, website owners can create better URL structures for their pages. Additionally, there are several online tools available to generate slugs automatically, making the process less time-consuming and more efficient.

Cover Photo by Nathana Rebouças on Unsplash

The Best Ways to Check if a Value is a Number in JavaScript

Dhairya Shah — Tue, 28 Mar 2023 08:11:21 +0000

JavaScript developers often need to check whether a value is a number or not. There are several methods in JavaScript that can help determine if a variable is a number or not.

In this article, we will discuss the best ways to check if a value is a number in JavaScript, including the isNaN() method, the typeof operator, and the Number.isInteger() method. By the end of this article, you will have a clear understanding of how to identify numbers in JavaScript.

1. isNaN()

The first method, we are going to use is isNaN().

The method isNaN() stands for "is-not-a-number". If a number is passed as a parameter to it, the method will return false.

Here are a few examples with comments describing the output of the isNaN() method.

const x = 4;
const string = "Hello World";

isNaN(x) // false
isNaN(string) // true

isNaN({}) // true
isNaN(Math.PI) // false

2. "typeof" Operator

Another way to determine if the input is a number is to use the typeof operator.

It returns number string when you use it on a number.

For example,

const x = 4;

typeof x; // 'number'

typeof Math.PI; // 'number'

typeof "John" //  'string'

So, you can apply a conditional check to this,

const x = 4;
if(typeof x === 'number'){
    // Logic goes here
}else{
    // X is not a number
}

3. Number.isInteger()

The Number.isInteger() method returns true if an integer value is passed as a parameter.

Otherwise, it returns false

Please note: that Number.isInteger() is only applicable for integer data types. It will accurately return true for 4 but will return false for non-integer values like 3.14. You should only use this method if you specifically need to validate integer data types.

Number.isInteger(4); // true

const x = 20;
Number.isInteger(x) // true

Conclusion

In conclusion, JavaScript offers several ways to determine if a variable is a number or not. The isNaN() method checks if a value is not a number, the typeof operator can be used to check if a value is a number, and the Number.isInteger() method can be used to validate integer data types specific. It is important to choose the appropriate method based on the specific needs of the program.

How to get the current date time of other countries in JavaScript

Dhairya Shah — Mon, 06 Mar 2023 12:43:52 +0000

In our interconnected world, being aware of the date and time in other countries is crucial. Luckily, Javascript offers a simple solution for accessing this information. In this article, we'll demonstrate how to use Javascript to obtain the current date and time in other countries.

In this article, I will be using the USA as an example. So, let's get started!

Step: 1 Create a new date object

The first step is to create a new Date Object. This new date object will represent the current date and time of your local timezone.

const d = new Date();

Step: 2 Get local time and offset

Next, we need to get the local time and offset of the current date and time in the local timezone.

What is the local time in Javascript?

The local time is the number of milliseconds since 1st January 1970 (UTC). The offset is the difference between the local time and UTC time.

const localTime = d.getTime();
const localOffset = d.getTimezoneOffset() * 60000;

Step 3: Calculate the UTC time

Now, we need to calculate the UTC time by adding the local time and the time offset.

const utc = localTime + localOffset;

Step: 4 Calculate the time for the country

Now, we can calculate the time for the country by adding the UTC time and the offset together.

const offset = -5; // UTC of USA Eastern Time Zone is -05.00
const usa = utc + (3600000 * offset);

Note: Make sure to change the country offset as per your requirement.

Step: 5 Get the current date and time for the USA

Finally, we can use the new Date() and toLocaleString() methods to get the current date and time for the USA in a human-readable format.

const usaTimeNow = new Date(usa).toLocaleString();

Here's the complete code to get the current date and time of any country in Javascript:

const d = new Date();
const localTime = d.getTime();
const localOffset = d.getTimezoneOffset() * 60000;
const utc = localTime + localOffset;
const offset = -5; // UTC of USA Eastern Time Zone is -05.00
const usa = utc + (3600000 * offset);
const usaTimeNow = new Date(usa).toLocaleString();
console.log(usaTimeNow);

Conclusion

To sum up, you can easily obtain the date and time of any country by solely utilizing Javascript, without relying on external software or APIs.

I hope this article was helpful to you! Thank you for reading.

Cover Image Source: Unsplash

How to Hide JavaScript Code in View Source

Dhairya Shah — Sat, 04 Mar 2023 11:56:58 +0000

In practice, it is impossible to hide the Javascript code from the source code, because the Javascript code is downloaded to the client browser in clear text and is executed completed by the browser.

As a result in this article, I will share with you a few methods to hinder and make it difficult to read the javascript source code:

Obfuscate the javascript code

Obfuscation is a technique that changes the code structure to make it harder to understand. For example, variable names can be replaced with random characters or strings. This makes the code harder to read and understand, as said earlier it doesn't provide complete protection.

There are tools available online to obfuscate the javascript code, such as JavaScript Obfuscator Tool.

Server Side Rendering

To maintain the security and privacy of sensitive code, it is important to execute computations on the server side rather than the client side. This approach is commonly used in various web applications, particularly those that handle confidential data such as online banking applications. By performing the computations on the server side, the sensitive code is kept hidden from the client side, thus reducing the risk of unauthorized access, tampering, or theft.

In executing computations on the server side, the web application works by sending a request from the client side to the server side, which then processes the request and sends the result back to the client side. This approach ensures that the sensitive code is never exposed to the client side, which may be vulnerable to hacking or other security breaches.

Moreover, the server-side processing of computations offers several benefits, such as faster performance, enhanced scalability, and efficient use of resources. Since the server side can handle multiple requests simultaneously, it can provide faster response times and a better user experience. Additionally, the server-side can efficiently manage the computational resources, ensuring that the application can handle large volumes of data and users without compromising performance.

Taking note of all these benefits, developers need to consider the server-side approach when building web applications that handle confidential data.

Javascript minification

Minification is a process that involves optimizing the code by removing unnecessary characters such as white spaces, and comments, and shortening variable names. It is a technique that is commonly used to reduce the amount of data that needs to be sent over the internet, which in turn speeds up the loading time of web pages.

During the minification process, the code is stripped of all extraneous characters to make it as compact as possible. This is achieved by removing all spaces, tabs, and line breaks from the code. Additionally, all comments are removed from the code, as well as any code that is not necessary for the functioning of the program.

Although minification makes the code smaller and harder to read, it is still possible to understand the code if someone is determined to do so. However, the primary objective of minification is to optimize the code and reduce the amount of data that needs to be transmitted. This, in turn, helps to speed up the loading time of web pages, resulting in a better user experience for website visitors.

Disabling the right mouse click

One method to prevent users from accessing the context menu, which includes options such as viewing source, inspecting elements, and saving images, is by disabling right-clicking through event listeners or CSS properties. However, this approach is not entirely effective in hiding code, as users can still access the source code using keyboard shortcuts or browser tools.

Here's how to disable the right mouse click in javascript,

document.addEventListener('contextmenu', event => event.preventDefault());

Note: You should not disable the right click as it makes the website less accessible resulting bad User Experience.

Conclusion

In conclusion, while it is impossible to completely hide Javascript code from the source code, several methods can be used to make it more difficult to read and understand. Obfuscation, server-side rendering, Javascript minification, and disabling the right mouse click are some of the techniques that can be used to protect sensitive code.

However, it is important to note that these methods are not foolproof and determined individuals can still access the code if they are motivated enough. Therefore, developers must implement multiple layers of security to protect their code and ensure the safety of their web applications.

5 Steps to Become a React Pro in 2023!

Dhairya Shah — Sun, 08 Jan 2023 06:40:12 +0000

It's 2023, and the demand for skilled front-end developers is higher than ever. One of the most sought-after skills in the industry is proficiency in React, the popular JavaScript library for building user interfaces.

If you want to join the ranks of the React professionals and take your career to the next level, it's time to start learning. But where do you begin? Don't worry, I've got you covered. In this article, I will provide a roadmap to follow to become proficient in React in 2023.

From learning the basics of JavaScript and HTML/CSS to building your first React app and delving into advanced concepts, this roadmap covers all the essential steps to becoming a proficient React developer. So let's get started!

Step 1: Learn the basics of Javascript

Before you can begin learning React, you must first master the JavaScript programming language. Variables, data types, loops, and functions are examples of such concepts. You can skip this step if you are already familiar with JavaScript. Otherwise, there are numerous online resources to get you started, such as FreeCodeCamp or MDN Web Docs.

Step 2: Learn the basics of HTML and CSS

React is used to build user interfaces, so it is important to have a basic understanding of HTML and CSS, which are used to structure and style web pages. If you are already familiar with these technologies, you can skip this step. Otherwise, there are many resources available online to help you get started, such as FreeCodeCamp or MDN Web Docs.

Step 3: Learn the fundamentals of the React

Once you have a basic understanding of JavaScript and HTML/CSS, you are ready to start learning React. A good starting point would be reading the official React documentation, which provides a thorough overview of React and its core concepts.

While the official React documentation is a great resource, I find that online tutorials and courses offer a more interactive and hands-on approach to learning the library, making them a better choice for those who prefer a more engaging learning experience. Here’s the list of some of the best platforms to learn React in 2023:

Scrimba.com
Udemy
Youtube
FreeCodeCamp
and as always Youtube

Step 4: Build your first React application

Now that you have learned the fundamentals of React, it is time to put your knowledge into practice by building your first React app. Start with a simple project, such as a:

To-do list
Weather app
or a tic-tac-toe game

This will help you build the confidence and will boost your motivation towards learning and practicing React. Believe, me this is the most important step while learning React.

Step 5: Learn about React advance concepts

As you continue to learn React, you should try learning some advance concepts like state management, performance optimization, deployment and testing.

Once, you get the grip on these concepts you can move towards Next.js.

What is Next.js

In a nutshell, Next.js is a JavaScript framework that allows you to create superfast and extremely user-friendly static websites as well as React-based web applications.

Conclusion

In conclusion, learning React in 2023 can be a rewarding and valuable investment for your career as a front-end developer. By following the roadmap outlined in this article and consistently putting in the time and effort to practice and build projects, you can become proficient in this powerful library and use it to build rich and interactive user interfaces. Don't get discouraged if you struggle at first, as learning any new technology takes time and practice. Keep at it and you will eventually become a React master.

Orginally posted on my blog