DEV Community: Esraa Nasr

Build Your First Simple API with Node.js and Express (Beginner-Friendly Guide)

Esraa Nasr — Mon, 06 Oct 2025 06:46:50 +0000

If you’re just starting with backend development, building your own API is one of the best ways to learn how the web actually works.

What is an API?

API stands for Application Programming Interface — it allows two systems to communicate with each other.

For example:

Your frontend asks the server: “Give me the t-shirt info”

The server replies:
{ "tshirt": "T-shirt with your dragon and ID of 23" }

Why use APIs?

We use APIs to make communication between clients and servers smooth and structured.

They allow your app to request and receive data in a standard format like JSON.

Step-by-Step: Build an API from Scratch

1️⃣ Create a new folder
Open your terminal and create an empty folder for your project.

mkdir api
cd api

2️⃣ Initialize npm
This creates a package.json file.

npm init -y

3️⃣ Install Express

npm install express

4️⃣ Create index.js

This is where we’ll build our server.
Check my GitHub repo for full code: https://github.com/EsraaNasr92/api

Test your API

You can test your API in several ways:

curl — directly from your terminal
VS Code REST Client Extension
REST Client
- Postman
- Insomnia (the one I used to learn something new

Example Results

GET /tshirt

POST /tshirt/23 with no logo

POST /tshirt/23 with logo

What I Learned

How to initialize a Node.js project
How to use Express to build an API
How to use middleware to parse JSON (express.json())
How to test endpoints with Insomnia

Let’s Connect!

If you enjoyed this tutorial and want to follow my learning journey, connect with me here:

Please don't hesitate to ask me any questions.

GitHub: github.com/EsraaNasr92
LinkedIn: linkedin.com/in/esraa-nasr92
Instgrame: esraa_dev_

I regularly post about frontend & backend development, APIs, and tech learning journeys.

If you’re also learning Node.js or Express, follow me — let’s grow together!

From Zero to React: A Beginner-Friendly Guide

Esraa Nasr — Thu, 17 Apr 2025 12:47:59 +0000

✅ First: What You Should Know Before Starting React

Before diving into React, you need a solid understanding of the following:

🧠 JavaScript Fundamentals:

Variables (var, let, const)
Functions (especially arrow functions)
Arrays & Objects
Array Methods: map, filter, reduce
Destructuring
Spread/Rest operators
ES6 Modules: import and export
Promises and async/await

👉 If you're not confident with these yet, focus on the basics first 👨‍💻
**
⚛️ Second: Essential React Concepts to Understand**

JSX: React uses JSX, which looks like HTML but is actually JavaScript. Learn how to write JSX elements and use JavaScript inside them.
Components:
- React is built on a "Component-based Architecture".
- Understand the difference between:
- ✅ Functional Components (preferred)
- ❌ Class Components (less used today)
Props: A way to pass data from one component to another (parent to child).
State: A local data storage inside a component that changes based on user interaction.
Hooks(start with these):
- useState
- useEffect
- useRef
- useContext (a bit later)
Event Handling: For example, handling button clicks or input changes.
- Conditional Rendering
- Show different UI elements based on conditions.
Lists and Keys: How to display a list of items using arrays and assigning unique keys.
Forms: How to manage and control input elements.
React Router (for when you're more advanced): To build multi-page apps without full page reloads.

🚀 A Simple Learning Plan

Week 1-2:

Review JavaScript fundamentals

Learn about JSX, components, and props

Week 3:

Learn useState and useEffect

Build a small project (e.g., a to-do list)

Week 4:

Learn about forms, conditional rendering, and displaying lists

Week 5:

Try adding React Router

Build a project with multiple pages

🎓 Great Free Learning Resources:

Official Docs: react.dev

YouTube: Elzero Web School – excellent explanations (Arabic)

YouTube: The Net Ninja – simple and practical tutorials

Website: freeCodeCamp – full React course for free

✨ In the End…
React isn’t hard if you start with the right approach and have a solid grasp of the basics.

Take it step by step, start with simple projects, and over time you’ll feel the difference and see real progress! 💪

If you have any questions or need help with your first project, just drop it in the comments ✨👇
Let’s learn together and support each other 💬🔥

React 101: Difference Between State and Props

Esraa Nasr — Wed, 09 Apr 2025 10:04:05 +0000

If you're learning React—or even using it in real projects—you’ve probably come across both state and props.

But it’s common to get confused about what each one really does.

In this post, I’ll explain the key differences in a simple way, and show you when to use each of them. 🚀

🎯 1. Props

props stands for properties
Used to pass data from a parent component to a child component
Immutable (read-only) inside the child component

✅ Example:

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

// Usage
<Welcome name="Esraa" />

⚠️ Important:

You can’t pass data directly between sibling components (components on the same level).

📌 In that case, you need to lift the state up to the closest parent component, and use it as a bridge between the two siblings.
💬 So how do siblings share data?

Depending on your project size or complexity, you can:

Lift the state up to the common parent
Use React Context API
In larger apps, consider using a state management library like Redux or Zustand

🔄 2. State

state refers to data that belongs to the component itself
It can change over time, and every change triggers a re-render
Great for things like tracking user input, toggling UI elements, updating counters, etc.

✅ Example:

import { useState } from 'react';

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

  return (
    <div>
      <p>Counter: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increase</button>
    </div>
  );
}

🧾 Summary Table

Feature	Props	State
Ownership	Received from parent	Local to the component
Editable	❌ Read-only	✅ Can be updated
Purpose	Pass data between components	Handle dynamic changes
Triggers UI?	No (unless parent updates it)	Yes, triggers re-render

If you found this helpful, feel free to like, share, or save it for later.
And if you have any questions—drop them in the comments! 🙌 Let’s learn together.

React Tabs Component

Esraa Nasr — Tue, 08 Apr 2025 09:50:13 +0000

Hey devs! 👋

I've decided to start a small habit:
Each day, I’ll build a simple React task—just to revisit the main concepts and also explore what’s new in React 19.

I’ll be sharing my daily learnings here in case anyone finds them helpful (or wants to join me on this React refresh ride 🚀).

📌 Task 1: Tabs Component

I started with something simple but practical—a Tabs component.
It displays either a person's info or their address, and I can switch between them by clicking on the corresponding tab.

💡 The Core Concept: useState

The most important concept I used today is useState.
This hook lets us add state to functional components without needing class components.

✍️ Syntax:
const [state, setState] = useState(initialValue);

state: holds the current value
setState: updates the state
initialValue: the initial value assigned

🧠 How I Used It:

const [open, setOpen] = useState(true);

If open is true → the Person tab is active
If false → the Address tab is shown

I used a ternary condition to decide which component to render based on the state, and I toggled between tabs using onClick events.

💻 Code Preview

Here’s a snippet of the component:

`const Tabs = () => {
const [open, setOpen] = useState(true);

return (

setOpen(true)}>Person
setOpen(false)}>Address

  {open ? (
    <div>
      <p>Name: John Doe</p>
      <p>Age: 32</p>
      <p>Occupation: Developer</p>
    </div>
  ) : (
    <div>
      <p>Street: 1234 Main St</p>
      <p>City: San Francisco</p>
      <p>State: CA</p>
      <p>Zip: 94107</p>
    </div>
  )}
</div>

);
};
`

You can of course style it more with styled-components, which I used in my full version!

🧠 Lessons Learned:

useState is super handy and clean for toggling UI elements.
Keeping state simple makes conditional rendering straightforward.
Even basic tasks like this are a great way to reinforce React muscle memory 💪

👀 What’s Next?

Next up: I’ll explore other hooks (useEffect, useRef), maybe dive into the experimental features in React 19, and build out more useful UI patterns.

If you’d like to follow along or share tips, feel free to connect!
Let’s grow together 🌱

React Tabs Component

Esraa Nasr — Sun, 06 Apr 2025 09:09:04 +0000

Hey devs! 👋

I've decided to start a small habit:
Each day, I’ll build a simple React task—just to revisit the main concepts and also explore what’s new in React 19.

I’ll be sharing my daily learnings here in case anyone finds them helpful (or wants to join me on this React refresh ride 🚀).

📌 Task 1: Tabs Component

I started with something simple but practical—a Tabs component.
It displays either a person's info or their address, and I can switch between them by clicking on the corresponding tab.

💡 The Core Concept: useState

The most important concept I used today is useState.
This hook lets us add state to functional components without needing class components.

✍️ Syntax:

const [state, setState] = useState(initialValue);

state: holds the current value
setState: updates the state
initialValue: the initial value assigned

🧠 How I Used It:

const [open, setOpen] = useState(true);

If open is true → the Person tab is active
If false → the Address tab is shown

I used a ternary condition to decide which component to render based on the state, and I toggled between tabs using onClick events.

💻 Code Preview

Here’s a snippet of the component:


const Tabs = () => {
  const [open, setOpen] = useState(true);

  return (
    <div>
      <ul>
        <li onClick={() => setOpen(true)}>Person</li>
        <li onClick={() => setOpen(false)}>Address</li>
      </ul>

      {open ? (
        <div>
          <p>Name: John Doe</p>
          <p>Age: 32</p>
          <p>Occupation: Developer</p>
        </div>
      ) : (
        <div>
          <p>Street: 1234 Main St</p>
          <p>City: San Francisco</p>
          <p>State: CA</p>
          <p>Zip: 94107</p>
        </div>
      )}
    </div>
  );
};

You can of course style it more with styled-components, which I used in my full version!

🧠 Lessons Learned:

👀 What’s Next?

Next up: I’ll explore other hooks (useEffect, useRef), maybe dive into the experimental features in React 19, and build out more useful UI patterns.

If you’d like to follow along or share tips, feel free to connect!
Let’s grow together 🌱

PHP tutorial for beginners

Esraa Nasr — Wed, 29 Jan 2025 13:53:15 +0000

Introduction to PHP

PHP stands for Personal Home Page, but is now known as PHP: Hypertext Preprocessor. It is a general-purpose server-side scripting language that is widely used in web development for tasks such as form handling, file processing, and database access.

Why Choose PHP?

Interpreted Language: PHP is an interpreted language, meaning that PHP code is executed by a web server.
Open Source: It is an open-source, free product that is highly customizable.
Versatile: PHP can be used for various tasks like processing HTML forms, managing files on a server, and connecting to databases.

Basic PHP Syntax

php code is written in normal text files between <?php and ?> tags
A PHP file normally contains HTML tags.
You can have more than one php script in our page
PHP statements terminated with ;

PHP execution

Server Determination: The server identifies PHP scripts by the .php file extension.
Request Handling: When a browser requests a .php file, the web server calls the PHP processor.
PHP Execution: The server executes the PHP code, then substitutes the output into the HTML.
Client Output: The resulting HTML page is sent to the client. The PHP code itself is never visible to the user, only the output.

NOTE: user never sees the PHP code, only the output in the
page
**

Embedding HTML in PHP Using include

PHP provides constructs such as include and require to embed HTML or other PHP files into the current script. Here's the difference:

include: If the file doesn't exist, PHP will generate a warning but the script will continue.
require: If the file is missing, PHP will stop executing the script and generate a fatal error.

The echo language construct

echo and print are more or less the same. They are both used to output data to the screen.
The print statement can be used with or without parentheses: print or print().

The differences are small:

– echo has no return value while print has a return value of 1 so it can be used in expressions.

$result = echo "Hello";  // ❌ This will cause an error

$result = print "Hello";  // ✅ Works because print returns 1
echo $result;  // Output: 1

Since print returns 1, it can be used inside expressions.

– echo can take multiple parameters (although such usage is rare) while print can take one argument.

Using Multiple Arguments in echo

echo "Hello", ", ", "World!";  // Output: Hello, World!

Invalid Usage (Multiple Arguments Not Allowed)

print "Hello", "World";  // ❌ Error: print() only takes one argument

– echo is marginally faster than print.
echo is faster because it does not return anything.
print is slower because it returns 1

✅ When Performance Matters (Use echo)

echo "Fast output";

✅ When You Need a Return Value (Use print)

if (print "Hello") {
    echo " - Print returned 1";
}

When to Use echo vs print?

Feature	`echo`	`print`
Return Value?	❌ No	✅ Returns 1
Multiple Arguments?	✅ Yes	❌ No
Speed	🚀 Faster	🐌 Slower
Use in Expressions?	❌ No	✅ Yes

PHP Variables

All PHP variables should start with a $.

  php
  $name = "Esraa";

Php variables are global and can be accessed from any php script in same page

$fruit = "apple"; 
echo $fruit;  // Outputs: apple

There are no type declarations

$number = 10;  // Integer
$name = "Esraa";  // String

Variable names are case sensitive.

$Fruit = "apple";  // Different variable than $fruit
$fruit = "banana"; // Will overwrite the previous one

An unassigned (unbound) variable has the value NULL

$var;  // NULL by default
var_dump($var);  // Outputs: NULL

The unset language construct sets a variable to NULL

$fruit = "apple";
unset($fruit);
var_dump($fruit);  // Outputs: NULL

The IsSet language construct is used to determine whether a variable is NULL , ex :IsSet($fruit)

$fruit = "apple";
if (isset($fruit)) {
    echo "The variable is set!";
} else {
    echo "The variable is not set!";
}

If an unbound variable is used in an expression, NULL is forced to a value that is dictated by the context of the use. If the context specifies a number, NULL is coerced to 0; if the context specifies a string, NULL is coerced to the empty string.

$var; // NULL
echo $var + 10;  // Outputs: 10 (NULL is coerced to 0)
echo $var . "hello";  // Outputs: hello (NULL is coerced to empty string)

Looking Ahead:

In the next article, we’ll dive into another important topic—functions and arrays in PHP. You’ll learn how to define and use functions effectively and explore how arrays can be leveraged to manage and manipulate data. This is a key area that will help you build more dynamic and organized PHP applications.

Stay tuned, and don't miss it!

Understanding Networks – A Beginner’s Guide

Esraa Nasr — Fri, 03 Jan 2025 11:46:26 +0000

Are you curious about how networks work? Whether it’s sharing data, printing from your computer, or video conferencing, networks are the backbone of modern technology. In this article, I’ll take you through the essentials:

What is a Network?
Network: a group of devices connected together to give a user a certain service.
For example: computer and printer.

Benefits of Network.

Data Sharing: Share files and information seamlessly.
Resource Sharing: Use shared devices like printers efficiently.
Modern Technology: Power features like VOIP (Voice over IP) and Video conference

Network components.

End Users: Devices like PC, printers, and phone
Network devices: Tools like Hub, Switch, and Router
Media: Connections through wires or wireless signals.

Network devices.

NIC (Network Interface Card)
Hub
Switch
Router

Let's talk about Network devices in detail:
NIC:

Every device in a network needs a NIC to connect. For multiple hosts, you’ll need more advanced devices like hubs and switches.

Hub:
A hub repeats the information from one host to all connected hosts. However, this creates a single collision domain, which can slow things down.

The hub will relay any information received from Host A to Host B and Host C.

Two problems arise:
• A hub repeats information received from one host to all the other hosts.
• A hub has a single collision domain.

Switch:

Switches solve hub-related issues by creating a separate collision domain for each connected device. This ensures smoother communication.

Router:
Routers interconnect networks and block unnecessary broadcasts, ensuring efficient data transmission across devices.

Type of communication.

Unicast: One-to-one
Broadcast: one-to-all
Multicast: one-to-few

Functions of Router.

Breaking up broadcasts.
Switching packets between devices.
Selecting the best path for data transmission.
Filtering paths for secure connections.

Database Management system(DBMS) Part1

Esraa Nasr — Thu, 13 Jun 2024 10:38:14 +0000

Hello guys,

Hope everything is going well. I'm Esraa a frontend developer and postgraduate student at AAST in Computer Science. This semester, I'm studying three subjects Data structure and algorithms, Database Management Systems(DBMS), and Object object-oriented programming (OOP).

I'll contribute tutorials for each subject to share information, and if you have an external tutorial, please share it with us:).

So, get to the point. What is the meaning of Data? What is the difference between Data and Information? Why do we need this information?

Data: refers to raw facts, building blocks of information. Unprocessed information.

Information: data is processed to reveal meaning (ذات معنى)

If we have accurate, relevant, and timely information we have a key to effective decision-making. effective decision-making is the key to survival in the global environment.

Database: Shared, integrated computer structure that houses
End user data (raw facts)
Metadata (data about data)

Let's go further and discover a database management system.

Do you consider how may I manage and control access to data? Is it possible to share it? How can I make data more effective and efficient?!

DBMS can answer all questions about this point because:

It's a collection of programs that manage database structure and control access to data.
It's possible to share data among multiple apps or users.
Make database management more efficient and effective.

Feature on details:

Support massive amounts of data
- Giga/tera/petabytes
- Far too big for main memory
Persistent storage
- Programs update, query, manipulate data.
- Data continues to live long after program finishes.
Efficient and convenient access
- Efficient: do not search entire database to answer a query.
- Convenient: allow users to query the data as easily as possible.
Secure, concurrent, and atomic access
- Allow multiple users to access database simultaneously.
- Allow a user access to only to authorized data.
- Provide some guarantee of reliability against system failures.

Last but not least

Here's a diagram for a type of database and location

React App with source code

Esraa Nasr — Thu, 02 May 2024 08:40:10 +0000

This week, I’m dedicated my time on enhancing my ReactJS skills by building 4 tiny applications.

Throughout this week, I also spent time researching and learning about different React concepts, such as class components vs. function components, the useRef hook, and handling form elements.

Rock, paper and scissor game
Link: https://lnkd.in/dhKHNsDy
Source code: https://lnkd.in/daMrATAA

Body Mass Index calculation (BMI)
Link: https://lnkd.in/dEgqSaYW
Source code: https://lnkd.in/d6Na9_Mv

Form
Link: https://lnkd.in/dtznKj9J
Source code: https://lnkd.in/dmCw9MJv

Questions and answers
Link: https://lnkd.in/dTqGCvDy
Source code: https://lnkd.in/demKrvVW

I'm thrilled with my progress and eager to put this acquired knowledge to use in my future project!

Github: https://github.com/EsraaNasr92/
Twitter / X: https://twitter.com/Esraa_nasr92
Instgram: https://www.instagram.com/_esraaanasr/

The first month in CS Diploma

Esraa Nasr — Wed, 06 Dec 2023 20:26:33 +0000

Hey guys,

Two months ago I applied for a CS(Computer science) diploma in ASST (Arab Academy for Science and Technology). I'm sucked at self-taught learning and need to have the academic basics of CS.

Last month I started the journey. I chose 3 subjects for the first semester. Intro to programming, Intro to computing, digital logic, and computer design.

I decided to share the knowledge that I will have with you, and feel free to ask me any question we're here to share our knowledge with you.

Here I'll list what I had last month in 3 subjects:
First, Intro to programming
We have the basics of C language

Syntaxes
Conditions (If - nested if - switch)
Loop (for - while - do...while)

Second, Intro to Computing
We started with "Understand Computers Today and Tomorrow 16th edition" which took 4 chapters, a numbering system, and a flowchart.

Last, digital logic design
Numbering system also and digital gates.

I will arrange my time and share at least 3 posts every week.

Wish me luck guys and hope all is well with you.

Here are my social links if you would like to follow.

Github: https://github.com/EsraaNasr92/
Twitter / X: https://twitter.com/Esraa_nasr92
Instgram: https://www.instagram.com/_esraaanasr/

TIL, CSS Text-shadow tricks

Esraa Nasr — Tue, 17 Oct 2023 08:35:17 +0000

Hey guys,

This article includes examples of text-shadow to add visual interest to your website's typography. I will try to update it every week with new examples.

Hard Shadow
Double Shadow
Close and Heavy
Glowing
Superhero
Multiple Light Sources

Hard Shadow

text-shadow: 6px 6px 0px rgba(0, 0, 0, 0.2);

Double Shadow

text-shadow: 4px 3px 0px #fff, 
             9px 8px 0px rgba(232, 28, 28, 0.43);

Close and Heavy Shadow

text-shadow: 0px 4px 3px rgba(0, 0, 0, 0.4), 
             0px 8px 13px rgba(0, 0, 0, 0.1),
             0px 18px 23px rgba(0, 0, 0, 0.1);

Superhero Shadow

text-shadow: -10px 10px 0px #C29DFA, 
             -20px 20px 0px #934FFA,
             -30px 30px 0px #6600FF;

Multiple Light Sources Shadow

text-shadow: 0px 15px 5px rgba(0, 0, 0, 0.1),
             10px 20px 5px rgba(0, 0, 0, 0.05),
             -10px 20px 5px rgba(0, 0, 0, 0.05);

That's all the things I'm learning today what about you?

let's share our knowledge and tell me what you learned today.

Here are my social links if you would like to follow.

Github: https://github.com/EsraaNasr92/
Twitter / X: https://twitter.com/Esraa_nasr92
Instgram: https://www.instagram.com/_esraaanasr/

JavaScript objects for beginners

Esraa Nasr — Mon, 18 Sep 2023 09:27:15 +0000

Hey guys

From HackerRank challenge 7 Days of JavaScript Day 2: objects

First of all, What are objects?
Objects are variables too, but objects can contain many values.
another definition is the object is a different way of organizing information in JavaScript

for example
var myObject = {type:"Kia", model:2023, color:"red"};

Accessing Object Properties
You can access object properties in two ways:
objectName.propertyName or objectName["propertyName"]

Task 1
In this example, you are given a single line consisting of property type values of a car in the following order:

TypeName ModelName ColorName

These values are assigned to an object car that has the properties type, model, and color (read the code in the editor carefully to learn how that is done). Your task is to complete the code to print the object.

Take your time and think about a solution then check my solution.

The next step learning how displaying Information contained in Objects

I'm thinking of using if statement for the condition and I'm taking a long time to think about how to iterate over an object variable. loop!! yes using for statement.

Do you write code? If yes or no you can check my solution.

That's all the things I'm learning today what about you?

let's share our knowledge and tell me what you learned today.

Here are my social links if you would like to follow.

Github: https://github.com/EsraaNasr92/
Twitter / X: https://twitter.com/Esraa_nasr92
Instgram: https://www.instagram.com/_esraaanasr/