DEV Community: Naweli Verma

The Backend Setup Every Developer Should Follow

Naweli Verma — Tue, 03 Mar 2026 12:27:59 +0000

Before you write your backend code, it is very important to have a clean and organized setup — one that helps you scale, debug, and collaborate better.

There are 6 major layers of it.

Routes
Controllers
Middleware
Services
Repositary
Database

Routes – The Entry Points

Routes define which function should run when a specific request hits your server.

They map HTTP methods and URLs to controllers.

router.post("/signup", userController.signup);
router.get("/profile", authMiddleware, userController.getProfile);

Routes should be thin and clean.
They don’t contain logic.
They only decide where the request goes.

Think of Routes as:
The road map of your backend.

Controllers – The Request Handlers

Controllers handle:

Reading request data (req.body, req.params, req.query)
Sending response (res.json, res.status)
Calling the service layer

They should NOT:

Contain business logic
Talk directly to the database
Hash passwords
Calculate business rules

Think of Controllers as:
The receptionist. They receive and respond.

Middleware – The Gatekeepers

Middleware runs before the controller.

It is used for:

Authentication (JWT verification)
Logging
Input validation
Rate limiting
Error handling

router.get("/profile", authMiddleware, userController.getProfile);

The request must pass through middleware before reaching the controller.

Think of Middleware as:
The security check at the airport.

Services – The Brain of the Application

This is where your real logic lives.

Services handle:

Business rules
Data transformations
Workflow decisions

Orchestration of multiple repositories.

exports.signup = async ({ email, password }) => {
  const existingUser = await userRepository.findByEmail(email);

  if (existingUser) {
    throw new Error("User already exists");
  }

  const hashedPassword = await bcrypt.hash(password, 10);

  return await userRepository.createUser(email, hashedPassword);
};

Think of Services as:
The decision-maker.

Repository – The Data Access Layer

The repository is responsible for:

Communicating with the database
Executing queries
Returning raw data

It does NOT:

Decide business rules
Validate logic
Handle HTTP

exports.findByEmail = async (email) => {
  return db("users").where({ email }).first();
};

Repository is:

An abstraction over the database.
If tomorrow you switch from PostgreSQL to MongoDB,
only the repository layer should change.

Think of Repository as:
The translator between your app and the database.

Database – The Storage Engine

This is your:

PostgreSQL
MySQL
MongoDB
Supabase

Its job is simple:

Store data
Retrieve data
Maintain integrity

It does not care about:

HTTP
Business logic
Application rules
It only stores information

Full Request Flow

Let’s say a user signs up.
Request hits Route
Middleware validates token/input
Controller receives request
Controller calls Service
Service applies business logic
Service calls Repository
Repository talks to Database
Response travels back up the chain

Database → Repository → Service → Controller → Client

Clean. Predictable. Scalable.

🧠 Simple Mental Model

If you're ever confused where something belongs, ask:

Does it handle HTTP? → Controller

Does it validate/authenticate/log? → Middleware

Is it business logic? → Service

Is it database query? → Repository

Is it storage? → Database

Does it map endpoint to controller? → Route

This structure is inspired by architectural principles popularized in
Clean Architecture by Robert C. Martin — but simplified for practical backend applications.

A Beginner’s Guide to System Design: Thinking Beyond Code

Naweli Verma — Mon, 21 Apr 2025 17:58:58 +0000

Whether you’re scaling a startup idea, prepping for a tech interview, or just building better mental models, system design is where the rubber meets the road. It’s the blueprinting phase where ideas evolve into robust, scalable, and maintainable software architectures.

Let’s break it down in a way that makes it not just digestible but fun.

🚀 What Is System Design, Really?

System design is the art (and science) of defining the architecture, components, modules, interfaces, and data for a system to satisfy specified requirements.

But that’s textbook.

In practice? It’s like being the city planner of a digital city. You’re not laying bricks (coding), you’re deciding where the roads, bridges, schools, and power grids go — so that everything works together smoothly.

🧩 Two Sides of the Coin

1. High-Level Design (HLD)

This is the bird’s-eye view. It includes:

System architecture (e.g., client-server, microservices, monolith)
Major components and how they communicate
Technologies used
Trade-offs and justifications
Example: For a URL shortener like Bit.ly, you’d sketch out how requests go from client to API to DB to cache and back.

2. Low-Level Design (LLD)

This zooms into the nuts and bolts:

Class diagrams
Database schemas
API contracts
Algorithms and data structures
Think of this as the developer’s guidebook for implementation.

🛠️ Core Building Blocks

Here are the recurring ingredients in any modern system:

Load Balancers — Distribute traffic evenly
Caching — Speed up repeated reads (Redis, Memcached)
Databases — SQL vs NoSQL, consistency vs availability
Message Queues — Async communication (Kafka, RabbitMQ)
CDNs — Move content closer to users
Replication & Sharding — For scaling DBs
Understanding when and why to use them is key.

You’ll constantly face trade-offs:

Consistency vs Availability (hello, CAP theorem!)
Latency vs Complexity
Premature optimization vs scalability

And the right answer often depends on the product’s goals, scale, and team maturity.

Closuer love story

Naweli Verma — Tue, 15 Apr 2025 11:57:39 +0000

Naweli Verma

Apr 15 '25

The Closure Conspiracy: Why Your Functions Never Forget

#javascript #webdev #ai #fullstack

Comments

3 min read

The Closure Conspiracy: Why Your Functions Never Forget

Naweli Verma — Tue, 15 Apr 2025 11:56:56 +0000

A closure is created when a function is defined inside another function, allowing the inner function to access the outer function's variables, even after the outer function has finished executing.

function outer() {
    let count = 0; // This is a variable in the outer function's scope

    // This inner function is a closure
    function inner() {
        count++;  // It has access to the 'count' variable from the outer function
        console.log(count);
    }

    return inner;  // outer() returns the inner function, creating a closure
}

const counter = outer();  // When outer() is called, it returns the inner function (closure)
counter();  // Logs: 1
counter();  // Logs: 2
counter();  // Logs: 3

How it works:

When outer() is called, it creates the count variable and the inner() function.
Even after outer() has finished executing, the inner() function still has access to count, because it's closed over that variable.
Every time counter() is called, the count variable persists across calls.

How Closures Work:

When a function is created inside another function, it captures the variables from its outer function's scope. This means that the inner function has access to those variables even after the outer function has finished executing.**

function outer() {
    let outerVar = "I'm from outer!";

    function inner() {
        console.log(outerVar);  // inner function has access to outerVar
    }

    inner();
}

outer();  // Logs: "I'm from outer!"

1.Creating Private Variables
Closures are often used to create private variables in JavaScript, something that isn’t directly supported. Here’s an example where a closure is used to encapsulate data:

function createCounter() {
    let count = 0;  // Private variable

    return {
        increment: function() {
            count++;
            console.log(count);
        },
        decrement: function() {
            count--;
            console.log(count);
        },
        getCount: function() {
            return count;
        }
    };
}

const counter = createCounter();
counter.increment();  // Logs: 1
counter.increment();  // Logs: 2
console.log(counter.getCount());  // Logs: 2
counter.decrement();  // Logs: 1

In this example:

count is private because it can’t be accessed directly from outside the createCounter function.

The increment(), decrement(), and getCount() functions are closures that have access to the count variable, even after createCounter() has finished executing.

Example 2: Closure with SetTimeout

Closures can also be useful with asynchronous functions, such as setTimeout, because they allow us to "remember" values over time.

function timer() {
    for (let i = 0; i < 3; i++) {
        setTimeout(function() {
            console.log(i);  // Will log 0, 1, 2 after 1 second
        }, 1000);
    }
}

timer();

The code above might not work as expected because i will have the final value (3) when setTimeout is executed. To preserve the value of i for each iteration, you can use closures to create a new scope:

function timer() {
    for (let i = 0; i < 3; i++) {
        setTimeout(function() {
            console.log(i);  // Logs: 0, 1, 2 after 1 second
        }, 1000 * i);
    }
}

timer();

By using closures, each setTimeout captures its own version of i, so you get the expected output (0, 1, 2).

Example 3: Using Closures with this

Closures can also affect the value of this in JavaScript. Here's an example:

function outer() {
    this.name = "Outer";
    const inner = function() {
        console.log(this.name); // "this" will refer to the global object or undefined in strict mode
    };
    inner();  // 'this' inside inner() is not the same as in outer()
}

const obj = new outer();  // undefined or error in strict mode

If you want to ensure that this inside inner() refers to the outer function's this, you can use an arrow function (which doesn't have its own this):

function outer() {
    this.name = "Outer";
    const inner = () => {
        console.log(this.name);  // Arrow function keeps the outer 'this'
    };
    inner();  // 'this' refers to the outer function's 'this'
}

const obj = new outer();  // Logs: "Outer"

Key Takeaways:

Closure allows functions to "remember" the environment in which they were created.
Closures are great for data encapsulation and privacy.
They also help with maintaining state across multiple function calls, especially in asynchronous code like setTimeout.

My Amazon SDE Interview Experience – May 2024

Naweli Verma — Tue, 17 Sep 2024 08:59:19 +0000

