DEV Community: Hajar | هاجر

Getting Started with Astro

Hajar | هاجر — Mon, 21 Apr 2025 17:56:22 +0000

What’s Astro?

Astro is an open-source web framework created to build fast, performant, content-driven websites.

What really sets Astro apart is its performance. As the Astro team puts it:

"It should be nearly impossible to build a slow website with Astro."

What makes this statement true is how Astro handles rendering and delivering your website. It prioritizes server-side rendering (SSR) and minimizes client-side JavaScript by default and the use of island architecture.

Prioritizes server-side rendering (SSR)

Astro's philosophy is: render on the server, ship minimal client-side JS.

Static HTML Generation by Default:

Astro components render to static HTML at build time.
No JavaScript is sent to the browser unless you explicitly opt in.

The Island Architecture

Astro uses what’s called island architecture — a way to combine static HTML with interactive components... So what does that mean?

Island architecture is a frontend rendering strategy where your webpage is mostly static HTML, but certain "islands" of interactivity are hydrated separately and only when needed.

An island always runs in isolation from other islands on the page, and multiple islands can exist on a page. Client islands can still share state and communicate with each other, even though they run in different component contexts.

By default, Astro will automatically render every UI component to just HTML & CSS, stripping out all client-side JavaScript automatically.

These islands:

Run independently of each other.
Can still share state if needed.
Only hydrate (i.e., load JavaScript) when you tell them to.

Turning any static UI component into an interactive island requires only a client:\* directive. Astro then automatically builds and bundles your client-side JavaScript for optimized performance.

---
import Counter from '../components/Counter.astro'
import LoginForm from '../components/LoginForm.astro'
---

<html>
  <body>
    <h1>Hello, Astro</h1>

    <!-- Interactive islands -->
    <Counter client:load />
    <LoginForm client:visible />
  </body>
</html>

Astro offers several hydration directives to control how components behave:

client:load: Hydrates the component immediately after the page loads.
client:idle: Waits until the browser is idle, then hydrates the component.
client:visible: Hydrates the component when it enters the viewport (lazy loading).
client:media: Hydrates the component only when a specific media query matches.
client:only: Does not render the component on the server—renders it only on the client.

Getting Started with Astro

To start a new Astro project, you'll need Node.js installed — version 18.17.1 or 20.3.0 or later. (v19 is currently not supported.)

Step 1: Create Your Project

Start by running the command:

npm create astro@latest

Choose the starter template you like or stick with the default. Follow the CLI prompts to configure your project.

Step 2: Run the Dev Server

npm install

And then:

npm run dev

Your site should now be live at http://localhost:4321.

Your file stucture should look like this:

├── public/          # Static assets like images, fonts, etc
├── src/
│   ├── components/  # Reusable components
│   ├── layouts/     # Layout components to structure your pages
│   └── pages/       # Astro pages that automatically become the routes of your website
|                    # /pages/about.astro becuase the `/about` path
└── astro.config.mjs # Configuration file for your Astro project

Anatomy of an `.astro` File

Astro components use the .astro file extension. Each file can include the following sections:

1- Frontmatter — for imports, variables, functions (between ---).
2-HTML/JSX-like syntax — for page structure and layout
3- Styles — scoped styles using <style> tags
4- Scripts — optional <script> blocks for browser-side logic

---
// begin Frontmatter
import Layout from '../layouts/MainLayout.astro';
import '../styles/utils.css';

const pageTitle = 'Homepage';
// end Frontmatter
---

<style>
  /* h1 will be blue in this page only without affecting the style of h1 that might be other pages*/
  h1 {
    color: blue;
  }
</style>

<Layout>
  <h1>{pageTitle}</h1>
  <HeroSection />
</Layout>

<srcipt>
 document.body.style.backgroundColor = 'yellow';
</srcipt>

The style tag accepts define:vars{{}}, whcih accepts an object of variables that could be used as CSS vars.

---
const foregroundColor = "rgb(221 243 228)";
const backgroundColor = "rgb(24 121 78)";
---

<style define:vars={{ foregroundColor, backgroundColor }}>
  h1 {
    background-color: var(--backgroundColor);
    color: var(--foregroundColor);
  }
</style>

<Layout>
  <h1>Hello World</h1>
</Layout>

Using Slots and Props in Astro

What Are Slots in Astro?

If you've worked with React or Vue you should have an understanding of what slots (or childeren in React) mean.

A slot is basically a placeholder for content that you pass into a component. It allows you to keep a consistent layout across multiple pages, while still injecting unique content where needed.

Let’s take a look at a simple layout component that uses a slot:

// layouts/Layout.astro
---
import Header from "../components/Header.astro";
import Footer from "../components/Footer.astro";
---

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="generator" content={Astro.generator} />
    <title>My Astro Site</title>
  </head>
  <body>
   <Header/>
    <slot />
    <Footer />
  </body>
</html>

The <slot /> tag is where the page-specific content will be injected. You can use the Layout.astro component in any of your website pages to and replace the <slot/> tag with the main content of the page.

// layouts/contact-us.astro
---
import Layout from "../components/Layout.astro";
import ContactUsFrom from "../components/ContactUsFrom.astro";
---
<Layout>
  <ContactUsFrom/>
</Layout>

// layouts/blog.astro
---
import Layout from "../components/Layout.astro";
import Posts from "../components/Posts.astro";
---
<Layout>
  <Posts/>
</Layout>

The <slot/> in the Layout component will be <ContactUsFrom/> in the /contact-us page and <Posts/> in the /blog path.
Both /contact-us and /blog will have the same Layout.

Using slots gives you:

Cleaner code: You avoid repeating headers, footers, or shared page structure.
Reusability: One layout can be used across many pages.
Flexibility: You decide exactly where dynamic content should appear.

What Are Props in Astro?

Props in Astro are values you pass to a component when you use it. Inside the component, you can access those values in the frontmatter section using regular JavaScript.

Think of it as function paramaters in Javascript. If you have sayHello function that accetps a name parameter, for example, a SayHello componet in Astro, can also accept a name prop to be used inside that component.

If you have a regular JavaScript function that accepts a name parameter:

function sayHello(name) {
  return `Hello, ${name}`;
}

You can apply the same logic to Astro components:

// Example: src/pages/index.astro
// components/SayHello.astro
---
// get the name from the props in the Frontmatter section
const {name} = Astro.props;
---

<p>Hello, {name}!</p>

Now, we have a SayHello component that can greet the user and this is how to use it:

---
import SayHello '../components/SayHello.astro';
const username = 'Hajar Nasr';
---

<SayHello name={username}/>

When you visit the page, it will render:

Hello, Hajar Nasr!

Fetching Data in Astro

Fetching data is simple — just use the fetch() API inside frontmatter.

const response = await fetch('https://api.example.com/posts');
const posts = await response.json();
---

