DEV Community: Mohammad Shahzeb Alam

Participate in These 15 Open-Source Events During Hacktoberfest and Win Exciting Swag 🎁

Mohammad Shahzeb Alam — Thu, 09 Oct 2025 10:43:58 +0000

What’s Hacktoberfest

It’s a month long Open-Source Event Organized by DigitalOcean where you can contribute to Open-Source throughout the October month whether you are Seasoned Contributor or Regular Contributor you can come and Contribute to Open-Source Whether you are a Programmer or not a Programmer you can Contribute to many cool Projects out There.

Here’s How you can Participate

Register on Hactoberfest Website
Find Repos With “Hacktoberfest” tag laballed
Make 6 Valid Contributions before 31st October
There’s a Website for good-first-issue where you can find begginer’s level issues to contribute to

Rewards:

Get 6 PR Merged the first 10,000 Contributors will get a Hacktoberfest T-shirt
After 6 PR Merged a Tree will be planted on your Name

It’s a great time to start your Open-Source journey in these Month Who Knows you will become a long-term Contributor

1. Hyperswitch Hacktoberfest

HyperSwitch is an open-source payment switch by Juspay that lets developers connect multiple payment gateways through one simple API. It helps make online payments faster, smarter, and more reliable. A perfect Hacktoberfest project if you’re curious about fintech and backend systems.

How to Participate

Go to thier Hacktoberfest page
Find the options to Contribute to
Go to github and find “Hacktoberfest” tag Laballed issues to Contribute

Rewards:

1 PR Merged Will get a T-shirt
3+ PR Merged Will get T-shirt and Hoodie

Contribute to HyperSwitch this Hacktoberfest and dive into the world of payments! It’s a great way to learn how modern fintech systems connect and power global transactions.

2. dodopayments Hacktoberfest

Dodo Payments helps businesses accept payments worldwide with one simple integration. It’s open, developer-friendly, and perfect for anyone who wants to explore fintech projects this Hacktoberfest.

How to Participate

Go to their Hacktoberfest page
Pick the Repo according to your Skills in the page
Go to github and find “Hacktoberfest” tag Laballed issues to Contribute

Rewards:

Major Contributors will recieve a swag pack T-shirt, Caps & Stickers
you will also get to mention in their Hall of Fame and get shout-outs across their Socials

Join Dodo Payments this Hacktoberfest to explore how global payments work. Contribute to docs, SDKs, or integrations and learn how fintech systems come together behind the scenes!

3. Appwrite Hacktoberfest Hackathon

Appwrite is hosting a fun Hacktoberfest-themed hackathon this October You can build anything a web app, mobile app, game, or something totally new. It’s all about fresh ideas, learning, and creating cool projects from scratch with Appwrite.

How to Participate

Register with your github account
Teams can have 1 member only
Build and deploy a project from scratch using Appwrite Cloud
Add project submission to these site

Rewards:

Top 5 Projects will recieve a Appwrite Swag kit
Swag kit includes Customized hoodie, T-shirt, Mouse pad, and Stickers

Join the Appwrite Hacktoberfest Hackathon and build something from scratch a web app, mobile app, or even a game. It’s all about fresh ideas, learning, and having fun creating with Appwrite!

4. CopilotKit Hacktoberfest

CopilotKit lets you easily add your own AI copilot to any app — like giving your users a built-in ChatGPT that understands your product. It’s open source, beginner-friendly, and a great project to explore this Hacktoberfest if you love building with AI.

How to Participate

Go t their Hactoberfest page
Project Setup - go to CONTRIBUTION.md to get started
Pick a Issue in github with “Hacktoberfest” tag Laballed
Open a PR after Completing the task
Post on X with @CopilotKit + #CopilotKitHacktoberfest - top liked Projects win

Rewards:

Every Merged PR will get a CopilotKit Hacktoberfest Certificate
Top 5 Projects by Twitter likes will win Copilotkit Swag

This Swag is from 2024 Hacktoberfest. Build your own AI copilot with CopilotKit this Hacktoberfest! It’s a fun way to explore AI integrations and create something truly interactive. Ready to start building?

5. Cloudinary Hacktoberfest

Cloudinary makes it super easy to upload, manage, and optimize images and videos for the web. They’re joining Hacktoberfest to welcome contributors to improve docs, demos, and SDKs - perfect if you love working with media and web projects.