My Amazon SDE Interview Experience – May 2024

In May 2024, I had the opportunity to interview for a Software Development Engineer (SDE) role at Amazon. It all started when a recruiter reached out to me via LinkedIn. I was pleasantly surprised, as it’s always exciting.

How It All Started

The recruiter was professional and clear, giving me all the necessary details about the process and the role. After exchanging a few messages, I received a test link for the first round of the interview, which was a coding assessment. The assessment was hosted on HackerRank and comprised two coding questions.

First Round - The Coding Test

The questions were straightforward but slightly lengthy. Here's a breakdown:

1. First Question: Barcode Generation
The task was to generate a barcode based on some predefined parameters. While the question wasn't inherently complex, it required attention to detail to ensure all conditions were met. I approached this problem methodically, breaking it down into smaller parts and implementing a solution in JavaScript. The focus was on efficiency and clarity, ensuring that the generated barcode met the expected format and constraints.

2. Second Question: Array Processing with Deployment Status

This was more of a data manipulation task. The input consisted of objects, each with a deployment ID and a deployment status. My goal was to return an array based on these inputs. While the problem seemed simple, it came with its share of edge cases. For instance, some objects were missing keys, which wasn’t apparent at first glance. However, after submitting my initial solution, I realized that such edge cases needed to be accounted for. I quickly revised my code to handle these scenarios, ensuring that the missing keys wouldn’t lead to errors or incomplete results.

I solved both questions using JavaScript and was confident that my solutions passed all the test cases, including the hidden ones.

Amazon tends to move candidates forward in the process if they solve all the coding questions with all test cases passing.

After that got a call from recruiter saying that he is moving forward with the interview process, and it is going to be an onsite interview. I had 5 days to prepare.

I have been working remotely from past 3 years and never been to office, so I was scared more because of office rather than the interview rounds 🙃😂

Further Interview Rounds

I went to the amazon office, few candidates were already there. We all went for interviews. I had 3 technical rounds of interview that day.

1. Troubleshooting Round

The first round was a troubleshooting-focused interview. As soon as I walked into the room, I was greeted by an interviewer who was incredibly supportive. He kept smiling throughout the session, which helped ease my nervousness.

He handed me a sheet of paper and presented several questions related to system failures, networking, and network layers. The approach he used was particularly interesting. He asked me to think about basic solutions first—essentially encouraging me to solve the problem from the ground up. Once I provided an answer, he changed the scenario slightly, adding more complexity with each step.

For example, after discussing a network failure, he shifted the conversation to deeper layers of the network and asked what I would do if standard solutions didn’t work. This pushed me to think creatively and consider various failure points in a system, from the most common to more intricate issues.

Interview asked me to wait outside, after that one recruiter came and said that I will be going for second round.

2. DSA Round

The next round was a deep dive into data structures and algorithms (DSA). This time, my interviewer was a senior SDE at Amazon. She greeted me with a sheet of paper and presented a fairly large and complex question. As I read through it, I quickly realized that the main objective was to find the shortest path in a graph. This type of problem is common in interviews but can get tricky when edge cases are involved, which she was sure to include.

I asked a few clarifying questions to fully understand the problem and its various scenarios. Once I felt confident, I began to work on a solution—writing pseudocode directly on the paper. As I explained my approach and logic, she continuously probed deeper, asking why I made certain decisions and how I was handling different parts of the graph. I walked her through my thought process, discussing the trade-offs and optimizations. Fortunately, I was able to solve the question completely and correctly.

Once she was satisfied with my graph solution, she asked me about the time and space complexity, which I analyzed and explained to her. Feeling a sense of accomplishment, I thought the round was going well.

However, she soon moved on to another, more challenging question—this time involving dynamic programming (DP). The problem involved a matrix in which different crops needed to be planted in a way that followed certain rules. This was a more complex question, and I took my time to fully understand it. I asked several questions to ensure I covered all the constraints and edge cases.

I wrote a pseudocode solution, but it wasn’t fully optimized. She gave me some test cases, and while my code ran successfully on about 80% of them, there were still edge cases that failed. I was getting nervous at this point, and she noticed that. Fortunately, she offered a helpful hint, and I tried to optimize my solution further. Despite my best efforts, I couldn't completely nail the solution, likely due to my nerves taking over.

I waited outside again, I was not very happy and confident about with this round, but the recruiter again came said that my next round is System design. I got so happy!

3. System Design Round

The final round of the day was the System Design interview, and this was by far the most intense and draining session. The interviewer was part of Amazon’s architecture team, and right from the start, I could tell that this round would be challenging. We began with a discussion about my resume, focusing on my past projects and the design decisions I had made in previous work. He asked several questions about the architecture of the systems I had worked on, probing into the details of my design choices and the trade-offs I made.