<ul>
  {posts.map(post => (
    <li>{post.title}</li>
  ))}
</ul>

Adding React to Your Astro Project

Astro supports multiple UI frameworks, including React, Vue, Svelte, Solid, and more. You can mix and match them in the same project.

To add React:

npm astro add react

Then update your config file:

import { defineConfig } from "astro/config";
import react from "@astrojs/react";

export default defineConfig({
  integrations: [react()],
});

Now you can create a React component and use it in your Astro pages:

// src/components/Counter.jsx
import { useState } from "react";

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

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

export default Counter;

And in your .astro file:

---
import Counter from '../components/Counter.jsx';
---

<Layout title="React in Astro">
  <h1>Click the Button</h1>
  <Counter client:load />
</Layout>

References

Astro Docs

Quick Sort Algorithm

Hajar | هاجر — Sun, 29 Dec 2024 19:40:30 +0000

Quick Sort is one of the most efficient algorithms, and it uses the divide-and-conquer technique to sort arrays.

How Quick Sort Works

The main idea of Quick Sort is to help one element at a time move to its correct position in an unsorted array. This element is called the pivot.

The pivot element is in the correct position when:

All the elements to its left are smaller.
All the elements to its right are larger.

It doesn’t matter whether the numbers to the left or right are sorted yet. What matters is that the pivot is in the correct position in the array.

// examples of the pivot 23 positioned correctly in the array:
[3, 5, 6, 12, 23, 25, 24, 30]
[6, 12, 5, 3, 23, 24, 30, 25]
[3, 6, 5, 12, 23, 30, 25, 24]

All these are valid output of an array where the pivot is 23.

Finding the Pivot's Correct Position

Quick Sort helps the pivot find its correct position in the array. For example, if the pivot is positioned at the beginning of the array but isn’t the smallest number, Quick Sort determines that it needs to move 5 steps to make room for the 5 smaller elements in the array -- assuming there are 5 such numbers.

Let's say we have the array: [10, 4, 15, 6, 23, 40, 1, 17, 7, 8] and 10 is the pivot:

At this point:

The number 10 doesn’t know if it's in the correct position or how many steps it needs to move to get there. Quick Sort starts by comparing 10 with the value at the next index.
Upon seeing that 4 is smaller, Quick Sort records that the pivot needs to move one step forward to allow 4 to come before it.
So numberOfStepsToMove increases by 1.

Next, at index 2, the value is 15, which is greater than 10. Since no adjustment is needed, Quick Sort keeps the step count unchanged and moves on to the next element in the array.

At the next index, the value is 6, which is smaller than 10. Quick Sort increases the step count to 2, as the pivot now needs to make space for two smaller numbers: 4 and 6.

Now, 6 will need to swap with 15 to keep the smaller numbers next to each other at the left side of the array. We swap the numbers based on the current index and numberOfStepsToMove values.

Quick Sort continues looping through the array, increasing the numberOfStepsToMove based on how many numbers are smaller than the pivot. This helps determine how far the pivot needs to move to its correct position.

The numberOfStepsToMove doesn't change for 23 or 40 because both values are greater than the pivot and shouldn't come before it in the array:

Now, when Quick Sort loops to the value 1 at index 6, numberOfStepsToMove increases to 3 and swaps it the number at the index 3:

Quick Sort continues this process until it reaches the end of the array:

Now that we've reached the end of the array, we know that there are 5 numbers smaller than 10. Therefore, the pivot (10) must move 5 steps ahead to its correct position, where it is greater than all the numbers before it.

Let's see how that looks in the code:

const getNumberOfStepsToMove = (arr, start = 0, end = arr.length - 1) => {
  let numberOfStepsToMove = start;
  // we're picking the first element in the array as the pivot
  const pivot = arr[start];

  // start checking the next elements to the pivot
  for (let i = start + 1; i <= end; i++) {
    // is the current number less than the pivot?
    if (arr[i] < pivot) {
      // yes - so w should increase numberOfStepsToMove
// or the new index of the pivot
      numberOfStepsToMove++;

      // now swap the number at the index of numberOfStepsToMove with the smaller one
      [arr[i], arr[numberOfStepsToMove]] = [arr[numberOfStepsToMove], arr[i]];
    } else {
      // what if it's greater?
      // do nothing -- we need to move on to the next number
      // to check if we have more numbers less that pivot to increase numberOfStepsToMove or not
    }
  }

  // now we know the pivot is at arr[start] and we know that it needs to move numberOfStepsToMove
  // so we swap the numbers to place the pivot number to its correct position
  [arr[start], arr[numberOfStepsToMove]] = [
    arr[numberOfStepsToMove],
    arr[start],
  ];

  return numberOfStepsToMove;
};

Now that we have a function to help us find the where to place the pivot, let's see how Qucik Sort divides the array into smaller arrays and utilize the getNumberOfStepsToMove function to place all the array elements.

function quickSort(arr, left = 0, right = arr.length - 1) {
  // pivotIndex the new index of the pivot in in the array
  // in our array example, at the first call this will be 5, because we are checking 10 as the pivot
  // on the whole array
  let pivotIndex = getNumberOfStepsToMove(arr, left, right);
}

Quick Sort leverages recursion to efficiently divide the array into smaller subarrays, ensuring that elements are sorted by comparing them with a pivot.

function quickSort(arr, left = 0, right = arr.length - 1) {
  let pivotIndex = getNumberOfStepsToMove(arr, left, right);

  // the function starts calling itself from the beginning of the array where left = 0;
  // and right is the index before pivotIndex (4 when pivotIndex is 5)
  quickSort(arr, left, pivotIndex - 1);

 //Reaching this point means that the left side of the array is fully
// sorted, with each element positioned in its correct place

  return arr;
}

The algorithm recursively sorts the left subarray that contains elements smaller than the pivot.
The recursion stops when the subarray has one or zero elements, as it’s already sorted.

Now we need to do the same process to the right side of the array:

function quickSort(arr, left = 0, right = arr.length - 1) {
  // if the right index is greater, the sorting is done and we should return the array
  if (left < right) {
    let pivotIndex = getNumberOfStepsToMove(arr, left, right);

    // the function starts calling itself from the beginning of the array where left = 0;
    // and right is the index before pivotIndex (4 when pivotIndex is 4)
    quickSort(arr, left, pivotIndex - 1);

    // we then call the function from the index after the pivotIndex until the end of the array to handle the right subarray
    quickSort(arr, pivotIndex + 1, right);
  }

  // now all is sorted and placed correctly to the array
  return arr;
}

In this example, the right side is already sorted but the algorithm doesn't know that and it would have been sorted if it hadn't been.

Redux Toolkit: Creating Thunk Functions

Hajar | هاجر — Sun, 22 Dec 2024 17:59:13 +0000

What's a Thunk?

In programming, the word thunk refers to the part of code that performs delayed work, like async functions in JavaScript.