How to Participate

Go to their Hacktoberfest page
There a lots of Repos choose the repos according to yours
Go to the repos and read the CONTRIBUTING guide
Pick a Issue in github with “Hacktoberfest” tag Laballed
Make a meaningful contributions don’t spam

Rewards:

30 swag kits for contributors based on first-come, first-served basis
Swag kit includes -
1 Cloudinary Hacktoberfest T-shirt
2 Cloudinary Hacktoberfest Stickers, 3 Cloudinary Stickers
1 Cloudinary Unicorn

Join Cloudinary this Hacktoberfest to explore how images and videos power the web. It’s a great chance to improve docs, demos, and tools while learning about media optimization!

6. Goose Hacktoberfest

Goose is an open-source AI agent that runs locally on your machine. It can edit files, run commands, integrate with APIs - basically automating parts of your dev workflow. Ideal for anyone curious about AI agents and wants to build cool tooling during Hacktoberfest.

How to Participate

Go to their Hacktoberfest Project Hub page
Pick the one of the issue to contribute to
You can only work on one issue at a time
You can directly assign the issue by yourself just comment .take in the issue
You can check leaderboard in these leaderboard page

Rewards:

Rewards on the basis of Points System
The More Points you have the more swag you are going to take home
Top 5 - Will get $100 gift card of their goose swag shop and $100 of LLM credits!
Top 6-10 - Will get $50 gift card of their goose swag shop and $50 of LLM credits!
Top 11-20: $25 of LLM credits!

Try out Goose this Hacktoberfest! It’s all about building local AI agents that can automate your dev tasks. Fun, hands-on, and perfect for anyone curious about AI + coding.

7. Flexprice Hacktoberfest

Flexprice is an open-source billing/usage-tracking tool made for AI and API-based teams. It helps you do things like charge by usage, give promo credits, control feature access — without building your own billing system. Great for anyone who hates spending too much time wrangling invoicing or pricing logic.

How to Participate

Join their Slack community and go to Hacktoberfest announcement page
Go to the repo and read the CONTRIBUTING guide
Pick the issue in github with with “Hacktoberfest” tag Laballed
Comment on issue “I’m on it”
Open a PR that passes checks & follows the template

Rewards:

Top 5 Contributors will get flexprice swag pack
Shoutout on our X, LinkedIn & Slack community

Join Flexprice this Hacktoberfest to explore how usage-based billing really works. It’s a great pick if you’re into APIs, SaaS, or building cool backend tools. Ready to contribute?

8. Robo.js Hacktoberfest

Robo.js is a framework for building Discord Bots, Discord Activities, and Web Apps—with batteries included. It streamlines your workflow via plugins, sensible defaults, and a smooth DX so you can ship faster.How to Participate

How to Participate

Go to Their announcement page
You can contribute by making Plugins, Video Content, Feature for Framework
Pick the issue in github with with “Hacktoberfest” tag Laballed
They have points system the more point you earn the swag will be yours

Rewards:

Top 3 contributors will recieve Robo.js Hacktoberfest 2025 T‑Shirt
For every meaningful contributions will get Free Discord Nitro
Alternative for top contributors will recieve $25 USD
The more number of contributors the more rewards will be stretch

This Swag is from 2023 Hacktoberfest Get creative with Robo.js this Hacktoberfest! Build smart automations, try out new ideas, and have fun bringing little coding bots to life. Ready to roll?

9. iTop Hacktoberfest

iTop is an open-source tool that helps teams manage IT assets and support tickets. It’s great for anyone curious about IT systems — plus, there are beginner-friendly doc and translation issues for Hacktoberfest!

How to Participate

This is Their official announcement page
The link of their full list of repos
Choose the project you’d like to contribute for
Create a Pull Request of the issue

Rewards:

iTop Hacktoberfest stickers
iTop insulated bottle after reaching 3 valid PRs
Combodo offers voucher for extensions for best contributor with 6 accepted PRs

This Hacktoberfest, give iTop a try! It’s a great way to explore how IT teams actually manage their systems and you’ll pick up some real-world skills along the way. Ready to jump in?

10. Ballerina Hacktoberfest

Ballerina is an open-source language for building cloud apps and APIs. It’s easy to learn and fun to explore during Hacktoberfest.

