DEV Community: Maniruzzaman Akash

Stop Building Laravel Admin Panels From Scratch — Meet Lara Dashboard

Maniruzzaman Akash — Sat, 14 Feb 2026 07:12:39 +0000

Hey there, fellow Laravel developer!

Are you still spending weeks building the same boring admin panel features for every client project? User management, role management, permissions, blog systems, media libraries... the list goes on.

What if I told you there's a 100% free, open-source solution that gives you all of this — and more — out of the box?

Let me introduce you to https://laradashboard.com — your all-in-one marketplace CMS solution for Laravel.

The Pain We All Know Too Well

Every Laravel project starts the same way:

"I need user authentication with role-based access control"
"I need a beautiful admin dashboard with charts"
"I need content management — posts, pages, categories, tags"
"I need a media library for file uploads"
"I need email templates and notification management"
"I need multi-language support"
"I need activity logging for audit trails"
"I need REST APIs for mobile apps"
"Oh, and I need AI-powered content generation because it's 2026"

Sound familiar? You've probably built these features dozens of times. Each time reinventing the wheel, each time spending precious hours on boilerplate instead of your client's actual business logic.

What if you could skip all that and focus on what actually matters?

What is Lara Dashboard?

Lara Dashboard is a complete, production-ready Laravel admin panel and CMS that comes with everything you need to kickstart any Laravel project.

Built on the latest tech stack:

Laravel 12.x with PHP 8.3/8.4
Livewire 3 for reactive components
Tailwind CSS 4 for beautiful, responsive UI
Alpine.js for lightweight interactivity
Laravel Pulse for real-time monitoring
Laravel Sanctum for API authentication
Pest for modern testing

It's not just another admin template. It's a fully functional application with business logic, services, tests, and a modular architecture that lets you extend it infinitely.

Features That'll Make You Say "Finally!"

User & Access Management

Complete user CRUD with profile management
Role-based access control (RBAC) using Spatie Permissions
Granular permission system with grouped permissions
Admin impersonation — log in as any user for debugging
Beautiful user detail pages with activity history

Content Management System (CMS)

Posts and Pages with visual drag-and-drop builder
Categories and Tags with hierarchical structure
SEO-friendly URLs and meta management
Media library with image optimization
Content scheduling and drafts

AI-Powered Content Generation

Built-in AI Agent for content creation
Support for OpenAI, Anthropic, and other providers
Inline AI editor for posts and pages
Fine-tuning options for tone and style

Email Management

Visual email template builder (drag-and-drop blocks)
Multiple email connections (SMTP, Mailgun, etc.)
Inbound and outbound email management
Notification system with customizable triggers

Translation & Localization

21+ languages supported out of the box
Easy translation management UI
Add any new language in seconds
RTL support ready

Monitoring & Security

Activity logging for every action
Laravel Pulse integration for real-time metrics
Laravel Telescope for debugging
reCAPTCHA integration
Customizable login page settings

Developer Experience

Modular architecture — add/remove features as modules
CRUD Generator — scaffold complete CRUD in one command
WordPress-like hooks — action/filter system for extensibility
REST API with auto-generated Scramble documentation
Comprehensive test suite — Pest, PHPStan, Rector, Pint

The Module System — This Changes Everything

Here's where Lara Dashboard really shines. It uses a modular architecture powered by https://laravelmodules.com/.

This means:

Install only what you need — Don't need a blog? Don't enable the module.
Add features via marketplace — Browse and install modules with one click.
Build your own modules — Create custom functionality that plugs right in.
Share or sell your modules — Build once, monetize forever.

CRUD Generator — Your New Best Friend

Need to add a new entity to your project? One command does it all:

# Create migration
php artisan module:make-migration create_products_table Shop

# Run migration
php artisan migrate

# Generate complete CRUD
php artisan module:make-crud Shop --migration=create_products_table

What you get:

Model with fillable fields and casts
Datatable with sorting, searching, pagination
Index, Show, Create, Edit Livewire components
Blade views with breadcrumb navigation
Routes and sidebar menu item

From zero to fully functional CRUD in under 60 seconds. No joke.

Is It Really Free?

Yes, 100% free and open source.

The core is completely free under the MIT license. You can use it for personal projects, client work, SaaS products — whatever you want.

There are also premium modules available at https://laradashboard.com if you need advanced features like:

CRM (Customer Relationship Management)
HRM (Human Resource Management)
Course Management
E-commerce
And more coming...

But the core? Completely free. Forever.

Getting Started in 5 Minutes

# Clone the repo
git clone git@github.com:laradashboard/laradashboard.git
cd laradashboard

# Setup environment
cp .env.example .env

# Install dependencies
composer install
npm install

# Generate key and link storage
php artisan key:generate
php artisan storage:link

# Run migrations with seed data
php artisan migrate:fresh --seed

# Start the server
composer run dev

Open http://localhost:8000 and log in:

Email: superadmin@example.com
Password: 12345678

That's it. You now have a fully functional admin panel.

Try Before You Clone

Want to see it in action first?

Live Demo: https://demo.laradashboard.com?source=dev.to

Email: superadmin@example.com
Password: 12345678

Play around. Break things. The demo resets automatically.

Documentation That Actually Helps

We've invested heavily in documentation because we know how frustrating bad docs can be.

Full documentation: https://laradashboard.com/docs

Covers everything from:

Installation and configuration
User and role management
Module development
CRUD generator usage
API integration
Deployment guides
And much more...

The Tech Stack You'll Love

| Technology | Version | Purpose |
|-------------------|---------|-------------------------|
| Laravel | 12.x | Backend framework |
| PHP | 8.3+ | Server-side language |
| Livewire | 3.x | Reactive components |
| Tailwind CSS | 4.x | Styling |
| Alpine.js | 3.x | Frontend interactivity |
| Laravel Pulse | 1.5 | Real-time monitoring |
| Laravel Sanctum | 4.3 | API authentication |
| Laravel Telescope | 5.17 | Debugging |
| Pest | 4.x | Testing |
| React | 18.x | Page builder components |

All the modern tools. All working together. All tested.

Deployment Made Easy

Lara Dashboard works everywhere:

VPS/Dedicated servers — Standard Laravel deployment
Shared hosting (cPanel) — Root index.php included, no document root changes needed
Docker — Laravel Sail support built-in
Cloud platforms — Works with Forge, Vapor, DigitalOcean, AWS, etc.

We even have a distribution package builder that creates production-ready ZIP files with vendor dependencies included — perfect for clients who can't run Composer.

Join the Community

Lara Dashboard is built by developers, for developers. We'd love to have you:

GitHub: https://github.com/laradashboard/laradashboard
Facebook Group: https://www.facebook.com/groups/laradashboard
LinkedIn: https://www.linkedin.com/groups/14690156
YouTube: https://www.youtube.com/@laradashboard (tutorials coming!)

