DEV Community: Merajul Haque

Learning to Build in the Age of AI

Merajul Haque — Mon, 26 Oct 2026 19:31:54 +0000

AI can write the code. Can you explain it?

Learning to code has become a lot easier in some ways.

A few years ago, if you wanted to build something, you would probably spend hours reading documentation, searching Stack Overflow, watching tutorials, and trying to understand why your code wasn't working.

Now, you can describe what you want to build to an AI assistant and get a working starting point in seconds. Need a React component? Done. Need help with a database query? Just ask. Stuck on an error you've never seen before? Paste it into the chat.

I use these tools too, and they're genuinely useful. They help me move faster, explore unfamiliar technologies, and get past problems that might otherwise take hours to solve.

But there's something I've been thinking about.

When AI does more of the work for us, are we actually learning as much as we think we are?

It's easy to finish a project with AI and feel like you've learned a lot. You have a working application, the UI looks good, and the code seems to make sense. But sometimes, that confidence disappears the moment something breaks and you have to figure out what's happening without simply asking AI for another fix.

That's where the difference between writing code and understanding it starts to show.

The problem with feeling productive

Imagine you're learning React.

You watch a tutorial, follow along, and build a small application. Everything works. You understand the explanation, recognize the code, and feel comfortable with the concepts.

A few days later, you decide to build something similar on your own. Suddenly, you aren't sure how to structure the components, where the state should live, or why updating one value causes other parts of the interface to re-render.

What happened? You understood the tutorial while watching it, but you hadn't necessarily learned how to make those decisions yourself.

AI can make this even harder to notice.

You can ask it to build the entire application, fix every error, and explain each step. The result might be impressive, even if you couldn't reproduce the important parts independently.

There's nothing wrong with getting help. The problem is confusing a completed task with a skill you've developed.

I've started to think about learning in terms of a simple question:

If this code stopped working tomorrow, would I know where to start?

You don't need to remember every line of code or understand every implementation detail immediately. But you should gradually develop the ability to investigate a problem, form a hypothesis, and work towards a solution.

That's a different kind of progress from simply shipping code.

Build something small enough to understand

One thing that helps is choosing projects where you have to make decisions yourself.

You don't need to build another massive SaaS application or spend months working on an ambitious idea. Start with something small that forces you to understand one concept properly.

For example, if you're learning how APIs work, build a small application that fetches data, handles loading and error states, and deals with a failed request.

If you're learning state management, create a task manager where changes need to stay consistent across different components.

If you're exploring offline-first applications, try storing data locally and making sure it remains available after a page refresh or loss of internet connectivity.

These projects become much more useful when something goes wrong.

What happens if the request fails? What if the user clicks a button twice? What if the browser refreshes before the data is saved? What happens when two updates arrive in an unexpected order?

You don't have to solve every possible edge case. The point is to encounter problems that require you to think beyond the happy path.

This is also where reading documentation becomes more valuable. Instead of reading about a concept because you think you should, you're looking for an answer to a problem you've actually encountered.

You're no longer just collecting information. You're using it.

Use AI, but don't skip the thinking

I don't think the answer is to stop using AI or to write every line of code manually.

That would mean ignoring tools that can make development significantly more efficient.

Instead, I think it's worth being more deliberate about when and how we use them.

When I'm learning something unfamiliar, one approach is to spend a little time trying to solve the problem myself before asking AI for help.

Even if my first attempt is wrong, I've had to think about the problem, make a decision, and discover where my understanding falls short.

Then I can use AI to compare approaches, explain concepts I missed, or point out weaknesses in my solution.

Here are a few ways to make that process more useful:

Try first, ask second. Spend some time understanding the problem before requesting a complete implementation.
Ask why, not just how. If AI suggests a solution, ask why it works, what alternatives exist, and what trade-offs you're accepting.
Predict before you run. Before executing a piece of code, try to work out what it will do. Then compare your prediction with the actual result.
Change something yourself. Once the code works, modify it. Add a requirement, handle an edge case, or change the implementation. See whether you can adapt it without asking AI to rewrite everything.
Investigate errors instead of immediately replacing the code. Read the error message, inspect the relevant code, and form a possible explanation before asking for help.

You won't need to follow this process for every task. If you're doing something routine that you already understand, letting AI handle more of the implementation makes perfect sense.

The important distinction is whether you're using AI to save time on familiar work or to avoid learning something you actually need to understand.

Understanding code matters more than memorizing it

There's another reason I don't think developers need to compete with AI at writing code.

AI can already generate syntax, suggest common patterns, and produce implementations for many familiar problems. Trying to prove your value by typing faster or memorizing more syntax misses the point.

What matters is knowing what to build, how the pieces fit together, and whether the result actually solves the problem.

Consider a simple feature that fetches data from an API.

Generating the request itself isn't particularly difficult. But a real application might also need to handle authentication, timeouts, retries, stale data, loading states, and unexpected responses.

You need to decide which of these situations matter, how the application should respond, and what trade-offs are reasonable.

AI can help with those decisions, too. But you still need enough understanding to evaluate its suggestions.

For me, that's one of the most interesting parts of software development: going beyond making something work and figuring out how to make it work reliably.

You don't need to become an expert in every part of the stack. You do need to understand the parts that your application depends on and know how to investigate the ones you don't understand yet.

Learn by building things that can break

A useful exercise is to implement a small feature yourself before looking at an AI-generated solution.

For example, imagine you're building an API request helper that retries a request when it fails.

You might start with something like this:

async function fetchWithRetry<T>(
  fn: () => Promise<T>,
  retries = 3,
  delay = 1000
): Promise<T> {
  try {
    return await fn();
  } catch (error) {
    if (retries <= 0) {
      throw error;
    }

    await new Promise((resolve) =>
      setTimeout(resolve, delay)
    );

    return fetchWithRetry(
      fn,
      retries - 1,
      delay * 2
    );
  }
}

At first glance, the implementation looks straightforward. If the request fails, wait a little and try again, doubling the delay each time.