How to Participate

This is Their official announcement page
You can contribute both code & non-code contributions
Explore and pick the issues on their github page
Submit a PR on the issue you are working on
For non-code contributions publish your work & submit the URL here

Rewards:

Top Contributors Will recieve Amazon voucher according to credits you earn
A Swag pack for top contributors
Free vouchers for WSO2 & Certifications
USD $1000 worth credits for WSO2

Build something cool with Ballerina this Hacktoberfest! It’s simple to pick up and a fun way to explore cloud and API development. Ready to give it a shot?

11 Lamatic.ai Hacktoberfest

Lamatic.ai helps you build AI agents that can automate tasks and connect with your tools. It’s open-source and a fun pick if you want to tinker with AI projects this Hacktoberfest.

How to Participate

Make 4 valid PRs to any of the three repositories.
PRs must be valid and follow project guidelines.
Add hacktoberfest tag to PR title or description.
This is their official announcement page

Rewards:

Lamatic swag,T-shirt, stickers for active contributors
Top contributors will be featured on our Contributors Hall of Fame
Community spotlight for outstanding contributions

Try out Lamatic.ai this Hacktoberfest! It’s a fun way to experiment with AI agents and automation while making real open-source contributions. Ready to build something smart?

12. ServiceNow Hacktoberfest

ServiceNow is a platform that helps companies manage workflows — from IT support to HR tasks — all in one place. It’s a good project to explore if you’re into automation and enterprise tools.

How to Participate

You need to complete 6 PRs of main “Hacktoberfest” event
You need to Post a comment on this blog post detailing your contributions and sharing your experience
You will need a ServiceNow community account to comment register here

Rewards:

Contributors will recieve ServiceNow merch store codes. You can pick CreatorCon T-shirts & Other miscellaneous ServiceNow merch
Contributors will recieve a Community Badge

This Swag is from 2024. Join ServiceNow this Hacktoberfest to explore how automation powers real-world workflows. It’s a great way to learn, build, and contribute to something that helps teams work smarter!

13. QuestDB Hacktoberfest

QuestDB is an open-source database built for speed — perfect for handling real-time data and analytics. Great pick if you’re into performance, data, or backend projects this Hacktoberfest.

How to Participate

Contribute to open issues at one of the three participating repositories:
QuestDB Core
Web Console
Documentation
Pick the issue in github with with “Hacktoberfest” tag Laballed

Rewards:

T-shirts and Stickers for every contributor successfully contributed

Dive into QuestDB this Hacktoberfest! It’s perfect if you love speed, data, and building tools that handle real-time information. Ready to contribute?

14 devICT Hacktoberfest

devICT is a friendly developer community that runs open-source projects, meetups, and events. It’s a great place to learn, contribute, and connect with other devs during Hacktoberfest.

How to Participate

You need to make two pull requests to qualifying Wichita projects
Projects include devICT, Groover Labs, Lake Afton Public Observatory, MakeICT
Read their CONTRIBUTING guide
Pick the issue in github with with “Hacktoberfest” tag Laballed

Rewards:

Stickers for every contributors

15. LambdaTest Hacktoberfest

LambdaTest is a cloud platform that lets you test websites and apps across different browsers and devices. It’s a great pick for Hacktoberfest if you’re into QA, automation, or web development.

How to Participate

You need Have 3+ merged PRs into a LambdaTest project
You can start contributing by fixing bugs, improving documentation, or adding features.
Pick the issue in github with with “Hacktoberfest” tag Laballed
You need to submit your PRs

Rewards:

After 3 Contributions – Amazon Vouchers (up to $10) and a LambdaTest License (90 days).
After 5 Contributions or More – Amazon Vouchers (up to $20) and a LambdaTest License (90 days).

What’s Next ?

I have curated these 15 amazing open-source events you can contribute thus october!

Now it’s time to get started. Pick an event, dive in, and let’s make this Hacktober one to remember! 🎉

Which Open-source events you are most excited about?

I’d love to hear what you’re planning to dive into—drop a comment below and let me know!👇

Thanks For Reading These Article ❤️ and Also Share Your Thoughts in The Comments ☺️

Top Ubuntu Terminal Commands You Should Know

Mohammad Shahzeb Alam — Fri, 29 Aug 2025 19:44:09 +0000