By itself, a Redux store doesn’t handle asynchronous logic. It only knows how to:

Synchronously dispatch actions.
Update state via reducers.
Notify the UI about state changes.

But wait, if that's the case, how can we call APIs and update the state based on their responses, which usually takes time? How do we handle that?

This is where the thunk functions come in.

What's a Thunk Function?

A thunk function is a function created to handle async logic, like calling an API. It takes two arguments dispatch and getState to dispatch actions and have access to the current state if needed.

const getAllUsers = () => {
  return async (dispatch, getState) => {
    dispatch(fetingAllUsers());
    try {
      const users = await getUsers();
      dispatch(userUpdated(users));
    } catch (err) {
      dispatch(logError(err))
    }
  }
}

The returned function is the thunk function and getAllUsers is called the thunk action creator in this example, and it would be dispatch like this:

dispatch(getAllUsers())

A thunk action creator can be dispatched with arguments to be used in the thunk function, if needed.

Creating Thunks with `createAsyncThunk`

Redux Toolkit provides the createAsyncThunk API to generate thunks easily:

import { createAsyncThunk } from '@reduxjs/toolkit';

export const fetchUserById = createAsyncThunk(
  'user/fetchUserById',
  async (userId) => {
    const user = await someHttpRequest(userId);
    return user;
  }
);

fetchUserById is the thunk function created here. createAsyncThunk is taking two arguments:

The first argument is a string prefix used for the action types generated (e.g. user/fetchUserById/pending, user/fetchUserById/fulfilled, or user/fetchUserById/rejected).
The second argument is a "payload creator" function. It should return a Promise with the required data or an error.

Why Use `createAsyncThunk`?

Besides letting you create thunk functions for API calls, createAsyncThunk automatically dispatches actions to track the state of API requests:

pending: The request is in progress.
fulfilled: The request succeeded.
rejected: The request failed.

This is really useful. For example, we can show a loader in the UI when the state is pending and let the user know something is happening.

Using Thunks in the Slice

Now that we’ve created the fetchUserById thunk, we can use the extraReducers field in our userSlice to handle state status changes:

import { createSlice } from '@reduxjs/toolkit';

const initialState = {
  user: null,
  status: 'idle', // 'idle' | 'pending' | 'succeeded' | 'failed'
  error: null,
};

export const userSlice = createSlice({
  name: 'user',
  initialState,
  reducers: {
    usernameUpdated: (state, action) => {
      state.user.username = action.payload;
    },
    emailUpdated: (state, action) => {
      state.user.email = action.payload;
    },
    userDataCleared: (state) => {
      state.user = null;
      state.status = 'idle';
    },
  },
  extraReducers: (builder) => {
    builder
      .addCase(fetchUserById.pending, (state) => {
        state.status = 'pending';
      })
      .addCase(fetchUserById.fulfilled, (state, action) => {
        state.status = 'succeeded';
        state.user = action.payload;
      })
      .addCase(fetchUserById.rejected, (state, action) => {
        state.status = 'failed';
        state.error = action.error.message || 'Something went wrong.';
      });
  },
});

export const { usernameUpdated, emailUpdated, userDataCleared } = userSlice.actions;

// Selector for the status to use in the application's components
export const selectStatus = (state) => state.user.status;

`createAsyncThunk` Conditions

What if we want to check some conditions before calling the API? For example, if the status is already pending, we don’t want to call it twice. In that case, we can use the third argument that createAsyncThunk accepts to write conditions.

export const fetchUserById = createAsyncThunk(
  "user/fetchUserById",
  async (userId) => {
    const response = await someHttpRequest(userId);
    return response;
  },
  {
    condition(_, { getState }) {
      const status = selectStatus(getState());
      if (status !== "idle") {
        return false;
      }
    },
  }
);

To learn how to use Typescript with the thunk functions, please read Type Checking Redux Thunks.

Getting Started with Redux and Redux Toolkit

Hajar | هاجر — Sat, 21 Dec 2024 16:48:14 +0000

What is Redux?

As the official documentation states: Redux is a pattern and library for managing and updating global application state. It serves as a centralized store for state that needs to be used across your entire application, with rules ensuring that the state can only be updated in a predictable fashion (without causing side effects or unexpected behaviors).

So Redux works as your application’s global state manager, ensuring that every change in the state goes through a specific and organized process.

Think of the state as a JavaScript object that needs to be shared across all of your app’s components.

If you have a user object like this:

const user = {
  username: "Jane Doe",
  email: "email@example.com",
};

Sharing this object with every component can quickly get messy if you manually pass it down through your app’s component tree. This is where Redux comes in handy.

How Redux Works

Redux has its own set of terms and rules that each component should follow to access or update the data. The most basic ones are actions and dispatch.

An action in Redux describes what a component wants to do with the state. For example:

Does it want to update the user’s username?
Change their email?
Clear the user’s data when they log out and that data isn't needed anymore?

These tasks can be transformed into action types that Redux can understand and process.

Defining Actions

Actions are simple JavaScript objects that contain a type (a string that identifies the action) and optionally a payload (data to update the state).

Here are some example actions:

const emailUpdated = {
  type: "user/emailUpdated",
  payload: "email@main.co",
};

const usernameUpdated = {
  type: "user/usernameUpdated",
  payload: "Hajar",
};

const clearUserData = {
  type: "user/clearUserData",
};

With these defined, components can use them to specify what kind of changes they want to make to the state.

Now the components know which actions they need to perform and what data/payload to include with them, so they need to dispatch them to the Redux store.

The Dispatch Function: Sending Actions to Redux

The dispatch function is how actions are sent to the Redux store. It’s a regular JavaScript function, the only differences are:

Redux knows exactly what the dispatch function is and what to do when it's called within a component.
The function accepts action objects, which must include a type (a string that identifies the action).

When you call dispatch with an action, Redux processes it and then triggers the right reducer that handles it.

What Are Reducers?

A reducer is a Redux function that takes the current state and an action, determines how to update the state based on the action type, and then returns the updated one.

For example, if a reducer receives an action like user/usernameUpdated, it modifies the username in the state with the value from the action’s payload. Once the reducer updates the state, Redux notifies the relevant components to re-render.

Et voilà! The component now has the updated user data, without having to worry about the steps Redux took to make it happen.

An example of how a reducer could look:

const ACTION_TYPES = {
  UPDATE_USERNAME: "user/usernameUpdated",
  UPDATE_EMAIL: "user/emailUpdated",
  CLEAR_STATE: "user/userDataCleared",
};

const initialState = {
  username: "",
  email: "",
};

const userReducer = (state = initialState, action) => {
  switch (action.type) {
    case ACTION_TYPES.UPDATE_USERNAME:
      return {
       // spread the state to return a new state object 
        ...state,
        username: action.payload,
      };
    case ACTION_TYPES.UPDATE_EMAIL:
      return {
        ...state,
        email: action.payload,
      };
    case ACTION_TYPES.CLEAR_STATE:
      return initialState;
    default:
      return state;
  }
};

