Forem: Mohammad Khayata

Why Monorepo Is a Powerful Choice for Next.js & Node.js Projects

Mohammad Khayata — Wed, 17 Dec 2025 15:32:12 +0000

Monorepo isn’t just about keeping everything in one repository.
It’s a practical approach that helps teams build, scale, and maintain modern web applications more efficiently.

Below are the key reasons why monorepos work especially well with Next.js and Node.js projects.

Key Benefits of Using a Monorepo

1. Everything Lives in One Place

With a monorepo, your:

Frontend (Next.js)
Backend (Node.js / NestJS)
Shared packages

all live in a single repository.
This reduces context switching and makes the overall project structure easier to understand.

2. Easy Code and Data Sharing

Monorepos make it simple to share:

Types and DTOs
API contracts
Utility functions

Frontend and backend can rely on the same data structures, which improves consistency and developer confidence.

3. Fewer Bugs During Development

Because shared code is centralized:

Updating a type propagates everywhere
API and UI mismatches are reduced
Refactoring becomes safer and faster

This leads to more predictable changes and fewer runtime surprises.

4. AI Tools Work Better With Monorepos

When all related code lives in one repository:

AI tools can better understand relationships between files
Suggestions become more accurate
Generated code stays more consistent across layers

This is especially useful when working with complex applications or shared contracts.

5. Better Team Collaboration

A monorepo encourages:

Unified tooling
Shared conventions
Consistent development workflows

New developers can onboard faster because everything follows the same structure and standards.

6. A Strong Foundation for Microservices

Monorepos work well as a starting point for systems that may later evolve into microservices:

Start centralized
Split services when needed
Keep shared contracts and tooling

This allows teams to scale without re-architecting from scratch.

Quick Start: Creating a Monorepo With Turborepo

Turborepo is one of the most popular tools for managing monorepos in the JavaScript ecosystem.

npx create-turbo@latest

A simple example structure:

apps/
  web/    → Next.js
  api/    → Node.js / NestJS
packages/
  contracts/
  ui/
  api-client/

Turborepo provides:

Fast builds with smart caching
Efficient task orchestration
Easier dependency management

Final Thoughts

Monorepos help teams:

Simplify development
Improve integration between frontend and backend
Build scalable and maintainable systems

If you’re working on Web or SaaS projects with Next.js and Node.js,
a monorepo is a solid and professional choice.

Ai In Web Development: Personal Experience.

Mohammad Khayata — Fri, 11 Apr 2025 12:27:05 +0000

💡 My Personal Experience Using AI in Web Development

In recent years, AI has become an essential assistant for developers—especially in the world of web development. In this article, I’ll share my personal experience with AI tools, highlighting where they shine, and where you should be cautious when using them.

✅ Effective Use Cases for AI in Web Development

1. Creating Utility Functions and Pure Functions

AI is incredibly good at generating clean and optimized utility functions. Whether it’s for formatting text, manipulating data, or simple logic, the results are usually excellent.

2. Writing Native JavaScript and Browser API Code

When dealing with raw JavaScript or browser-specific APIs (like IntersectionObserver, Clipboard API, WebSockets, etc.), AI provides reliable and fast solutions, saving you time from reading documentation.

3. Code Documentation and Comments

AI is super helpful when it comes to writing clean inline comments or even full documentation files (like Markdown docs). This is particularly useful when working in a team or contributing to open-source projects.

4. Building Specific UI Components (with Clear Inputs/Outputs)

If you clearly explain what the component needs (props, expected outputs), AI can generate code that is often close to production-ready.

5. Localization & Internationalization

AI can assist in quickly translating content and generating proper localization files (.json, .po, etc.) based on the structure you’re using.

6. Generating Placeholder or Dummy Data

Extremely useful during the early stages of development to simulate API responses or UI behavior with realistic-looking mock data.

7. Generating Backend Entities with ORM (Prisma, TypeORM, etc.)

By giving a detailed explanation of your system resources and their properties, AI can generate entity schemas and models—something that usually takes a lot of time when done manually.