Introduction

The Ubuntu Terminal make use of a Shell Program to Interpret and Execute Commands. Bash(Bourne Again Shell) is the Default and Most Commonly Used Shell in Ubuntu. If you Just Started Using Linux Ubuntu the Terminal Might Look Scary at First But It’s Not Scary Its The Best Thing In the Ubuntu.So Ubuntu Terminal gives Full Control of the System Helps you Work Faster.

Most Commonly Used Commands

There are Lots Commands In Ubuntu Terminal but We Will Discover the Most Commoonly Used Commands

pwd - Shows the current directory you are in

ls - List files and Folders in your directory

cd - Move between directories

mkdir - Make a new folder

touch – Create a new file

cp – Copy files or directories

mv – Move or rename files

rm – Delete files

sudo – Run commands as an admin

df -h – Check disk space

top – See running processes

clear - It will clear the terminal
exit - Close the terminal session

So, Learning Basics Commands Make you more Productive

Thanks For Reading These Article ❤️ and Also Share Your Thoughts in The Comments ☺️

Simple Guide to Setting Up Git and GitHub

Mohammad Shahzeb Alam — Wed, 27 Aug 2025 20:39:35 +0000

Introduction

Git is a Version Control System. It is a Tool that keep Track of your Code if you Changes Anything Git Will Recognise it Immediately and Change it Accordingly.

Github is a Online Hosting Service of your Git Repo. In Simple Word its a Cloud For Developers like you Store your Data in Cloud as Same Github Does for Us to Keep Track of Our Code and Collaborate With Others its Easy using Github.

Installation

If you are Using Windows

Go to Site git-scm.com
Download According to your OS
After Downloading Install Git
After Completing Installation Open Command Prompt In your System and Paste These Command

git --version

If you See a Version, Then Git Is Installed Successfully ✅

If you are Using MacOS or Linux Then Follow These

Open Terminal In your System
Then Copy these Commands and Paste it in your Terminal and Run

sudo apt update
sudo apt install git

After Installation Completed then Paste These Command

git --version

If you See a Version, Then Git Is Installed Successfully ✅

Making A Github Account

Go to These Site github.com
Now Sign Up Using your Details
Now Setup Everthing In Github

Your Github Account is Ready to use Now

Setting Up Git

Open your Terminal again
Now Configure your Git With Github Account

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

Creating a First Repo

Open github.com
Now go to The Repositories Section
Click New Repo
Add Name of Repository

Click On Create Repository
Now It Will Show Like These

Now Open your Code Editor and Copy Paste These Commands

git init
git add .
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/your_github_username/Project.git
git push -u origin main

Pro Tip Always Use add . It Will add All Files of your Project

Congrats 🎉 now your project is live on GitHub!

Common Commands of Git

git status - Check changes
git log - See commit history
git pull - Get latest updates
git push - Upload changes

Git & Github Is The Main Foundation of Open Source Collabaration

Thanks For Reading These Article ❤️ and Also Share Your Thoughts in The Comments ☺️

Deploy Your Web Application on Vercel Quickly

Mohammad Shahzeb Alam — Tue, 26 Aug 2025 19:43:19 +0000

🚀 Deploy Your Web Application on Vercel Quickly

If you’ve just built your first project with React, Next.js, or even plain HTML/CSS/JS, the next exciting step is getting it live on the internet. That’s where Vercel comes in. It’s one of the easiest and fastest platforms to deploy web apps no complicated setup, no extra servers, and free hosting for hobby projects.

Step 1

Go to vercel.com
Create a Account On Vercel
Sign Up With your Github Account and Intergrate With it

Step 2

Push your Code to The Github If you Have’nt
If you Have’nt Pushed the Code to Github Then Copy These Commands and Push your Project

git init
git add .
git commit -m "Initial commit"
git branch -M main
git remote add origin https://github.com/your-username/project-name.git
git push -u origin main

It Will Show you Like These In your Github Repo According to your Project

Step 3

Now Go to The vercel.com Website
Go to your Dashboard
on Vercel Dashboard, Click New Project
Now Choose your Github Repo
Vercel Will Auto-Detect your FrameWork you have Used in your Project
Now Click On Deploy

Step 4

Within a Seconds, Verel Will Deploy your Project
You will get a URL of your App like These
You can Also Choose your own Custom Domain if you Want