export default userReducer;

And this is how the component would dispatch the actions:

const updateUsername = (name) => {
  dispatch({
    type: "user/usernameUpdated",
    payload: name,
  });
};

const updateEmail = (email) => {
  dispatch({
    type: "user/emailUpdated",
    payload: email,
  });
};

const clearUserData = () => {
  dispatch({
    type: "user/userDataCleared",
  });
};

That's cool and all but have you noticed how much code we've written for such a simple reducer example?

We had to define all the actions and make sure they were properly used in the components.
We had to create a switch case block for each action.
We had to remember to spread the previous state before updating its email or username. (this is to copy the old state to a new object first and return the new one -- reducers need to be pure functions).

So you can imagine how much more we'd need to write to introduce reducers and actions in a real-world application. This is where Redux ToolKit comes in very handy.

Using Redux Toolkit with Next.js

To use Redux Toolkit in an Next.js project, we need to install Next.js:

npx create-next-app@latest

Then, install @reduxjs/toolkit and react-redux:

npm install @reduxjs/toolkit react-redux

Configuring the Redux Store
Next, create a file app/redux/store.ts to configure the Redux store. we'll use the configureStore API from Redux Toolkit.

import { configureStore } from '@reduxjs/toolkit';

export default configureStore({
  // The reducer will be added here later
  reducer: {}
});

Wrapping the Application with Redux Provider

To make your Redux store accessible throughout your application, wrap your root component with the Provider component from react-redux and pass the store to it.

"use client";

import { Provider } from "react-redux";
import store from "@/app/redux/store";
import MainContent from "@/app/components/MainContent";

export default function Home() {
  return (
    <Provider store={store}>
      <MainContent />
    </Provider>
  );
}

Setting Up a Slice with Redux Toolkit

In Redux Toolkit, a slice manages the state and reducers. To create a slice, use the createSlice function from @reduxjs/toolkit.

import { createSlice } from "@reduxjs/toolkit";

const initialState = {
  username: "",
  email: "",
};

export const userSlice = createSlice({
  name: "user",         
  initialState,       
  reducers: {           
    usernameUpdated: (state, action) => {
      state.username = action.payload;
    },
    emailUpdated: (state, action) => {
      state.email = action.payload;
    },
    userDataCleared: (state) => {
      state.username = "";
      state.email = "";
    },
  },
});

export default userSlice.reducer;

The main arguments that createSlice accepts are:

name: A unique name for the slice.
initialState: The initial state of the slice.
reducers: the reducer functions to handle updating the state.

Note: Have you noticed how we're directly modifying the state here? In createSlice, we can use that syntax to simplifying the logic of updating the state - specially for the deeply-nested values. However, under the hood this is what it happens:

Redux Toolkit allows us to write "mutating" logic in reducers. It doesn't actually mutate the state because it uses the Immer library, which detects changes to a "draft state" and produces a brand new immutable state based off those changes.

But wait, how do we check for action types and map them to the reducers like we did in the previous code? Here’s the cool part: you don't need to! Once you define the reducers, Redux Toolkit automatically generates the action creators for each one, and we can easily export them from the slice file like this:

// app/redux/userSlice.ts
import { createSlice } from "@reduxjs/toolkit";


const initialState = {
  username: "",
  email: "",
};


export const userSlice = createSlice({
  name: "user",
  initialState,
  reducers: {
    usernameUpdated: (state, action) => {
      state.username = action.payload;
    },
    emailUpdated: (state, action) => {
      state.email = action.payload;
    },
    userDataCleared: (state) => {
      state = initialState;
    },
  },
});


// the actions are exported to be used by any component now
export const { usernameUpdated, emailUpdated, userDataCleared } =
  userSlice.actions;


export default userSlice.reducer;

Then we can update the store with the userSlice.reducer:

import { configureStore } from "@reduxjs/toolkit";
import userReducer from "./userSlice";

export default configureStore({
  reducer: {
    user: userReducer,
    // we can inroduce more reducers from different slices here
    // posts: postsReducer
  },
});

Using Selectors and Dispatching Actions

Now that the store and slice are set up, we can use selectors to get the data and dispatch actions to update it.

The selectors are to access the state data and make them available to the application's components. This is how to create and export them in the userSlice file:

export const selectUsername = (state) => state.user.username;
export const selectEmail = (state) => state.user.email;

Now we can use the selector data and dispatch actions:

import { useSelector, useDispatch } from "react-redux";
import { selectUsername, selectEmail } from "@/redux/userSlice";
import { usernameUpdated, emailUpdated, userDataCleared } from "@/redux/userSlice";

const UserComponent = () => {
  const username = useSelector(selectUsername);
  const email = useSelector(selectEmail);
  const dispatch = useDispatch();

  const handleUpdateUsername = (name: string) => dispatch(usernameUpdated(name));
  const handleUpdateEmail = (email: string) => dispatch(emailUpdated(email));
  const handleClearUserData = () => dispatch(userDataCleared());

  return (
    <div>
      <h2>Username: {username}</h2>
      <p>Email: {email}</p>
      <button onClick={() => handleUpdateUsername("new_username")}>Update Username</button>
      <button onClick={() => handleUpdateEmail("new_email@example.com")}>Update Email</button>
      <button onClick={handleClearUserData}>Clear User Data</button>
    </div>
  );
};

Tuple Types in Typescript

Hajar | هاجر — Sun, 22 Oct 2023 16:04:09 +0000

Sometimes, you need to define arrays where the order and types of their elements should matter. In a case like that, Tuple types come in very handy.

For example, if you have a turtle = ["Zanjabeel", 14]; where Zanjabeel is its name, and 14 is its age. Declaring turtle that way (without Tuple) will implicitly give it the type of (number|string)[] (array of string or number), which will not help prevent someone from giving turtle a non-string name or a not-a-number age.

Defining `turtle` with Tuples

To guarantee that turtle will have the first element as string and the second one as number, you’ll need to define it as a Tuple of length two.

let turtle: [string, number] = ["Zanjabeel", 14];
turtle[1] = "15"  // Error Type: ‘string’ is not assignable to type ‘number’. 

turtle[0] = "Ginger" // works fine
turtle[1] = 15 // works fine

Naming & Destructuring Tuples

To enhance code readability, you could name the Tuple type elements.

let turtle: [name: string, age: number] = ["Zanjabeel", 14];

Or you could also destructure it.

const turtle: [string, number] = ["Zanjabeel", 14];
const [name, age] = turtle;

Readonly Tuples

To make your Tuple array read-only, you can use readonly.

const KEYS: readonly [KEY_1: string, KEY_2: number] = ["secret_key", 40];

