DEV Community: Masaud Ahmod

Top 8 Modern UI Libraries & Motion Engines Every Developer Should Know (Part 2)

Masaud Ahmod — Mon, 28 Sep 2026 19:10:47 +0000

Welcome to Part 2 of our breakdown of modern frontend UI tools! In [Part 1], we covered foundational platforms like Shadcn, Magic UI, DaisyUI, HeroUI, and enterprise workhorses like Ant Design and PrimeReact.

In this installment, we are diving deep into the remaining standout tools from our radar: Aceternity UI, Anime.js, Spectrum UI, Base UI, Animate UI, Lightswind UI, and Flowbite.

Whether you want to build slick landing page animations, accessible design systems, or utility-driven dashboard interfaces, these tools offer distinct architectural approaches for modern React and web development.

                       PART 2 UI & MOTION SPECTRUM

   ┌─────────────────────────────────────────────────────────────────┐
   │                  HIGH-IMPACT MOTION & VISUALS                   │
   │  • Aceternity UI    • Anime.js           • Animate UI           │
   └────────────────────────────────┬────────────────────────────────┘
                                    │
   ┌────────────────────────────────▼────────────────────────────────┐
   │                   ENTERPRISE & BASE PRIMITIVES                  │
   │  • Adobe Spectrum UI                     • W3C Base UI          │
   └────────────────────────────────┬────────────────────────────────┘
                                    │
   ┌────────────────────────────────▼────────────────────────────────┐
   │                   TAILWIND UTILITY ECOSYSTEM                    │
   │  • Flowbite                              • Lightswind UI        │
   └─────────────────────────────────────────────────────────────────┘

1. Aceternity UI

Architecture: Copy-Paste Motion Primitives (Framer Motion + Tailwind CSS)

Best For: Developer portfolios, high-converting SaaS landing pages, and interactive showcase sections.

Aceternity UI popularized bringing complex 3D-like, shader, and Canvas-driven visual effects into standard React components without requiring deep knowledge of WebGL or Three.js.

Key Strengths

Unmatched Visual Flair: Includes eye-catching elements like spotlight cards, glowing background beams, 3D card perspective flips, and infinite moving cards out of the box.
Copy-Paste Philosophy: Similar to Shadcn, you paste code directly into your codebase, allowing total customization over the inner mechanics.
Tailwind & Framer Motion Integration: Fits seamlessly into existing Next.js and Tailwind setups.

Considerations

High visual density can cause performance hits if multiple complex canvas/motion components are rendered simultaneously on mobile devices.

2. Anime.js

Architecture: Lightweight JavaScript Motion Library

Best For: Custom micro-interactions, complex SVG morphing, DOM animation timelines, and canvas effects.

While not a component kit, Anime.js is an essential utility for modern UI engineers who need fine-grained control over element animations beyond standard CSS transitions.

Key Strengths

Framework Agnostic: Runs on plain JS, React, Vue, Svelte, or direct DOM nodes.
Powerful Timeline Controls: Syncs multiple animations, stagings, SVG path morphs, and transformations easily.
Tiny Footprint: Delivers high performance with a light bundle impact compared to heavier physics engines.

// Example: Staggered list entrance in Anime.js
anime({
  targets: '.card-item',
  translateY: [20, 0],
  opacity: [0, 1],
  delay: anime.stagger(100), // Staggers execution by 100ms per element
  easing: 'easeOutQuad'
});

3. Adobe Spectrum UI

Architecture: Enterprise Design System (Adobe React Spectrum)

Best For: Deeply accessible web apps, cross-platform enterprise tools, and complex desktop-class UI applications.

Adobe Spectrum is a comprehensive design system engineered for enterprise applications. It includes React Aria, a headless library providing unstyled, fully accessible UI primitives.

Key Strengths

World-Class Accessibility: Covers complex WCAG compliance, screen reader support, full keyboard navigation, and high-contrast modes.
Adaptive Interaction: Adjusts touch targets, pointer events, and responsive layouts across devices automatically.
Headless Flexibility via React Aria: Build completely custom styling on top of robust accessibility behavior.

Considerations

Has a steeper learning curve than simple copy-paste Tailwind UI collections due to strict state-and-hook separation.

4. Base UI

Architecture: Headless, Unstyled UI Primitives (By MUI Team)

Best For: Custom design systems that require robust ARIA compliance without pre-built CSS styles.

Developed by the team behind Material UI, Base UI offers fully unstyled React components. It provides accessibility, focus management, and structural logic while leaving styling completely up to you.

Key Strengths

Zero Style Prejudices: Ships without default CSS, avoiding class overrides or specificity conflicts.
High-Level Accessibility: Standardized ARIA roles, focus traps, popover positioning, and keyboard interactions out of the box.
Flexible Styling Integration: Pairs cleanly with Tailwind, CSS Modules, Emotion, or vanilla CSS.

import { Modal } from '@base-ui-components/react/modal';

// Complete visual freedom with Tailwind or CSS
export const CustomModal = () => (
  <Modal.Root>
    <Modal.Trigger className="bg-blue-600 text-white px-4 py-2 rounded">
      Open Modal
    </Modal.Trigger>
    <Modal.Portal>
      <Modal.Backdrop className="fixed inset-0 bg-black/50" />
      <Modal.Popup className="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-white p-6 rounded-lg">
        <Modal.Title>Base UI Modal</Modal.Title>
        <Modal.Close>Close</Modal.Close>
      </Modal.Popup>
    </Modal.Portal>
  </Modal.Root>
);

5. Animate UI

Architecture: Utility-driven Animation Components

Best For: Adding micro-interactions, page transitions, and interactive visual feedback to standard UI interfaces.

Animate UI bridges the gap between pure CSS animations and heavy JS animation engines, providing reusable components for UI interactions.

Key Strengths