But understanding it means asking a few more questions.

Does the retry count behave as expected?
Should every error trigger a retry, or only certain errors?
What happens if the server is unavailable for a long time?
Should the function support cancellation?
How would you test the delays without waiting several seconds?
Could multiple failing requests create too much traffic?

The example isn't a complete production-ready retry system. It deliberately leaves room for questions.

You can ask AI to explain the implementation or suggest improvements. But try answering some of these questions yourself first. You'll get much more out of the exercise than simply copying the code into a project.

The same approach works for almost anything: a search feature, an authentication flow, a database query, or a background synchronization process.

The goal isn't to write everything from scratch. It's to understand the decisions behind the code you're using.

You don't have to learn everything at once

It's easy to feel behind when new frameworks, models, and development tools keep appearing.

You might start learning one technology and see someone online building an entire product with another. Before you've finished one project, there's already a new tool everyone seems to be talking about.

I've found it useful to remember that exploring something new and actually learning it are two different things.

You can experiment with lots of tools, but depth comes from spending enough time with a problem to understand it properly.

Instead of starting a new project every few days, try taking one project a little further.

Make the error handling better. Understand how the data flows through the application. Write a few tests. Improve the way it behaves when something goes wrong. Revisit an earlier decision and see whether you'd make the same choice today.

You might learn more from improving a small application over several weeks than from building five similar applications that you never revisit.

And you don't need to code every waking hour to make progress. Consistency matters, but so does having enough time to think about what you've learned.

So, what does learning look like now?

I don't think AI makes learning software development pointless. If anything, it changes what we need to pay attention to.

We can spend less time struggling with repetitive syntax and more time exploring ideas, testing assumptions, and understanding how systems behave. But that only happens if we remain involved in the process.

A working application is a good result. Being able to explain how it works, identify its weaknesses, and improve it is an even better one.

The next time you use AI to build something, try going a little further than getting it to work. Ask yourself what you learned, what you still don't understand, and what would happen if you had to change the implementation tomorrow.

You don't need to reject AI to become a better developer. You just need to make sure you're not handing over the part of the process that helps you grow.

Because in the end, the goal isn't to prove that you can write code without assistance.

It's to become someone who can take an idea, understand the problem, use the tools available, and figure out how to build something that works.

And that's still worth learning.

How We Became Google DeepMind Hackathon Special Winners With KMesh

Merajul Haque — Thu, 22 Oct 2026 11:46:06 +0000

My first physical hackathon turned out very differently from what I expected.

Our project, KMesh: Local AI over Mesh Network for Disaster Management, was announced as a Special Winner in the Best Use of Gemma 4 category at the Google DeepMind Hyderabad Hackathon on Kaggle.

The funny part is that we left the venue thinking we probably wouldn't make it into the top 10.

Here's how it happened.

I didn't even know I was going to a hackathon

A couple of days before the Google DeepMind Hyderabad Hackathon, I wasn't planning to attend a hackathon at all.

Then Huzefa bin Juned asked me to check my email. He had registered our team, and suddenly, I had a hackathon to prepare for.

The funny part? We didn't know the theme of the hackathon yet.

The night before the event, we had a team meeting to figure out what we might build. Osama bin Juned suggested that we should be ready to work on an Android app, so he asked us to set up Android Studio.

I already had it installed, but I hadn't used it for quite some time.

Since the event focused on Google's Gemini APIs, I made a basic Android app to test a live Gemini API connection. Nothing fancy, just enough to make sure I could get something running when the actual challenge arrived.

The morning started with an alarm that didn't ring

On the day of the hackathon, I had to wake up early. My alarm didn't ring, but somehow I woke up anyway.

We still reached the venue late. The initial activities had already happened, but we made it before the problem statements were revealed.

Once the challenge was announced, we found our workspace and split up the problem statements among ourselves. Everyone spent around half an hour researching different options. Then we came back together to discuss what we had found.

One idea stood out: Osama's idea around disaster management.

It felt like a problem where technology could make a real difference, especially when people need help and the usual communication infrastructure might not be available.

We agreed to work on it.

The real project was the mobile app

KMesh wasn't just a dashboard. The most important part of our project was the Android mobile app, designed for citizens and responders during a disaster.

Think about a flood or another emergency where internet connectivity is unavailable. Someone needs help, but they can't send a report to a central server.

What if their phone could still save that report and pass it to nearby devices?

That was the idea behind KMesh.

A citizen could compose an SOS message on their phone. The app would save it locally first, so the report wouldn't depend on an immediate internet connection. Nearby phones could then pass messages along through a mesh-style relay system, helping information travel between citizens, relay devices, and responders.

We also integrated Gemma 4 for on-device triage, with the goal of identifying which people appeared to need help most urgently.

During a disaster, responders may receive more requests than they can act on at once. We wanted to explore how local AI could help surface high-priority reports without always waiting for a server response.

The dashboard helped us visualise the wider response workflow, but the core idea was the mobile app and the network connecting people in the field.

How the offline mesh flow worked

The design aimed to keep reports moving even when internet connectivity was unavailable.

Citizen phone
     |
     | Compose SOS
     v
Save locally using Room
     |
     v
Nearby Connections
(Bluetooth / Wi-Fi Direct)
     |
     v
Nearby relay phones
     |
     | Store, deduplicate and relay
     | Seen-set + TTL
     v
Responder device
     |
     v
On-device triage with Gemma 4
     |
     v
Internet becomes available
     |
     v
Central command + Gemini
     |
     v
Response relayed back through the mesh

There were a few important design choices behind this flow:

Save first: An SOS is stored on the device before attempting to send it, reducing the chance of losing a report when connectivity is poor.
Relay between nearby devices: Phones can pass messages using Bluetooth or Wi-Fi Direct through Nearby Connections instead of requiring every citizen to reach a central server directly.
Avoid duplicate relays: A seen-set and time-to-live (TTL) help prevent messages from circulating indefinitely.
Triage on-device: Gemma 4 can help assess incoming reports locally, so prioritisation doesn't always have to wait for a server round trip.
Sync when possible: When internet access returns, information can reach central command, where Gemini can support the broader workflow. Replies can then be relayed back through the mesh.