// The following lines will throw compile-time errors.
KEYS[0] = "new_secret_key"; // Error: Cannot assign to '0' because it is a read-only property.
KEYS.push("new_secret_key"); // Property 'push' does not exist on type 'readonly [KEY_1: string, KEY_2: number]'.

This feature is particularly valuable when you want to ensure the immutability of certain data structures.

Thanks for reading.

Binary Search

Hajar | هاجر — Sun, 05 Sep 2021 17:03:14 +0000

Binary Search is one of the fastest searching algorithms, especially when it comes to searching large (sorted) lists.
The main goal of Binary Search is to narrow down the area you're searching in as much as possible, which leads to reducing the steps you'd take to find an item.

When implementing Binary Search you should:
1- Assume that you're working on sorted lists -- otherwise, the search won't work.
2- Specify start and end points for where you should start and end searching.
3- Pick an item from the middle of the list and compare it to the item you're searching for. Based on that comparison, you should know if the item is found, or if you need to modify your start and end points and repeat the steps.

Let's see an example.

 function binarySearch(list, itemToFind){
   // some code to return the index of itemToFind
 }
  let list = [10, 21, 25, 30, 32, 35, 50, 52, 55, 60];
  let itemToFind = 32; 
  binarySearch(list, itemToFind) // should return the index of 32.

To implement the code in binarySearch, we first need to set our start and end points. Since we need to cover the whole list, we need to specify our initial start point to be the first index of the list and end point to be the last index of the list.

  let start = 0;
  let end = list.length -1; // 9

Next, we need to set a middle point index and then compare its value to the item we're searching for.

   let middle = Math.floor((start + end)/2); // 4
   if (list[middle] === itemToFind) return middle;

Since we are searching for an item that happens to be in the middle of the list, those few lines of code will return the index of itemToFind on the spot. This is called the best-case scenario of an algorithm -- your first guess is the correct answer.

But of course, that rarely happens, so we need to cover the cases where we don't find our item in the middle of the list.

Let's start a new search and search for 30 this time.

Hmm, we calculated the middle point exactly as before, but unfortunately, we didn't find 30 there.

Now, we know that the middle item does not equal itemToFind. But is it greater or less than itemToFind?

We found 32, which is greater than 30. So what does that mean?

Since list is sorted, that means that itemToFind must be somewhere between start and middle.

Next step: relocate the end point of the search to narrow the search window.

  if(middle > itemToFind){
    end = middle -1;
  }

Then recalculate middle and check the new middle value.

   if (list[middle] === itemToFind) return middle; 
   if(middle > itemToFind) end = middle -1; // 3
   middle = Math.floor((start + end)/2); // 1

The middle item is now 21. It doesn't equal 30 so we can't return its index. It's not greater than 30, so relocating end to narrow the search area is not an option. However, we can relocate start. Because at this point, if the item exists, it must be somewhere between middle and end.

  if(list[middle] < itemToFind){
    start = middle + 1;
  }

Then recalculate middle and check the new middle value.

   if(list[middle] === itemToFind) return middle; 
   if(list[middle] > itemToFind) end = middle -1; // 3
   if(list[middle] < itemToFind) start = middle + 1; // 2
   middle = Math.floor((start + end)/2); // 2

We find 25. It's still less than 30. So we relocate start, calculate middle, and check again.

Finally, middle is pointing to the item we're searching for. However, that has happened after we have exhausted all our searching options, where our search window starts where it ends. This means that we've found our item at the worst-case scenario of the algorithm -- your last chance of guessing is the correct answer.

Note: The worst-case scenario also happens if itemToFind doesn't exist in list.

One last thing I should mention about Binary Search is that it has O(log n) time complexity, which means it takes log n time to find an item in the worst-case scenario.

// final implemtation
function binarySearch(list, itemToFind) {
  let start = 0;
  let end = list.length - 1;
  while (start <= end) {
    let middle = Math.floor((start + end) / 2);
    if (list[middle] === itemToFind) return middle;

    if (list[middle] > itemToFind) {
      end = middle - 1;
    } else {
      start = middle + 1;
    }
  }
  return -1; // not found
}

(thank you for reading)

Getting Started with Cypress

Hajar | هاجر — Wed, 18 Aug 2021 20:07:44 +0000

What's Cypress?
Cypress is a JavaScript-based front-end testing tool. It helps you test the journey that users take from once they visit your website till they leave. You can use Cypress to test what users will see when they visit the website for the first time. Or where they should be redirected to when they click some link or another. Or if cookies get saved when they signup or login. And so many other things.

Installation
To run Cypress, you need to install it as a dev dependency into your project and then run yarn run cypress open.

yarn add cypress --dev
yarn run cypress open

Note: You can also download it from Cypress.io, double click Cypess.exe and then select your project.

Once you add Cypress to your project, cypress folder and other sup-directories will be added to the root of your project.
What we care about in these sub-directories is integration. You can delete all the files created under that directory and create a new file called first_test.spec.js. This is where we're going to add our first test.

Let's write a test for a function that returns random numbers between 0-90.

// 1
const getRandomNum = () => Math.floor(Math.random() * 100);
// 2
describe("test getRandomNum", () => {
  // 3 
  it("should be less than 100", () => {
    // 4
    for (let i = 0; i < 10; i++) {
      expect(getRandomNum()).lessThan(100);
    }
  });
});

1- So, we have a function somewhere that returns a number between 0-9.
2- We first write a describe block to group all the tests related to getRandomNum and name it test getRandomNum.
3- Then, we write the it block in which we write our test.
4- Finally, we run a for loop to test our function. We should expect a number lessThan 100 every time we call getRandomNum().

If everything goes well, the test should pass.

Now, what if we refactored our code and accidentally made a tiny mistake.

function getRandomNum() {
  return Math.floor(Math.random() * 100 + 100); // 100 was added to the number by mistake
}

If we run the test again, it should fail.

The cool part is that Cypress tells you exactly where the test fails and why it fails. Here in our test, we told Cypress to expect getRandomNum() to return a number lessThan 100, but instead we got 190. So Cypress complained about it to let us know that something went wrong after we refactored the code.

Cypress is much more powerful than just testing a function that generates random numbers, especially for applications built in React -- for example. It provides you with tools that help you mount your components and test their behavior. It's exactly like simulating how a user uses your website.

Let's pretend that we have a website and that we want to test that the Contact link gets redirected to the contact page onClick.

// 1
describe.only("test contact link", () => {
  // 2
  it("should be redirected to a contact page", () => {
    // 3
    cy.visit("http://localhost:3000");
    // 4
    cy.contains("Contact").click();
    // 5
    cy.url().should("include", "/contact");
  });
});

1- Add a describe block, and since we only care about testing the contact link right now, run that test only.
2- Start the it block.
3- First, ask Cypress (cy) to visit/go to the application.
4*- Then we tell it to find the first element that has the text Contact and clicks it.
5- Finally, Cypress tests if the the current url contains /contact.