Contributing

Found a bug? Have a feature idea? PRs are always welcome!

The codebase follows strict standards:

Pint for code formatting
PHPStan/Larastan for static analysis
Rector for automated refactoring
Pest for testing

Run composer run test and everything is checked automatically.

Why Choose Lara Dashboard?

| Feature | Building from Scratch | Lara Dashboard |
|--------------------|-----------------------|----------------|
| User Management | Hours/Days | Included |
| Role & Permissions | Hours | Included |
| CMS (Posts, Pages) | Days | Included |
| Media Library | Hours | Included |
| Email Management | Hours | Included |
| AI Integration | Days | Included |
| Multi-language | Hours | Included |
| Activity Logging | Hours | Included |
| REST API | Days | Included |
| Monitoring | Hours | Included |
| Beautiful UI | Days | Included |
| Tests | Days | Included |
| Total | Weeks | Minutes |

The math speaks for itself.

Final Thoughts

Stop reinventing the wheel. Stop building the same features over and over. Stop wasting time on boilerplate.

Lara Dashboard gives you a 6-month head start on every Laravel project.

Clone it. Customize it. Ship it.

Your clients will thank you. Your deadline will thank you. Your sanity will thank you.

Ready to try it?

Demo: https://demo.laradashboard.com?source=dev.to
GitHub: https://github.com/laradashboard/laradashboard
Docs: https://laradashboard.com/docs

Drop a star on GitHub if you find it useful. And let me know in the comments what features you'd love to see next!

Happy coding!

Built with love by the Laravel community. Powered by Lara Dashboard.

Next Generation Admin Template with Laravel for Best Coding practice

Maniruzzaman Akash — Tue, 26 Aug 2025 20:10:16 +0000

I'm talking today with a Real Admin Dashboard / Laravel based admin template solution, which really matters. Its not some simple CRUD interfaces. Its an architecture for your laravel project, its a standard to build a Laravel based application.
Its a CMS for your Laravel App, Introducing Lara Dashboard - https://github.com/laradashboard/laradashboard

Why it matters most:

Its UI - Its UI is clean, minimal, rich for any Laravel starter application.

All of the core features what you planning to add on your project is already being added.
In build unit tests with Pest Unit test with Feature, Unit, Browser tests included.
UI's are clean, minimal and researched.
Well architectured code.
Modular and highly extendible, They are planning to add Module marketplace soon and already they have core modules built in, which are rich too.
Dark mode supported under the hood.
Beautiful responsive supported.
Every action is tracked inside Monitoring.
Role permission management system added.
Media library added.
Beautiful blade component library with documentation.
Easy settings page.

See some demos before more talking.

Dashboard

User Profile

And here are some little demos -

Media library

Sign In Page

Module List

For more, please visit to https://laradashboard.com/try-demo/

Demo

Try Live Demo - https://laradashboard.com/try-demo/
Github Repo - https://github.com/laradashboard/laradashboard

Feature Request

Any more feature request, please add it here - https://feedback.laradashboard.com/

Best Admin Template with Laravel for 2025: Lara Dashboard

Maniruzzaman Akash — Mon, 23 Jun 2025 08:12:53 +0000

In the ever-evolving web development landscape, Laravel continues to dominate as a favorite PHP framework due to its elegant syntax, robust features, and growing ecosystem. For developers seeking to build sophisticated, scalable web applications quickly, the right admin dashboard template can be a game-changer.

Download Now - https://github.com/laradashboard/laradashboard

As we step into 2025, one admin template stands out from the rest: Lara Dashboard. This article explores why Lara Dashboard is the best Laravel admin template for modern developers and agencies.

🚀 What is Lara Dashboard?
Lara Dashboard is a fully-featured, premium admin template built specifically for Laravel. It offers seamless integration with Laravel’s backend architecture, making it a perfect starter kit for building advanced web applications, CMSs, SaaS platforms, and admin interfaces.

It is developed with clean, modular code and modern design aesthetics, ensuring both ease of customization and a great user experience.

🎯 Key Features
✅ Laravel 10+ Compatibility
Lara Dashboard is fully compatible with the latest Laravel versions, ensuring developers benefit from the most current performance enhancements, security features, and syntax updates.

🧩 Blade + Livewire Integration
Designed with Laravel Blade components and Livewire integration out-of-the-box, Lara Dashboard enables reactive, dynamic interfaces without writing custom JavaScript.

🎨 Modern UI & UX
Built using modern UI trends and responsive design, it delivers a polished, intuitive interface across all devices. It uses Bootstrap 5 and is compatible with Tailwind for custom styling needs.

🔐 Authentication & User Management
Comes pre-configured with Laravel Breeze/Fortify-based authentication and user roles & permissions. This saves hours of initial setup for developers.

📊 Ready-to-Use Components
Lara Dashboard includes:

Charts and graphs (via Chart.js & ApexCharts)

Dynamic data tables

Calendar integration

Forms with validation

File uploads

Modals, notifications, tabs, and more.

🧪 Modular & Scalable Code
Code is clean, well-commented, and modularized for scalability. It follows PSR-12 coding standards and Laravel best practices.

🛠️ Developer Experience
⚙️ Easy Installation
The template comes with a CLI-based installer and complete documentation. Simply run a few artisan commands, and you’re ready to go.

📦 RESTful API Ready
API scaffolding is built-in, allowing seamless integration with frontend frameworks like Vue.js, React, or mobile apps.

💼 Perfect for Agencies & Freelancers
Whether you're building a CRM, project management tool, or dashboard for a SaaS app, Lara Dashboard provides the building blocks to launch faster and with confidence.

📈 Why Lara Dashboard is Best in 2025
Performance First: Optimized asset loading, lazy loading, and minimal dependencies ensure speed and efficiency.

Ongoing Updates: Frequent updates aligned with Laravel's release cycle ensure stability and future-proofing.

Community & Support: Active support community and documentation make it easy to troubleshoot and extend functionality.

Customization: Extensive layout and theme options let developers tweak UI easily for client-specific branding.

💬 What Developers Are Saying
“Lara Dashboard helped us cut project delivery time by 40%. It’s like Laravel and design thinking had a baby.”
— Adeel K., Software Engineer

“The Livewire integration was buttery smooth. Zero JavaScript headache.”
— Maria V., Freelance Laravel Developer

🔗 Get Lara Dashboard
You can get started with Lara Dashboard by visiting the official page (replace with actual URL) or exploring its GitHub repo (if open-source).

🏁 Final Thoughts
Lara Dashboard sets the gold standard for Laravel admin templates in 2025. With its modern UI, feature-rich components, and deep Laravel integration, it empowers developers to build robust applications faster than ever before.

If you're planning your next Laravel-based project, Lara Dashboard is not just an option — it's the best choice.

Download Now - https://github.com/laradashboard/laradashboard

Advanced Laravel Dashboard for your application in 2025