Plug-and-Play Micro-interactions: Smooth hover effects, interactive button loaders, and page view entries.
Low Configuration Overhead: Pre-configured easing curves and timings save development time.
Clean Code Footprint: Uses lightweight wrappers around native web animations and lightweight transitions.

6. Lightswind UI

Architecture: Lightweight Tailwind Component Collection

Best For: Fast page builds, minimal landing sections, and clean, minimal dashboard elements.

Lightswind UI provides clean, lightweight Tailwind components that emphasize rapid implementation and fast page load times.

Key Strengths

Minimal Dependencies: Built to avoid heavy third-party NPM scripts.
Fast Rendering Performance: Eliminates heavy JavaScript runtimes for basic presentation components.
Copy-Paste Convenience: Easily grab markup snippets and integrate them directly into existing Tailwind projects.

7. Flowbite

Architecture: Utility-First Component Library built on Tailwind CSS

Best For: Full-stack developers, multi-framework teams, and admin dashboards.

Flowbite is a mature, comprehensive UI ecosystem built directly on top of Tailwind CSS utilities. It includes interactive components, admin layout templates, and Figma design kits.

Key Strengths

Multi-Framework Ecosystem: Works with React, Vue, Svelte, Angular, Laravel, and plain HTML.
Extensive Admin UI Kit: Includes pre-built templates for e-commerce dashboards, user management panels, and data tables.
Interactive Vanilla JS Engine: Provides accessible dropdowns, modals, tabs, and tooltips out of the box without requiring a full React runtime.

<!-- Native Flowbite Tailwind Integration -->
<button data-modal-target="default-modal" data-modal-toggle="default-modal" class="block text-white bg-blue-700 hover:bg-blue-800 font-medium rounded-lg text-sm px-5 py-2.5 text-center" type="button">
  Toggle modal
</button>

Architectural Comparison Matrix (Part 2)

Library	Type / Layer	Target Use Case	Primary Styling
Aceternity UI	Visual & Motion Layer	High-Impact Landing Pages	Framer Motion + Tailwind
Anime.js	JS Motion Utility Engine	Complex Timelines & SVG Morphs	JS / CSS Drivers
Spectrum UI	Enterprise Design System	Accessible Web Applications	CSS / React Aria
Base UI	Headless Primitives	Custom Component Design Systems	Style Agnostic (Unstyled)
Animate UI	Motion Primitives	UI Micro-interactions	CSS / JS Animations
Lightswind UI	Utility Component Snippets	Quick Landing Pages	Tailwind CSS
Flowbite	Full Component Ecosystem	Dashboards & Cross-Framework Apps	Tailwind CSS + JS Driver

Choosing the Right Combination for Your Stack

Combining multiple complementary libraries often yields the best results:

For Production SaaS Apps: Combine Base UI (or Shadcn) for accessible, unstyled core app logic with Flowbite for pre-made dashboard layouts.
For High-Impact Marketing Pages: Combine Aceternity UI for hero sections and dynamic visual effects with Anime.js for custom timeline interactions.
For Enterprise & Accessibility-Critical Applications: Use Adobe Spectrum (React Aria) or Base UI to meet strict WCAG guidelines while retaining full control over your design system.

What's Your Favorite Frontend Combo?

Between copy-paste motion components like Aceternity UI and unstyled accessibility primitives like Base UI, frontend development has never offered more options.

Which of these libraries are you using in your current project? Let us know in the comments below!

Top 10 Modern UI Libraries Every Frontend ' Developer Should Know in 2026

Masaud Ahmod — Sun, 27 Sep 2026 14:52:41 +0000

Today, the frontend ecosystem offers a diverse range of approaches: heedlessness, Tailwind CSS utility layers, copy-paste component primitives, enterprise design systems, and specialized dynamic tools. Choosing the right UI library can mean the difference between shipping a product in days or spending weeks fighting runtime overrides.

Here is an architectural breakdown of the top 10 UI libraries every developer should evaluate for their Next.js, React, or modern web stack.

1. Shadcn UI

Architecture: Copy-Paste Primitives (Built on Radix UI & Tailwind CSS)

Best For: Production SaaS, Next.js apps, and custom design systems requiring 100% control.

Shadcn UI fundamentally shifted component design. Rather than installing a bloated npm dependency that bundles styles into node_modules, Shadcn utilizes a CLI tool to paste accessible code directly into your component directory.

Key Strengths

Zero Dependency Lock-In: You own the code directly. If a component needs customization, edit the React file directly in your directory.
Radix UI Underneath: Delivers WCAG-compliant keyboard navigation, focus management traps, and screen-reader accessibility out of the box.
Tailwind Native: Integrates smoothly into existing Tailwind pipelines without stylesheet collisions or priority bugs.

Key Weaknesses

Manual Maintenance: Requires manually managing component updates and bug fixes since the code resides directly inside your repository.
CLI Setup Overhead: Setting up paths, aliases, and Tailwind configuration requires more initial configuration than standard npm install libraries.

// Example: Direct component usage once added via CLI
import { Button } from "@/components/ui/button"

export default function ActionArea() {
  return <Button variant="outline">Execute Task</Button>
}

2. Magic UI

Architecture: Motion-focused Component Layer

Best For: Landing pages, interactive hero sections, and micro-interactions.

Magic UI builds on Shadcn's distribution model, offering pre-designed, heavily animated landing page elements using Framer Motion and Tailwind CSS.

Key Strengths

High Visual Impact: Includes particle backgrounds, glowing borders, animated text, and dynamic 3D cards out of the box.
Copy-Paste Workflow: Keeps runtimes lean by including only the code your project actually uses.
Seamless Integration: Pairs easily alongside existing Radix and Shadcn component collections.

Key Weaknesses

Performance Overhead: Overusing heavy canvas renders and Framer Motion effects can degrade FPS on low-end mobile devices.
Narrow Focus: Designed primarily for landing pages and marketing cards rather than complex form-heavy application dashboards.

3. DaisyUI

Architecture: Pure CSS Component Classes for Tailwind