The intention was to make emergency communication more resilient, not to assume that every device would always have internet access.

The people behind KMesh

A special thanks to Osama bin Juned, who led our team and introduced the disaster management idea. It gave us a meaningful direction to work toward in a very limited amount of time.

I worked on this with Osama bin Juned, Huzefa bin Juned, and Imran.

Huzefa was the reason I knew about the event in the first place, and I'm glad he reached out. We researched different problem statements, discussed the trade-offs, and worked together to turn the selected idea into a demonstration.

And between the planning, coding, and discussions, there were the usual hackathon moments too: food breaks, coffee, and quick conversations about what to try next.

The judging round, and why we thought it was over

When it was time for judging, a judge came to our workspace. Unfortunately, one of our team members wasn't there at that moment, so we went to the organisers and explained the situation.

They assigned us another judge, who gave us just five minutes to explain the project.

Osama did most of the explaining, and we walked the judge through the idea and gave a demo.

To be honest, the demo didn't go as well as we'd hoped.

We left thinking we probably wouldn't make it into the top 10.

And, as it turned out, we weren't in the top 10. We accepted that and headed back, talking more about how good the experience had been than about the result.

It was our first physical hackathon, and we'd still learned a lot and given the project our best.

Then, a few days later, something unexpected happened.

The message that made our day

The Special Winner announcement came out on Kaggle.

Once again, Huzefa was the one who spotted it and shared the news in our WhatsApp group.

We were genuinely happy and proud. After leaving the venue thinking we'd probably missed out, finding out that KMesh had been recognised as a Special Winner in the Best Use of Gemma 4 category felt amazing.

It meant even more because this was our first hackathon.

We knew the demo hadn't been perfect, but we'd put in the effort, worked together, and tried to solve a problem that mattered.

That recognition reminded me that one imperfect presentation doesn't tell the whole story of the work behind a project.

What I learned

A few things stayed with me:

Start with the problem. The most useful part of our discussion was deciding which problem was worth solving, not which technology sounded exciting.
Prepare enough to move quickly. Testing the Gemini API the night before gave me a small head start, even though we didn't know the final challenge.
Design for real conditions. In disaster response, connectivity may be unreliable and time matters. That changes how you think about saving, relaying, and prioritising information.
Keep the scope practical. A focused mobile app and a clear demonstration can communicate an idea better than a long list of features.
Build with people who bring ideas. Osama's direction and the team's discussions helped us turn a broad challenge into a project we could explain and demonstrate.

I'm grateful to Google DeepMind, Kaggle, the organisers, and everyone who made the event possible. I'm especially grateful to Osama, Huzefa, and Imran for being part of this experience.

This was my first physical hackathon, but hopefully not my last.

I want to keep building software products that solve real-world problems, and KMesh was a meaningful step in that direction.

Explore KMesh

10 Inspiring Software Engineer Portfolios (Including Mine!)

Merajul Haque — Thu, 21 Aug 2025 18:47:46 +0000

As developers, we spend so much time building products for others that we often forget to build something for ourselves — a personal portfolio.

A portfolio isn’t just a website.
It’s your digital identity, your resume, and your playground for experimenting with code.

I recently built my own portfolio → merajulhaque.com 🎉
While working on it, I explored some truly inspiring software engineer portfolios. Here’s my list of 10 best portfolio websites you should definitely check out 👇

🌟 1. merajulhaque.com — Merajul Haque

A clean, modern portfolio (mine!) showcasing frontend projects built with React.js, Next.js, and Tailwind CSS. It’s responsive, minimal, and focuses on real-world work rather than flashy effects.

2. Brittany Chiang

Probably the most shared developer portfolio out there. Sleek design, smooth animations, and an overall professional aesthetic that sets a standard.

3. Cassidy Williams

Cassidy’s portfolio is both fun and professional. It reflects her personality while showcasing talks, work, and projects in an engaging way.

4. Lynn Fisher

An incredibly creative and playful portfolio. Lynn redesigns her website every year, making it a living experiment in web design and development.

5. Ryan Fitzgerald

Minimalist and practical. Ryan integrates his GitHub projects seamlessly, making it a great portfolio for open-source contributors.

6. Tobias Ahlin

Ex-Spotify & Minecraft designer/developer. Tobias demonstrates how design and engineering can blend perfectly in a portfolio.

7. Josh Comeau

Interactive, playful, and packed with animations. Josh’s site is also a knowledge hub with interactive blog posts — highly inspirational.

8. Manjunath Bhat

A modern portfolio with a focus on full-stack projects and developer blogs. Simple, functional, and well-structured.

9. Shawn Wang (Swyx)

A portfolio that goes beyond projects. Swyx balances technical work, writing, and developer advocacy, making it ideal for devs who write and speak as much as they code.

10. Adham Dannaway

The legendary split-screen design: half designer, half developer. A true classic and a reminder that you can be both.

💡 Key Takeaways for Your Own Portfolio

Keep it clean → Don’t overwhelm with too much text or effects.
Show personality → Add a touch of you, not just code.
Highlight projects → Real-world apps and contributions > buzzwords.
Experiment → Try animations, dark mode, or unique layouts.
Stay updated → Outdated portfolios give the wrong impression.

👉 These portfolios inspired me to continuously improve my own site haque.tech.
Now I’d love to see yours — drop your portfolio link in the comments and let’s get inspired together! 🚀

#portfolio #softwareengineer #frontend #react #nextjs #tailwindcss #webdev #career

Role-Based Authentication in Node.js with Express.js and MongoDB

Merajul Haque — Sat, 15 Mar 2025 19:14:34 +0000

Introduction

Role-Based Authentication (RBA) is a method to control access based on user roles (e.g., Admin, User, Manager). This tutorial will guide you through implementing RBA in a Node.js application using Express.js and MongoDB.