Maniruzzaman Akash — Thu, 24 Apr 2025 07:19:35 +0000

🚀 Lara Dashboard – A Complete Role & Permission System for Laravel (with Dark Mode, Settings, Modules & More)

Hey Laravel Devs 👋

Tired of rewriting the same Role & Permission logic in every project? Let me introduce you to Lara Dashboard – a powerful Laravel starter kit packed with features to speed up your backend development. It's modular, beautiful, and 100% open-source.

✅ Live Demo: https://demo.laradashboard.com

🔐 Login:

Email: superadmin@example.com

Password: 12345678

⭐ GitHub Repo: github.com/laradashboard/laradashboard

🎯 What is Lara Dashboard?

Lara Dashboard is a modern admin panel built with Laravel, Tailwind CSS, and a fully modular structure. It’s designed to give you:

A ready-to-use Role-Based Access Control system
Clean UI with dark/light modes
Advanced user, role, and permission management
Modular architecture to scale your app easily
Action logs, charts, forms, and even Laravel Pulse integration

Whether you’re building a SaaS platform, admin interface, or internal tool — this dashboard gives you a solid base so you can focus on building features, not scaffolding.

🧰 Core Features

✅ Role & Permission System (using Spatie/Permission)

🌗 Tailwind UI with Dark/Light Mode

👥 Multi-role User Management

🧩 Modular Development Support

🕵️‍♂️ Admin Impersonation

📈 Dashboard with Charts

📋 Action Logs & Laravel Pulse Monitoring

⚙️ Full Settings Panel (Appearance, Integrations, etc.)

📧 Email Ready (supports Mailtrap, SMTP, etc.)

🔥 Custom Error Pages

🧪 PHPUnit Ready

✨ Visual Sneak Peek

Light Mode Dashboard

Dark Mode Dashboard

More demos

Settings

Users

Roles

Action Logs

Laravel Pulse

Forget password

Modules

🛠️ Quick Installation Guide

git clone git@github.com:laradashboard/laradashboard.git
cd laradashboard
composer install
npm install
cp .env.example .env
php artisan key:generate
php artisan storage:link
php artisan migrate:fresh --seed && php artisan module:seed
php artisan serve
npm run dev

Visit: http://localhost:8000

Login with the demo credentials and you’re in 🚪

💡 Why Developers Love It

Time Saver: Avoid rebuilding roles, permissions, and dashboards for every project.
Modular: Easily extend with modules like CRM, HRM, Course Management.
Production Ready: Includes settings panel, password reset, profile management, etc.
Clean & Scalable: Separation of concerns using services, helpers, and modules.

🔌 Mail Setup (Optional)

Testing email flows? Use Mailtrap with this config:

MAIL_MAILER=smtp
MAIL_HOST=sandbox.smtp.mailtrap.io
MAIL_PORT=587
MAIL_USERNAME=your-username
MAIL_PASSWORD=your-password
MAIL_ENCRYPTION=tls
MAIL_FROM_ADDRESS=you@example.com
MAIL_FROM_NAME="${APP_NAME}"

🌟 Contribute & Support

Lara Dashboard is fully open-source and made with ❤️ by Maniruzzaman Akash.

If it helps you:

Give it a ⭐ on GitHub
Submit a PR
Buy a coffee ☕ on Patreon

🔮 What’s Coming Next?

Premium modules are on the way at laradashboard.com, including:

CRM
HRM
Course Management
...and more!

🗣 Final Words

If you’re working on a Laravel project and want a ready-made admin panel with role management, modularity, and gorgeous UI — Lara Dashboard will save you hours of work.

Check it out, clone it, star it, and let’s build amazing things together! 🚀

👉 https://github.com/laradashboard/laradashboard

Let me know if you'd like a preview thumbnail, meta description, or social share banner to go with your Dev.to post — I can create those too!

How to Build a Beautiful Todo Application Using React JS and Custom CSS

Maniruzzaman Akash — Sun, 01 Dec 2024 11:57:41 +0000

In this post, we'll walk through building a fully functional Todo application using React JS, custom CSS, and the SimpleCRUD API to handle backend operations like data fetching, pagination, creation, updates, and deletions.
The SimpleCRUD API simplifies backend complexities, letting us focus on building the UI and handling interactions effectively. Let's dive into the components of the application.

Setting Up the Environment

Required Libraries
Ensure you have the following libraries installed in your React project. These are already mentioned in your package.json:

React & React-DOM: For building the UI.
Axios: For making HTTP requests to the SimpleCRUD API.
React Icons: For icons to improve user experience.
date-fns: For formatting dates.

Project Structure

Here's how the project is structured - its using create-react-app.

/public
  /index.html
/src
  api.js
  App.js
  styles.css
  index.js
package.json

Backend API Integration

The src/api.js file handles all the interactions with the SimpleCRUD API.

Simple CRUD API Docs for Todos - https://simplecrudapi.com/docs/todos

import axios from "axios";

const API_URL = "https://simplecrudapi.com/api/todos";

export const getTodos = async (params) => {
  let apiUrl = `${API_URL}?orderBy=id&orderDirection=desc`;
  const response = await axios.get(apiUrl, { params });
  const { data, meta } = response.data;
  return { data, meta };
};

export const createTodo = async (todo) => {
  todo.user_id = null;
  const response = await axios.post(API_URL, todo);
  return response.data.data;
};

export const updateTodo = async (id, todo) => {
  todo.user_id = null;
  const response = await axios.put(`${API_URL}/${id}`, todo);
  return response.data.data;
};

export const deleteTodo = async (id) => {
  const response = await axios.delete(`${API_URL}/${id}`);
  return response.data.data;
};

getTodos: Fetches a paginated list of todos.
createTodo: Creates a new todo.
updateTodo: Updates an existing todo.
deleteTodo: Deletes a todo by its ID.

Application Logic File: App.js This file contains the main application logic: State management for todos, form data, pagination, and editing. CRUD operations: Fetch, add, edit, and delete todos. Pagination controls: Navigate through pages of todos.

Walkthrough
Initial Setup
Use useState to manage the app's state, including todos and pagination details.
Use useEffect to fetch todos when the page loads or pagination state changes.

Todo Operations
Add a new todo or update an existing one using handleSubmit.
Delete a todo with handleDelete.
Edit a todo by populating the form fields with the selected todo's data.

Pagination
Handle pagination using changePage to navigate between pages.

Key Code Snippets

Fetching Todos

const fetchTodos = async (page = 1) => {
  try {
    const { data, meta } = await getTodos({ page });
    setTodos(data);
        setPagination((prev) => ({
          ...prev,
          currentPage: meta?.current_page || 1,
          lastPage: meta?.last_page || 1,
          total: meta?.total || 0,
        }));
      } catch (error) {
        console.error("Failed to fetch todos:", error);
        setTodos([]);
        setPagination((prev) => ({
          ...prev,
          currentPage: 1,
          lastPage: 1,
          total: 0,
        }));
      }
    };

