DEV Community: Behan kumar

6 months of job hunting. Still no offer.

Behan kumar — Wed, 25 Mar 2026 09:15:36 +0000

I'm a MERN stack developer from India. This is my honest job search story.

6 months of job hunting. Still no offer.

Here's what nobody tells you about being a fresher developer in India.

I have 3 to 4 live deployed apps, 400+ commits across my projects, real users across multiple countries, and a full-stack skill set.

But I'm still searching.

Not because I lack skills. But because the system is brutal for freshers:

"0-1 years experience required" — but how do you get experience without a first job?
Unpaid internships that don't cover even basic expenses
Assessments that expire before you can take them
Applications that disappear into silence

Here's what I've learned

Consistency beats talent. Showing up every day matters more than being perfect.

Your projects are your resume. I let my code speak.

Rejection is data, not failure.

The right company is looking for someone exactly like you. You just haven't found each other yet.

I'm not posting this for sympathy.

I'm posting this because if you're a fresher going through the same thing — you're not alone.

And to any recruiter or founder reading this — I'm Behan Kumar, Full-Stack Developer (MERN + Next.js). I build real things and ship them.

Live chat platform: pairly.chat
Portfolio: behan.vercel.app
GitHub: github.com/behan05

I built a full-stack digital agency platform - here's how it works

Behan kumar — Thu, 03 Jul 2025 11:25:01 +0000

Brandora is a full-stack digital agency web application I built and deployed independently.

Not a tutorial. Not a clone. A real product with a real backend, deployed and live.

Live: https://brandora-agency.vercel.app
Code: https://github.com/behan05/brandora-digital-solutions

What I built

A modern agency website with a Node.js/Express backend, MongoDB database, GSAP animations, and Material UI components. Fully responsive across all devices.

Frontend: React, Vite, Material UI, GSAP
Backend: Node.js, Express.js, MongoDB Atlas
Deployment: Vercel (frontend) + Render (backend)

What the backend handles

Newsletter form submissions stored in MongoDB
Contact/freelance form with email data saved to database
REST API endpoints for form handling
Vercel routing configured with rewrite rules for SPA support

What I learned

Building Brandora taught me how to connect a React frontend to a Node.js backend properly - CORS configuration, environment variables across platforms, and deployment gotchas between Vercel and Render.

The ~25% performance improvement came from optimizing API calls and lazy loading components - small changes with real impact.

About me

I'm Behan Kumar, a Full-Stack Developer actively seeking my first professional role.

Feedback welcome — drop a comment! 🙌

I built my developer portfolio here's what's inside

Behan kumar — Tue, 24 Jun 2025 14:08:46 +0000

Not a tutorial clone. Not a template. A portfolio I designed and built from scratch.

Live: https://behan.vercel.app
Code: https://github.com/behan05/behan-portfolio

What it looks like

Dark immersive UI with smooth GSAP animations — designed to make an impression from the first scroll. Clean navigation, modern typography, and a projects showcase that actually shows real work.

Tech stack

Frontend: React, Vite, Material UI, GSAP
Backend: Node.js, Express.js, MongoDB Atlas
Deployment: Vercel (frontend) + Render (backend)

What's inside

Projects showcase — Pairly, Chat App Admin Dashboard, Brandora, React Admin Panel, NewsNest
Skills and tech stack section
Resume download
Contact and hire me form with backend integration
Fully responsive across all devices

Projects I'm showing

Pairly — real-time chat platform built independently from architecture to production. Live at pairly.chat with real users across multiple countries. 395+ commits.

Chat App Admin Dashboard — production-ready admin panel with analytics, user management, moderation, and billing. Built with React and Material UI.

Brandora — full-stack digital agency platform with GSAP animations and Node.js backend APIs.

React Admin Panel — responsive dashboard with sidebar navigation and reusable UI components.

NewsNest — Next.js news app exploring App Router and live API integration.

What I learned building this

Connecting a React frontend to a Node.js backend cleanly, handling CORS across different deployment platforms, and optimizing GSAP animations for performance without sacrificing the visual experience.

About me

I'm Behan Kumar, a Full-Stack Developer actively seeking my first professional role.

Feedback welcome — drop a comment!

🌐 What is HTML? How Does a Websites Work Behind the Scenes?

Behan kumar — Wed, 12 Feb 2025 03:29:32 +0000