https://your-app.vercel.app

🎉 Congratulations! Your project is now live.

Why Vercel ▲

Free Hosting With SSL
Automatic Deployement From Github
Perfect For Frontend Apps, React, Next.JS

✅ And that’s it you’ve deployed your app on Vercel in just a few clicks

Thanks For Reading My Article ❤️ and Also Share Your Thoughts in The Comments ☺️

Setting Up a React Project with Vite Simplified ⚛︎

Mohammad Shahzeb Alam — Mon, 25 Aug 2025 19:03:35 +0000

Introduction

Vite is a Frontend Tool. It gives you a Pre ready Structured Folder and Files with all Dependencies Installed. Why Most of The Developers Prefers it Over CRA(Create React App) Cause It Gives Structured Folder Within a Seconds You Don’t Need to Manually Create Folders and Files and Install all The Dependencies and Also Don’t Have to Integrate The Packages of React And Babel .

Benefits of Using Vite

Lighting Fast Dev Server
Minimal Configuration
Moder Build System
Smaller & cleaner project structure

Prerequisites

Node.js Installed
Basic Understanding of React
Code Editor

Now Setting Up Project

First Open Terminal In your VS Code and Then Type These Command

npm create vite@latest my-vite-app

Now It Show You Bunch of Frameworks Choose React With JavaScript or TypeScript

cd my-vite-app
npm install

It Will Navigate to your Project Folder and Install all Dependencies Which Is Required For your Project

npm run dev

It Will Start The Dev server you Can Press CTRL and Click on The LocalHost It Will Open In Browser

👉 Boom! Your React app is live at http://localhost:5173/

Understanding The Structure Of Folder

index.html at root.
src/ - main React code.
main.jsx (entry point).
App.jsx (root component).

Thats All You Can Now Make Your Project As Per yours. I Recommend Always Use These Kind Of Tool To Accelarate Your Productivity. Vite is One Of Them The New Era Of Frontend Developement

Thanks For Reading My Article ❤️ and Also Share Your Thoughts in The Comments ☺️

React Basics: An Introduction for Beginners

Mohammad Shahzeb Alam — Sun, 24 Aug 2025 17:23:20 +0000

What Is React ⚛︎

React is JavaScript Library Used For Building Web Apps. It Was Created by Meta In 2013

Why React ⚛︎

React is Fast and Efficient For Web Apps
Huge Ecosystem and Community
Its Easy to Learn If you Know JavaScript
You don’t Have to Write Markup in HTML File You Can Write in JSX File
Its Composable - Which Can Create Reuable and Interchangeable For Web Apps It Can Create Complex Systems

React is Declarative

Declarative What does That Means Actually let’s First Understand Imperative

Imperative - Its Means How to Do Something let’s Understand From an Example If you go to Restaurant and You Tell The Manager That there is a table In the Corner Go Check the Table And Book it For Me.

Declarative - its Means Just Tell Something It Will Work You Don’t Gonna Know How These Work is Done So, again Lets Understand These Through an Similar Example Suppose if You Go to a Restaurant then Directly Tell The Manager to Book The Table For You You Don’t Know How The Work is Going on Under The Hood So Same Works In React You Just Tell The React To Make These Happen and It Will Happen You Don’t Know What Compexity is Going On Under The Hood .

Let’s Learn Now How To Code In React From Basics

in HTML If You Want To Show Hello World in div How You Gonna Make It Like These

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="root">
        <h1>Hello World</h1>
    </div>
</body>
</html>

In Your Browser It Will Look Like These Inside Div Hello World Is there

But using JavaScript You Can Write These Like These

const h1 = document.createElement("h1")
h1.textContent = "Hello World"
h1.className = "header"
document.getElementById("root").append(h1)

But In React

You Have to Attach src in HTML File To Use React Like These

 <!-- React and ReactDOM from unpkg -->
 <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
 <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
 <!-- Babel compiler (so you can write JSX directly in the browser) -->
 <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

In These Script Tag React DOM Is Doing The rendering Work Taking Your Component From React and Change Into JavaScript

Another Script Tag Babel Its Reloads The Browser After Bundling Your Files

Now You Can Write Like These

import { createRoot } from "react-dom/client"