Handling Submit

const handleSubmit = async (e) => {
  e.preventDefault();
  if (editingId) {
    await updateTodo(editingId, form);
    setEditingId(null);
  } else {
    await createTodo(form);
  }

  setForm({ title: "", description: "", completed: false });
  fetchTodos(pagination.currentPage);
};

Pagination

const changePage = (newPage) => {
  if (newPage > 0 && newPage <= pagination.lastPage) {
    setPagination((prev) => ({ ...prev, currentPage: newPage }));
  }
};

Styling the Application

File: styles.css
The CSS file defines a sleek and modern look for the Todo app:
Animations: Subtle fadeIn and slideIn animations enhance user experience.

Responsiveness: Styles adapt well to various screen sizes.
Visual hierarchy: Clear distinction between buttons, input fields, and todo items.

Running the Application

Install Dependencies

npx create-react-app my-todo
cd my-todo
npm start

Install Extra Dependencies

npm install axios react-icons date-fns

Interact with the App

Add new todos using the form.
Edit existing todos by clicking the edit button.
Delete todos by clicking the delete button.
Navigate through pages of todos using the pagination controls.

Complete Source code

The src/App.js file -

import React, { useEffect, useState } from "react";
import { format } from "date-fns"; // Importing date-fns
import { getTodos, createTodo, updateTodo, deleteTodo } from "./api";
import { AiOutlineDelete, AiOutlineEdit } from "react-icons/ai";
import "./styles.css";

function App() {
  const [todos, setTodos] = useState([]);
  const [form, setForm] = useState({
    title: "",
    description: "",
    completed: false,
  });
  const [editingId, setEditingId] = useState(null);
  const [pagination, setPagination] = useState({
    currentPage: 1,
    lastPage: 1,
    perPage: 10,
    total: 0,
  });

  useEffect(() => {
    fetchTodos(pagination.currentPage);
  }, [pagination.currentPage]);

  const fetchTodos = async (page = 1) => {
    try {
      const { data, meta } = await getTodos({ page });

      setTodos(data);
      setPagination((prev) => ({
        ...prev,
        currentPage: meta?.current_page || 1,
        lastPage: meta?.last_page || 1,
        total: meta?.total || 0,
      }));
    } catch (error) {
      console.error("Failed to fetch todos:", error);
      setTodos([]);
      setPagination((prev) => ({
        ...prev,
        currentPage: 1,
        lastPage: 1,
        total: 0,
      }));
    }
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    if (editingId) {
      await updateTodo(editingId, form);
      setEditingId(null);
    } else {
      await createTodo(form);
    }

    setForm({ title: "", description: "", completed: false });
    fetchTodos(pagination.currentPage);
  };

  const handleEdit = (todo) => {
    setEditingId(todo.id);
    setForm({
      title: todo.title,
      description: todo.description,
      completed: todo.completed,
    });
  };

  const handleDelete = async (id) => {
    await deleteTodo(id);
    fetchTodos(pagination.currentPage);
  };

  const changePage = (newPage) => {
    if (newPage > 0 && newPage <= pagination.lastPage) {
      setPagination((prev) => ({ ...prev, currentPage: newPage }));
    }
  };

  return (
    <div className="app-container">
      <div className="todo-wrapper">
        <h1 className="app-title">My Todos</h1>
        <p className="app-description">
          By Simple CRUD API →{" "}
          <a href="https://simplecrudapi.com/docs/todos">Todo API link</a>
        </p>

        {/* Form */}
        <form onSubmit={handleSubmit} className="todo-form">
          <input
            type="text"
            placeholder="Title"
            value={form.title}
            onChange={(e) => setForm({ ...form, title: e.target.value })}
            className="todo-input"
            required
          />
          <textarea
            placeholder="Description"
            value={form.description}
            onChange={(e) => setForm({ ...form, description: e.target.value })}
            className="todo-textarea"
            required
          ></textarea>
          <div className="todo-checkbox-wrapper">
            <input
              type="checkbox"
              checked={form.completed}
              onChange={(e) =>
                setForm({ ...form, completed: e.target.checked })
              }
              className="todo-checkbox"
            />
            <label>Completed</label>
          </div>
          <button type="submit" className="todo-button">
            {editingId ? "Update" : "Add"} Todo
          </button>
        </form>

        {/* Todo List */}
        <div className="todo-list">
          {todos.map((todo) => (
            <div key={todo.id} className="todo-item">
              <div>
                <h2
                  className={`todo-title ${todo.completed ? "completed" : ""}`}
                >
                  {todo.title}
                </h2>
                <p className="todo-description">{todo.description}</p>
                <p className="todo-updated-at">
                  Last updated:{" "}
                  {todo.updated_at
                    ? format(new Date(todo.updated_at), "MMM d, yyyy h:mm a")
                    : "N/A"}
                </p>
              </div>
              <div className="todo-actions">
                <button
                  onClick={() => handleEdit(todo)}
                  className="edit-button"
                >
                  <AiOutlineEdit />
                </button>
                <button
                  onClick={() => handleDelete(todo.id)}
                  className="delete-button"
                >
                  <AiOutlineDelete />
                </button>
              </div>
            </div>
          ))}
        </div>

        {/* Pagination */}
        <div className="pagination">
          <button
            className="pagination-button"
            onClick={() => changePage(pagination.currentPage - 1)}
            disabled={pagination.currentPage === 1}
          >
            &laquo; Previous
          </button>
          <span className="pagination-info">
            Page {pagination.currentPage} of {pagination.lastPage}
          </span>
          <button
            className="pagination-button"
            onClick={() => changePage(pagination.currentPage + 1)}
            disabled={pagination.currentPage === pagination.lastPage}
          >
            Next &raquo;
          </button>
        </div>
      </div>

      {/* Footer */}
      <footer className="app-footer">
        Powered by{" "}
        <a
          href="https://simplecrudapi.com"
          target="_blank"
          rel="noopener noreferrer"
        >
          simplecrudapi.com
        </a>
      </footer>
    </div>
  );
}

export default App;

The src/styles.css file -