Prerequisites

Before we start, ensure you have the following:

Node.js installed on your system
MongoDB set up and running
Basic knowledge of Express.js and JWT (JSON Web Tokens)
A tool like Postman or cURL for API testing

Steps to Implement Role-Based Authentication

1. Initialize the Project

First, create a new project folder and initialize a Node.js project.

mkdir role-based-auth
cd role-based-auth
npm init -y

This creates a package.json file for managing dependencies.

Now, install the required packages:

npm install express mongoose bcryptjs jsonwebtoken dotenv cors express-rate-limit https

express: Web framework for Node.js

mongoose: ODM (Object Data Modeling) library for MongoDB

bcryptjs: For hashing passwords securely

jsonwebtoken: To generate and verify authentication tokens

dotenv: For managing environment variables

cors: To enable Cross-Origin Resource Sharing

express-rate-limit: To prevent API abuse

https: For secure HTTPS implementation

2. Set Up the Server

Create server.js and configure the Express server:

require('dotenv').config();
const express = require('express');
const mongoose = require('mongoose');
const fs = require('fs');
const https = require('https');
const rateLimit = require('express-rate-limit');
const authRoutes = require('./routes/authRoutes');
const protectedRoutes = require('./routes/protectedRoutes');

const app = express();
app.use(express.json());
app.use('/api/auth', authRoutes);
app.use('/api/protected', protectedRoutes);

// Rate Limiting
const limiter = rateLimit({
  windowMs: 15 * 60 * 1000, // 15 minutes
  max: 100, // Limit each IP to 100 requests per window
  message: 'Too many requests, please try again later.'
});
app.use(limiter);

mongoose.connect(process.env.MONGO_URI, {
  useNewUrlParser: true,
  useUnifiedTopology: true,
}).then(() => console.log("MongoDB Connected"))
  .catch(err => console.error(err));

const httpsOptions = {
  key: fs.readFileSync('./key.pem'),
  cert: fs.readFileSync('./cert.pem')
};

https.createServer(httpsOptions, app).listen(5000, () => console.log('Server running on port 5000 (HTTPS)'));

3. Implement Refresh Tokens

Modify routes/authRoutes.js to include refresh tokens:

const jwt = require('jsonwebtoken');
const refreshTokens = [];

// Generate Access Token
const generateAccessToken = (user) => {
  return jwt.sign({ id: user._id, role: user.role }, process.env.JWT_SECRET, { expiresIn: '15m' });
};

// Generate Refresh Token
const generateRefreshToken = (user) => {
  const refreshToken = jwt.sign({ id: user._id }, process.env.REFRESH_SECRET);
  refreshTokens.push(refreshToken);
  return refreshToken;
};

// Refresh Token Route
router.post('/refresh', (req, res) => {
  const { token } = req.body;
  if (!token || !refreshTokens.includes(token)) {
    return res.status(403).json({ message: 'Access denied' });
  }
  jwt.verify(token, process.env.REFRESH_SECRET, (err, user) => {
    if (err) return res.status(403).json({ message: 'Invalid refresh token' });
    const accessToken = generateAccessToken(user);
    res.json({ accessToken });
  });
});

4. Implement Role Management

Modify routes/authRoutes.js to allow admin to change user roles:

const { authenticate, authorize } = require('../middleware/authMiddleware');

// Change User Role (Admin Only)
router.put('/change-role/:id', authenticate, authorize(['admin']), async (req, res) => {
  try {
    const { role } = req.body;
    const user = await User.findByIdAndUpdate(req.params.id, { role }, { new: true });
    res.json({ message: 'User role updated', user });
  } catch (err) {
    res.status(500).json({ error: 'Server error' });
  }
});

5. Secure the API with HTTPS & Rate Limiting

HTTPS: Uses SSL/TLS encryption
Rate Limiting: Limits requests per IP

6. Test the API

Start the server:

node server.js

Use Postman or cURL to test:

Register a user: POST /api/auth/register
Login to receive a token: POST /api/auth/login
Get a new access token: POST /api/auth/refresh
Change user role (Admin only): PUT /api/auth/change-role/:id
Access protected routes:
GET /api/protected/admin (Admin only)
GET /api/protected/user (User and Admin)

Conclusion

You have successfully implemented Role-Based Authentication in Node.js Express with MongoDB.

Key Features:
✔ Refresh tokens for session management
✔ Dynamic role management
✔ API security with HTTPS & rate limiting

Day 6: Handling Events in React

Merajul Haque — Sat, 07 Sep 2024 18:08:55 +0000

Welcome to Day 6 of our "30 Days of ReactJS" series! Today, we’re diving into Handling Events in React. Understanding event handling is crucial for creating interactive and user-friendly applications.

What is Event Handling?

Event handling in React allows you to respond to user actions such as clicks, form submissions, or keyboard inputs. In React, events are handled in a way that is similar to how you would handle them in plain HTML/JavaScript, but with some key differences that fit within React’s declarative model.

React Event Handling Basics

In React, event handlers are passed as props to React elements. Unlike plain HTML, React event handlers use camelCase syntax instead of lowercase. For example, onClick instead of onclick.

Example: Basic Button Click Handler

import React from 'react';

function ClickButton() {
  const handleClick = () => {
    alert('Button was clicked!');
  };

  return (
    <button onClick={handleClick}>
      Click Me
    </button>
  );
}

export default ClickButton;

In this example, the handleClick function is executed when the button is clicked, displaying an alert.

Real-Life Example: ATM Machine
Imagine an ATM machine where you enter your PIN and select an amount to withdraw. Each button press (like entering a digit or selecting the withdrawal amount) triggers an event. In React, you handle these interactions using event handlers.

Event Objects

React event handlers receive an event object as an argument. This object contains information about the event, such as the target element and the type of event.

Example: Handling Input Change

import React, { useState } from 'react';