const root = createRoot(document.getElementById("root"))
root.render(
<h1>Hello World</h1>
)

So Basically These is The Basic Way Of Doing The Same Usinge createRoot You Can Select The root Element From The div Inside The HTML.

render Means appending The Element in The div

There are More Ways of Doing These But These is the Basics Of React If you are Starting to Learn React

This Is It I Have Tried To Cover The Basics React

Thanks For Reading My Article ❤️ and Also Share Your Thoughts in The Comments ☺️

Must-Have VS Code Extensions for Developers 🛠️

Mohammad Shahzeb Alam — Thu, 21 Aug 2025 19:24:27 +0000

Why Extensions

Without extensions, VS Code is just a text editor. Extensions Supercharges Your Productivity. With extensions, it becomes a super editor

There Are Lots Of Extensions In The Market Which Make You More Productive

Productivity & Workflow

Tabnine / GitHub Copilot - AI code completion.
CodeSnap - Take beautiful code screenshots for sharing

Code Quality & Linting

ESLint - Keeps JavaScript/TypeScript code clean.
Prettier - Automatic code formatting.

Styling & UI Enhancements

Material Icon Theme - Adds icons for files/folders.
Dracula Official - Themes for VS Code

Debugging & Testing

Debugger for Chrome (Frontend debugging).
Thunder Client - For testing APIs directly in your VS Code

There are Lots of Extension In VS Code But These are The Mostly And Widely Used Extensions

Thanks For Reading My Article ❤️ and Also Share Your Favorite Extensions in The Comment ☺️

What Is an API? A Simple Explanation

Mohammad Shahzeb Alam — Wed, 20 Aug 2025 19:15:18 +0000

What Is an API

API Stands For Application Programming Interface
In a Simple Words We Can Say That APIs are Tech Waiters. You Know What Does a Waiter Do Basically It Takes Your Order and Then Tells The Kitchen To Prepare and Then it Serves You .
So, Basically as Same API Works like If You are a Frontend Developer You Want Some Random Data For Your Project Do You Want Prepare A 50-100 Random Data For Yourself No.
So, There’s API Comes in you Just Have To Integrate in your Project and Boom There are 100s Of Data Which You Have’nt Write
Why Do We Need API
API Lets You Communicate With Other Softwares
It can Be any Softwares Like - Twilio Using Twilio You Integrate SMS Feature In your Project you Don’t Have to Write The Whole Program For The SMS Feature
Someone Have Alredy Done the HeavyLifting For you So you Don’t Have To
There is Authentication API Like - 0Auth
Types Of APIs
Rest APIs - Mostly and Widely Used
GraphQL APIs - It Is More flexible, You can ask for what you need
SOAP APis - Older, Used In Enterprises
How Does API Works
First You(Client) Sent The Request
Server (API Providers) It Process The Request

Then Response (Data) Comes Back in JSON or XML Format

{
  "city": "New York",
  "temperature": "25°C",
  "condition": "Sunny"
}

API Tools

These Tools are used To Test The API By Sending And Recieving The Data For The Project

Postman API - Commnoly Used API Tool In The Market
RestFox - It’s an Open Source API Tool
Hands On Example

Let’s try a free Cat Facts API 🐱

fetch("https://catfact.ninja/fact")
  .then(response => response.json())
  .then(data => console.log(data));

Like These You Sent The Request Through Code

And The Response Comes In JSON

{
  "fact": "Cats sleep for 70% of their lives.",
  "length": 35
}

🎉 Boom! You just used your first API.

## There are Lots Of Free APIs

You Can Use Them to Try Different Things

Cat Facts
OpenWeather
PokéAPI

Thanks For Reading My Article ❤️

How to Set Up Tailwind CSS for Your Web Projects

Mohammad Shahzeb Alam — Tue, 19 Aug 2025 19:26:50 +0000

Let’s First Create A Folder For Your Project

Open VS Code On Your System Then Open Terminal And Write The Command

mkdir web-project

cd web-project
npm init -y

npm init -y will make you a JSON File For Your Project

Make a New File For Your Project

Now It Does Look like These in your System

Also Check your npm & node Version By Entering These Command

node --version
npm --version

It Shows Like in the Image below your Current Node & NPM Version If it Does’nt Show Any version Then your System Does’nt Have Node & npm Installed Better Be Installed for your Project