After this initial discussion, he asked me to design a system for an ed-tech platform, with a specific focus on the video streaming feature. The goal was to design a system where teachers could stream live video sessions, and students could attend those sessions online.

We began with the high-level architecture, discussing the main components such as video servers, databases, and APIs. I explained my approach to handling the large number of users and ensuring a smooth video streaming experience. He continuously asked about scalability, reliability, and latency issues, which are crucial for a platform with live video.

Once we had covered the high-level design, he shifted the conversation to the low-level details. This is where the discussion became more technical. We explored various approaches for optimizing the system, handling edge cases, and ensuring a seamless experience for users even in worst-case scenarios. I had to think on my feet, offering solutions and alternatives for different problems, including handling spikes in user traffic and ensuring minimal downtime.

The interviewer kept presenting different scenarios—what if a video server goes down? How would you handle network congestion? How do you ensure low latency for students in different geographical regions? Each scenario required a detailed answer, and I found myself fully immersed in discussing possibilities and design patterns.

The entire interview lasted about 1.5 hours, and by the end of it, I was exhausted. It was mentally draining but also one of the most insightful interviews I’ve ever had. We explored various architectural challenges, and it felt more like a collaborative problem-solving session than a traditional interview.

So I went to amazon office at 9 AM in the morning and came out at 5 PM in the evening, I had all my rounds completed and the recruiter said that he is moving forward with the managerial round, which is not scheduled yet.

Anyways forgot to tell you one thing, Please understand all the amazon's principle before going for the interview, they will ask at-least 2 question around it in every round. So please prepare that as well

How does Blockchain work?

Naweli Verma — Mon, 08 Jan 2024 13:43:36 +0000

What exactly is Blockchain?

Blockchain is a type of database, which has a chain of data stored in blocks,it has unique characteristics that differentiate it from traditional databases. The key features of a blockchain include decentralization, immutability, and security through cryptographic techniques.

Decentralization: In a traditional database, data is usually stored in a central location, and access is controlled by a central authority. In a blockchain, the data is distributed across a network of nodes (computers) that participate in the network. Each node has a copy of the entire database, and there is no central authority controlling the entire system. This decentralized nature makes it resistant to censorship and single points of failure.

Immutability: Once data is added to the blockchain, it becomes extremely difficult to alter or delete. Each block in the chain contains a reference to the previous block, and changing the information in one block would require changing all subsequent blocks, which is computationally infeasible. This immutability provides a high level of trust in the integrity of the data.

Security: Blockchain uses cryptographic techniques to secure transactions and control access to the data. Nodes on the network validate and agree on the transactions before they are added to the blockchain. The consensus mechanism (such as proof-of-work or proof-of-stake) ensures that malicious actors cannot easily manipulate the data or compromise the network.

The security of a blockchain relies on the cryptographic link between blocks. Each block contains a hash (a unique identifier) based on its data and the hash of the previous block. If someone attempts to change the information in a block, it alters its hash. As a result, the subsequent block's reference becomes invalid, breaking the chain. This interconnectedness makes it computationally infeasible to alter one block without changing every subsequent block—a feature that enhances the immutability and security of the blockchain.

While blockchain technology provides a high level of security and immutability, it's important to note that no system is completely unhackable. The security of a blockchain network depends on factors such as the consensus mechanism, network size, and the implementation of cryptographic techniques. Additionally, vulnerabilities in the software or smart contracts built on top of the blockchain can still be exploited.

Mastering React Query's useQuery for Data Fetching

Naweli Verma — Thu, 19 Oct 2023 18:29:20 +0000

Introduction

In the ever-evolving world of web development, managing data fetching in your React applications is a crucial part of building responsive and performant user interfaces. While there are various tools and libraries available for this purpose, one of the most popular choices among developers is React Query. React Query simplifies data fetching, caching, and state management, making it a breeze to work with complex data-related tasks.

In this blog post, we will delve into the core concept of React Query: the useQuery hook, and explore how to use it effectively in your projects.

In React, fetching data is a common task. Whether you're making calls to a backend API or simply retrieving data from a local store, data fetching can quickly become complex and difficult to manage.

This is where useQuery comes in.

What is React Query?

React Query is a library that simplifies data management in React applications. It offers a comprehensive set of tools for fetching, caching, synchronizing, and updating data from your API endpoints. With React Query, you can streamline your data-fetching logic, handle data updates efficiently, and keep your UI in sync with the server's state.

The useQuery Hook