🚀 Why am I writing this article?

Hello everyone! I am writing this article to help beginners understand HTML and how websites work behind the scenes. I know there are many articles on this topic, but I want to explain it in a simple way that anyone can understand.

🛠 Use Cases & Importance

If you are new to web development, this article will give you a strong foundation.

If you use websites daily but don’t know how they work, this will help you understand the process.

If you are planning to learn frontend or backend development, knowing how a website loads is essential.

⚠ Note: English is not my strong skill, so I apologize if there are any mistakes. But I hope you still find this article useful! 😊

📌 What is HTML?

HTML (HyperText Markup Language) is the basic language that structures web pages. It provides a set of rules that tell browsers how to display content.

✅ Breaking Down "HTML"

HyperText → Text that contains links to other content.
Markup → Uses tags to format and structure a webpage.
Language → A set of rules that browsers follow to render web pages.

🔹 Example of an HTML Element

HTML works with tags enclosed in < >. Most elements have an opening tag, content, and a closing tag.

<p>This is a paragraph.</p>

✔ <p> is the opening tag.
✔ </p> is the closing tag.
✔ The content inside the tags appears on the webpage.

🏗 Basic HTML Boilerplate

To create a basic webpage, you need an HTML boilerplate. This is the minimum structure required for a webpage to work properly.

✨ Basic HTML Structure:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Webpage</title>
</head>
<body>
    <h1>Welcome to My Webpage</h1>
    <p>This is a basic HTML page.</p>
</body>
</html>

📌 Explanation:

<!DOCTYPE html> → Declares this is an HTML5 document.
<html lang="en"> → The root element, defining the language as English.
<head> → Contains metadata (not visible on the webpage).
<meta charset="UTF-8"> → Supports special characters like é, ö, ü.
<meta name="viewport" content="width=device-width, initial-scale=1.0"> → Makes the page responsive on mobile.
<title> → Sets the page title (seen on the browser tab).
<body> → Contains everything that is visible on the webpage.

🚀 How Websites Work? (Behind the Scenes)

A website is more than just HTML! Multiple technologies work together when you visit a website. Let’s break it down step by step.

🟢 1️⃣ User Request (Client-Side Interaction)
When you type a URL (www.example.com) in a browser and press Enter, your browser sends a request to fetch the webpage.

📌 Key Terms:

Client → The browser or device making the request (e.g., Chrome, Firefox).
Request → Asking a server to load a webpage.

🔄 2️⃣ DNS & Web Hosting (Finding the Website’s Server)
The internet doesn’t recognize domain names (like www.example.com). Instead, it uses IP addresses (e.g., 192.168.1.1).
✅ Steps:

DNS Lookup: Translates domain names into IP addresses.
Server Connection: The browser finds and connects to the website’s server.

📌 Key Terms:

DNS (Domain Name System) → Works like a phonebook for websites.
Web Hosting → The storage space where website files are kept (e.g., AWS, GoDaddy).

⚙️ 3️⃣ Backend Processing (Server-Side Work)
Once the request reaches the server, the backend processes it and sends a response.
✅ Steps:

The server receives the request.
If needed, it fetches data from a database (e.g., user profile, posts).
The server prepares the HTML, CSS, and JavaScript files and sends them back to the browser.

📌 Key Terms:

Backend → The logic and database operations behind a website.
Database → Stores user accounts, posts, comments (e.g., MySQL, MongoDB).

🎨 4️⃣ Browser Rendering (Displaying the Webpage)
When the browser receives HTML, CSS, and JavaScript, it renders the webpage
✅ Steps:

HTML structures the content.
CSS makes the page look good (colors, fonts, layouts).
JavaScript adds interactivity (buttons, animations, forms).

📌 Example: When you visit YouTube,

HTML structures the page.
CSS makes it visually appealing.
JavaScript enables video playback and comments.

🔄 5️⃣ APIs & Databases (Fetching Real-Time Data)
Some websites don’t just show static content. They fetch real-time data using APIs or databases.
✅ Steps:

The website requests data (e.g., latest posts, user messages).
The database retrieves the requested data.
The backend processes it and sends it to the browser.

📌 Example:

When you refresh your Instagram feed, it fetches new posts from a database.
When you search on Google, it calls an API to get results.

📌 Key Terms:

API (Application Programming Interface) → A service that allows websites to communicate (e.g., weather API, payment API).

🔍 Final Summary: How a Website Works (Step-by-Step)

1 User Request: The browser sends a request when you type a URL.
2 DNS & Hosting: The DNS finds the correct server for the website.
3 Backend Processing: The server processes the request and fetches data.
4 Rendering: The browser displays HTML, CSS, and JavaScript.
5 Database & APIs: Websites fetch live data from databases or APIs.

🔁 Full Process Overview :

User Request → Browser Sends Request → DNS Resolves Domain →

Server Receives Request → Backend Processes Data → Fetches from Database/APIs →

Server Sends Response → Browser Renders Page → Website is Displayed 🎉

🎯 Conclusion

This is the basic process behind every website you visit! 🚀

✅ I hope this article helps beginners understand how websites work.
✅ If you find this helpful, feel free to share and leave feedback!

⚠ Again, I apologize if there are any English mistakes. I am still learning, but I wanted to share knowledge in a simple way. Thank you for reading! 😊

A Beginner's Guide to Responsive Web Design

Behan kumar — Wed, 25 Dec 2024 19:28:58 +0000

Responsive Web Design (RWD)

Responsive Web Design (RWD) is a technique used to ensure that websites are optimized for various devices and screen sizes. This means users have a seamless experience whether they’re on a desktop, tablet, or smartphone. In this article, we'll address some common issues and provide solutions to ensure your website is responsive, along with explanations on why these solutions work.

Problem 1: Websites Not Adapting to Different Screen Sizes

Why this is an issue:

Many websites look great on a desktop but break or become difficult to use on smaller devices like smartphones or tablets. A rigid layout with fixed widths and heights doesn’t scale well across various screen sizes, leading to poor user experiences.

Solution: Fluid Grid Layouts

What to do:

Use relative units like percentages (%) instead of absolute units like pixels (px) for widths and heights. This allows your layout to adjust dynamically to the screen size.

Why this works:

Relative units allow the design to scale with the size of the screen, creating a flexible layout that adapts to both large and small devices.

.container {
  width: 100%;
}

Problem 2: Images and Media Overflowing or Distorted

Why this is an issue:

Images that are too wide or have fixed dimensions may overflow or distort on smaller screens. This can break the layout and result in a poor user experience.

Solution: Flexible Images and Media

What to do:

Set images to a maximum width of 100% and ensure their height is set to auto to maintain their aspect ratio.

Why this works:

By using max-width: 100%, the image scales within its container, ensuring it doesn’t overflow. The height: auto ensures that the image maintains its original proportions.

img {
  max-width: 100%;
  height: auto;
}

Problem 3: Inconsistent Styles Across Devices

Why this is an issue:

Without proper styling adjustments, a website can look great on one device but be difficult to read or navigate on another. For instance, text might be too small on a mobile screen, or elements could be misaligned.

Solution: Media Queries

What to do:

Use CSS media queries to apply specific styles based on the device’s screen width, height, or orientation.

Why this works:

Media queries allow you to customize the styles for different devices, ensuring your design is optimized for each. For example, you might want smaller text on mobile devices and larger text on desktops.

@media (max-width: 768px) {
  body {
    font-size: 14px;
  }
}

Problem 4: Designing Only for Desktops First

Why this is an issue:

Designing for larger screens first, then scaling down, can result in a poor mobile experience. If you design for mobile devices first, it’s easier to prioritize content and functionality.

Solution: Mobile-First Design

What to do:

Start by designing your website for smaller screens first, then progressively enhance it for larger screens using media queries.

Why this works:

Mobile-first design ensures that your website is optimized for smaller screens, which are more challenging to design for. By using media queries, you can then adjust the layout and styles for larger screens.

body {
  font-size: 14px; /* Base styles for mobile */
}

@media (min-width: 1024px) {
  body {
    font-size: 16px; /* Styles for larger screens */
  }
}

Problem 5: Scaling Issues on Mobile Devices

Why this is an issue:

Without proper viewport settings, mobile browsers may scale content in unexpected ways, leading to poor visibility or misaligned elements.

Solution: Viewport Meta Tag

What to do:

Include the following meta tag in the <head> section of your HTML to control how the page scales on mobile devices.

Why this works:

This tag ensures that the content fits the screen properly and scales according to the device's width, which improves the mobile experience.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Tools and Frameworks for Responsive Web Design