Note*: contains is case sensitive. If the text is "Contact" but you write "contact"(lower case), the link won't be found and you'll have a Timed out error. You can override that behavior by passing { matchCase: false } as an option to contains.

cy.contains("Contact", { matchCase: false }).click()

Also, note that contains finds the first element that has the text "Contact", so if you have two "Contact" links on the page you'll need to use get with contains.

cy.get("nav").contains("Contact") // to get the link in the nav
cy.get("footer").contains("Contact") // to get the link in the footer
//Or
cy.contains("nav", "Contact").click();
cy.contains("footer", "Contact").click();

What if we have a login page where people can login or see an error message if the login fails... let's test that.

describe("Login", () => {
  // we write the code we want to run before each test in a beforeEach block
  beforeEach(() => {
    cy.visit("http://localhost:3000/login");
  });

  it("should succeed with correct credentials ", () => {
    // find the element (input) with id:username and type hajarNasr
    cy.get("#username").type("hajarNasr");
    // find the element (input) with id:password and type uniquePassword
    cy.get("#password").type("uniquePassword");
    // find the element (button) with id:submit-btn and click it
    cy.get("#submit-btn").click();

    // those two lines confirm that the user has logged successfully in and got redirected to homepage
    cy.contains("Welcome hajarNasr");
    cy.url().should("include", "/home");  });
});

// To test that an error msg gets displayed when user enters wrong data.

  it("should fail with wrong credentials ", () => {
    cy.get("#username").type("fakeUser");
    cy.get("#password").type("fakePassword");
    cy.get("#submit-btn").click();

    // this line confirms that user has not logged in because the page doen't contain a welcome message
    cy.should("not.contain", "Welcome fakeUser");
    // and this should confirm that we're still in the login page
    cy.url().should("include", "/login");
    // and that an element with a className error is displayed in red.
    cy.get(".error").should("have.css", "color", "rgb(255, 0, 0)");
  });

References:

docs.cypress

Integrate a Stripe Payment with React

Hajar | هاجر — Sat, 24 Jul 2021 20:14:09 +0000

I have recently implemented the frontend side of an online payment system, and surprisingly it was not as complicated as I had thought. I confess Stripe handled most of it.

The Forntend Side
So, let's create a React app and install the necessary dependencies.

// in a terminal
npx create-react-app react-stripe
cd react-stripe
yarn add @stripe/stripe-js @stripe/react-stripe-js axios

Next, we need to create a Stripe account to get the publishable key that we’ll use to integrate Stripe into our project.

Note: Stripe has two modes, a test mode for development and a live mode for production. Each mode has its secret and publishable keys. Secret keys are for the backend code and should always be private. Publishable ones are for the frontend code, and they are not as sacred as the secret ones.

Now, to configure Stripe, we need loadStripe from @stripe/stripe-js, Elements from @stripe/react-stripe-js, and a PaymentForm.

// App.js
import { loadStripe } from "@stripe/stripe-js";
import { Elements } from "@stripe/react-stripe-js";
import PaymentForm from "./PaymentForm"; // not implemented yet

// when you toggle to live mode, you should add the live publishale key.
const stripePromise = loadStripe(STRIPE_PK_TEST);

function App() {
  return (
    <div className="App">
      {/* Elements is the provider that lets us access the Stripe object. 
         It takes the promise that is returned from loadStripe*/}
      <Elements stripe={stripePromise}>
        <PaymentForm /> 
      </Elements>
    </div>
  );
}

export default App;

In its simplest form, PaymentForm can be like this:

// PaymentForm.js
import { CardElement } from "@stripe/react-stripe-js";
import axios from "axios";

const PaymentForm = () => {

  const handleSubmit = async (e) => {
    e.preventDefault();
    // stripe code here
  };
  return (
    <form onSubmit={handleSubmit}>
      <CardElement />
      <button>BUY</button>
    </form>
  );
};

export default PaymentForm;

Now, we need to use Stripe to submit our form.

//PaymentForm.js
import { CardElement, useStripe, useElements } from "@stripe/react-stripe-js";
import axios from "axios";