useQuery is a React hook provided by React Query that makes data fetching simple, predictable, and performant.
The useQuery hook is one of the key features of React Query, and it plays a vital role in simplifying the data-fetching process. It abstracts away much of the complex logic associated with fetching data and provides a clean and easy-to-use API for managing asynchronous data.

How does useQuery work?

To get started with useQuery, you need to import it from React Query and then invoke it. useQuery takes a query key and a query function as arguments. The query key is a unique identifier for the data you want to fetch, which can be any string or array of values. The query function is an asynchronous function that returns the data.

When useQuery is called, it will first check if the data for the given query key is already cached. If the data is cached, it will be returned immediately. If the data is not cached, the query function will be called and the data will be fetched.

Once the data has been fetched, it will be stored in the cache and returned. The next time useQuery is called with the same query key, the cached data will be returned immediately.

import { useQuery } from 'react-query';

const getProducts = () => {
  return fetch('https://api.example.com/products').then(res => res.json());
};

const Products = () => {
  const { isLoading, error, data } = useQuery('products', getProducts);

  if (isLoading) return <div>Loading...</div>;

  if (error) return <div>Error: {error.message}</div>;

  return (
    <ul>
      {data.map(product => (
        <li key={product.id}>{product.name}</li>
      ))}
    </ul>
  );
};

In this example, the useQuery hook is used to fetch a list of products from an API. The queryKey is products and the queryFunction is getProducts.

Handling Loading and Errors

Asynchronous data fetching can result in various states, including loading and error states. React Query provides isLoading and error properties to help you manage these states gracefully. You can conditionally render loading spinners or error messages based on these values, as shown in the earlier example.

In this example, the Products component renders a loading message while the data is being fetched. If there is an error, the component renders an error message. If the data is successfully fetched, the component renders a list of products.

Caching

One of the most significant advantages of using React Query is its built-in caching mechanism. When you use useQuery to fetch data, React Query automatically stores the fetched data in a cache. Subsequent calls to the same query key will return the cached data instead of making a duplicate API request.

const { isLoading, error, data } = useQuery('products', getProducts);

Automatic Data Refetching

React Query also handles automatic data refetching for you. You can set up automatic background data refetching at a specified interval, ensuring your UI always displays the most up-to-date data.