Best For: Rapid prototyping, multi-theme applications, and framework-agnostic development.

DaisyUI adds semantic class names (like .btn, .card, .modal) to Tailwind CSS without requiring JavaScript runtime dependencies.

Key Strengths

Tiny Bundle Footprint: Works strictly as a Tailwind plugin with zero JavaScript runtime overhead.
Built-in Theme System: Offers dozens of ready-made light/dark themes, plus simple custom theme configuration via CSS variables.
Framework Agnostic: Compatible with React, Vue, Svelte, Angular, Astro, or plain static HTML.

Key Weaknesses

Lack of JS Logic: Adding interactive accessibility features (like focus trapping or combobox behavior) requires custom JavaScript wiring.
Tailwind Dependency: Cannot be used as a standalone CSS framework without Tailwind CSS installed in the project pipeline.

<!-- DaisyUI keeps HTML markup clean -->
<button class="btn btn-primary btn-md">Submit Form</button>

4. HeroUI (Formerly NextUI)

Architecture: Utility-driven React Component Library

Best For: Web applications that need sleek, modern dark-mode designs with minimal setup.

Rebranded from NextUI to HeroUI, this library provides polished UI components featuring smooth default transitions, Tailwind-based engine layers, and automatic dark-mode support.

Key Strengths

Polished Aesthetics: Delivers high-end visuals out of the box, including glassmorphic layouts and smooth state transitions.
TypeScript First: Provides comprehensive prop definitions, auto-complete DX, and strong type safety.
Customizable Tokens: Allows global color and layout tuning without breaking core component states.

Key Weaknesses

Bundle Footprint: Slightly larger runtime bundle footprint than raw headless primitives due to integrated layout abstractions.
Opinionated Defaults: Customizing components away from their signature sleek, rounded look can take extra CSS effort.

5. Chakra UI

Architecture: Style Props Component Library

Best For: Accessible design systems, internal dashboards, and teams that prefer inline style properties.

Chakra UI pioneered style props in React, allowing developers to handle layouts, responsive breaks, and pseudo-states directly within component interfaces.

Key Strengths

Developer Experience: Simplifies rapid layout building using flexible props like <Box bg="gray.100" px={4} py={2}>.
Accessible Foundation: Fully compliant with WAI-ARIA standards for complex controls like modals, drawers, and select menus.
Modular Packages: Unused component trees tree-shake efficiently during bundling.

Key Weaknesses

Verbose JSX Markup: Heavy use of style props can clutter JSX markup in complex, data-dense views compared to utility classes.
Runtime Performance: Parsing style props at runtime can introduce minor performance overhead in extremely massive DOM trees.

6. Ant Design (AntD)

Architecture: Comprehensive Enterprise UI System

Best For: Enterprise dashboards, complex data management tools, and large internal admin platforms.

Ant Design provides a vast collection of enterprise-grade React components, making it an industry standard for data-heavy applications.

Key Strengths

Enterprise Feature Set: Ships with robust components like virtualized tables, dynamic form builders, and complex tree views.
Global Design System: Includes ready-to-use patterns for internationalization (i18n), accessible themes, and state feedback.
Comprehensive Documentation: Offers deep design guidelines alongside technical documentation.

Key Weaknesses

Rigid Branding: Overriding default design tokens to match non-standard or highly custom branding can feel restrictive.
Large Bundle Size: Pulling in multiple complex enterprise components can quickly inflate JavaScript bundle size if not strictly code-split.

import React from 'react';
import { Table } from 'antd';

const columns = [{ title: 'Name', dataIndex: 'name', key: 'name' }];
const data = [{ key: '1', name: 'Dev Team' }];

export const DashboardTable = () => <Table columns={columns} dataSource={data} />;

7. Material UI (MUI)

Architecture: Material Design System Implementation

Best For: Enterprise SaaS, legacy migrations, and production apps requiring standardized patterns.

Material UI remains a widely adopted component library in the React ecosystem, offering complete implementations of Google's Material Design principles.

Key Strengths

Massive Ecosystem: Supported by a large community, extensive third-party add-ons, and detailed guides.
MUI X Data Grid: Handles massive datasets with features like server-side pagination, cell editing, and column reordering.
Theme Customization Engine: Allows precise control over color palettes, typography variants, and global overrides via ThemeProvider.

Key Weaknesses

Material Design Look: Applications risk looking like generic Google apps unless heavily customized using styled() overrides.
Styling Engine Overhead: Historically relies on heavier CSS-in-JS solutions that add bundle weight compared to modern Tailwind setups.

8. Semantic UI React

Architecture: Descriptive Class & Markup Framework

Best For: Content-heavy sites, educational projects, and traditional web layouts.

Semantic UI structures layout classes around natural language principles, making code structure intuitive to read.

Key Strengths

Readable Markup: Declarative component structures like <Button color="red" size="large"> make markup clear to scan.
Extensive Theme Options: Simple global variable tweaks allow wide-ranging UI adjustments across components.
Consistent UI Patterns: Maintains structural consistency across complex forms, menus, and grid layouts.

Key Weaknesses

Slower Innovation: Updates and ecosystem maintenance have slowed significantly compared to modern Tailwind or headless alternatives.
Dated Styling: Default components look somewhat outdated without custom theme overrides.

9. PrimeReact

Architecture: Data & Visualization Focused Suite

Best For: Analytical applications, dashboards with complex charts, and data management suites.

PrimeReact provides a massive suite of production-ready components, excels at complex data presentation, and includes built-in charting abstractions.

Key Strengths

Rich Data Components: Features advanced elements like virtual scrolling, multi-select filters, context menus, and inline cell editors out of the box.
Built-in Charting: Integrates Chart.js abstractions seamlessly into component states.
Multiple Built-in Themes: Supports Material, Bootstrap, Tailwind, and custom enterprise themes without additional styling libraries.

Key Weaknesses