function InputForm() {
  const [value, setValue] = useState('');

  const handleChange = (event) => {
    setValue(event.target.value);
  };

  return (
    <div>
      <input type="text" value={value} onChange={handleChange} />
      <p>You typed: {value}</p>
    </div>
  );
}

export default InputForm;

Here, the handleChange function updates the state with the input value, allowing you to see what is typed in real-time.

Binding Event Handlers

In class components, you often need to bind event handlers to the component instance. This is not necessary in functional components with hooks, as functions are automatically bound.

Example: Binding in Class Components

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    console.log('Button clicked');
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        Click Me
      </button>
    );
  }
}

Binding ensures that this refers to the component instance inside the event handler.

Event Handling with Vite

With Vite as your development tool, handling events remains straightforward. Vite’s fast refresh helps you see changes immediately, making it easier to test and debug your event handlers.

Wrapping Up

Handling events is a fundamental aspect of React that allows your application to respond to user interactions. By attaching event handlers to elements, you can make your app dynamic and interactive.

Tomorrow, we’ll build upon this by exploring Building Your First ReactJS App, where you’ll see how event handling integrates into a complete application.

Day 5: State and Lifecycle Methods - ReactJS

Merajul Haque — Sun, 01 Sep 2024 18:04:44 +0000

Welcome to Day 5 of the "30 Days of ReactJS" challenge! Today, we’re going to explore two fundamental concepts in React: State and Lifecycle Methods. Understanding these will empower you to create dynamic, interactive applications.

What is State?

State in React refers to a built-in object that holds information that may change over the lifetime of a component. Unlike props, which are read-only and passed down from a parent component, state is local to the component and can be modified internally.

Think of state like a chalkboard. You can write and erase information on it as needed, allowing your component to adapt to changes, such as user input or data fetching.

Example: A Counter Component

Let's create a simple counter component that increases its count when a button is clicked:

import { useState } from 'react';

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

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

Here, useState is a React hook that allows you to add state to a functional component. The count variable holds the current state, and setCount is the function to update it.

What Are Lifecycle Methods?

Lifecycle methods are special methods in React class components that allow you to run code at specific points in a component's lifecycle. This lifecycle includes mounting (adding to the DOM), updating (re-rendering), and unmounting (removal from the DOM).

Although class components are becoming less common with the introduction of React hooks, understanding lifecycle methods is still important, especially when working with older codebases.

Example: componentDidMount

A common lifecycle method is componentDidMount, which runs after the component is first rendered. It's often used for initializing data, such as fetching data from an API:

class DataFetcher extends React.Component {
  state = { data: null };

  componentDidMount() {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => this.setState({ data }));
  }

  render() {
    return (
      <div>
        {this.state.data ? (
          <p>Data: {this.state.data}</p>
        ) : (
          <p>Loading...</p>
        )}
      </div>
    );
  }
}

In this example, componentDidMount fetches data as soon as the component is added to the DOM, and the state is updated with the fetched data.

Real-Life Example: A Restaurant Order
Imagine placing an order at a restaurant (component mounting). The kitchen starts preparing your food after you place the order (componentDidMount). As the food is being prepared (updating), you might get status updates. Finally, the food is served and you finish your meal (component unmounting).

State and Lifecycle with Vite

Since we’re using Vite for our development environment, setting up state and lifecycle methods is seamless. Vite’s fast development server ensures that your state changes and lifecycle methods are reflected almost instantly during development.

Here’s how you can structure your project to include state and lifecycle methods:

Initialize State: Use useState in your functional components to manage dynamic data.
Class Components for Lifecycle: If you’re using class components, implement lifecycle methods like componentDidMount and componentWillUnmount to manage side effects.

Wrapping Up

State and lifecycle methods are crucial for creating dynamic, responsive React applications. State allows your components to be interactive, while lifecycle methods give you control over how and when your components interact with the DOM.

Tomorrow, we’ll explore Handling Events in React, which will further enhance the interactivity of your applications.

Day 4: Components and Props - ReactJS

Merajul Haque — Sat, 31 Aug 2024 15:13:11 +0000

Welcome to Day 4 of the "30 Days of ReactJS" challenge! Today, we’re going to explore Components and Props—the building blocks of any React application. Understanding these concepts will allow you to break down your UI into reusable, independent pieces.

What Are Components?

Components in React are like the ingredients in a recipe. Just as you combine different ingredients to create a dish, you combine components to build a React application. A component is a JavaScript function or class that optionally accepts inputs (known as props) and returns a React element that describes what should appear on the screen.

There are two main types of components in React:

Functional Components: These are JavaScript functions that return JSX. They’re simpler and easier to read.

Class Components: These are ES6 classes that extend from React.Component. They have more features like state and lifecycle methods but are less common in modern React development.

Example: A Button Component

Let’s create a simple button component:

function Button() {
  return (
    <button>Click me!</button>
  );
}

This Button component is a functional component that returns a button element with the text "Click me!".

Why Components Matter

Components allow you to break down your UI into smaller, manageable pieces. This makes your code more organized and easier to maintain. Imagine trying to cook a complex dish without breaking it down into steps. It would be chaotic! Similarly, building a UI without components can become overwhelming.

Real-Life Example: Lego Blocks
Think of components like Lego blocks. Each block (component) is a piece of your application, and you can combine them to create something larger. Just like Lego blocks, components can be reused in different parts of your application.

What Are Props?
Props (short for "properties") are the way you pass data from one component to another. They are similar to function arguments and can be used to customize a component.

For example, let’s say we want to create a Button component that can display different text based on the props it receives:

function Button(props) {
  return (
    <button>{props.label}</button>
  );
}

Now, when you use the Button component, you can pass in a label prop to customize its text:

function App() {
  return (
    <div>
      <Button label="Submit" />
      <Button label="Cancel" />
    </div>
  );
}

Here, the Button component is used twice, but with different labels: "Submit" and "Cancel".

The Importance of Props

Props make your components more flexible and reusable. Instead of hardcoding values inside your components, you can pass in dynamic data through props, allowing you to use the same component in different contexts.

Setting Up Components and Props with Vite