8. Code Refactoring (⭐ Highly Recommended)

One of the areas where AI truly shines. It understands your logic, cleans up messy code, and improves structure—saving hours of work with impressive results.

⚠️ Use Cases Where You Should Be Cautious

1. Project Architecture & Boilerplate Setup

If you don’t provide a very detailed description, AI might fall back to outdated or overly simplified project structures. You’ll need to guide it carefully.

2. Final UI Design (Especially for Arabic/RTL Layouts)

AI isn’t great at full-page designs—especially in Arabic or RTL. You might spend more time fixing its output than building it yourself. The better approach: explain the UI section by section.

3. Creating Animations

AI-generated animations often fall short in terms of quality or smoothness. For complex or modern UI/UX effects, manual work or specialized tools are better.

4. Debugging New Framework Features

If you're using a very recent feature from a library or framework (e.g., the latest version of React, Next.js, etc.), AI may not be up-to-date or trained on enough examples to help effectively.

5. Runtime Error Debugging

Just pasting the console error isn’t enough. AI needs full context: components involved, the flow of execution, and what you're trying to do. Without that, it might give you irrelevant solutions.

🚫 Golden Rule

“Never copy code from AI that you don’t understand.”

If AI generates something unfamiliar or complex, read it, ask it to explain, or search it online. Blindly copying code—especially logic-heavy snippets—can be risky.

🌟 Bonus AI Use Cases

Improving SEO: AI can write meta tags, generate structured data (JSON-LD), and suggest better titles/descriptions.
Writing Tests (Jest, Vitest, Cypress): With proper input, AI can generate test cases that follow your logic and structure.
Summarizing Long Code or Documentation: If you're working with legacy code or a new library, AI can break down what’s going on quickly and clearly.

🧠 Final Thoughts

AI is not a replacement for developers—it’s a powerful tool. The more you understand its strengths and weaknesses, the better you can use it to enhance your workflow and speed up delivery without sacrificing quality.

Headless vs. Traditional UI Libraries: When and Why to Choose Each 🧩

Mohammad Khayata — Fri, 11 Apr 2025 00:05:04 +0000

Headless vs. Traditional UI Libraries: A Practical Guide 🧩

Let's dive into the world of UI libraries! To really grasp what "headless" means, it helps to first understand their traditional counterparts.

The Traditional UI Libraries 🎨

Think of the UI libraries many of us started with. These libraries typically follow a specific design principle – maybe a well-known one like Material Design, or perhaps they establish their own distinct visual language.

For instance:

Libraries like Material-UI (MUI) and Vuetify are built following Google's Material Design principles.
Others, such as Ant Design and Bootstrap, use their own unique design systems to craft components.

The result? You get components that are ready to use "out-of-the-box" ✨ – fully styled, often elegant, and visually consistent according to the library's chosen aesthetic.

(Image: Example components following Material Design)

The Headless UI Libraries ⚙️

Now, let's contrast that with headless UI libraries. Unlike their traditional cousins, headless libraries don't impose any specific design principles or visual styles. What they do provide are fully accessible, unstyled components that expertly handle the core logic, behavior, and accessibility (like keyboard navigation and ARIA attributes) ♿.

The visual presentation – the entire look and feel – is left completely up to you, the developer. This grants you absolute control over styling.

Popular examples include Headless UI (from the creators of Tailwind CSS), Radix UI, and React Aria.

(Image: Conceptual representation of unstyled Headless UI components)

Why the Shift Towards Headless? 🤔

What drove the need for this different approach? Several factors come into play:

The Complexity of Theming Traditional Libraries 😫 While many traditional libraries (like MUI) offer theming capabilities, achieving a truly bespoke design often requires workarounds. You might find yourself frequently overriding styles, wrestling with CSS specificity, or resorting to the dreaded `!important` flag to force the look you need.
Integrating Custom Components 🧱 When you build your own custom components alongside a traditional library, making them visually blend seamlessly can be challenging unless every part of your custom component is built using elements or primitives provided by that UI library. Headless avoids this friction by not dictating styles in the first place.
Bundle Size Concerns 📦 Traditional UI libraries, packed with pre-designed components and their associated styles (like MUI or Ant Design), can significantly increase your application's final bundle size. Even with modern techniques like tree-shaking, you might still ship styles or component logic you don't actually use.
Potential Performance Side Effects 📉 The need for extensive customizations or style overrides in traditional libraries can lead to extra CSS or JavaScript being bundled. This added weight can bloat the final package size, potentially slowing down your application's load times and impacting overall performance.

When to Use Each? 🤔

It's crucial to understand that neither approach is inherently "better" than the other. Choosing the right type of UI library depends entirely on your project's specific requirements and goals.

Headless UI Libraries 🔧

Using headless UI libraries is ideal for:

Building highly customized design systems from scratch.
Adhering to strict corporate branding guidelines where unique styling is paramount.
Situations where you need complete control over the UI and want to avoid battling default styles.

Traditional UI Libraries ✨

On the other hand, using pre-designed components from traditional libraries is often a perfect choice for the following scenarios:

Building Dashboards and Admin Panels, which often require complex components (like data grids, date pickers) that take significant time to build and style from scratch.
Applications that do not have strict restrictions on design conformity or can adapt to the library's look and feel.
Urgent projects that require rapid development and completion 💨.
Applications that intentionally adopt common design principles (like Material Design) or have designs closely matching a specific library (e.g., Bootstrap).

Wrapping It Up 🎁

In the end, both headless and traditional UI libraries serve distinct purposes and offer unique advantages. The choice boils down to a fundamental trade-off: control vs. convenience.

If you're seeking total design freedom 🎨 and want to build a bespoke user experience tailored precisely to your visual language, headless UI libraries (Headless UI, Radix UI, React Aria) are your best allies. They provide the robust foundation of accessibility, logic, and behavior without imposing visual constraints.
Conversely, if your project demands rapid development ⏱️ with consistent, polished, pre-designed components, traditional UI libraries like MUI, Ant Design, or Bootstrap will save you significant time and effort. They offer a streamlined experience straight out-of-the-box, ideal for dashboards, admin panels, MVPs, and projects where speed is a priority.

So, next time you're weighing your options, take a moment to reflect: What are the core needs of this specific project? 🤔 Remember, whether you choose to customize every pixel or leverage a ready-made design system, you have powerful tools available to build something amazing! ✨

Happy coding! 🚀

Managing Recursive Components in React With Custom Hook

Mohammad Khayata — Fri, 23 Aug 2024 20:26:27 +0000

When developing user interfaces, especially complex ones, you'll often encounter scenarios that require rendering nested structures. Components such as Tree Views, file systems, routing systems, collapsible menus, and nested lists all share a common trait: they rely on recursive components. Understanding how recursive components work can greatly enhance your ability to create flexible, dynamic, and reusable components in your applications.

Note: This article is not about building a simple TreeView with React. Instead, it focuses on learning how to manage recursive component state using a custom hook based on useState.

What Are Recursive Components?

A recursive component is a React component that calls itself as part of its render method. This pattern is particularly useful when dealing with data structures that are hierarchical or nested by nature. By leveraging recursion, a component can handle data of arbitrary depth, making it a powerful tool for rendering complex structures like trees or directories.

In this article, we will build a simple TreeView component demo using a custom hook based on *useState * to manage the state of the tree.

Bulding The useTree Hook

the hook internaly will be based on useState be cause we need our componentes to be reactive !

The useTree hook is a custom React hook designed to manage a tree data structure with various utility functions for updating, traversing, and interacting with the nodes. Here’s a step-by-step breakdown of how this hook works:

Because the code is a bit long, I will only put the function titles in this article, and you can get the full code from the GitHub Repo

Initial Setup and Types