Styling Complexity: Customizing default component themes outside the built-in preset system can be difficult.
Heavy Dependency: Importing the full library with charts can add significant weight to your bundle if unmanaged.

10. DynaUI Design

Architecture: Animated & Interactive Generator Components

Best For: High-converting landing pages, marketing funnels, and UI interaction designers.

DynaUI specializes in interactive generator sections, creative micro-interactions, and motion-heavy landing elements.

Key Strengths

Interactive UI Elements: Includes pre-built dynamic color generators, gradient builders, and animated layouts out of the box.
Designed for Conversion: Focused on landing page blocks that highlight key product features and call-to-actions.
Easy Integration: Blends smooth CSS variables cleanly with React state structures.

Key Weaknesses

Niche Component Selection: Lacks bread-and-butter application components like complex tables or form controls.
Secondary Tool Status: Best suited as a secondary library for marketing funnels rather than an all-in-one application framework.

Architectural Comparison Matrix

Library	Primary Style Strategy	Customization Depth	Bundle Cost	Ideal Architecture / Use Case
Shadcn UI	Tailwind / Radix Primitives	Maximum (Direct Source)	Very Low (Tree-shaken)	Production SaaS & Custom Systems
Magic UI	Tailwind / Framer Motion	High (Copy-Paste)	Medium (Animation Dependent)	Hero Sections & Landing Pages
DaisyUI	Tailwind Utility Plugin	Medium (CSS Variables)	Minimal (No JS Runtime)	Rapid Prototypes & Multi-Theme Apps
HeroUI	Tailwind Engine Layer	High (Design Tokens)	Medium	Modern Web Apps & Sleek Interfaces
Chakra UI	Style Props System	High (Theme Overrides)	Medium	Accessible Interfaces & Dashboards
Ant Design	CSS-in-JS / Less Tokens	Moderate (Rigid Grid)	Large	Enterprise Dashboards & Admin Portals
Material UI	Emotion / System Props	High (Theme Provider)	Medium / Large	Standardized Enterprise Apps & SaaS
Semantic UI	Class-based CSS	Moderate	Medium	Content-Heavy Sites & Form Layouts
PrimeReact	CSS Themes + Chart.js Integration	High (Preset Engine)	Large	Analytical Applications & Data Engines
DynaUI	Tailwind / Motion Generators	High	Low / Medium	Interactive Funnels & Marketing UI

Strategic Selection Guide

For Total Control & Modern SaaS: Choose Shadcn UI or HeroUI to maintain full code ownership while avoiding vendor lock-in.
For High-Impact Marketing Pages: Combine Magic UI or DynaUI with Tailwind CSS to build interactive, animated hero sections and landing funnels.
For Enterprise Dashboards & Data Visualization: Choose PrimeReact or Ant Design for pre-built charts, virtualized data grids, and complex form management.
For Lightweight, Framework-Agnostic Apps: Go with DaisyUI to keep CSS bundles small and avoid heavy JavaScript runtime dependencies.

I Built a Toast Library for React & Next.js — Here’s How It Works 🍞

Masaud Ahmod — Tue, 22 Sep 2026 06:47:00 +0000

If you’ve worked on modern web applications, you’ve probably used toast notifications.

“Saved successfully.”

“Something went wrong.”

“Uploading…”

“File deleted — Undo”

They look simple from the outside, but toast notifications become surprisingly useful once an application has many user interactions.

I wanted something that was simple to use, lightweight, modern-looking, and flexible enough for common React and Next.js projects.

That’s why I built your-toast — a small toast notification library for React and Next.js with a modern glass-style UI and a simple API.

🍞 Why Your Toast?

In most applications, I don't need a huge notification system.

Usually, I just need something like:

toast.success("Profile updated!");

The goal behind your-toast is exactly that:

Keep the API simple while giving developers enough control when they need it.

It supports common notification patterns without requiring complicated setup.

🚀 How It Works

The basic architecture is simple.

There are three main parts:

Toast API
   ↓
Toast Store
   ↓
YourToastProvider
   ↓
UI

When you call:

toast.success("Saved successfully!");

the toast API creates a toast object and sends it to an internal store.

The store keeps track of active toasts.

Then YourToastProvider listens to the store and renders the current toast notifications.

So developers don't need to manually manage toast state inside every component.

⚛️ React Usage

For a React/Vite application, you can mount the provider once:

import { YourToastProvider, toast } from "your-toast";

function App() {
  return (
    <>
      <YourToastProvider />

      <button onClick={() => toast.success("Saved!")}>
        Save
      </button>
    </>
  );
}

After that, you can trigger notifications wherever you need them.

toast("Hello!");
toast.success("Saved successfully!");
toast.error("Something went wrong!");
toast.warning("Please check your input.");
toast.info("New update available.");
toast.loading("Uploading...");

The API stays intentionally small and readable.

▲ Next.js App Router

One thing I wanted to handle properly was the difference between normal React applications and Next.js App Router.

In Next.js, the root layout can remain a Server Component.

Instead of making the entire layout client-side, your-toast provides a dedicated client entry:

import { YourToastProvider } from "your-toast/provider";

Then:

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {children}

        <YourToastProvider />
      </body>
    </html>
  );
}

You don't need to add "use client" to the root layout.

Then from a Client Component:

"use client";

import { toast } from "your-toast";

export default function Button() {
  return (
    <button onClick={() => toast.success("Done!")}>
      Click me
    </button>
  );
}

This keeps the Client Component boundary explicit without turning the whole application into a client component.

That was one of the architectural details I specifically wanted to get right.

⚡ Promise-Based Toasts

One of my favorite features is toast.promise().

Instead of manually handling loading, success, and error states:

toast.loading("Loading...");

// do something

toast.success("Completed!");

you can connect the toast directly to a promise:

toast.promise(fetchData(), {
  loading: "Loading...",
  success: "Data loaded!",
  error: "Something went wrong.",
});