/* General App Styles */
.app-container {
  font-family: "Roboto", Arial, sans-serif;
  background: linear-gradient(135deg, #f0f8ff, #e0e7ff);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  box-sizing: border-box;
}

.todo-wrapper {
  max-width: 650px;
  width: 100%;
  background: #fff;
  padding: 25px;
  border-radius: 12px;
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
  animation: fadeIn 0.8s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.app-title {
  font-size: 28px;
  font-weight: bold;
  text-align: center;
  color: #2c3e50;
  margin-bottom: 12px;
}

.app-description {
  text-align: center;
  font-size: 14px;
  margin-bottom: 25px;
  color: #34495e;
}

.app-description a {
  color: #3498db;
  text-decoration: none;
  font-weight: 500;
}

.app-description a:hover {
  text-decoration: underline;
}

/* Form Styles */
.todo-form {
  margin-bottom: 25px;
}

.todo-input,
.todo-textarea {
  width: 100%;
  padding: 12px;
  margin-bottom: 12px;
  border: 1px solid #dcdfe6;
  border-radius: 6px;
  font-size: 14px;
  box-sizing: border-box;
  transition: border-color 0.3s ease;
}

.todo-input:focus,
.todo-textarea:focus {
  outline: none;
  border-color: #007bff;
}

.todo-textarea {
  height: 90px;
  resize: none;
}

.todo-checkbox-wrapper {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}

.todo-checkbox {
  margin-right: 8px;
}

.todo-button {
  display: block;
  width: 100%;
  padding: 12px;
  background: #4caf50;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
  font-weight: bold;
  transition: all 0.3s ease;
}

.todo-button:hover {
  background: #45a049;
  transform: translateY(-2px);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
}

/* Todo List Styles */
.todo-list {
  margin-top: 20px;
}

.todo-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fdfdfd;
  padding: 15px 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
  margin-bottom: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  animation: slideIn 0.5s ease forwards;
  overflow-x: hidden;
  gap: 10px;
}

.todo-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.1);
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.todo-title {
  font-size: 18px;
  font-weight: bold;
  margin: 0;
  color: #2c3e50;
  word-wrap: break-word;
  word-break: break-word;
  overflow-wrap: break-word;
}

.todo-title.completed {
  text-decoration: line-through;
  color: #7f8c8d;
}

.todo-description {
  font-size: 15px;
  color: #95a5a6;
  margin: 5px 0 0;
  word-wrap: break-word;
  word-break: break-word;
  overflow-wrap: break-word;
}

.todo-actions {
  display: flex;
  gap: 10px;
}

.edit-button,
.delete-button {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 20px;
  transition: all 0.3s ease;
}

.edit-button {
  color: #3498db;
}

.edit-button:hover {
  color: #2980b9;
  transform: scale(1.1);
}

.delete-button {
  color: #e74c3c;
}

.delete-button:hover {
  color: #c0392b;
  transform: scale(1.1);
}

/* Pagination Styles */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  margin-top: 20px;
}

.pagination-button {
  background: #3498db;
  color: white;
  padding: 10px 15px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s ease;
}

.pagination-button:hover {
  background: #2980b9;
  transform: translateY(-2px);
}

.pagination-button:disabled {
  background: #95a5a6;
  cursor: not-allowed;
}

.pagination-info {
  font-size: 14px;
  color: #2c3e50;
}

/* Footer Styles */
.app-footer {
  margin-top: 30px;
  text-align: center;
  font-size: 14px;
  color: #555;
}

.app-footer a {
  color: #3498db;
  text-decoration: none;
}

.app-footer a:hover {
  text-decoration: underline;
}

.todo-updated-at {
  font-size: 12px;
  color: #7f8c8d;
  margin-top: 5px;
}

In package.json -