Interfaces and Types:
BaseNodeProps: Defines default properties for a tree node, such as level, isOpen, isLoading, isActive, etc.
TreeNode: A generic interface defining a tree node that includes an id, title, data, props, and potentially childrens which are nested nodes.
ToTreeOptions: Specifies the configuration for converting a flat data structure into a tree, including the keys for id, title, childrens, and an optional function setProps to customize node properties.

export interface BaseNodeProps { ... }
export interface TreeNode<TData = unknown, TProps extends BaseNodeProps = BaseNodeProps> { ... }
export interface ToTreeOptions<TData, TProps> { ... }

Tree Conversion Function

toTree Function:
A recursive function that converts an array of data into a tree structure.
It takes data and options, then maps each item to a TreeNode.
For each node, it checks if it has children (childrens). If so, it recursively converts them into TreeNode as well

export const toTree = <TData, TProps extends BaseNodeProps = BaseNodeProps>(
  data: TData[],
  { idKey, titleKey, childsKey, setProps = ..., initialIndex = -1 }: ToTreeOptions<TData, TProps>
): TreeNode<TData, TProps>[] => { ... }

Hook Initialization

useTree Hook:
State Initialization:
Uses useState to create a state tree initialized by converting initialValue using the toTree function and treeNodeOptions.

const [tree, setTree] = useState<TreeNode<TData, TProps>[]>(
  toTree(initialValue, treeNodeOptions)
);

Utility Functions for Tree Manipulation

const updateNode = (
  nodeId: number | string,
  matchedUpdater: UpdateNodePayload,
  notMatchedUpdater?: UpdateNodePayload
) => { ... }

const setNodeChilds = (
  nodeId: number | string,
  childrens: TreeNode<TData, TProps>[]
) => { ... }

const setNodeProps = (
  id: number | string,
  matchedUpdater: UpdateNodePropsPayload,
  notMatchedUpdater?: UpdateNodePropsPayload
) => { ... }

const setNodeOpen = (nodeId: number | string, is?: boolean) => { ... }

const setActiveNode = (id: number | string, is: boolean) => { ... }

Utility Functions for Tree Navigation and Queries

Memoized arrays of node IDs that are open or loading, respectively.

const getNodeParent = (
  nodeId: number | string,
  subTree: TreeNode<TData, TProps>[]
): TreeNode<TData, TProps> | null => { ... }

const findNodeById = (
  finder: (node: TreeNode<TData, TProps>) => boolean,
  nodes: TreeNode<TData, TProps>[] = tree
): TreeNode<TData, TProps> | null => { ... }

const traverseTree = (
  callback: (node: TreeNode<TData, TProps>) => void,
  nodesProp?: TreeNode<TData, TProps>[]
) => { ... }

const filterTree = (callback: (node: TreeNode<TData, TProps>) => boolean) => { ... }

const getNodeParents = (nodeId: number | string): TreeNode<TData, TProps>[] => { ... }

Derived States

Memoized arrays of node IDs that are open or loading, respectively.

const openedNodes = useMemo(() => tree.filter((node) => node.props.isOpen).map((node) => node.id), [tree]);
const loadingNodes = useMemo(() => tree.filter((node) => node.props.isLoading).map((node) => node.id), [tree]);

so The hook returns various functions and states to interact with and manipulate the tree, such as initializing the tree, setting node children, updating nodes, finding nodes, and more.

return {
  initializeTree,
  setNodeChilds,
  findNodeById,
  traverseTree,
  setNodeProps,
  setActiveNode,
  setNodeOpen,
  toTree,
  getNodeParent,
  getNodeParents,
  filterTree,
  openedNodes,
  loadingNodes,
  tree,
};

Usage Example With By Building Basic TreeView Demo

Code Overview
Imports:
The code imports React and several utilities from a custom useTree hook module: useTree, BaseNodeProps, ToTreeOptions, and TreeNode.

Data Definition

A sample data structure, data, is defined to represent the tree. This data includes a list of root nodes, each with an ID, a name, and an optional list of child nodes (employees). The child nodes can have their own children, creating a recursive tree structure.