Since we’re using Vite for our development environment, setting up components and props is straightforward. If you’ve been following along, your Vite project is already configured. You can start creating components in separate files and import them into your main application.

Here’s how you can structure your project:

1. Create a New Component: Create a new file, Button.jsx, in your src folder and define your Button component there.
2. Use the Component in Your App: In your App.jsx file, import the Button component and use it with different props.

Putting It All Together

Components and props are at the heart of React’s component-based architecture. By breaking down your UI into smaller components and passing data between them using props, you can build scalable and maintainable applications.

Tomorrow, we’ll dive into State and Lifecycle Methods, which will allow your components to manage dynamic data and respond to changes over time.

Day 5: State and Lifecycle Methods

Day 3: Understanding JSX and Rendering Elements - ReactJS

Merajul Haque — Fri, 30 Aug 2024 06:44:41 +0000

Welcome to Day 3 of the "30 Days of ReactJS" challenge! Today, we’ll dive into one of the core concepts of React: JSX. By the end of this post, you’ll have a solid understanding of JSX and how React uses it to render elements on the web page.

What is JSX?
JSX stands for JavaScript XML. It’s a syntax extension for JavaScript that allows you to write HTML-like code within your JavaScript files. JSX makes it easier to create and visualize the UI components directly in your code, blending the logic and structure of your app.

How JSX Works
When you write JSX, you’re writing a mix of HTML and JavaScript. React takes this and transforms it into standard JavaScript objects that represent your UI.

Here’s a basic example:

const element = <h1>Hello, world!</h1>;

This line of code creates a React element that represents an <h1> tag with the text “Hello, world!”.

JSX is Not HTML
Even though JSX looks a lot like HTML, it’s important to remember that it’s not exactly the same. JSX is a syntactic sugar that React uses to create elements.

For example, in HTML, attributes like class are used to apply CSS classes:

<h1 class="header">Hello, world!</h1>

But in JSX, you need to use className instead of class, because class is a reserved keyword in JavaScript:

const element = <h1 className="header">Hello, world!</h1>;

Embedding Expressions in JSX
One of the powerful features of JSX is that you can embed JavaScript expressions directly within it. This allows you to dynamically generate content based on your app’s logic.

For example:

const name = 'Meraj';
const element = <h1>Hello, {name}!</h1>;

Here, {name} is a JavaScript expression that will be evaluated and replaced with the value of the name variable, rendering as “Hello, Meraj!” on the screen.

Rendering Elements in React
In React, rendering elements is the process of displaying content on the page. React elements are the building blocks of your app’s UI.

To render an element, you use the ReactDOM.render() method. This method takes two arguments:

The React element you want to render.
The DOM element where you want to render it.

Here’s how you would render the "Hello, world!" example:

import React from 'react';
import ReactDOM from 'react-dom/client';

const element = <h1>Hello, world!</h1>;
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(element);

This code tells React to render the element inside the HTML element with the id of root.

The Power of React's Virtual DOM
React uses a virtual DOM to efficiently manage changes to the UI. When you update an element, React compares the new version with the previous one and only updates the parts of the actual DOM that have changed. This approach makes React fast and efficient.

Real-Life Example: A Shopping List
Think of a shopping list on a whiteboard. If you need to change one item, you don’t erase the entire list and rewrite it. You just update the specific item that changed. React’s virtual DOM works similarly, updating only the parts that need to be changed.

Why Use JSX?

Readable Code: JSX allows you to write your components in a way that’s easy to read and understand. You can see the structure of your UI directly in your code.
Less Code: With JSX, you can write less code compared to using React.createElement() to create elements manually.
Integration with JavaScript: Since JSX is a syntactic extension of JavaScript, you can embed logic directly within your UI code.

Setting Up JSX with Vite
Since we’re using Vite for development, the good news is that Vite comes pre-configured to support JSX out of the box. This means you can start writing JSX immediately without any additional setup.

If you’ve followed the steps from Day 2, your Vite project is already set up. You can start creating components with JSX and see them rendered instantly.

Conclusion
JSX is a powerful tool that bridges the gap between HTML and JavaScript, making it easier to build dynamic and interactive UIs with React. Understanding how JSX works and how React uses it to render elements will set a strong foundation for your React development journey.

Tomorrow, we’ll dive into Components and Props—the core building blocks of any React application.

Day 4: Components and Props

Day 2: Setting Up Your Development Environment - ReactJS

Merajul Haque — Thu, 29 Aug 2024 06:34:11 +0000

Welcome to Day 2 of the "30 Days of ReactJS" challenge! Today, we'll set up your development environment to start building React applications. The tools we choose today will make your development process smoother and more efficient.

Why Setting Up the Right Environment Matters

Before diving into code, it's essential to have a properly configured environment. Imagine you're about to bake a cake. Before you start mixing ingredients, you'd want to ensure you have all the right tools: a mixing bowl, a whisk, an oven preheated to the right temperature, etc. Similarly, in web development, setting up the right tools from the beginning will save you time and headaches later.

What is Vite?

For our development environment, we'll use Vite. Vite (pronounced "veet") is a fast and modern build tool that offers an excellent development experience for ReactJS. It’s known for its speed and simplicity, making it perfect for both beginners and seasoned developers.

Step-by-Step Guide to Setting Up Vite

Let’s go through the steps to set up your ReactJS development environment using Vite.

1. Install Node.js and npm

First, ensure that you have Node.js installed on your computer. Node.js is a JavaScript runtime that allows you to run JavaScript code outside of a browser. Along with Node.js, you'll also get npm (Node Package Manager), which we'll use to manage our project dependencies.

Check if Node.js is installed: Open your terminal (Command Prompt, PowerShell, or Terminal on macOS/Linux) and type:

node -v

If Node.js is installed, you’ll see the version number. If not, you can download it from nodejs.org.

Check npm version: To check if npm is installed, type:

npm -v

2. Create a New React Project with Vite

Once Node.js and npm are ready, we can create a new React project using Vite. Follow these steps:

Step 1: Open your terminal: Navigate to the directory where you want to create your project.
Step 2: Run the following command:

npm create vite@latest

Step 3: Choose your project name: After running the command, you’ll be prompted to enter your project’s name. For example, you can name it my-react-app.
Step 4: Select your framework: Vite will ask you to select a framework. Choose React from the list.
Step 5: Select the variant: When prompted to select a variant, choose JavaScript.
Step 6: Navigate to your project directory:

cd my-react-app

Step 7: Install dependencies:

3. Run Your React Project

Now that the project is set up, let’s run it to ensure everything works correctly.

Step 1: Start the development server:

npm run dev

Step 2: Open your browser: After running the command, you’ll see an output like this:

VITE v3.0.0  ready in 150 ms

Local:   http://localhost:3000/
Network: http://192.168.1.100:3000/

Step 3: Visit the URL: Open http://localhost:3000/ in your browser. You should see the default Vite React template page.

Real-Life Example: Setting Up Your Workspace
Think of this process like setting up a new workspace in your office. You've got your desk (Node.js), your tools (npm), and your project files (React app). Now, you’re ready to start working!

What’s Next?

Now that your development environment is set up, you're ready to start building with React! Tomorrow, we’ll dive into JSX and how React renders elements on the page.

Remember, setting up the environment is just the beginning. With a strong foundation, you can now focus on writing clean, efficient code as we progress through the challenge.

Final Thoughts

Getting your environment right from the start ensures a smooth development experience. With Vite, you’ll benefit from faster builds and instant feedback as you code, making your ReactJS learning journey more enjoyable.

Day 3: Understanding JSX and Rendering Elements

Day 1: Introduction to ReactJS

Merajul Haque — Wed, 28 Aug 2024 01:37:53 +0000

Welcome to Day 1 of the "30 Days of ReactJS" challenge! Today, we'll begin our journey by understanding what ReactJS is, why it has become one of the most popular libraries in web development, and how it can help you build dynamic, modern web applications.

What is ReactJS?

ReactJS, commonly known as React, is an open-source JavaScript library developed by Facebook. It was initially released in 2013 and has since become a go-to tool for building user interfaces (UIs), particularly single-page applications (SPAs). Unlike traditional JavaScript libraries, React focuses on creating components—reusable pieces of code that define parts of the user interface.

Real-Life Example: Building with LEGO Blocks
Imagine you're building a complex LEGO structure. Instead of working with a single giant piece, you use smaller, individual blocks that can be combined in various ways. React works similarly. Instead of creating an entire web page as one large entity, React allows you to build it piece by piece using components. Each component is like a LEGO block that can be reused and combined to create complex UIs efficiently.

Why Use ReactJS?

ReactJS offers several advantages that make it an essential tool for modern web development:

Component-Based Architecture: React allows you to break down your UI into smaller, reusable components. This modular approach makes your code more organized, easier to manage, and more scalable.

Real-Life Example: Think of an e-commerce website. You can create a ProductCard component that displays a product’s image, name, and price. This component can be reused throughout the site wherever you need to show a product.

Virtual DOM: React uses a virtual DOM to optimize updates and rendering. Instead of updating the entire page whenever something changes, React updates only the parts that need to change, making the app faster and more efficient.

Real-Life Example: Consider how your social media feed updates. When you like a post, only that specific post's like count updates instead of reloading the entire page. This is similar to how React's virtual DOM efficiently manages updates.

Declarative UI: React lets you describe what the UI should look like based on the application's state, and it takes care of the rest. This approach is easier to reason about and leads to more predictable code.

Real-Life Example: Think of writing a recipe. Instead of describing each step in detail (imperative), you just list the ingredients and instructions (declarative). React works similarly by letting you declare what you want your UI to look like, and it handles the underlying steps.

Strong Community and Ecosystem: React has a vast and active community, which means you can find countless tutorials, libraries, tools, and resources to help you solve problems and build your projects.

Real-Life Example: Consider learning a new language in a city where everyone speaks it. The more people using it, the easier it is to find help, resources, and opportunities to practice. React’s community provides a similar environment for developers.

Where is ReactJS Used?

ReactJS is used by some of the biggest names in tech, including Facebook, Instagram, Airbnb, Netflix, and Uber. These companies rely on React to build fast, interactive, and scalable web applications that serve millions of users daily.

Real-Life Example: React in Action
Take Facebook as an example. Every time you interact with a post—whether you're liking, sharing, or commenting—React is working behind the scenes to ensure that these interactions are quick and that the UI updates efficiently without reloading the entire page.

Setting Up for the Challenge

Throughout this 30-day challenge, you'll get hands-on experience with ReactJS. By the end of the series, you'll have built several projects and gained a deep understanding of how React works.

For tomorrow, make sure to have a basic understanding of JavaScript and be ready to set up your development environment. We'll dive into setting up React on your local machine and getting your first React app up and running.

Final Thoughts

ReactJS is more than just a tool—it's a paradigm shift in how we think about building user interfaces. Whether you're creating a small personal project or working on a large-scale application, React provides the tools and patterns needed to build efficient, maintainable, and scalable UIs.

Stay tuned for Day 2, where we’ll set up your development environment and start coding with ReactJS!

Day 2: Setting Up Your Development Environment

Overview: 30 Days of ReactJS in 2024

Merajul Haque — Wed, 28 Aug 2024 01:03:37 +0000

Welcome to "30 Days of ReactJS," your comprehensive journey into mastering ReactJS in 2024! Whether you're a beginner looking to break into web development or an experienced developer aiming to sharpen your skills, this 30-day challenge will guide you through the core concepts and advanced techniques of ReactJS, one of the most popular JavaScript libraries for building dynamic user interfaces.

Why ReactJS in 2024?

ReactJS remains a dominant force in the web development world due to its flexibility, component-based architecture, and strong community support. With new updates and features being released regularly, staying current with ReactJS in 2024 is crucial for any developer looking to create modern, efficient, and scalable web applications.