It can also work with dynamic results:

toast.promise(fetchData(), {
  loading: "Loading...",
  success: (data) => `Loaded ${data.name}`,
  error: () => "Failed to load data.",
});

This makes async UI feedback much easier to manage.

🔁 More Control When You Need It

Sometimes a notification needs to stay under your control.

For example:

const id = toast.loading("Uploading...");

Then after the upload:

toast.update(id, {
  title: "Upload complete!",
  type: "success",
});

You can also dismiss a specific toast:

toast.dismiss(id);

Or dismiss all active notifications:

toast.dismiss();

You can customize duration and descriptions as well:

toast.success("Profile updated!", {
  description: "Your changes have been saved.",
  duration: 3000,
});

And for actions:

toast("File deleted", {
  action: {
    label: "Undo",
    onClick: () => {
      console.log("Undo clicked");
    },
  },
});

🧩 A Small Library, But With Real Architecture

Although the package is small, I didn't want it to be just a component with some setTimeout() calls.

The library uses an external store to keep toast state separate from the UI.

React's useSyncExternalStore is used to safely subscribe the provider to that store.

The package is also built with:

TypeScript
ESM
CommonJS
TypeScript declaration files
React 18+
React 19
Next.js App Router support

The result is a small package that can fit into different React application setups without adding unnecessary dependencies.

🎯 When Would I Use It?

I think your-toast fits especially well when an application needs frequent UI feedback for things like:

Form submissions
Authentication
API requests
File uploads
CRUD operations
Saving settings
Delete/undo actions
Background operations
Success/error feedback

For these common cases, I wanted the experience to be as simple as:

toast.success("Everything is ready!");

No complicated configuration. Just feedback when the user needs it.

🚧 Still Improving

your-toast is still growing.

Some ideas on the roadmap include:

Better animations
More advanced glass UI
Theme system
Mobile improvements
Progress indicators
Swipe-to-dismiss
Custom icons
Custom React content

So this isn't a “finished forever” library.

I'm building it, using it, and improving it based on real use cases and developer feedback.

⭐ Try It & Help Improve It

If you're working with React or Next.js and need a simple toast library, you can check out your-toast:

NPM:

https://www.npmjs.com/package/your-toast

GitHub:

https://github.com/masaudahmod/your-toast

If you find it useful, a ⭐ on GitHub would mean a lot.

And if you have an idea, find a bug, or think something could be improved, feel free to open an issue or share your suggestion.

Developer feedback is one of the best ways to make an open-source project better.

💭 Final Thought

Building your-toast reminded me that even a small UI feature can involve interesting engineering decisions.

A toast may look like a tiny notification on the screen, but behind that notification there’s state management, rendering, accessibility, package architecture, framework compatibility, and developer experience.

And that's exactly what I enjoyed about building it.

Sometimes, small projects are where you learn the most. 🍞

): A Small HTTP Client Issue That Taught Me a Big Lesson About Microservices 💡

Masaud Ahmod — Sat, 22 Aug 2026 16:31:51 +0000

Recently, I faced an interesting challenge while working on a web application.
The architecture was:
Primary API → Media Service
Everything was working, but some requests were taking longer than expected. 😅
At first, I thought the Media Service might be slow.
So I started checking the request flow step by step. 🔍
The real issue was related to how the HTTP client in the Primary API was configured.
The communication needed better control around:
⏱️ Request timeout
📦 Maximum requests
🔄 Request queue
🛑 Breaking the connection when the timeout was reached
Instead of allowing the Primary API to wait indefinitely, I configured the HTTP client to control how many requests could be processed and how long a request could wait for a response.
If the Media Service didn't respond within the expected time, the connection would be stopped instead of keeping the Primary API waiting.
This gave the communication a more controlled and predictable behaviour.
It also reminded me that in a microservice architecture, we shouldn't only think about:
“How do I make this request work?”
We should also think about:
“What happens when this request doesn't work?”
Because services can become slow, unavailable, overloaded, or temporarily unreachable.
Good service communication should have boundaries. 🧠
Timeouts, request limits, queues, and controlled failures aren't just configuration details — they are part of building a more reliable system.
And honestly, I probably wouldn't have thought about these things this deeply without facing the problem first. 😄
Sometimes, we don't learn how to find the right solution until we face the right problem.
Every problem doesn't just fix the application.
Sometimes, it improves the way we think as developers. 🚀

WebDevelopment #Microservices #BackendDevelopment #SoftwareEngineering #NodeJS #DevOps #SystemDesign #Developers #Programming

Use modern tools, but don't let tools replace your understanding.

Masaud Ahmod — Wed, 12 Aug 2026 16:30:59 +0000

🚀 AI can write code. Frameworks can make us faster.

But when your app breaks at 2 AM… 😅
Fundamentals tell you WHY.

🌐 Networking
🐧 Linux
🗄️ Databases
⚡ Programming
🔀 Git
🏗️ System Design

You don't need to master everything before building.

Build → Break → Understand → Fix → Repeat. 🔥

Tools make you faster. Fundamentals make you stronger. 💻🧠

What fundamental skill saved you from a real bug?

SoftwareDevelopment #Developers #Programming #AI #WebDevelopment

Submitting a Next.js Form to Google Sheets

Masaud Ahmod — Thu, 02 Oct 2025 20:30:21 +0000

Collecting user feedback or leads on a landing page is a must-have feature for modern applications. While setting up a full backend can be heavy for a simple landing page, you can use Google Sheets as a free and reliable database.

In this guide, we’ll build a Contact Form in Next.js (with TypeScript) that stores form submissions directly into a Google Sheet using Google Apps Script.

This method is:
✅ Free
✅ Serverless (no backend required)
✅ Scalable for MVPs & landing pages

🚀 Step 1: Set Up Google Sheet & Apps Script

Create a Google Sheet

Go to Google Sheets and create a new sheet.
Add headers in the first row: Name, Email, Message, Timestamp.