const { isLoading, error, data } = useQuery('products', getProducts,{ refetchInterval: 5000, // Refetch every 5 seconds });

Conclusion

React Query's useQuery hook is a powerful and flexible tool for handling data fetching in your React applications. It simplifies the process, manages caching, and helps you handle loading and error states effortlessly. If you're looking for a way to improve the way you manage data fetching in your React applications, I encourage you to give useQuery a try.

Happy coding!

OOP vs OOD

Naweli Verma — Sat, 13 May 2023 12:59:31 +0000

OOP

Object Oriented Programming

OOP stands for Object-Oriented Programming, which is a programming paradigm that focuses on organizing code around objects, which are instances of classes. OOP promotes the use of encapsulation, inheritance, and polymorphism to structure and design software.

It emphasizes the creation of reusable and modular code by breaking down complex systems into smaller, self-contained objects that interact with each other. OOP languages, such as Java, C++, and Python, provide features and constructs to implement OOP principles effectively.

OOD

Object Oriented Design

On the other hand, OOD stands for Object-Oriented Design, which is a broader concept that encompasses the process of designing software systems using object-oriented principles. OOD involves the high-level design decisions and architectural considerations taken during the initial phases of software development.

It includes identifying objects, their relationships, responsibilities, and interactions to create a well-structured and maintainable system. OOD focuses on conceptualizing the system's structure, defining classes, and designing the overall architecture before moving into the implementation phase.

Let's understand it by a simple example.

Suppose we want to create a program to simulate a zoo. We'll start with OOD, which involves designing the system before writing any code. In this stage, we would identify the key objects and their relationships. For a zoo, we might have objects like "Zoo," "Animal," "Lion," and "Tiger." The Zoo object would contain a collection of Animal objects, which can be either Lion or Tiger. We would define the properties and behaviors of each object, such as the Animal's name, age, and sound it makes, and the Zoo's capacity and methods to add or remove animals.

#include <iostream>
#include <vector>

class Animal {
protected:
    std::string name;
    int age;

public:
    Animal(const std::string& name, int age) : name(name), age(age) {}

    virtual void make_sound() {
        // Placeholder for the specific sound each animal makes
    }
};

class Lion : public Animal {
public:
    Lion(const std::string& name, int age) : Animal(name, age) {}

    void make_sound() override {
        std::cout << "Roar!" << std::endl;
    }
};

class Tiger : public Animal {
public:
    Tiger(const std::string& name, int age) : Animal(name, age) {}

    void make_sound() override {
        std::cout << "Growl!" << std::endl;
    }
};

class Zoo {
private:
    int capacity;
    std::vector<Animal*> animals;

public:
    Zoo(int capacity) : capacity(capacity) {}

    void add_animal(Animal* animal) {
        if (animals.size() < capacity) {
            animals.push_back(animal);
        } else {
            std::cout << "Zoo is full!" << std::endl;
        }
    }

    void remove_animal(Animal* animal) {
        auto it = std::find(animals.begin(), animals.end(), animal);
        if (it != animals.end()) {
            animals.erase(it);
        }
    }

    void display_animals() {
        for (Animal* animal : animals) {
            std::cout << animal->name << " (" << typeid(*animal).name() << "), Age: " << animal->age << std::endl;
        }
    }
};

int main() {
    Zoo zoo(3);

    Lion lion("Simba", 5);
    Tiger tiger("Sher Khan", 7);

    zoo.add_animal(&lion);
    zoo.add_animal(&tiger);

    zoo.display_animals();

    lion.make_sound();
    tiger.make_sound();

    return 0;
}

The Animal class is a base class with the name and age properties and a virtual make_sound function. The Lion and Tiger classes inherit from Animal and override the make_sound function with their specific sound implementations.

The Zoo class has an add_animal function that accepts a pointer to an Animal object and manages a vector of animal pointers. The rest of the code demonstrates how to create instances of animals, add them to the zoo, and call the appropriate methods.

An exposer to JSX

Naweli Verma — Sun, 26 Jun 2022 14:52:40 +0000

Things that look complex are not necessary to be complex 😲

Connect with me on twitter ❤️

Wait, before that, sorry read it first than open your phone otherwise I know you will end up scrolling. We all do that 😆 😝 😄

ReactJs uses JSX to generate the UI. Now you must be thinking oh! now what the hell is this. 😩😩

JSX = JavaScript + XML 😕
and yeah, you don't need to learn XML for this!😛

Let me tell you with some points.

What is JSX? 🍄

JSX is nothing but a syntax extension to JavaScript.
It allows you to write HTML + JavaScript together in React Code.
It is HTML like syntax, that extends EcmaScript.
It is simpler and elegant way to write React Code.

var marvelHeroes= (
    <ul id="marvelHeroes">
      <li>Iron-Man</li>
      <li>Thor</li>
      <li>Doctor Strange (My fav)</li>
      <li>Captain America</li>
      <li>Spiderman</li>
    </ul>
)

The above code is JSX. I am sure, it's not complete alien syntax for you. 😄

Don't tell me it is completely alien to you.

Here, if we try to understand the syntax, it's JavaScript where we are adding some HTML elements like a unordered list tag and list tag 😄

Now you must be thinking, Why we are usinhg JSX???? 🙆‍♀️

We are using JSX cause it makes our code simpler, elegant and more readable. 🙆‍♀️

How? 🙀🙀

Let's understand both How and Why.

React creates it's own DOM. A virtual DOM, which is exact replica of the Real DOM and it holds JavaScript objects. It is faster than real DOM.

DOM means Document Object Model. It holds all those elements and attributes in node. It creates a tree like structure in the background when we add some element to our code.

So, if we want to add some element to our React project, suppose a list of heroes, for that we we need to add list tag element which will go in your react virtual DOM.

For adding or creating that element, we need to write instruction for React to create elements in the DOM.

The syntax for that is

React.createElement(type,{props},children);

where
type: the type of the HTML element
props: properties of the object that components will take
children: any data that will be visible in the UI.

Now, let's try to create the same heroes list that we've just created using JSX, but this time using the React.createElement syntax

var marvelHeores= React.createElement(
   "ul",
   { id: "marvelHeores" },
   React.createElement(
      "li",
      null,
      "Iron-Man"
   ),
   React.createElement(
      "li",
      null,
      "Thor"
   ),
   React.createElement(
      "li",
      null,
      "Doctor-Strange"
   ),
   React.createElement(
      "li",
      null,
      "Captain America"
   ),
   React.createElement(
      "li",
      null,
      "Spiderman"
   )
)

Now we are feeling the struggle. Right? 😆 😹

The syntax is super lengthy when we use React.createElement(), and it gets more complicated when you want to use some nested elements.

So, for handling all these burden, we use JSX. ❤️

JSX is a SYNATICAL SUGAR to cut down the struggle of using React.createElement().

We are pretty much done here, I just want you to know some points before you write your first JSX. 👼

If you want to add some JavaScript or some decision making code just wrap it in the curly braces{}
The onclick is onClick and the class is className in JSX.
All HTML elements in JSX starts with lowercase while component names starts with UpperCase

Check your App.js file in the project that you have just created with me in the previous blog of this series. 🐾🐾

Happy Building!!

Connect with me on twitter ❤️

Now we have completed your blog here, click on the twitter link and connect there with me 😁😁

Class and Function Components

Naweli Verma — Fri, 24 Jun 2022 12:53:50 +0000

> Every drop makes an ocean 🌟 🌊

You cannot deny the above quote. Right?

PS: The every blog of this React Series, is also more like a water drops, to make you a ocean of knowledge. 🌞

Well we are going to learn about the most important and a very crucial part of ReactJs, which are Components. 🌋

If you ask me what are components by giving a real world example, I will say a ReactJs web app is an ocean and the components are the water droplets.

Makes sense? 😄

A little, right? 😂

Be with me, I will tell you what exactly the thing is.

Here we go now, hold my hand tight, we are going for the ride. 🏄

What are Components 🍄

Components are the small building blocks of any ReactJs app. Every ReactJs web app is made up of components. Either one, two components or thousands of them. It is up to the developer, how they want.

You will know it once you try it.

It describes the part of user-interface.
It is to break down complex UI in small chunks.
It is reusable and can be nested inside other components.

Let me give you an example so you can picturize it right 💆

Suppose you want a beautiful landing page in your website. What are the things that you will need there?

Think and think 🙇🙇

You may want a Header, Footer, Sidebar, Content Body. Integrating all this together you will have your Landing Page. True?

Now this is what component is, small chunks of of your desired page. 🚀

If you want a Button and you want the same exact button in your website, so you can simply create a Button Component and can reuse wherever you like.
If you want the same button with different text you can change the text through props. (We will cover this in coming series)

Now I am pretty sure you know what exactly a Component is, on that victory let's know little more about it 🚀🚀🚀

Types of Components 🍄

There are two types of components:

- Class Components

- Function Components

Before ReactJs version 16.8.0** ⬅️

Class Components :mushrooms:

It takes object of props optionally and return JSX to the UI.

(Don't worry if this line doesn't makes sense a little or at all. You will know it soon it coming series.)
Class Components are used ( pay attention on "used" word )to be called as stateful components.
Capable for handling complex UIs.
Maintain their own private data or state to give the power of dynamic nature.
Provide lifecycle hooks
this keyword can be used here.

Function Components :mushrooms:

Same like class, it takes object of props optionally and return JSX to the UI.

(As I told you earlier, don't worry if this line doesn't makes sense a little or at all. You will know it soon it coming series.)
It is simple JavaScript function.
Function Components are used ( pay attention on "used" word ) to be called as stateless components.
No vision for this keyword.
It is not capable of handling any data fetching, other side effects, state rendering or anything which is complex.

As you just got to know that functional components never was in the choice list when handling complex operations. 😒😒

**But Class Components was also not very developer loving, they are complex, specially the "this" keyword. 😒

So, to solve this problem, the super genius React parents introduced a super weapon to the react developer, and that is HOOKS ❤️❤️

Devs, things are going to be pretty much more in our favor from here 💃💃

After ReactJs version 16.8.0** ➡️

In this version of React, they introduced a beautiful and a powerful concepts of Hooks to the community. 🐯🐯🐯

Happy days are back 😄😄

Let me give you a little insights of it.

Hooks :mushrooms:

I will just give you a little idea about it know.

Hooks gives a developer the power to use all those side effects, complex UI logics in the functional components, without worrying about this keyword and complex syntax like class components.

So from now on, Functional Components also are "Stateful" components and we will use this in our whole series. 😍 😄 😃

*Hurrayyyyy!!!!! * 😍😍

So now you know why Hooks were introduced.

If you want to know more why and what about hooks, this will help. 🔥

Okay developers, see you in the next one.

You can connect with me on twitter 😃

We will find a way through the dark 🔥

First React.Js App and Folder Structure

Naweli Verma — Thu, 23 Jun 2022 13:01:01 +0000

I am excited to shout out loud that, "Yayyy!! I made my first react app" 😃😃😃😃😃

Just explore with me, it will be fun and you will be confident.

Let's create our first react app! 🚀

Prerequisite 🍄

I want you to install node in your system, it will make your ReactJs life way to easy. Node provides package manager which is NPM -> Node Package Manager. It manages all the dependencies and third party packages.

I hope you have a compiler. If not, install VS Code, it's awesome.

Now be a developer and open your terminal 👩‍💻

Go into your terminal, to create a react app, run the command

npx create-react-app your_app_name
or
yarn create-react-app your_app_name

Now navigate inside your folder

cd your_app_name

Now inside your folder, run command

npm start
or
yarn start

Now open your browser and on localhost:3000 you can see your very first react app!! 🔥🔥

Hurrayyyyy!!!! 😍😍

Now let's understand the folder structure for a seamless journey. 📂

So, in your folder you can see a file Package.json,📄 a very important and useful one. It holds all the meta data of dependencies, version of your packages, scripts of your react app.

According to your project building you can see package.lock.json if you have used npx and yarn.lock.json if you have used yarn to create your react app. We can leave it as it is.

Now you have node_modules file where all your dependencies is installed.
Now let's go into the Public folder, where you have few files but our concern is only for index.html. It is the only HTML file in our folder.

So the thing is that, React is a Single Page Application -> SPA it means everything will be dynamic in browser but it is the only file that served up to the browser. You can take it a container file for every single component in your react folder, whether it is 3 files of 30,000 files. 🔥

Now pay close attention ❗

In the index.html file we have a div in the body tag where id="root, you can see that in line no.31 in the attached image. Keep it in your mind I will tell you about it. Before that go to src folder,

In the Src folder, the most going to be used folder. In this you can see index.js file , and in line no.8 the DOM element that is being used is root, which is the same that you just saw in index.html file.

So everything that is in the DOM node is being handled by root and here App.js is being served to the root.

So let's wrap by saying that root element will be served to browser and content in App.js will be the view of that, like whatever you see in the browser.

Now you can add and edit anything in the App.js file and see the change in the browser.🥂

There are other files like logo, css file, which I suggest you to explore

So on this note, we have created our very first react app and also got to know about the folder structure. You will know more things when you start doing by your own. 😁 😁

I hope you are running your react app now. 😁😁

See you in the next one. 👋

You can connect with me on twitter 😃

DEV Community: Naweli Verma

The Backend Setup Every Developer Should Follow

Routes – The Entry Points

Controllers – The Request Handlers

Middleware – The Gatekeepers

Services – The Brain of the Application

Repository – The Data Access Layer

Database – The Storage Engine

Full Request Flow

🧠 Simple Mental Model

A Beginner’s Guide to System Design: Thinking Beyond Code

1. High-Level Design (HLD)

2. Low-Level Design (LLD)

🛠️ Core Building Blocks

You’ll constantly face trade-offs:

Closuer love story

The Closure Conspiracy: Why Your Functions Never Forget

The Closure Conspiracy: Why Your Functions Never Forget

My Amazon SDE Interview Experience – May 2024

My Amazon SDE Interview Experience – May 2024

How It All Started

First Round - The Coding Test

Further Interview Rounds

1. Troubleshooting Round

2. DSA Round

3. System Design Round

Anyways forgot to tell you one thing, Please understand all the amazon's principle before going for the interview, they will ask at-least 2 question around it in every round. So please prepare that as well

Top 10 JavaScript Interview Questions You Need to Know

1. What Are Closures in JavaScript?

2. Explain the Event Loop and How It Works

3. What Is the Difference Between == and ===?

4. What Are Promises and How Do They Work?

5. What Is the this Keyword in JavaScript?

6. What Are Arrow Functions and How Do They Differ from Regular Functions?

7. How Does Prototypal Inheritance Work in JavaScript?

8. What Is the Difference Between null and undefined?

9. What Are map, filter, and reduce Methods?

10. How Do You Optimize JavaScript Performance?

Conclusion

How does Blockchain work?

What exactly is Blockchain?

Mastering React Query's useQuery for Data Fetching

Introduction

What is React Query?

The useQuery Hook

How does useQuery work?

Handling Loading and Errors

Caching

Automatic Data Refetching

Conclusion

Happy coding!

OOP vs OOD

OOP

Object Oriented Programming

OOD

Object Oriented Design

Let's understand it by a simple example.

An exposer to JSX

What is JSX? 🍄

Class and Function Components

> Every drop makes an ocean 🌟 🌊

What are Components 🍄

You will know it once you try it.

Types of Components 🍄

Before ReactJs version 16.8.0** ⬅️

Class Components :mushrooms:

(Don't worry if this line doesn't makes sense a little or at all. You will know it soon it coming series.)

Function Components :mushrooms:

(As I told you earlier, don't worry if this line doesn't makes sense a little or at all. You will know it soon it coming series.)

As you just got to know that functional components never was in the choice list when handling complex operations. 😒😒

After ReactJs version 16.8.0** ➡️

Hooks :mushrooms:

First React.Js App and Folder Structure

Let's create our first react app! 🚀

Prerequisite 🍄

Now pay close attention ❗