TreeView Component:

TreeView is a recursive component that renders the tree nodes.
It accepts two props: nodes (the array of tree nodes to display) and toggleNodeOpen (a function to toggle a node's open/closed state).
Inside the component, it iterates over each node and renders it. For each node, it displays a toggle icon (+ or -), the node title, and, if the node is open (isOpen is true), it recursively renders its children by calling TreeView again.

TreeViewDemo Component:

This is the main component that initializes and displays the tree.
It defines treeOptions, an object specifying how to map the data to tree nodes. This object tells the useTree hook which keys in the data correspond to the node ID, title, and children.
The useTree hook is called with the initial data and treeOptions to create and manage the tree state. The hook returns tree, the current tree state, and setNodeProps, a function to update node properties.
The toggleNodeOpen function is defined to toggle the isOpen property of a node, allowing nodes to be expanded or collapsed. It uses setNodeProps to update the node state.
Finally, TreeViewDemo renders the TreeView component, passing it the tree nodes (tree) and the toggle function (toggleNodeOpen).

import React from "react";
import {
  useTree,
  BaseNodeProps,
  ToTreeOptions,
  TreeNode,
} from "../hooks/useTree"; // Adjust the import path as needed

const data = [
  {
    id: 1,
    name: "Root 1",
    employees: [
      { id: 2, name: "Child 1", employees: [] },
      { id: 3, name: "Child 2", employees: [] },
    ],
  },
  {
    id: 4,
    name: "Root 2",
    employees: [
      {
        id: 5,
        name: "Child 3",
        employees: [{ id: 6, name: "Subchild 1", employees: [] }],
      },
    ],
  },
];

const TreeView = <TData, TProps extends BaseNodeProps = BaseNodeProps>({
  nodes,
  toggleNodeOpen,
}: {
  nodes: TreeNode<TData, TProps>[];
  toggleNodeOpen: (nodeId: number | string) => void;
}) => {
  return (
    <ul className="tree-list">
      {nodes.map((node) => (
        <li key={node.id} className="tree-item">
          {/* Render node title */}
          <div onClick={() => toggleNodeOpen(node.id)} className="tree-node">
            <span className="toggle-icon">{node.props.isOpen ? "-" : "+"}</span>
            <span className="node-title">{node.title}</span>
          </div>
          {/* Recursively render children if node is open */}
          {node.props.isOpen && node.childrens && (
            <TreeView nodes={node.childrens} toggleNodeOpen={toggleNodeOpen} />
          )}
        </li>
      ))}
    </ul>
  );
};

const TreeViewDemo: React.FC = () => {
  const treeOptions: ToTreeOptions<(typeof data)[0], BaseNodeProps> = {
    idKey: "id",
    titleKey: "name",
    childsKey: "employees",
  };

  // Initialize the tree hook
  const { tree, setNodeProps } = useTree(data, treeOptions);

  // Toggle node open/closed
  const toggleNodeOpen = (nodeId: number | string) => {
    setNodeProps(nodeId, ({ props }) => ({
      ...props,
      isOpen: !props.isOpen,
    }));
  };

  return (
    <div className="tree-container">
      {/* Render the tree view recursively */}
      <TreeView nodes={tree} toggleNodeOpen={toggleNodeOpen} />
    </div>
  );
};

export default TreeViewDemo;

Here is the full code with example on stackblitz :

stackblitz.com

Or you can clone the repo from Github

Designing Resilient and Scalable Architectures in React Projects

Mohammad Khayata — Fri, 23 Feb 2024 00:45:40 +0000

When building a new project, many developers encounter challenges in structuring their project files.

In this article, I will discuss the approach I adopt in structuring frontend projects using any framework.

Often, developers resort to following approaches found in various documentations and YouTube tutorials. These approaches typically involve organizing projects in the following manner:

Actually, the previous structure is not necessarily incorrect and may be suitable for some projects.
but, many developers encounter difficulties when developing projects based on this pattern, especially as the project size gradually increases.

The Problem in the basic structure

The main problem with the previous file structure is that we deal with multiple sections of folders to access files related to the same feature or domain.
For example, if we want to work on the products section in the project, we need to access files related to products in different sections (pages, components, router, store, etc.).

This would require us to open multiple directories and view files that we don't need to see when working on the products feature, such as users. Instead, we only need to work with product-related files.

In short, we can say that when working on a specific feature within the project, most of the time we deal with files related to that feature without needing to work with any folders containing other features.

The Solution

Make Your Project Structures Feature Based

we can create folder named "app" for example and move all files related to the same feature into it !.
for example , we moved all files related to products into "app/products"

and the sane for user feature :

Conclusion 😊

In conclusion, adopting a feature-based project structure can greatly enhance the organization and maintainability of frontend projects. By grouping related files together within dedicated feature folders, developers can streamline their workflow and minimize unnecessary navigation between directories. This approach promotes better code encapsulation, improves code readability, and facilitates collaboration among team members. Whether working on small or large-scale projects, implementing a feature-based structure can help developers overcome common challenges associated with project file organization. So, the next time you start a new frontend project, consider structuring it based on features to optimize your development process and enhance project maintainability.

My experience with React and Vue in Depth

Mohammad Khayata — Fri, 07 Jul 2023 01:43:12 +0000

I have been working in front-end development for 3 years now, using both React and Vue frameworks. I have built several projects with them, and in this article, I won't be comparing them like any beginner's guide. Instead, I will focus on the points where I felt the differences while working with them.

First, Library and Framework.

When working with Vue, you always have to deal with .vue files, which gives Vue some extra abilities like registering global components , directives or adding plugins (like i18) to your Vue app. This allows you to access any plugin or component from any .vue file, reducing the large number of imports that you often see in React and making public instance properties accessible from the without any imports.

Dealing With State

Vue provides Refs and Reactives as the main way to define states in your components, which are mutable directly This makes your code easier and more readable .In contrast, React requires you to define a setter function for every state.

JSX and Vue Syntax

Working with JSX, especially if you are good enough in JavaScript, makes you very comfortable when writing your code and gives you more control over HTML code. In the end, any code you write is normal JavaScript code, unlike Vue, where you may feel like you are writing somewhat unfamiliar syntax, such as directives. However, directives are actually a very nice feature that I miss in React 😅.

React Features that i missed in vue

JSX

As I previously mentioned, JSX is fantastic! its make your code more dynamic and scalable.

Multiple Components in The Same File

You can define multiple components in one file with React , unlike vue.

TypeScript Support

React has much better support for TypeScript than Vue. However, Vue is working on improving TypeScript support significantly through the new updates

The Greate Comunity

React has a large and thriving ecosystem of libraries and packages. For example, the Material-UI library, which was a major reason for me to turn towards React.

Job Opportunities

Through my research on popular websites such as LinkedIn and Glassdoor, I noticed that more than 80% of the job opportunities I found were asking for React developers, with a very small percentage of companies looking for Vue.js developers.

Vue Features that i missed in React

2 Way Binding

Two-way binding in Vue makes it easy to create interactive and responsive user interfaces, and it can help to simplify the code required to manage user input in forms.

Scoped Styles

Vue Scoped styles are a feature in Vue that allows you to apply styles to a specific component or element without affecting other components or elements in your application, and that would be very tricky in React.

Directives

Vue has a built-in system of directives that can be used to modify the behavior of HTML elements in the DOM. For example, the v-if and v-for directives can be used to conditionally render elements or loop over arrays of data. In addition, in Vue, you can create custom directives.

Built-in transitions and animations

Vue has built-in support for transitions and animations, which can be used to add visual effects to the UI when elements are added, removed, or updated. React does not have built-in support for transitions and animations, but similar functionality can be achieved using CSS transitions and animations or third-party libraries.

You may find many contradictions in this article, but I just wanted to clarify the points of difference that I felt through my use of both technologies.