Open Script Editor

In Google Sheets, click: Extensions → App Script

Paste Script

function doPost(e) {
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
  var data = JSON.parse(e.postData.contents);

  sheet.appendRow([
    data.name,
    data.email,
    data.message,
    new Date()
  ]);

  return ContentService
    .createTextOutput(JSON.stringify({ status: "success" }))
    .setMimeType(ContentService.MimeType.JSON);
}

Deploy as Web App

Click Deploy → New Deployment.
Select Web app.
Execute as: Me.
Who has access: Anyone.
Copy the generated Web App URL. (e.g., https://script.google.com/macros/s/.../exec)

⚛️ Step 2: Create Next.js Contact Form Component

Here’s the React component with loading state:

"use client";
import { useState } from "react";

export default function ContactForm() {
  const [form, setForm] = useState({ name: "", email: "", message: "" });
  const [loading, setLoading] = useState(false);

  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    setForm({ ...form, [e.target.name]: e.target.value });
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setLoading(true);

    try {
      const res = await fetch("YOUR_GOOGLE_SCRIPT_URL", {
        method: "POST",
        body: JSON.stringify(form),
      });

      const result = await res.json();
      if (result.status === "success") {
        alert("✅ Form submitted successfully!");
        setForm({ name: "", email: "", message: "" });
      } else {
        alert("❌ Something went wrong!");
      }
    } catch (error) {
      console.error(error);
      alert("⚠️ Error submitting form!");
    } finally {
      setLoading(false);
    }
  };

  return (
    <form onSubmit={handleSubmit} className="space-y-4 max-w-md mx-auto">
      <input
        type="text"
        name="name"
        placeholder="Your Name"
        value={form.name}
        onChange={handleChange}
        className="w-full border p-2 rounded"
        required
      />
      <input
        type="email"
        name="email"
        placeholder="Your Email"
        value={form.email}
        onChange={handleChange}
        className="w-full border p-2 rounded"
        required
      />
      <textarea
        name="message"
        placeholder="Your Message"
        value={form.message}
        onChange={handleChange}
        className="w-full border p-2 rounded"
      />
      <button
        type="submit"
        disabled={loading}
        className={`px-4 py-2 rounded text-white ${
          loading ? "bg-gray-400 cursor-not-allowed" : "bg-blue-600"
        }`}
      >
        {loading ? "Submitting..." : "Submit"}
      </button>
    </form>
  );
}

📊 Step 3: Test the Integration

Deploy your Next.js project (npm run dev or vercel deploy).
Submit the form.
Check your Google Sheet → new row should appear with the form data. 🎉

🌟 Why Use This Approach?

Fast Setup: No backend required.
Cost-effective: 100% free with Google.
Easy migration: Later you can replace Google Sheets with a real backend (Node.js, Express, MongoDB).

Git A to Z: Local Setup to Advanced Workflow for Real-World Devs

Masaud Ahmod — Thu, 15 May 2025 07:33:08 +0000

Is it even possible to be a real-world developer without Git? Absolutely not.

In this post, I’ll guide you from zero to pro with Git — including installation, terminal usage, VS Code integration, and both basic & advanced commands.

🔧 ১. Git Installation & Local Setup

✅ Step 1: Install Git

Windows: https://git-scm.com/download/win
Mac: Use Homebrew brew install git
Linux: sudo apt install git

✅ Step 2: Git Global Config

git config --global user.name "Your Name"
git config --global user.email "youremail@example.com"

✅ Step 3: Add SSH Key (for GitHub/GitLab)

ssh-keygen -t ed25519 -C "youremail@example.com"

Then copy your public SSH key and add it to your GitHub/GitLab SSH settings.

📁 ২. Initial Project Setup & First Commit

🔹 Git Init

git init

🔹 File Stage & Commit

git add .
git commit -m "Initial commit"

🔹 Remote Add & Push

git remote add origin https://github.com/yourname/your-repo.git
git push -u origin main

🧪 ৩. Daily Workflow with Git (Pull, Push, Branching)

🔹 Clone

git clone https://github.com/yourname/project.git

🔹 Pull

git pull origin main

🔹 Branch Create & Switch

git checkout -b feature-x

🔹 Merge

git checkout main
git merge feature-x

🧠 ৪. Advanced Git Commands

🔹 Stash & Pop

git stash
git stash pop

🔹 Rebase

git checkout feature
git rebase main

🔹 Cherry-pick

git cherry-pick <commit-id>

🔹 Reset to Previous Commit

git reset --hard HEAD~1

💣 ৫. Common Mistakes & Fixes

Merge Conflict? Don’t panic. Fix the conflict markers, commit, and continue.
Detached HEAD? Switch back to a branch:

git switch main

Pulled wrong changes? Use git reflog to recover lost commits.

🚀 Bonus Tools

🧾 Cheat Sheet

📎 Download PDF: Git Cheat Sheet PDF

🙌 Connect With Me

🔗 GitHub: @masaudahmod

💬 Leave a comment if you want a Git crash course in video format

🌟 Follow me for more content on Git, React, Firebase, and MERN stack development

🚀 Master JavaScript: The Complete JavaScript Tree 🌳

Masaud Ahmod — Sat, 22 Feb 2025 09:50:25 +0000

JavaScript is the backbone of modern web development, and mastering it can level up your coding skills like never before! 💡 Here's a structured roadmap that breaks down the core concepts of JavaScript in a tree format. If you're learning JS or revisiting its fundamentals, this is your ultimate guide! 👇

🔹 The JavaScript Tree

📌 Variables

var, let, const

📌 Data Types

String, Number, Boolean, Object, Array, Null, Undefined

📌 Operators

Arithmetic, Assignment, Comparison, Logical, Unary, Ternary

📌** Control Flow**

if, else, else if, switch, for, while, do-while

📌 Functions

Function declaration, Function expression, Arrow function, IIFE

📌 Scope