const PaymentForm = () => {
  const stripe = useStripe();
  const elements = useElements();
  const handleSubmit = async (e) => {
    e.preventDefault();
    if (!stripe || !elements) {
      // Stripe.js has not loaded yet. Make sure to disable
      // form submission until Stripe.js has loaded.
      return;
    }
    // Get a reference to a mounted CardElement. Elements knows how
    // to find your CardElement because there can only ever be one of
    // each type of element.
    const cardElement = elements.getElement(CardElement);

    // use stripe.createToken to get a unique token for the card
    const { error, token } = await stripe.createToken(cardElement);

    if (!error) {
      // Backend is not implemented yet, but once there isn’t any errors,
      // you can pass the token and payment data to the backend to complete
      // the charge
      axios
        .post("http://localhost:5000/api/stripe/charge", {
          token: token.id,
          currency: "EGP",
          price: 1000, // or 10 pounds (10*100). Stripe charges with the smallest price unit allowed
        })
        .then((resp) => {
          alert("Your payment was successful");
        })
        .catch((err) => {
          console.log(err);
        });
    } else {
      console.log(error);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <CardElement />
      <button>PAY</button>
    </form>
  );
};

export default PaymentForm;

Note: I used <CardElement/> here but you can use <CardNumberElement/>, <CardExpiryElement/>, and <CardCvcElement/> and then use elements.getElement(CardNumberElement) to access the card number element.

The Backend Side
For the backend, Stripe supports many languages, but here I'm using Node.js.

Move the React code into a client directory inside stripe-react. Run yarn init so that the outer directory can have the package.json for the backend code and then create server.js.

The project directory should look something like this:

react-stripe
- client (holds all React files).
- .gitignore
- package.json
- server.js
- yarn.lock

Install the necessary dependencies for the backend:

 yarn add express stripe dotenv cors
 yarn add --dev concurrently nodmon

Add to the outer package.json:

  "scripts": {
    "client": "cd client && yarn start",
    "server": "nodemon server.js",
    "start": "node server.js",
    "dev": "concurrently --kill-others-on-fail \"yarn server\" \"yarn client\""
  },

Now, in server.js, create the post api/route that will recieve the payment data and Stripe token from the FE to complete the charge.

require("dotenv").config();
const express = require("express");
const app = express();
const cors = require("cors");

app.use(express.json());
app.use(express.urlencoded({ extended: true }));
app.use(cors());

const PORT = process.env.PORT || 5000;

const stripe = require("stripe")(env.process.STRIPE_SECRET_KEY_TEST);

// same api we used in the frondend
app.post("/api/stripe/charge", async (req, resp) => {
  const { token, currency, price } = req.body;
  const charge = await stripe.charges.create({
    amount: price,
    currency,
    source: token,
  });

  if (!charge) throw new Error("charge unsuccessful");
});

app.listen(PORT, () => {
  console.log(`Server running on port: ${PORT}`);
});

Finally, run yarn dev and use one of these test cards to test the integration.
You should see all the payments under Payments on your Stripe dashboard.

References:
Stripe docs.
Stripe charges.
A more detailed tutorial

7 Reasons Why You Should Apply for TCL

Hajar | هاجر — Sat, 05 Dec 2020 14:35:05 +0000

"When you value and appreciate something, you can't stop talking and writing about it." -Anonymous

That's how I feel about TCL (or, The Collab Lab). I just can't shut up about my experience with them. 😅

Here are a few reasons why I appreciate that program and the people behind it so much, and why you should apply to join them if you're an early-career React developer and looking to gain some experience in working with a diverse team in agile development.

(It's a free program, by the way.)

1- The culture and community:
One of the main things I admire about TCL is the culture and community. They care so much about the participants no matter what their backgrounds, beliefs, or religions are.

Their code of contact is proof of how much they care.

2- The mentors:
Having mentors is priceless, especially if they're doing it out of passion. And TCL has a habit of attracting only passionate, experienced mentors.

3- The team:
I mean, who doesn't want to work and be friends with people from different cultures and countries? Who doesn't want a few people to go through all the frustration and code bugs with? No one, obviously.

4- Git and Github:
Working with TCL will get you more and more comfortable working with Git and Github. You'll learn how to write good pull requests and why, how to review other people's code, and how to resolve code conflicts.

5- Code reviews and office hours:
Yes, you get those every week for eight weeks in a row.

6- The weekly sync calls:
Each Sunday, you'll give a short presentation about the work you and your pair of the week will do that week. I think that's one of the most helpful things about the program. It lets you practice how to talk about and explain the code you write, which can be very handy in interviews.

7- Andrew Hedges:
(I was going to add Andrew as the first reason here but then decided to save the best reason to the last)

Andrew is the founder of Collab Lab and an engineering manager at Zapier. The kindness he has shown us at TCL is unbelievable. You need him in your social media life as a reminder that there are people out there who wake up each morning thinking, "Hmm, what can I do today to help people I don't even know but care deeply about?" And that one day, those people are going to save us all.

Thank you for reading, and if you're interested, please apply here.

The applications will be open from tomorrow to December 12.

TCL - Week 4

Hajar | هاجر — Fri, 30 Oct 2020 20:08:09 +0000

For those who do not know: TCL or The Collab Lab is a nonprofit that aims to help new developers gain practical experience by working remotely on real-world projects with other early-career developers

The journey so far

It's been almost a month since I started my journey with TCL as part of the Oct 2020 cohort.

When I got their email offering me a spot in the cohort, it took me around half an hour to process that information. Because first, yes, I applied but wasn't getting my hopes up. Second, I realized that I'd have to speak with people in Eglish, which was something I had never done before. But then that snarky voice in my head shouted, "What are you even thinking about?" So I wrote: "Yes, absolutely yes!!" and hit send.

I wasn't really sure what to expect from the program. All I'd known was that I'd need to learn Firebase because I was going to build an app using React and Firebase with a team of people from Africa and Europe, mentored not only by one but four mentors.

I was super excited and a bit nervous.

The Mentors 🌟

We have four mentors: Andrew Hedges, the founder of TCL. He's also one of those people you find on Stackoverflow who have thousands and thousands of reputations and dozens of golden and silver badges.
David Lluna, Luka Baramishvili, and Phoebe Voong-Fadel.

They all are always eager to help.

(Off the record: Sometimes I feel guilty calling them by their first names. It's a cultural thing)😅

The Team

Our team consists of four people from Egypt, Nigeria, and Paraguay but currently living in Norway.
Sarah Eisa, Yahaya Kehinde (Kenny), and Debora Galeano

So far, we all have worked together nicely.

The Program

TCL is an eight-week program. Each week, we split into two pairs. Each pair works on solving an issue to add new functionality to the app we are building.

We have a Slack channel, and our team meets with one of the mentors during office hours each week to discuss all the problems we may encounter while solving that week's issues. Sometimes, we just take advantage of the opportunity and try to know more about them.

By the end of the week, each pair should be done with their issue and open a PR for that issue so that the other pair reviews the code.

After the pair reviewing and making sure that the whole team is good with all the changes that have happened to the app so far, each pair adds the mentors to review their PR.

The mentors are always encouraging. When they see something they like, they make sure to tell you so. When they see something they don't like that much, they tell you so with the nicest tone.

On Sundays

On Sundays, we have a 1-hour Zoom call with all the mentors. The call starts with demos of the issues of the previous week.

We try to explain to the mentors how we've solved the issues and show them the state of the app so far. And for some reason, they are always proud of us. 😎

After the demos, on odd-numbered weeks, we have a learning module from one of the mentors.

On even-numbered weeks, though, we have Retrospectives.
In Retos, we fill these cards on Github, share appreciations and shoutouts, and talk about what went well during the last two weeks and what could we improve for the next weeks.

After that, we talk about the issues we're going to work on next, and that's it.

Thank you for reading.

TCL on Twitter and dev.to

TCL - Week 1

Hajar | هاجر — Fri, 09 Oct 2020 11:19:18 +0000

That's what their website says.

However, what their website does not explicitly say is that they are one of the most welcoming and helpful communities that any new developer would be so lucky to be part of.

When I applied to join them, they did not care that English was not my first language. They did not care that sometimes working with Git and GitHub felt like reading Latin to me. All they cared about was that I applied and that I sounded passionate when I did it.

What I like most about TCL so far is that they make you feel that you deserve a chance to be part of this tech world. That you deserve a chance even if you are not the smartest person in the room. That you deserve a chance even if you do not have those shiny, magical years of experience pinned on your wall. That you deserve a chance even if you come from this tiny, little place that would require a lot of zooming in on Google Maps for you to find.

It has been only a week since I have started my journey with TCL. However, on the first day of joining them, I felt the sense of having a team, a task to finish, or an issue to resolve. Besides, the realization that I now have four mentors whom I could ask for help whenever I need it is just crazy.

Responsive Header in React

Hajar | هاجر — Thu, 01 Oct 2020 21:28:24 +0000

On Netlify => Code

I used to think that making a responsive header in React would be complicated but once I started to implement it, it was much simpler than I'd thought.

I guess the first thing to think of when creating a responsive header is the way to measure the screen whenever it resizes. And fortunately for us, javascript provides an eventListener for exactly that purpose, the resize eventListener.

Let's see how we can take advantage of that eventListener to achieve our goal of making a responsive header.

// CustomHooks.js
import { useEffect, useState } from 'react';

export const useWindowWidthAndHeight = ()=>{
    // 1- Get the size of window 
    let windowInnerSize = [window.innerWidth, window.innerHeight];

    // 2- Define the state variable windowSize and pass windowInnerSize as its initial value
    let [ windowSize, setWidowSize ] = useState(windowInnerSize);

    useEffect(()=>{
        const changeWindowSize = ()=>{
            setWidowSize([window.innerWidth, window.innerHeight]);
        }
        /* 3- add a 'resize' eventListener to window so that whenever 
the size of window changes the state variable windowSize changes and the component re-renders */
        window.addEventListener("resize", changeWindowSize);

        // 4- cleanup the 'resize' eventListener
        return ()=> window.removeEventListener('resize', changeWindowSize);
    }, []);
    // 5- return the window size
    return windowSize;
}

Here, we create a custom hook called useWindowWidthAndHeight.

Inside useWindowWidthAndHeight:
First, we create the windowInnerSize variable to store the current width and height of window.
Second, we use windowInnerSize as the initial value for the state variable windowSize that we created using the useState Hook.
Third, we declare a useEffect Hook to add a resizeeventListner so that when a window resize happens, changeWindowSize()changes windowSize to the new measured width and height of the screen.
Finally, we return the latest measured width and height of window.

Now, let's create a header.

// Header.js
import React from 'react';
import Navbar from './Navbar';
import { Link } from 'react-scroll'; // react-scroll is a library for scrolling in React
import SmallScreensNavbar from './SmallScreensNavbar';
import { useWindowWidthAndHeight } from './CustomHooks';

const Header = () =>{
    // use our custom hook to get the the window size
    const [width, height] = useWindowWidthAndHeight();
    return(
        <header>
            <div className="header-inner">
                <Link to="Home" 
                      smooth={true} 
                      className="logo nav-link">
                      RH
                </Link>
                {/*if the width of the window is bigger than 1000px use <Navebar/>,
                   else user <SmallScreensNavbar/>*/}
                { width > 1000 ?
                <Navbar navClass="nav-big"
                        linkClassName="nav-big-link"/>
                :
                <SmallScreensNavbar navClass="nav-small"
                                    linkClassName = "nav-small-link"
                />
                } 
            </div>
        </header>
    )
}

export default Header;

Now, we need to create two navbar components, one for the screens with widths bigger than 1000px and another for smaller screens.

//Navbar.js
import React from 'react';
import { Link } from 'react-scroll';

const Navbar = ({navClass, linkClassName}) =>(
    <NavComponent navClass={navClass}
                  linkClassName = {linkClassName}
    />
);

export const NavComponent = ({onClick, navClass, linkClassName})=>(
  <nav className={navClass}>
      {["Projects", "About", "Contact", "Footer"].map(section=>
        <Link to={section}
              smooth={true}
              className={linkClassName}
              onClick={onClick}>
            {section}
        </Link>
      )}
  </nav>
)
export default Navbar;

And for smaller screens:

//SmallScreensNavbar.js
import React, { useState } from 'react';
import { NavComponent } from './Navbar';

const SmallScreensNavbar = () =>{
    // declare 'translate' as a state variable
    let [translate, setTranslate ] = useState(true);
    return(
        <div> 
             <button className="hamburger-btn"
                     onClick= {()=> setTranslate(!translate)}>  {/* toggle translate */}
                  {/* change the btn text based on whether translate is true or false */} 
                 {translate?<span>&#9776;</span>:<span>&times;</span>}
             </button>
             {/*hide and show the sidebar list based on whether translate is true or false*/}
             <div id="sidebar-list" className={`${translate? "addTransiton": "removeTransition"}`}>
                <NavComponent
                    navClass="nav-small"
                    linkClassName = "nav-small-link"
                    onClick = {()=>setTranslate(true)}  //set translate to true to hide the sidebar list
                />
             </div>
        </div>
    )
}
export default SmallScreensNavbar;

Now, for this to work we need to add the CSS:

header{
    position: fixed;
    top: 0;
    height: 70px;
    background-color: rgb(197, 178, 178);
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    box-shadow: 1px 1px 1px 1px rgba(116, 110, 110, 0.199);
}
.header-inner{
    width: 90%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.hamburger-btn{
    font-size: 1.3rem;
    position: absolute;
    bottom: 0;
    width: 40px;
    height: 35px;
    right: 30px;
    outline: none;
    background-color: rgb(134, 125, 125);
    color: whitesmoke;
}
.addTransiton{
    transform: translateX(170px);
    transition: transform 0.5s ease-in-out;
}
.removeTransition{
    transform: translateX(20px);
    transition: transform 0.5s ease-in-out;
}

#sidebar-list{
    background-color: rgb(134, 125, 125);
    height: 90vh;
    width: 170px;
    position: absolute;
    z-index: 2000;
    right: 0;
    top: 0;
    margin-top: 70px;
}
.nav-big{
    list-style: none;
    display: flex;
    justify-content: space-around;
    width: 70%;
    font-weight: bold;
}

.nav-big-link{
   cursor: pointer;
   color: white;
   text-decoration: none !important;
}

.nav-small{
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: space-around;
    margin: auto;
    height: 40%;
    margin-top: 50px;
    width: 80%;
}
.nav-small-link{
    cursor: pointer;
    color: whitesmoke;
    padding-bottom: 5px;
}

And things should be working now.
Thank you so much for reading. :)

References:
Stackoverflow to find out how to measure the screen's width and height.

DEV Community: Hajar | هاجر

Getting Started with Astro

What’s Astro?

Prioritizes server-side rendering (SSR)

The Island Architecture

Getting Started with Astro

Step 1: Create Your Project

Step 2: Run the Dev Server

Anatomy of an .astro File

Using Slots and Props in Astro

What Are Slots in Astro?

What Are Props in Astro?

Fetching Data in Astro

Adding React to Your Astro Project

References

Quick Sort Algorithm

How Quick Sort Works

Finding the Pivot's Correct Position

Redux Toolkit: Creating Thunk Functions

What's a Thunk?

What's a Thunk Function?

Creating Thunks with createAsyncThunk

Why Use createAsyncThunk?

Using Thunks in the Slice

createAsyncThunk Conditions

Getting Started with Redux and Redux Toolkit

What is Redux?

How Redux Works

Defining Actions

The Dispatch Function: Sending Actions to Redux

What Are Reducers?

Using Redux Toolkit with Next.js

Wrapping the Application with Redux Provider

Setting Up a Slice with Redux Toolkit

Using Selectors and Dispatching Actions

Tuple Types in Typescript

Defining turtle with Tuples

Naming & Destructuring Tuples

Readonly Tuples

Binary Search

Getting Started with Cypress

Integrate a Stripe Payment with React

7 Reasons Why You Should Apply for TCL

TCL - Week 4

TCL - Week 1

Responsive Header in React

Anatomy of an `.astro` File

Creating Thunks with `createAsyncThunk`

Why Use `createAsyncThunk`?

`createAsyncThunk` Conditions

Defining `turtle` with Tuples