{
  "name": "react",
  "version": "1.0.0",
  "description": "",
  "keywords": [],
  "main": "src/index.tsx",
  "dependencies": {
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "react-scripts": "^5.0.0",
    "axios": "1.7.7",
    "react-icons": "5.3.0",
    "date-fns": "4.1.0"
  },
  "devDependencies": {
    "@types/react": "18.2.38",
    "@types/react-dom": "18.2.15",
    "loader-utils": "3.2.1",
    "typescript": "4.4.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]
}

UI Demo

TODO App Demo8. Live Sandbox Demo Link
Live App Link - https://lyjxd2.csb.app/
Code Sandbox Code Editor - https://codesandbox.io/p/sandbox/lyjxd2
All Sandbox Demos of SimpleCRUD API - https://simplecrudapi.com/sandbox-demo

Summary

This Todo app demonstrates the seamless integration of React, custom CSS, and a backend API (SimpleCRUD API). The design is clean, and the functionality covers all essential aspects of a task management application, making it a perfect starter project for React enthusiasts.

For more information on the SimpleCRUD API, refer to their documentation - https://simplecrudapi.com/docs/todos

Queue Data Structure Detailed Examples

Maniruzzaman Akash — Thu, 22 Feb 2024 11:00:03 +0000

Queue Data Structure

A queue is a fundamental data structure in computer science that follows the First-In-First-Out (FIFO) principle. The element that enters the queue first is the first to be removed and the element enters last is the last to be removed.

Operations in Queue

Practical Queue Example in C Programming

#include <stdio.h>

#define MAX_SIZE 100

struct Queue {
    int arr[MAX_SIZE];
    int front, rear;
};

// Function to initialize the queue
void initQueue(struct Queue* q) {
    q->front = q->rear = -1;
}

// Enqueue Operation
void enqueue(struct Queue* q, int item) {
    if (q->rear == MAX_SIZE - 1) {
        printf("Queue Overflow: Cannot enqueue more elements.\n");
        return;
    }

    if (q->front == -1) {
        q->front = q->rear = 0;
    } else {
        q->rear++;
    }

    q->arr[q->rear] = item;
    printf("%d enqueued to the queue.\n", item);
}

// Dequeue Operation
void dequeue(struct Queue* q) {
    if (q->front == -1) {
        printf("Queue Underflow: Cannot dequeue from an empty queue.\n");
        return;
    }

    int dequeuedItem = q->arr[q->front];

    if (q->front == q->rear) {
        q->front = q->rear = -1; // Reset the queue when the last element is dequeued
    } else {
        q->front++;
    }

    printf("%d dequeued from the queue.\n", dequeuedItem);
}

// Peek (or Front) Operation
void peek(struct Queue* q) {
    if (q->front == -1) {
        printf("Queue is empty.\n");
    } else {
        printf("Front element: %d\n", q->arr[q->front]);
    }
}

// Size Operation
int size(struct Queue* q) {
    if (q->front == -1) {
        return 0;
    }
    return q->rear - q->front + 1;
}

// Search Operation
int search(struct Queue* q, int item) {
    for (int i = q->front; i <= q->rear; i++) {
        if (q->arr[i] == item) {
            printf("%d found in the queue.\n", item);
            return 1;
        }
    }
    printf("%d not found in the queue.\n", item);
    return 0;
}

// Check if the queue is empty
int isEmpty(struct Queue* q) {
    return q->front == -1;
}

int main() {
    struct Queue myQueue;
    initQueue(&myQueue);

    enqueue(&myQueue, 10);
    enqueue(&myQueue, 20);
    enqueue(&myQueue, 30);

    peek(&myQueue);

    dequeue(&myQueue);
    peek(&myQueue);

    printf("Queue Size: %d\n", size(&myQueue));

    search(&myQueue, 20);
    search(&myQueue, 40);

    return 0;
}

Get Queue examples with practical detail in depth knowledge - https://devsenv.com/tutorials/queue

Getting More About Linked List Data Structure

Maniruzzaman Akash — Thu, 22 Feb 2024 10:54:06 +0000

Why Linked list

When a program needs to smoothly handle dynamic operations like adding, updating, and removing data-linked lists with a good solution at that time. It provides a flexible way to manage information, making it easier to insert, update, or delete data elements in our program.

Structure of a Linked list

Components of Linked List

struct Node {
    int data;
    struct Node* next;
};

Insert in Linked List

// Create a new node
struct Node* newNode = malloc(sizeof(struct Node));
newNode->data = newData;
// Update pointers
newNode->next = head;
head = newNode;

Insert in the middle

// Create a new node
struct Node* newNode = malloc(sizeof(struct Node));
newNode->data = newData;
// Update pointers
newNode->next = temp->next;
temp->next = newNode;

Insert in the end

struct Node* newNode = malloc(sizeof(struct Node));
newNode->data = newData;
newNode->next = NULL;
// Update pointers
if (head == NULL) {
    head = newNode;
} else {
    struct Node* temp = head;
    while (temp->next != NULL) {
        temp = temp->next;
    }
    temp->next = newNode;
}

Linked List Traverse

struct Node* current = head;
while (current != NULL) {
        // Access data at the current node
        printf("%d -> ", current->data);
        // Move to the next node
        current = current->next;
}

Real life example of Linked list

#include <stdio.h>
#include <stdlib.h>
#include <string.h>

// Node structure for the linked list
struct Task {
    int taskID;
    char description[100];
    struct Task* next;
};

// Function to add a new task to the to-do list
struct Task* insertTask(struct Task* head, int id, const char* desc) {
    // Allocate memory for the new task
    struct Task* newTask = (struct Task*)malloc(sizeof(struct Task));

    // Set the task details
    newTask->taskID = id;
    strncpy(newTask->description, desc, sizeof(newTask->description));
    newTask->next = NULL;

    // If the list is empty, make the new task the head
    if (head == NULL) {
        head = newTask;
    } else {
        // Otherwise, add the new task to the end of the list
        struct Task* current = head;
        while (current->next != NULL) {
            current = current->next;
        }
        current->next = newTask;
    }

    return head;
}

// Function to traverse and display the to-do list
void traverseToDoList(struct Task* head) {
    if (head == NULL) {
        printf("To-Do List is empty.\n");
        return;
    }

    // Initialize a pointer to the head of the list
    struct Task* current = head;

    // Iterate through the tasks
    while (current != NULL) {
        // Display task details
        printf("Task %d: %s\n", current->taskID, current->description);

        // Move to the next task
        current = current->next;
    }
}

// Function to remove a task from the to-do list
struct Task* deleteTask(struct Task* head, int id) {
    // If the list is empty, nothing to delete
    if (head == NULL) {
        printf("To-Do List is empty. Cannot delete.\n");
        return head;
    }

    // If the task to be deleted is the head
    if (head->taskID == id) {
        struct Task* newHead = head->next;
        free(head);
        return newHead;
    }

    // Search for the task to be deleted
    struct Task* current = head;
    struct Task* previous = NULL;

    while (current != NULL && current->taskID != id) {
        previous = current;
        current = current->next;
    }

    // If the task is not found
    if (current == NULL) {
        printf("Task %d not found. Cannot delete.\n", id);
        return head;
    }

    // Remove the task from the list
    previous->next = current->next;
    free(current);

    return head;
}

int main() {
    // Initialize an empty to-do list
    struct Task* toDoList = NULL;

    // Insert tasks
    toDoList = insertTask(toDoList, 1, "Complete assignment");
    toDoList = insertTask(toDoList, 2, "Buy groceries");
    toDoList = insertTask(toDoList, 3, "Attend meeting");

    // Display the to-do list
    printf("Initial To-Do List:\n");
    traverseToDoList(toDoList);

    // Delete a task
    toDoList = deleteTask(toDoList, 2);

    // Display the updated to-do list
    printf("\nUpdated To-Do List after deletion:\n");
    traverseToDoList(toDoList);

    return 0;
}

This is just the beginning of the Linked list.

If you need more examples and detailed learning, deleting, and many more Please go through this article with many practical examples and learning - https://devsenv.com/tutorials/linked-list

How to automate tests by Github Workflow with Laravel Pint and PHP Pest

Maniruzzaman Akash — Sat, 13 May 2023 18:17:05 +0000

What is Github Workflow

GitHub Workflow is a powerful tool that allows developers to automate various tasks and processes related to software development, such as building, testing, and deploying applications.

What is Laravel Pint

Laravel Pint is an opinionated PHP code style fixer for minimalists. Pint is built on top of PHP-CS-Fixer and makes it simple to ensure that your code style stays clean and consistent.

What is PHP PEST

PHP Pest is a testing framework for PHP applications. It is inspired by Jest, a popular testing framework for JavaScript. Pest provides a clean and expressive syntax for writing tests and comes with a wide range of features to simplify the testing process.

We can say PHP Pest is a total alternative for PHPUnit. Pest is more simple and has more features than PHPUnit. Laravel has lots of support for this library.

How to create that Github workflow for Laravel Pint and PHP PEST

Create a file in your repository under .github/workflows/php-tests.yml

Where in the .github folder, we’ve to create another folder workflows, then create a file php-test.yml. This file name could be anything. Let’s write the below codes in php-test.yml.



name: Laravel Tests
on:
  pull_request:
    branches:
      - main
  push:
    branches:
      - main

jobs:
  laravel-tests:
    runs-on: ubuntu-latest
    # Service container Mysql mysql
    services:
      # Label used to access the service container
      mysql:
        # Docker Hub image (also with version)
        image: mysql:5.7
        env:
          MYSQL_ROOT_PASSWORD: secret
          MYSQL_DATABASE:  testing
        ## map the "external" 33306 port with the "internal" 3306
        ports:
          - 33306:3306
        # Set health checks to wait until mysql database has started (it takes some seconds to start)
        options: >-
          --health-cmd="mysqladmin ping"
          --health-interval=10s
          --health-timeout=5s
          --health-retries=3

    strategy:
      matrix:
        operating-system: [ubuntu-latest]
        php-versions: [ '8.1' ]
        dependency-stability: [ prefer-stable ]

    name: P${{ matrix.php-versions }} - L${{ matrix.laravel }} - ${{ matrix.dependency-stability }} - ${{ matrix.operating-system}}

    steps:
      - uses: actions/checkout@v2
      - name: Install PHP versions
        uses: shivammathur/setup-php@v2
        with:
          php-version: ${{ matrix.php-versions }}
      - name: Get Composer Cache Directory 2
        id: composer-cache
        run: |
          echo "::set-output name=dir::$(composer config cache-files-dir)"
      - uses: actions/cache@v2
        id: actions-cache
        with:
          path: ${{ steps.composer-cache.outputs.dir }}
          key: ${{ runner.os }}-composer-${{ hashFiles('**/composer.lock') }}
          restore-keys: |
            ${{ runner.os }}-composer-
      - name: Cache PHP dependencies
        uses: actions/cache@v2
        id: vendor-cache
        with:
          path: vendor
          key: ${{ runner.OS }}-build-${{ hashFiles('**/composer.lock') }}
      - name: Copy .env
        run: php -r "file_exists('.env') || copy('.env.example', '.env');"
      - name: Install Dependencies
        run: composer install --no-interaction --prefer-dist --optimize-autoloader

      - name: Create storage folders
        run: mkdir -p storage/framework/{sessions,views,cache}
      - name: Directory Permissions
        run: chmod -R 777 storage bootstrap/cache

      - name: Show dir
        run: pwd
      - name: PHP Version
        run: php --version

      # Code quality
      - name: Execute tests (Unit and Feature tests) via PestPHP
        # Set environment
        env:
          DB_CONNECTION: mysql
          DB_DATABASE: testing
          DB_PORT: 33306
          DB_USER: root
          DB_PASSWORD: secret
        run: |
          php artisan key:generate
          vendor/bin/pest

      - name: Run Pint
        run: vendor/bin/pint

For more and step by setup instruction and every line meaning, please check this article, it will be super helpful to clear your concept - https://devsenv.com/tutorials/how-to-setup-github-workflow-for-laravel-pint-and-php-pest-testing

Demo Github workflow response

How to Write automatic AI content for your WordPress blog using Open AI's ChatGPT-3

Maniruzzaman Akash — Wed, 28 Dec 2022 04:13:56 +0000

What is Open AI

OpenAI is a research laboratory based in San Francisco, California. It's mission is to ensure that artificial general intelligence benefits all of humanity.

What is ChatGPT

ChatGPT is Open AI's language model. It's latest version is ChatGPT-3. ChatGPT (Generative Pre-trained Transformer) is a chatbot launched by OpenAI in November 2022.

It is built on top of OpenAI's GPT-3.5 family of large language models, and is fine-tuned with both supervised and reinforcement learning techniques.

What ChatGPT-3 can do

ChatGPT is a large language model chatbot developed by OpenAI based on GPT-3.5. It has a remarkable ability to interact in conversational dialogue form and provide responses that can appear surprisingly human. Large language models perform the task of predicting the next word in a series of words.

Suppose, you're giving a prompt to it and it will rest of the content for you.

You can go here to check AI content generation - https://chat.openai.com/chat

If you want to read more about ChatGPT-3 and Open AI's benefits and pros-cons, you can read this article - https://devsenv.com/tutorials/introducing-chatgpt:-the-next-generation-conversational-ai-tool-what,-why,-how,-pros-and-cons

How WordPress can be used with this ChatGPT-3

I've developed recently a WordPress plugin using this Open AI and ChatGPT-3 model to generate automatic AI content for your blog.

Plugin name is Innovator AI which is Your Virtual AI assistant to make your WordPress content automation journey smooth and beautiful using Open AI.

Let's get the plugin link - https://wordpress.org/plugins/innovator-ai/

Please install the plugin and let's continue our rest of the tutorial.

Let's see a demo of the plugin to get understand - how this plugin could help you to generate automatic AI generated content for your blog -

Dashboard Page:

From here, you can use Try demo section to generate AI content from your content hint.

Automatic content generation after try demo.

Settings Page

In settings, you have to give your API key taking from Open AI, from this link - https://beta.openai.com/account/api-keys

Post Page

If you go to Create post for your blog, then in new Gutenberg editor, you can easily find our Text generator Block by writing /text-generator.

Then from right side, you can give your hint and generate content and content would be copied to your clipboard.

Post Toolbar

In every Gutenberg block toolbar, you'll get also our content generation support block AI content-

If you click on the AI content, a modal will pop upped and you can give your prompt and get AI content.

Links

Plugin link - https://wordpress.org/plugins/innovator-ai/
Plugin Wiki page - https://github.com/wp-innovator/innovator-ai/wiki

If any problem in the plugin, create an issue in https://github.com/wp-innovator/innovator-ai/issues
Thanks for reading and getting into the World of Artificial Intelligenence.

WordPress Plugin Development with React JS easily

Maniruzzaman Akash — Fri, 22 Apr 2022 05:41:19 +0000

Let's describe how to start working in WordPress with React JS.

WordPress plugin development is really a top paying job around the world and with React it's really getting more powerful nowadays.

Let's build a simple wordpress plugin with React JS.

Step 1:

Inside plugins directory, create a folder called - jobplace which is our plugin.

add composer setup by running -



composer init

also run



npm init

install @wordpress/scripts by running -



npm install @wordpress/scripts --save-dev

Add some command in package.json and final would be -




  "name": "jobplace",
  "version": "1.0.0",
  "description": "A Job posting platform made by WordPress",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "wp-scripts build",
    "start": "wp-scripts start"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@wordpress/scripts": "^22.5.0"
  }
}