Type These Commands In your Terminal

It Will Install Tailwind CSS and its dependencies

npm install -D tailwindcss postcss autoprefixer

npx tailwindcss init -p

This creates:

tailwind.config.js
postcss.config.js

Now Configure the tailwind.config.js so Tailwind scans your files

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

It Will look Like These in Your System

Make Two New Folder One With Name build and Other with src.

In Build Folder Move The Index.html File And In Src Folder Make A New File With name input.css.

Now Just Copy paste the CSS in your input.css File

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

Build Tailwind

Add this script in your package.json

"scripts": {
  "build": "tailwindcss -i ./src/input.css -o ./dist/output.css --watch"
}

Using These Command you Don’t Have to Write Repeatedly Again and Again in your Terminal

Now the Last Step In your Index.html Press (Shift+!) and Hit Enter Button It will give the HTML Template for you and link your css file with your HTML

<link rel="stylesheet" href="/src/input.css">

It’s Done Now Congrats 🎉

Today I Learned: Vanilla JavaScript Clock 🕒

Mohammad Shahzeb Alam — Wed, 09 Jul 2025 08:36:57 +0000

Today I built a functional analog clock using just HTML, CSS, and Vanilla JavaScript — no libraries or frameworks involved!

It was a great way to practice working with the DOM and time-based JavaScript logic.

🧠 How It Works
In JavaScript, I created a function called setDate() which runs every second using setInterval().

Here's what happens inside setDate():

I use new Date() to get the current time.
From that date object, I extract:

-seconds

-minutes

-hours

I then convert each time value into degrees so I can rotate the clock hands correctly.
Finally, I apply the rotation using element.style.transform on the second, minute, and hour hands.

This creates the effect of a working analog clock ticking in real time! 🎯

🔁 Why the +90 Degrees?
In CSS, a rotation of 0deg points to the right (3 o'clock).
But clocks start at the top (12 o'clock), so I had to add +90 degrees to shift the rotation and make it accurate.

🖼️ Here's What It Looks Like

My Journey and Experience with StatusCode2 🚀

Mohammad Shahzeb Alam — Sat, 05 Jul 2025 07:00:00 +0000

A few months back, I wouldn’t have imagined myself being involved in multiple communities, connecting with developers across the country, and helping organize hackathons — but here I am. I wanted to take a moment to share my experience with StatusCode2 (SC2) — not just as a hackathon, but as a movement that gave me a space to grow, contribute, and truly feel part of something bigger.

I joined StatusCode2 as a Hackathon Evangelist, and that role meant a lot more than just spreading the word. It was about representing the spirit of the community. I had the chance to talk to students who had never participated in a hackathon before, and encourage them to just give it a shot. That one message or one announcement I shared could be the reason someone discovered their passion for building.

Being in this role helped me find my own voice. Whether it was writing outreach messages, responding to queries, or just cheering others on during the hackathon — I felt like I was contributing meaningfully, even if I wasn’t the one writing code or pitching ideas.

StatusCode2 stood out because of its inclusiveness. From first-time hackers to experienced builders, everyone had a space. It wasn’t just about who wins; it was about who shows up, learns something, and walks away with a little more confidence. And I saw that happen in real-time — especially during workshops, mentor sessions, and those late-night community chats.

This wasn’t my first experience with community work. I’m also part of the PR & Outreach team at Sourcfy, and I’ve worked as a Hackathon Evangelist for Hello World Hacks. But SC2 felt different. Maybe it was the energy, or the fact that it was organized by students for students. Or maybe it was the feeling that what we were doing genuinely mattered — not just for one weekend, but in the longer journey of helping others discover tech.

There were challenges too — balancing outreach with studies, or figuring out how to help when someone DMs you at midnight with a blocker. But those moments taught me more than any textbook ever could.

Looking back, I’m proud of what we achieved. And more than that, I’m excited for what’s ahead. Communities like StatusCode2 are the future — where we lift each other up, share what we know, and grow together.

If you’re reading this and thinking about joining a hackathon, volunteering, or just exploring tech — do it. You don’t need to have it all figured out. Start somewhere. Start now.

—

statuscode #IIITKalyani #Hackathon #CommunityBuilding

Hi Everyone

Mohammad Shahzeb Alam — Thu, 19 Jun 2025 07:18:04 +0000