What to Expect

Over the next 30 days, we'll explore a wide range of topics, from the basics to advanced concepts, ensuring you gain a solid understanding of ReactJS and its ecosystem. Each day will feature a focused post with clear explanations, code examples, and practical projects to help you apply what you've learned. Here's a glimpse of what we'll cover:

Week 1: Getting Started with ReactJS

Day 1: Introduction to ReactJS
Day 2: Setting Up Your Development Environment
Day 3: Understanding JSX and Rendering Elements
Day 4: Components and Props
Day 5: State and Lifecycle Methods
Day 6: Handling Events in React
Day 7: Building Your First ReactJS App

Week 2: Diving Deeper into ReactJS

Day 8: Managing State with Hooks
Day 9: Effect Hook and Data Fetching
Day 10: Conditional Rendering
Day 11: Lists and Keys in React
Day 12: Forms and Controlled Components
Day 13: Lifting State Up
Day 14: Composition vs Inheritance

Week 3: React Ecosystem and Advanced Concepts

Day 15: React Router: Navigation Made Easy
Day 16: Context API for Global State Management
Day 17: Optimizing Performance with React.memo
Day 18: Code Splitting with React.lazy and Suspense
Day 19: Error Boundaries for Robust Applications
Day 20: Testing React Applications with Jest and React Testing Library
Day 21: Animations in React with Framer Motion

Week 4: Building Real-World Applications

Day 22: State Management with Redux
Day 23: Integrating APIs with Axios
Day 24: Authentication in React Apps
Day 25: Building a Real-Time Chat App with Socket.io
Day 26: Deploying React Apps to Vercel and GitHub Pages
Day 27: Next.js: The React Framework for Production
Day 28: Tailwind CSS with React: Beautiful UI Quickly

Bonus

Day 29: SEO and React: Best Practices
Day 30: Final Project: Building and Deploying a Full-Stack App

How to Participate

Each day, a new post will go live on dev.to, and you'll have the opportunity to follow along, ask questions, and share your progress with the community. To make the most of this challenge, I recommend setting aside time daily to read, code, and experiment with the examples provided.

Final Thoughts

By the end of this 30-day challenge, you'll have a solid foundation in ReactJS, equipped to tackle real-world projects with confidence. This series is designed to be accessible yet challenging, pushing you to grow as a developer. So, are you ready to dive into ReactJS in 2024? Let's get started!

Stay tuned for more, and don't forget to share your journey with the hashtag #30DaysOfReactJS2024 on social media. Happy coding!

Day 1: Introduction to ReactJS

Essential Security Practices for Web Developers: Keep Your Code Safe and Sound

Merajul Haque — Tue, 27 Aug 2024 14:06:16 +0000

Security might not be the flashiest part of web development, but it’s one of the most critical. Neglecting security can turn your brilliant web app into a ticking time bomb, vulnerable to attacks that could compromise user data, damage your reputation, and cost you a lot of time and money. But fear not! With the right practices, you can build secure applications that users trust. Here’s how to do it.

1. Validate Everything: Trust No Input

Every piece of data your app handles is a potential threat. Whether it’s a user’s name, a file upload, or a form submission, validate it before it enters your system.

Sanitize inputs: Remove or escape special characters.
Use libraries: Leverage libraries like validator.js to handle common validation tasks.
Client-side & server-side validation: Always validate on both ends. Client-side validation is convenient, but server-side validation is essential.

2. Prevent XSS (Cross-Site Scripting)

XSS attacks occur when attackers inject malicious scripts into web pages viewed by others.

To prevent this:

Escape user input: Use templating engines that automatically escape output (e.g., Handlebars, EJS).
Content Security Policy (CSP): Implement CSP headers to restrict the sources from which scripts can be loaded.
Sanitize HTML: If your app allows users to submit HTML (e.g., in a rich text editor), make sure to sanitize it.

3. Keep Your Dependencies in Check

Most modern apps rely on third-party libraries. However, those dependencies can introduce vulnerabilities.

Audit regularly: Tools like npm audit and Snyk can help you identify vulnerabilities in your dependencies.
Update promptly: Keep your dependencies up to date. Vulnerabilities are often fixed in newer versions.
Limit dependencies: Only include the libraries you really need. Fewer dependencies mean fewer potential risks.

4. Secure Authentication & Authorization

Your authentication system is your first line of defense.

Use HTTPS: Encrypt all data transmitted between the client and server.
Hash passwords: Never store passwords in plain text. Use strong hashing algorithms like bcrypt.
Implement Multi-Factor Authentication (MFA): Add an extra layer of security to your login process.
Limit login attempts: Prevent brute-force attacks by limiting the number of failed login attempts.

5. Protect Sensitive Data

Sensitive data needs extra care.

Encrypt data at rest: Use strong encryption for any sensitive data stored in your database.
Use environment variables: Keep API keys, database credentials, and other sensitive information out of your codebase. Use environment variables instead.

6. Avoid Common Security Pitfalls

Sometimes, small mistakes can lead to big vulnerabilities.

CSRF protection: Cross-Site Request Forgery (CSRF) can be mitigated with tokens that verify the authenticity of requests.
Disable unnecessary features: If your web server has features you’re not using, disable them to reduce the attack surface.
Error messages: Be careful not to expose sensitive information in your error messages. Instead, log the details internally and show generic error messages to users.

7. Monitor & Respond

Security is an ongoing process, not a one-time task.

Log activity: Keep detailed logs of all user and system activities.
Set up alerts: Use tools like Sentry or LogRocket to detect and alert you to unusual behavior.
Regularly review and patch: Schedule regular security reviews and patch vulnerabilities promptly.

Final Thoughts

Security doesn’t have to be overwhelming. By adopting these practices, you can create a safer web for everyone—users, developers, and businesses alike. Remember, the cost of ignoring security is far greater than the effort required to implement it. Stay vigilant, keep learning, and build secure web applications that users can rely on!

What’s your favorite security tip or tool? Share it in the comments below!