Global, Local, Block, Lexical

📌 Arrays

Methods: push(), pop(), shift(), unshift(), splice(), slice(), concat()
Iteration: forEach(), map(), filter(), reduce()

📌 Objects

Properties: Dot notation, Bracket notation
Methods: Object.keys(), Object.values(), Object.entries()

Destructuring

📌 Promises & Asynchronous JavaScript

Promise states: Pending, Fulfilled, Rejected
Methods: then(), catch(),finally(), Promise.all()
Callbacks, Promises, Async/Await

📌 Error Handling

try...catch, throw

📌 JSON & Modules

import, export

📌 DOM Manipulation

Selecting, Modifying, Creating elements

📌 Events

Event listeners, Propagation, Delegation

📌 AJAX & Fetch API

Making HTTP requests the modern way

📌 ES6+ Features

Template literals, Destructuring, Spread/rest, Classes, Modules, Promises

📌 Web APIs

Local Storage, Session Storage, Web Storage API

📌 Libraries & Frameworks

React, Angular, Vue.js

📌 Debugging

console.log(), Breakpoints, DevTools

📌 Others

Closures, Callbacks, Prototypes, this, Hoisting, Strict mode

🔥 Why is this Important?

Understanding these core JavaScript concepts will give you the confidence to build complex applications, optimize performance, and debug like a pro! 🚀 Whether you're a beginner or an experienced dev, revisiting the JS tree will keep your skills sharp!

💬 Which JavaScript concept do you find the most challenging? Let's discuss in the comments! ⬇️

JavaScript #WebDevelopment #Frontend #CodeNewbie #Programming #JS

🚀 Top 5 Free Resources to Learn JavaScript Like a Pro!

Masaud Ahmod — Wed, 19 Feb 2025 21:15:08 +0000

JavaScript is one of the most powerful and essential programming languages for web development. Whether you're a beginner or an experienced developer, learning JavaScript properly will level up your skills and open doors to better job opportunities!

Here are 5 free resources that will help you master JavaScript like a pro in 2025! 🌟

1️⃣ JavaScript.info – The Ultimate JS Guide 📚

🔹 Why? Covers everything from basics to advanced topics like closures, prototypes, and async programming.
🔹 Best for: Beginners to advanced learners
🔹 Link: https://javascript.info/

2️⃣ MDN Web Docs – The JavaScript Bible 📖

🔹 Why? Official documentation with in-depth explanations, examples, and real-world use cases.
🔹 Best for: Understanding JavaScript features deeply
🔹 Link: https://developer.mozilla.org/en-US/docs/Web/JavaScript

4️⃣ Eloquent JavaScript – A Deep Dive into JS Concepts 🤯

🔹 Why? One of the best books for mastering JavaScript concepts in depth.
🔹 Best for: Developers who want to write clean, modern JS code
🔹 Link: https://eloquentjavascript.net/

5️⃣ The Odin Project – Full JS Course with Projects 🏗️

🔹 Why? A structured JavaScript learning path with real-world projects and hands-on practice.
🔹 Best for: Learning JavaScript in a project-based way
🔹 Link: https://www.theodinproject.com/paths/full-stack-javascript

🚀 Final Thoughts

**Mastering JavaScript requires consistent learning and practice. These free resources will take you from beginner to advanced level and help you write better, cleaner, and more efficient code.

🛠️ 2 Simple VS Code & Debugging Hacks Every Developer Should Use! 🚀

Masaud Ahmod — Wed, 19 Feb 2025 12:03:41 +0000

1️⃣ One VS Code Setting That Speeds Up Your Workflow ⚡

Many developers don’t realize how much time they waste on manual saving, mismatched brackets, and repetitive coding. Try these simple settings:

✅ Auto Save: Automatically saves your work after a short delay.

"files.autoSave": "afterDelay"

✅ Bracket Pair Colorization: Highlights matching brackets for better readability.

"editor.bracketPairColorization.enabled": true

✅ AI-Powered Code Suggestions: Install Tabnine AI or Codeium to boost coding speed with smart autocompletions.

2️⃣ Stop Using console.log() – Try These Instead! 🔍

console.log() is great, but there are better ways to debug your JavaScript code. Here are some game-changing alternatives:

🚀 Format data properly with console.table()

const users = [{ name: "John", age: 25 }, { name: "Jane", age: 30 }];
console.table(users);

🚀 Use debugger; to pause execution and inspect variables in Chrome DevTools

function fetchData() {
  debugger; // Opens DevTools and pauses execution here
  return fetch("https://api.example.com").then(res => res.json());
}

function fetchData() {
  debugger; // Opens DevTools and pauses execution here
  return fetch("https://api.example.com").then(res => res.json());
}

🚀 Measure execution time with console.time()

console.time("fetchData");
fetchData().then(() => console.timeEnd("fetchData"));

💡 Bonus Tip: If you’re not using these yet, start now and watch your debugging and workflow efficiency skyrocket! 🚀

👉 Which trick did you find most useful? Let me know in the comments! 🔥💬

🚀 Best VS Code Extensions for MERN Stack Developers in 2025

Masaud Ahmod — Tue, 18 Feb 2025 12:47:17 +0000

First of all, I'm Masaud. If you're a MERN stack developer, your VS Code setup can make or break your productivity. Choosing the right extensions can speed up your workflow, improve code quality, and boost your overall development experience.

Here’s a list of some of the must-have VS Code extensions in 2025 for MERN developers, including **AI-powered tools, themes, and debugging extensions!🔥

1️⃣ Codeium AI – AI-Powered Coding Assistant 🤖

🔹 Why? AI-powered auto-completion, intelligent suggestions, and context-aware code generation. A solid alternative to GitHub Copilot.

🔹 Install: Codeium

2️⃣ Prettier – Code Formatter 🎨

🔹 Why? Ensures a consistent code format across your project, reducing manual formatting work.

🔹 Best for: JavaScript, TypeScript, HTML, CSS