To make implementing responsive designs easier, you can use several tools and frameworks:

CSS Frameworks:
- Bootstrap
- Tailwind CSS
Testing Tools:
- Google Mobile-Friendly Test
- Browser DevTools (Responsive Design Mode)
Grid Systems:
- Use CSS Grid or Flexbox to build responsive layouts.

Best Practices for Responsive Web Design

Here are some best practices to follow for creating responsive websites:

Use Relative Units: Opt for relative units like %, em, and rem instead of fixed units like px.
Avoid Fixed Widths/Heights: Fixed dimensions can break your layout across different devices.
Test on Real Devices: Emulators are helpful, but always test on actual devices to ensure your design looks great everywhere.
Optimize Images: Use tools to compress images and serve different sizes based on screen resolution to improve loading times.
Prioritize Content: Keep your design simple and focus on delivering the most important content across all devices.

Example Responsive Layout Using Flexbox

Here’s a basic example of a responsive layout using Flexbox:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    body {
      margin: 0;
      font-family: Arial, sans-serif;
    }

    .container {
      display: flex;
      flex-wrap: wrap;
    }

    .box {
      flex: 1 1 300px;
      margin: 10px;
      padding: 20px;
      background: #f4f4f4;
      text-align: center;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="box">Box 1</div>
    <div class="box">Box 2</div>
    <div class="box">Box 3</div>
  </div>
</body>
</html>

Conclusion

Responsive Web Design is essential for creating websites that work across a variety of devices. By following the solutions and practices outlined above, you can ensure a smooth and optimized experience for your users, no matter what device they use.

Resources for Further Learning

CSS Grid: MDN Web Docs - CSS Grid
Flexbox: MDN Web Docs - Flexbox
Media Queries: MDN Web Docs - Media Queries

Feel free to connect with me or follow me on my social media accounts for updates and more web development tips:

Email: behankrbth@outlook.com
LinkedIn: Behan Kumar
GitHub: behan05

How Learning Git and GitHub Transformed My Workflow as a Full-Stack Developer

Behan kumar — Sat, 14 Dec 2024 20:43:14 +0000

Introduction

As a full-stack developer, version control and collaboration have become integral parts of my workflow. Learning Git and GitHub has truly transformed the way I manage my code, collaborate with teams, and maintain project versions. In this post, I’ll share how these tools have had a significant impact on my development journey.

What is Git and GitHub?

Git

Git is a distributed version control system that allows you to track changes in your code, making it easy to collaborate with others and manage versions of your project.

GitHub

GitHub is a cloud-based platform that hosts Git repositories, enabling collaboration, code sharing, and version control across the globe. It's an essential tool for developers working in teams or on open-source projects.

Why Git and GitHub Are Essential for Full-Stack Development

Version Control

Git allows me to keep track of changes made to both frontend and backend code. This makes it easier to roll back to previous versions if something goes wrong and ensures that I never lose any important work.

git log

This command shows the commit history, helping you track every change made to your project.

Collaboration

Working with GitHub has made collaboration smoother, especially when working on full-stack projects where frontend and backend development happen simultaneously. With GitHub, I can share my code with others, contribute to team projects, and review changes made by others without conflicts.

git push origin <branch-name>

This command pushes your local branch to GitHub, allowing teammates to see and collaborate on your work.

Code Review and Pull Requests

GitHub’s pull request feature has significantly improved the quality of the code I work on. By opening a pull request, I can have my code reviewed by teammates, which helps spot potential issues and ensures better code quality.

How Learning Git Improved My Development Workflow

Seamless Collaboration

Before using Git and GitHub, collaboration was challenging for me. However, by using Git, I can easily merge code changes from different contributors and handle multiple branches with ease. It’s especially beneficial when working on full-stack projects where I am dealing with both frontend and backend simultaneously.

git merge <branch-name>

This merges changes from one branch to another. Useful when collaborating on different parts of the code.

Managing Multiple Branches

Git’s branching model has been a game-changer. I can work on new features, bug fixes, or experiments in isolated branches without affecting the main project. Once I’m satisfied with the changes, I can merge them back into the main branch with confidence.

git branch <branch-name>  # Create a new branch
git checkout <branch-name>  # Switch to that branch

Tracking Changes

Git makes tracking changes easy. The commit history allows me to see what was changed, by whom, and why. This transparency is invaluable when collaborating on larger projects or debugging issues.

git diff  # View changes made since the last commit

Conclusion

Learning Git and GitHub has significantly streamlined my workflow as a full-stack developer. From managing multiple versions of my code to collaborating seamlessly with teams, these tools have become indispensable in my development process. If you haven't already, I highly recommend diving into Git and GitHub—they will change the way you develop!

Call to Action

I’d love to hear how Git and GitHub have transformed your workflow! Feel free to share your experiences or tips in the comments below.

🔗 GitHub

🔗 CodePen
🔗 LinkedIn

Git #GitHub #FullStackDevelopment #WebDevelopment #VersionControl #Collaboration

5 Things I Learned in My Full-Stack Development Journey (So Far) 🚀

Behan kumar — Tue, 10 Dec 2024 18:42:34 +0000

Hi Devs! 👋

After stepping into my full-stack developer journey, I’ve realized that the path is filled with challenges, learning, and rewarding moments. Today, I want to share a few lessons that might resonate with others starting their journey or looking for motivation:

1️⃣ Consistency is Key: Small, daily progress adds up. Focus on learning one concept at a time instead of everything at once.

2️⃣ Break Down Projects: Working on small features of a project keeps things manageable and helps me stay motivated.

3️⃣ Don’t Be Afraid of Mistakes: Debugging is a superpower! Every error is an opportunity to learn.

4️⃣ Community is Everything: Platforms like Dev.to and LinkedIn have been a great source of learning and connecting with amazing developers.

5️⃣ Celebrate Small Wins: Each achievement, no matter how small, is a step closer to the goal.

I’d love to hear about your lessons or tips from your coding journey! Let’s learn together. 🙌

🔗 GitHub: github.com/behan05

🔗 CodePen: codepen.io/behan05

WebDevelopment #CodingJourney #FullStackDeveloper #LearnTogether

My journey as a Full-Stack Developer

Behan kumar — Sun, 08 Dec 2024 00:50:45 +0000

I wrote the first version of this post in December 2024. I was still learning, still figuring things out, and honestly had no idea what I was doing.

A lot has changed since then.

Where I started

I started with the basics — HTML, CSS, JavaScript. Then slowly moved into React, Node.js, Express, and MongoDB. Every concept felt hard at first. Buffers, RESTful APIs, async programming, deployment — each one was a wall I had to climb.

I didn't have a mentor. No bootcamp. Just documentation, YouTube, and a lot of debugging at 3 AM.

What I built

Instead of just following tutorials, I started building real things.

Pairly — a real-time chat platform built from scratch using React, Node.js, Express, MongoDB, and Socket.IO. Not a clone. Not a tutorial project. A real app with real users across multiple countries. 395+ commits since June 2025 and still actively building.

Live at: https://pairly.chat

Chat App Admin Dashboard — a production-ready admin panel with real-time analytics, user management, content moderation, security controls, and billing. Built with React and Material UI.

Live at: https://chat-platform-admin.vercel.app

Brandora — a full-stack digital agency platform with GSAP animations, Node.js backend APIs, and MongoDB. Fully responsive and deployed.

Live at: https://brandora-agency.vercel.app

Portfolio — my personal developer showcase built with React, GSAP, and Material UI.

Live at: https://behan.vercel.app

What the journey actually taught me

Building is the only way to learn. Reading documentation and watching tutorials gives you knowledge. Shipping a real product gives you understanding.

The difference between knowing React and building a production app with React is enormous. You learn about CORS errors, environment variables, deployment failures, socket reconnections, JWT expiry handling, and a hundred other things that no tutorial covers.

I also learned that consistency matters more than talent. Some days I wrote 50 lines. Some days I wrote 500. But I showed up every day.

Where I am now

I'm a Full-Stack Developer actively seeking my first professional role. 6 months of job hunting, still no offer — but I'm not stopping.

I'm currently learning DSA, building new features for Pairly, and applying to companies every day.

If you're a fresher going through the same thing — you're not alone. Keep building. Keep shipping.

Connect with me

Portfolio: https://behan.vercel.app
GitHub: https://github.com/behan05
LinkedIn: https://www.linkedin.com/in/behan-kumar-25151b2ba/

Drop a comment if you're on a similar journey — I'd love to connect!