And composer.json would be -



{
    "name": "akash/jobplace",
    "description": "A Job posting platform made by WordPress",
    "type": "wordpress-plugin",
    "license": "GPL-2.0-or-later",
    "autoload": {
        "psr-4": {
            "Akash\\Jobplace\\": "includes/"
        }
    },
    "authors": [
        {
            "name": "ManiruzzamanAkash",
            "email": "manirujjamanakash@gmail.com"
        }
    ],
    "require": {}
}

Add webpack.config.js -



const defaults = require('@wordpress/scripts/config/webpack.config');

module.exports = {
  ...defaults,
  externals: {
    react: 'React',
    'react-dom': 'ReactDOM',
  },
};

Add a template file - templates/app.php



<div id="jobplace">
    <h2>Loading...</h2>
</div>

Main Plugin file - job-place.php



<?php
/**
 * Plugin Name:       Job Place
 * Description:       A Job posting platform made by WordPress.
 * Requires at least: 5.8
 * Requires PHP:      7.0
 * Version:           0.1.0
 * Author:            Maniruzzaman Akash
 * License:           GPL-2.0-or-later
 * License URI:       https://www.gnu.org/licenses/gpl-2.0.html
 * Text Domain:       jobplace
 */

add_action( 'admin_menu', 'jobplace_init_menu' );

/**
 * Init Admin Menu.
 *
 * @return void
 */
function jobplace_init_menu() {
    add_menu_page( __( 'Job Place', 'jobplace'), __( 'Job Place', 'jobplace'), 'manage_options', 'jobplace', 'jobplace_admin_page', 'dashicons-admin-post', '2.1' );
}

/**
 * Init Admin Page.
 *
 * @return void
 */