🔹 Install: Prettier - Code formatter

3️⃣ Tailwind CSS IntelliSense – Best for Styling ✨

🔹 Why? Adds autocompletion, syntax highlighting, and linting for Tailwind CSS classes.

🔹 Best for: MERN projects with Tailwind CSS

🔹 Install: Tailwind CSS IntelliSense

4️⃣ ES7+ React/Redux Snippets – Faster React Development ⚛️

🔹 Why? Provides handy shortcuts for React, Redux, Next.js components, hooks, and boilerplate code.

🔹 Best for: React, Next.js projects

🔹 Install: ES7+ React/Redux/React-Native Snippets

5️⃣ Material Theme & Icons – Best UI for VS Code 🎨

🔹 Why? Aesthetic developer-friendly themes that reduce eye strain and improve focus.

🔹 Popular Options:

✅ Material Theme – Install

✅ Dracula Official – Install

✅ One Dark Pro – Install

6️⃣ REST Client – Test APIs Without Postman 🌐

🔹 Why? Send API requests directly from VS Code, without opening Postman or other API tools.

🔹 Best for: Testing REST APIs, MongoDB queries, and backend debugging

🔹 Install: REST Client

7️⃣ GitLens – Supercharge Git in VS Code 🛠️

🔹 Why? Provides detailed commit history, blame annotations, and Git insights directly inside VS Code.

🔹 Best for: Tracking changes in large MERN projects

🔹 Install: GitLens

8️⃣ Path Intellisense – Auto-Suggest File Paths 📁

🔹 Why? No more manually typing file paths! This extension auto-suggests file and folder paths as you type.

🔹 Best for: Faster imports in React & Node.js

🔹 Install: Path Intellisense

9️⃣ Error Lens – Spot Errors Instantly 🚨

🔹 Why? Displays inline error messages directly in the editor, so you don’t have to check the terminal every time.

🔹 Best for: Debugging JavaScript, TypeScript, and Node.js errors

🔹 Install: Error Lens

🔟 JavaScript (ES6) Code Snippets – Speed Up JS Development ⚡

🔹 Why? Provides shortcut snippets for modern JavaScript, including ES6+ syntax, promises, destructuring, and more.

🔹 Best for: Writing clean & efficient JavaScript code

🔹 Install: JavaScript (ES6) Snippets

✨ Final Thoughts

These VS Code extensions will level up your productivity as a MERN developer in 2025. Whether you're working with React, Node.js, MongoDB, or Express.js, these tools will make your coding smoother, faster, and more efficient.

👉 Which VS Code extensions do you use daily? Drop your favorites in the comments below! 🚀🔥

🚀 Why Every Beginner (Especially Non-Tech Students) Should Learn Git

Masaud Ahmod — Mon, 17 Feb 2025 06:49:00 +0000

🚀 Why Should Beginner Programmers (Especially Non-Tech Students) Learn Git?
If you're new to programming and not from a tech background, you might wonder:
_"Why should I learn Git? Isn't it for advanced developers?"
_*Well, Git is not just for experienced programmers—it's a must-have tool for beginners too! Here’s why:
*
**🔹 What is Git?
**Git is a version control system that helps you track changes in your code, collaborate with others, and prevent accidental data loss. Think of it as Google Docs for your code, where you can:
✅ Save different versions of your project
✅ Undo mistakes easily
✅ Work on projects without fear of breaking something
✅ Collaborate with developers worldwide

🔹 How to Install Git Locally & Set Up a Global Git Account

Step 1: Install Git on Your System
🔹** Windows Users**
1️⃣ Download Git from Git’s official website
2️⃣ Run the downloaded .exe file and follow the installation process
3️⃣ Choose "Git Bash" during installation (this will help you run Git commands)

🔹** Mac Users**
1️⃣ Open Terminal and type:

brew install git

(If you don’t have Homebrew, install it first from brew.sh)

🔹** Linux Users**
1️⃣ Open Terminal and type:

sudo apt install git  # For Ubuntu/Debian  
sudo dnf install git  # For Fedora

Step 2: Verify Git Installation
After installation, open Command Prompt (Windows) / Terminal (Mac & Linux) and run:

git --version

_If it returns something like git version 2.x.x, your installation was successful. ✅
_
**Step 3: **Set Up Git Account Globally in Local Machine
Now, link Git with your personal identity (GitHub account).

1️⃣ Configure Your Name & Email (Globally)
Use your GitHub email and name:

git config --global user.name "Your Name"
git config --global user.email "your-email@example.com"

Verify your setup by running:

git config --global --list

2️⃣ Generate SSH Key & Connect GitHub (Optional but Recommended)
This step lets you push code to GitHub without entering your password every time.

Generate an SSH key:

ssh-keygen -t rsa -b 4096 -C "your-email@example.com"

Press Enter multiple times (default options are fine). Then, copy the SSH key to GitHub:

cat ~/.ssh/id_rsa.pub

Copy the output and paste it into GitHub under:
👉 GitHub Settings → SSH and GPG keys → New SSH key

🔹 Why is Git Important for Beginners?

1️⃣ Mistakes are normal – Git helps you roll back to a previous working version if you mess up.
2️⃣ Backup for your projects – You won’t lose progress if your computer crashes.
3️⃣ Learn team collaboration – Most companies use Git for software development.
4️⃣ Showcase your work – Platforms like GitHub act as a portfolio for developers.

🔹 Basic Git Commands Every Beginner Should Know
💻 git init → Start a new Git project
💻 git add . → Add all changes to be tracked
💻 git commit -m "Your message" → Save changes with a message
💻 git push origin main → Upload your project to GitHub
💻 git clone [repo URL] → Download a project from GitHub
💻 git pull origin main → Get the latest updates from a project

🔹 Discussion: What Confuses You About Git?
What part of Git feels difficult or confusing? Drop your questions below & let’s discuss! 👇🔥