function jobplace_admin_page() {
    require_once plugin_dir_path( __FILE__ ) . 'templates/app.php';
}

add_action( 'admin_enqueue_scripts', 'jobplace_admin_enqueue_scripts' );

/**
 * Enqueue scripts and styles.
 *
 * @return void
 */
function jobplace_admin_enqueue_scripts() {
    wp_enqueue_style( 'jobplace-style', plugin_dir_url( __FILE__ ) . 'build/index.css' );
    wp_enqueue_script( 'jobplace-script', plugin_dir_url( __FILE__ ) . 'build/index.js', array( 'wp-element' ), '1.0.0', true );
}

*Add React stuff - *

In src/index.js -



import App from "./App";
import { render } from '@wordpress/element';

/**
 * Import the stylesheet for the plugin.
 */
import './style/main.scss';

// Render the App component into the DOM
render(<App />, document.getElementById('jobplace'));

src/App.js -



import React from 'react';
import Dashboard from './components/Dashboard';

const App = () => {
    return (
        <div>
            <h2 className='app-title'>Job Place App</h2>
            <hr />
            <Dashboard />
        </div>
     );
}

export default App;

*Add Dashboard Component - src/components/Dashboard.jsx *




import React from 'react'

const Dashboard = () => {
    return (
        <div className='dashboard'>
            <div className="card">
                <h3>Dashboard</h3>
                <p>
                    Edit Dashboard component at <code>src/components/Dashboard.jsx</code>
                </p>
            </div>
        </div>
     );
}

export default Dashboard;

Add style in src/style/main.scss -



#jobplace {
    .app-title {
        font-size: 1.5em;
        font-weight: bold;
        margin-bottom: 1em;
    }
}

Now run -

Activate the plugin
Run the wp-script ```sh

npm start


That's it.

**See the final demo -**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uquaffnyat5acpbnyqyz.png)


**Full Article and Github Link in more details explanation - **

https://devsenv.com/tutorials/start-wordpress-plugin-development-with-react-js-easily-in-just-few-steps

Laravel + Twilio Integration - The Easy Way

Maniruzzaman Akash — Thu, 07 Apr 2022 15:04:25 +0000

Hi guys,
Let's Integrate Twilio with our Laravel application easily with some few steps.

Step-1: Create a Laravel Project called - sms-portal.

composer create-project laravel/laravel sms-portal

Step-2: Configure .env file - After creating the database sms_portal

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=sms_portal
DB_USERNAME=root
DB_PASSWORD=12345678

Step-3: Start Server

php artisan migrate
php artisan serve

Step-4: Install Twilio PHP SDK

composer require twilio/sdk

Step-5: Get Twilio credential
Go to https://console.twilio.com

Check their your Account SID, Auth Token and Twiolio Phone Number.

Set this value in .env File -

TWILIO_SID="ACxxxxxxxxxxxxxxx"
TWILIO_AUTH_TOKEN="fexxxxxxxxxxxxxxx"
TWILIO_NUMBER="+1xxxxxxxxx"

Step-6: Create Our UserPhone model
Using this model we'll send message to these phone number from our registered Twilio Phone number.

php artisan make:model UserPhone -m

In CreateUserPhonesTable migration - only add the phone_number string column.

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class CreateUserPhonesTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('user_phones', function (Blueprint $table) {
            $table->id();
            $table->string('phone_number');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('user_phones');
    }
}

In UserPhone model -

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class UserPhone extends Model
{
    use HasFactory;

    protected $table = 'user_phones';

    protected $fillable = [
        'phone_number'
    ];
}

For More, Please Read Full Article in DevsEnv - https://devsenv.com/tutorials/laravel-+-twilio-sms-system-integration-in-simple-way

Our Final application will be look like this -

Make React Higher Order Component HOC an easy one

Maniruzzaman Akash — Sun, 05 Dec 2021 02:04:40 +0000

Before starting to learn Higher Order Component, we need to clear our concept about Higher order Function.

Higher Order Function in JavaScript
A Higher Order Function is a function which -

Takes a function as argument
Returns another function

Ok, Let's see an example of a Higher Order function in JavaScript.

function sum(a, b) {
    return a + b;
}

function multiplication(a, b) {
    return a * b;
}

// result() is a Higher Order Function
function result(operation) { // operation is actually an another function
    return function(a, b) { // return function
        return "Result of operation: " + operation(a, b);
    }
}

const sumResult = result(sum);
const multipleicationResult = result(multiplication);

console.log(sumResult(1, 200)); // Result of operation: 201
console.log(multipleicationResult(2, 200)); // Result of operation: 400

In the above example, result() is a higher order function which accepts the arithmetic operation as it's parameter.
Then, it returns a function and manipulates it in a way and return the function data.
So, by this approach - We don't have to duplicate

Result of operation:

text. We can re-use our entire sum(), multiplication() functions.

Now, let's talk about Higher Order Component -
Higher Order component is a pure JavaScript function, which -

Takes a Component as parameter
Returns another Component

Example:
Suppose we have 2 pages called - About Page and Home Page, the component could be like this -

HomePage component

import React from "react";

const HomePage = () => {
  return (
    <div>
        <header>
            Some Header Content
        </header>

        <div title="Home Page">
          <h2>Home Page</h2>
        </div>

        <footer>
            Some Footer Content
        </footer>

    </div>
  );
};

export default HomePage;

AboutPage component

import React from "react";

const AboutPage = () => {
  return (
    <div>
        <header>
            Some Header Content
        </header>

        <div title="About Page">
          <h2>About Page</h2>
        </div>

        <footer>
            Some Footer Content
        </footer>

    </div>
  );
};

export default AboutPage;

But, look here, we've copied the same Header and Footer part for both of these component. So now, we could re-use this logic using a Higher Order Component very easily.

hocs/Layout.js

import React from "react";

const withLayout = (PageComponent) => {
  return function WithPage({ ...props }) {
    return (
      <div>
        <header>
            Some Header Content
        </header>

        <!-- Called The Component Parameter -->
        <PageComponent />

        <footer>
            Some Footer Content
        </footer>

    </div>
    );
  };
};

export default withLayout;

That's great, now we could use our HomePage and AboutPage component very easily.

import React from "react";
import withLayout from "./hocs/Layout";

const HomePage = () => {
  return (
    <div title="Home Page">
      <h2>HomePage</h2>
    </div>
  );
};

export default withLayout(HomePage);

import React from "react";
import withLayout from "./hocs/Layout";

const AboutPage = () => {
  return (
    <div title="About Page">
      <h2>About Page</h2>
    </div>
  );
};

export default withLayout(AboutPage);

So, we can use this withLayout hoc in any pages where we want.

Learn Full with so many use-cases and examples of Higher Order Component - https://devsenv.com/tutorials/higher-order-component-in-react-in-depth-discussion-about-react-hoc

Follow me at Github - https://github.com/ManiruzzamanAkash