Bhavik Bhuva’s Tech Insights: Full Stack Development, Flutter Developer, and More

How to Add a Modal Button to Display Customer Images and Reasons in Laravel Bootstrap Tables

Bhavik Bhuva — Tue, 30 Sep 2025 03:12:52 GMT

In this tutorial, we'll implement a feature that allows administrators to view customer-uploaded images and reasons for return requests through a beautiful modal popup. This is perfect for e-commerce applications, support systems, or any application where customers submit requests with supporting images.

🎯 What We'll Build
- A third action button in a Bootstrap table
- A smooth modal popup displaying customer images in a gallery format
- Customer reasons displayed in a styled card
- Clickable images that open in full size
- Responsive design that works on all devices
- Proper error handling and loading states

📋 Prerequisites

Laravel 8+ application
Bootstrap Table implementation
SweetAlert2 for modals
Basic knowledge of PHP, JavaScript, and Laravel

🏗️ Project Structure

We'll work with these key files:

BootstrapTableService.php - For generating action buttons
OrderReturnRequestController.php - Backend logic
custom.js - Frontend JavaScript
list.blade.php - View file with styling
routes/web.php - API routes

Step 1: Database Model Setup

First, ensure your model has the necessary fields and accessors:

    
    // app/Models/OrderReturnRequest.php

    namespace App\\\\Models;

    use Illuminate\\\\Database\\\\Eloquent\\\\Model;
    use Illuminate\\\\Support\\\\Facades\\\\Storage;

    class OrderReturnRequest extends Model
    {
        protected $fillable = [
            'order_id',
            'order_item_id',
            'type',
            'reason',
            'customer_image',  // JSON array of image paths
            'admin_image',
            'status',
            'requested_at',
            'status_at',
            'admin_receipt',
            'admin_notes'
        ];

        protected $casts = [
            'customer_image' => 'array',  // Important: Cast to array
            'admin_image' => 'array',
            'requested_at' => 'datetime',
            'status_at' => 'datetime',
        ];

        // Accessor to return full URLs for customer images
        public function getCustomerImageAttribute($value)
        {
            if ($value) {
                $images = json_decode($value, true);
                if (is_array($images)) {
                    return array_map(function ($path) {
                        return url(Storage::url($path));
                    }, $images);
                }
            }
            return [];
        }

        public function order()
        {
            return $this->belongsTo(Order::class);
        }

        public function orderItem()
        {
            return $this->belongsTo(OrderItem::class);
        }
    }

Step 2: Create the Button Service Method

Add a new method to your BootstrapTableService to generate the view button:

    
    // app/Services/BootstrapTableService.php

    public static function orderReturnRequestViewButton($orderReturnRequestId, $permission = null)
    {
        $customClass = [
            "OrderReturnRequestViewDetails",
            "btn-outline-success",
            "btn-xs",
            "btn-rounded",
            "btn-icon"
        ];

        $customAttributes = [
            "title" => trans("View Images & Reason"),
            "data-id" => $orderReturnRequestId
        ];

        $iconClass = "fa fa-image";  // FontAwesome image icon
        return self::button($iconClass, "#", $customClass, $customAttributes, $permission);
    }

Key Points:

OrderReturnRequestViewDetails class for JavaScript event handling
btn-outline-success for green styling
fa fa-image icon to indicate image viewing functionality
data-id attribute to pass the request ID to JavaScript

Step 3: Update the Controller

Modify your controller to include the new button and create an API endpoint:

    
    // app/Http/Controllers/OrderReturnRequestController.php

    public function show()
    {
        try {
            // ... existing code for pagination and filtering ...

            $bulkData = [
                'total' => $total,
                'rows' => $rows->map(function ($row) {
                    // Generate action buttons
                    $operate = BootstrapTableService::orderReturnRequestStatusButton(
                        $row->id,
                        $row->status,
                        $row->admin_receipt,
                        $row->admin_image
                    );

                    // Add our new view button
                    $operate .= BootstrapTableService::orderReturnRequestViewButton($row->id);

                    // Add details button
                    $operate .= BootstrapTableService::detailsButton(
                        $row->order_id,
                        'order/details',
                        'order-view'
                    );

                    return [
                        'id' => $row->id,
                        'order_id' => $row->order_id,
                        'reason' => $row->reason,
                        'status' => ucfirst($row->status),
                        'status_badge' => $row->status,
                        'customer_image' => $row->customer_image, // Uses accessor
                        'operate' => $operate,
                        // ... other fields ...
                    ];
                })
            ];

            return response()->json($bulkData);
        } catch (\\\\Throwable $th) {
            $this->logError($th, 'show');
            return response()->json([
                'error' => true,
                'message' => trans('anErrorOccurred')
            ]);
        }
    }

    // New API endpoint to fetch return request details
    public function getReturnRequestDetails($id)
    {
        try {
            $returnRequest = OrderReturnRequest::findOrFail($id);

            return response()->json([
                'success' => true,
                'data' => [
                    'id' => $returnRequest->id,
                    'order_id' => $returnRequest->order_id,
                    'reason' => $returnRequest->reason,
                    'customer_image' => $returnRequest->customer_image, // Uses accessor
                    'status' => $returnRequest->status,
                    'requested_at' => $returnRequest->requested_at?->format('Y-m-d H:i:s'),
                ]
            ]);
        } catch (\\\\Throwable $th) {
            $this->logError($th, 'getReturnRequestDetails');
            return response()->json([
                'success' => false,
                'message' => trans('anErrorOccurred')
            ]);
        }
    }

Step 4: Add the Route

Add the new API route to your routes/web.php:

    
    // routes/web.php

    Route::group(['middleware' => ['auth']], function () {
        // ... existing routes ...

        Route::get('order-return-requests', [OrderReturnRequestController::class, 'index'])
            ->name('order-return-requests');
        Route::get('order-return-request-list', [OrderReturnRequestController::class, 'show'])
            ->name('order-return-request-list');
        Route::post('change-order-return-request-status', [OrderReturnRequestController::class, 'order_return_request_status_change'])
            ->name('change-order-return-request-status');

        // Our new route
        Route::get('get-return-request-details/{id}', [OrderReturnRequestController::class, 'getReturnRequestDetails'])
            ->name('get-return-request-details');
    });

Step 5: JavaScript Implementation

Add the JavaScript event handler to your custom.js file:

    // public/assets/js/custom/custom.js

    // Handle View Images & Reason button click for Order Return Requests
    $(document).on("click", ".OrderReturnRequestViewDetails", function () {
        var request_id = $(this).attr("data-id");

        // Fetch return request details via AJAX
        $.ajax({
            url: baseUrl + "/get-return-request-details/" + request_id,
            type: "GET",
            dataType: "json",
            success: function (response) {
                if (response.success) {
                    var data = response.data;
                    var imagesHtml = '';

                    // Build images gallery
                    if (data.customer_image && data.customer_image.length > 0) {
                        imagesHtml = '';

                        data.customer_image.forEach(function (imageUrl, index) {
                            imagesHtml += `
                                
                                    ${imageUrl}"
                                         alt="Customer Image ${index + 1}"
                                         style="width: 100%; height: 120px; object-fit: cover; border-radius: 8px; cursor: pointer; border: 2px solid #ddd;"
                                         onclick="window.open('${imageUrl}', '_blank')">
                                    
                                        Image ${index + 1}
                                    
                                
`;
                        });
                        imagesHtml += '
';
                    } else {
                        imagesHtml = 'No images uploaded by customer
';
                    }

                    // Show the modal with details
                    Swal.fire({
                        title: 'Return Request Details',
                        html: `
                            
                                
                                    
                                        Customer Reason
                                    
                                    
                                        
                                            ${data.reason || 'No reason provided'}
                                        
                                    
                                

                                
                                    
                                        Customer Images
                                    
                                    ${imagesHtml}
                                
                            
                        `,
                        width: '700px',
                        showConfirmButton: true,
                        confirmButtonText: 'Close',
                        confirmButtonColor: '#007bff',
                        customClass: {
                            popup: 'return-request-details-modal'
                        }
                    });
                } else {
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: response.message || 'Failed to fetch return request details'
                    });
                }
            },
            error: function (xhr) {
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: xhr.responseJSON?.message || 'An error occurred while fetching details'
                });
            }
        });
    });

Key JavaScript Features:

Event Delegation: Uses $(document).on() for dynamically loaded content
AJAX Request: Fetches data without page reload
Dynamic HTML Generation: Builds image gallery dynamically
Error Handling: Proper error messages for failed requests
Image Gallery: CSS Grid layout for responsive images
Click to View: Images open in new tab when clicked

Step 6: Add CSS Styling

Add these styles to your Blade view file:

    {{-- resources/views/order_return_request/list.blade.php --}}

    @section('style')
        "" rel="stylesheet">
        
    @endsection

Step 7: HTML Table Structure

Your Bootstrap table should include the actions column:

    {{-- resources/views/order_return_request/list.blade.php --}}

    "mydesc"class='table' id='table_list'
           data-toggle="table"
           data-url="{{ route('order-return-request-list') }}"
           data-click-to-select="true"
           data-side-pagination="server"
           data-pagination="true"
           data-page-list="[5, 10, 20, 50, 100, 200,All]"
           data-search="true"
           data-show-columns="true"
           data-show-refresh="true"
           data-sort-name="id"
           data-sort-order="desc"
           data-query-params="OrderReturnRequestQueryParams">
         
            
                " data-field="id" data-sortable="true" data-visible="false">
                    {{ __('id') }}
                
                " data-field="order_id" data-sortable="false">
                    {{ __('order_id') }}
                
                " data-field="reason" data-sortable="false">
                    {{ __('reason') }}
                
                " data-field="status_badge" data-sortable="false"
                    data-formatter="orderReturnRequestStatusFormatter" data-escape="false">
                    {{ __('status') }}
                
                false" scope="col" data-field="operate" data-sortable="false">
                    {{ __('actions') }}

🎨 UI/UX Features

Responsive Image Gallery

CSS Grid: Automatically adjusts columns based on screen size
Mobile Optimization: Smaller images on mobile devices
Hover Effects: Smooth animations when hovering over images

Structured Layout: Clear sections for reason and images
Color Coding: Blue for reason, green for images
Typography: Proper spacing and font sizes
Icons: FontAwesome icons for visual clarity

User Experience

Smooth Animations: No harsh popup transitions
Loading States: Button feedback during AJAX requests
Error Handling: User-friendly error messages
Accessibility: Proper alt texts and ARIA labels

🔧 Troubleshooting Common Issues

1. Images Not Loading

    // Check your storage configuration
    // config/filesystems.php
    'public' => [
        'driver' => 'local',
        'root' => storage_path('app/public'),
        'url' => env('APP_URL').'/storage',
        'visibility' => 'public',
    ],

2. AJAX 404 Errors

    // Make sure baseUrl is defined
    var baseUrl = "{{ url('/') }}";

    // Or use Laravel's route helper
    url: "{{ route('get-return-request-details', ':id') }}".replace(':id', request_id)

    // Ensure SweetAlert2 is loaded
    if (typeof Swal === 'undefined') {
        console.error('SweetAlert2 is not loaded');
    }

🚀 Advanced Enhancements

    // Add lightbox functionality
    imagesHtml += `${imageUrl}"
                   data-toggle="lightbox"
                   data-gallery="return-gallery">`;

2. Image Zoom

    .image-item img:hover {
        cursor: zoom-in;
    }

3. Loading Spinner

    beforeSend: function() {
        $('.OrderReturnRequestViewDetails[data-id="' + request_id + '"]')
            .html('');
    }

📝 Best Practices

Security: Always validate and sanitize user inputs
Performance: Use pagination for large image sets
Accessibility: Include proper alt texts and ARIA labels
Error Handling: Provide meaningful error messages
Mobile First: Design for mobile devices first
Caching: Consider caching frequently accessed data

🎯 Conclusion

You now have a complete implementation of a modal system for viewing customer images and reasons. This solution provides:

Professional UI: Clean, modern design that matches your application
Responsive Design: Works perfectly on all devices
Smooth Animations: No jarring transitions
Error Handling: Graceful error management
Scalable Architecture: Easy to extend and maintain

The implementation follows Laravel best practices and provides a solid foundation for similar features in your application.

📚 Additional Resources

Happy coding! 🚀

🚀 Fixing Java JDK Issues in Flutter & Android Studio on macOS (2025)

Bhavik Bhuva — Thu, 27 Mar 2025 11:04:10 GMT

🛑 Problem:

• Android Studio was not detecting the correct Java version.

• flutter doctor kept showing wrong Java version (JDK 21 instead of JDK 17).

• Creating a new Flutter project resulted in a Java project instead of Flutter.

• Setting Java manually in Android Studio via Choose Boot Java Runtime didn’t persist.

• Android Studio showed “Unable to find bundled Java version”.

✅ Step-by-Step Fix:

1️⃣ Set Flutter to Use the Correct JDK

Run this command in the terminal:

flutter config --jdk-dir="/Library/Java/JavaVirtualMachines/temurin-17.jdk/Contents/Home"

• This ensures Flutter uses JDK 17 instead of whatever Studio is forcing.

2️⃣ Restart Everything

• Close Android Studio completely.

• Restart your Mac to make sure the settings apply properly.

3️⃣ Verify the Fix

Run:

flutter doctor -v

Check for this output under Android toolchain:

Java binary at: /Library/Java/JavaVirtualMachines/temurin-17.jdk/Contents/Home/bin/java
Java version OpenJDK Runtime Environment Temurin-17.0.14+7

✅ If it shows this, you’re good! 🎉

🔄 Extra Fixes (If Issues Continue)

🔹 Reset Flutter & Android Studio Paths

flutter config --clear

Then reconfigure:

flutter config --jdk-dir="/Library/Java/JavaVirtualMachines/temurin-17.jdk/Contents/Home"

Restart Mac again.

🔹 Reinstall Flutter & Android Studio

• Uninstall and reinstall Flutter via Homebrew:

brew uninstall --cask flutter && brew install --cask flutter

brew uninstall --cask flutter && brew install --cask flutter

• Reinstall Android Studio

🔹 Ensure Plugins Are Installed

• Open Android Studio and install the Flutter & Dart plugins.

🎉 Conclusion

✅ After these steps, Flutter & Android Studio now work correctly with JDK 17. No more weird Java issues or accidental Java projects! 🚀

💡 Save this doc for the future! Never waste another whole day fixing this! 😭🔥

How to use effects from vanta js

Bhavik Bhuva — Mon, 10 Mar 2025 08:58:49 GMT

EXAMPLE:

Here we have used vanta dots in the main background and vanta trunk in in the image background.

cdns required


<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r134/three.min.js">script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/p5.min.js">script>
<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.trunk.min.js">script>

for ease and reuseability, i have created a hooks:

import { useState, useEffect } from 'react';
//@ts-ignore
import DOTS from 'vanta/src/vanta.dots';

const useVantaDots = (selector: string) => {
  const [dots, setDots] = useState(null);

  useEffect(() => {
    if (!dots) {
      setDots(
        DOTS({
          el: selector,
          mouseControls: true,
          touchControls: true,
          gyroControls: false,
          minHeight: 300.0,
          minWidth: 200.0,
          scale: 1.0,
          scaleMobile: 1.0,
          color: 0x64ffda,
          color2: 0x204aff,
          backgroundColor: 0x0a192f,
          size: 2.8,
          spacing: 20,
          showLines: false,
        })
      );
    }

    return () => {
      if (dots) {
        dots.destroy();
        setDots(null);
      }
    };
  }, []);

  return dots;
};

export default useVantaDots;

import { useState, useEffect } from 'react';
//@ts-ignore
import TRUNK from 'vanta/src/vanta.trunk';

const useVantaTrunk = (selector: string) => {
  const [trunk, setTrunk] = useState(null);

  useEffect(() => {
    if (!trunk) {
      setTrunk(
        TRUNK({
          el: selector,
          mouseControls: true,
          touchControls: true,
          gyroControls: false,
          minHeight: 200.0,
          minWidth: 200.0,
          scale: 1.0,
          scaleMobile: 1.0,
          color: 0x64ffda,
          backgroundColor: 0x112240,
          spacing: 0,
          chaos: 4.0,
        })
      );
    }

    return () => {
      if (trunk) {
        trunk.destroy();
        setTrunk(null);
      }
    };
  }, []);
// }, [trunk, selector]);

  return trunk;
};

export default useVantaTrunk;

import useVantaDots from '../hooks/useVantaDots';
import useVantaTrunk from '../hooks/useVantaTrunk';  useVantaDots("#bg");
    useVantaTrunk("#photo");

  useVantaDots("#bg");
  useVantaTrunk("#photo");

//provide the id as input

<div className="flex items-center" id='bg'>
div>



<div className='' id='photo'>
        <img className='' src="/assets/bhavikProfile.avif" alt="Bhavik Bhuva" />
        div>

Setting up your environment with Jest and React Testing Library, and configuring Babel and Parcel to work seamlessly together. 🧪

Bhavik Bhuva — Wed, 22 Jan 2025 06:43:24 GMT

Implementing a robust testing strategy is crucial for ensuring the reliability and maintainability of your React applications. This comprehensive guide will walk you through the various types of testing, setting up your environment with Jest and React Testing Library, and configuring Babel and Parcel to work seamlessly together.

Types of Testing in Development

Understanding the different levels of testing helps in identifying and resolving issues effectively:

• Unit Testing: Focuses on individual components or functions to ensure they work as intended in isolation.

• Integration Testing: Verifies that different modules or components interact correctly when combined.

• End-to-End (E2E) Testing: Simulates real user scenarios to test the entire application flow, from start to finish.

Setting Up Testing in Your React Application

To establish a testing environment in your React project, follow these steps:

1. Install React Testing Library: This library provides utilities to test React components in a way that resembles how users interact with your application.

npm install --save-dev @testing-library/react @testing-library/dom

2. Install Jest: Jest is a popular testing framework for JavaScript applications, offering a simple API and powerful features.

npm install --save-dev babel-jest @babel/core @babel/preset-env

3. Install Babel Dependencies: Babel is necessary to transpile modern JavaScript syntax for compatibility.

npm install --save-dev babel-jest @babel/core @babel/preset-env

4. Configure Babel: Create a babel.config.js file in the root of your project with the following content:

module.exports = {
  presets: [['@babel/preset-env', { targets: { node: 'current' } }]],
};

5. Configure Parcel: Parcel performs automatic Babel transpilation, which can conflict with your custom Babel configuration. To prevent this, create a .parcelrc file at the root of your project with the following content:

{
  "extends": "@parcel/config-default",
  "transformers": {
    "*.{js,mjs,jsx,cjs,ts,tsx}": [
      "@parcel/transformer-js",
      "@parcel/transformer-react-refresh-wrap"
    ]
  }
}

6. Initialize Jest Configuration: Run the following command to set up Jest:

npx jest --init

During the setup, you’ll be prompted with several questions. Here are the recommended responses:

• Would you like to use Typescript for the configuration file? No

• Choose the test environment that will be used for testing: jsdom (browser-like)

• Do you want Jest to add coverage reports? Yes

• Which provider should be used to instrument code for coverage? babel

• Automatically clear mock calls, instances, contexts and results before every test? Yes

7. Install jest-environment-jsdom: If you’re using Jest version 28 or later, you’ll need to install this package separately:

npm install --save-dev jest-environment-jsdom

Writing Your First Test

With the setup complete, you can write your first dummy test. Create a file named sum.js with the following content:

export const sum = (a,b) => {
    return a+b;
}

all set and now lets check how to write testcases for react.

To enhance your React application’s testing setup, it’s essential to configure Babel to handle JSX syntax and install additional testing utilities. Here’s how you can proceed:

1. Install @babel/preset-react: This preset allows Babel to transpile JSX syntax.

npm install --save-dev @babel/preset-react

2. Update Babel Configuration: Modify your babel.config.js to include @babel/preset-react:

module.exports = {
  presets: [
    ['@babel/preset-env', { targets: { node: 'current' } }],
    ['@babel/preset-react', { runtime: 'automatic' }],
  ],
};

3. Install @testing-library/jest-dom: This library provides custom matchers for Jest, enhancing the readability and maintainability of your tests.

npm install --save-dev @testing-library/jest-dom

4. Import @testing-library/jest-dom in Your Test Files: To utilize the custom matchers, import the library at the top of your test files:

import '@testing-library/jest-dom';

5. Example Test Case: Here’s how you can write a test for a Contact component:

import React from 'react';
import { render, screen } from '@testing-library/react';
import Contact from '../../Contact';
import '@testing-library/jest-dom';

test('Should load Contact Us component', () => {
  render(<Contact />);
  const heading = screen.getByRole('heading');
  expect(heading).toBeInTheDocument();
});

By following these steps, you ensure that your testing environment is well-configured to handle React components effectively, leading to more reliable and maintainable tests.

Detailed Example:

import { render,screen} from "@testing-library/react"
import Contact from "../../Contact"
import "@testing-library/jest-dom"

// describe is just for grouping like div to maintain and ease

describe("Contact us page test cases",()=>{

    // test can also be written as "it"

it("Should load contact us component",() => {
 render(<Contact/>)
const heading =  screen.getByRole("heading")
expect(heading).toBeInTheDocument();
})

test("Should load button  component",() => {
    render(<Contact />)
//    const button =  screen.getByRole("button")
   const button =  screen.getByText("Message")
   expect(button).toBeInTheDocument(); 
   })

test("should load 2 input boxes",()=>{
     render(<Contact/>)
     // Querying
     const inputBoxes = screen.getAllByRole("textbox") // for multiple items

     // Assertion
     expect(inputBoxes.length).toBe(3)
    //  expect(inputBoxes.length).not.toBe(3)
}) 


})

How to Use React Router DOM: A Comprehensive Guide

Bhavik Bhuva — Mon, 20 Jan 2025 02:15:56 GMT

React Router DOM is a powerful library for creating dynamic and seamless navigation in React applications. Whether you’re building a single-page application (SPA) or a more complex multi-page app, React Router DOM provides the tools you need to manage routes effortlessly. This guide will walk you through the basics of React Router DOM, including its installation, setup, and usage.

What is React Router DOM?

React Router DOM is a client-side routing library for React. It allows developers to implement navigation between views (or “pages”) without requiring a page reload. This makes for a smoother and faster user experience.

Installation

To get started with React Router DOM, you first need to install it in your project. Run the following command in your terminal:

npm install react-router-dom

Make sure you also have React and ReactDOM installed as prerequisites.

Basic Concepts

1. Router: The base component that enables routing.

2. Route: Defines a mapping between a URL and a component.

3. Link: Used for navigation between routes.

4. Switch: Renders the first matching route.

5. useNavigate and useParams: Hooks for programmatic navigation and extracting route parameters.

Setting Up React Router

Here’s an example to demonstrate the basic setup:

1. Create a React Project

If you don’t have a project already, create one using:

npx create-react-app my-app
cd my-app

2. Setup Routing

Edit the App.js file to include a basic routing structure.

import React from "react";
import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";

const Home = () => <h1>Home Pageh1>;
const About = () => <h1>About Pageh1>;
const Contact = () => <h1>Contact Pageh1>;

function App() {
  return (
    <Router>
      <nav>
        <ul>
          <li>
            <Link to="/">HomeLink>
          li>
          <li>
            <Link to="/about">AboutLink>
          li>
          <li>
            <Link to="/contact">ContactLink>
          li>
        ul>
      nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
      Routes>
    Router>
  );
}

export default App;

Understanding the Code

1. BrowserRouter (Router): Wraps the application and enables routing.

2. Routes: Groups all Route components.

3. Route: Maps a path (e.g., /about) to a React component (e.g., ).

4. Link: Renders navigation links without reloading the page.

Dynamic Routing

React Router DOM also supports dynamic routing using parameters. Here’s an example:

import React from "react";
import { BrowserRouter as Router, Routes, Route, useParams } from "react-router-dom";

const User = () => {
  const { id } = useParams();
  return <h1>User ID: {id}h1>;
};

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/user/:id" element={<User />} />
      Routes>
    Router>
  );
}

export default App;

If you navigate to /user/42, the output will display: User ID: 42.

Navigating Programmatically

For programmatic navigation, use the useNavigate hook:

import React from "react";
import { useNavigate } from "react-router-dom";

const Dashboard = () => {
  const navigate = useNavigate();

  return (
    <div>
      <h1>Dashboardh1>
      <button onClick={() => navigate("/about")}>Go to Aboutbutton>
    div>
  );
};

export default Dashboard;

Clicking the button will redirect the user to the /about route.

Error Handling with Route

You can create a “404 Not Found” page by adding a catch-all route at the end:

"*" element={<h1>404 - Not Foundh1>} />

Conclusion

React Router DOM simplifies navigation and routing in React applications. With its rich API and ease of use, you can build dynamic, multi-page apps that feel like SPAs. Start with the basics, explore hooks like useNavigate and useParams, and create seamless navigation experiences for your users.

Happy coding! 🎉

Bhavik Bhuva

ways to create a react app.

Bhavik Bhuva — Thu, 21 Nov 2024 04:54:05 GMT

// METHOD 1
npx create-react-app 01basicreact

// METHOD 2
npm create vite@latest

then provide project name: 01_basicvite
then choose REACT
then JAVASCRIPT

here npm is not installed by default: we need to run
-npm install


HOW TO RUN ?
goto folder -> cd 01basicreact
 => you must see package.json there. if you can see it->
npm run start


to run vite project:
goto vite folder via cd
then
npm run dev

if error comes: check node modules available/not in folder -> if not?
first run
.. npm install


METHOD 3 @USING PARSER

-> npm init
-> npm install -D parcel
-> npm install react
-> npm i react-dom //or npm install react-dom
-> npx parcel index.html // provide starting point


-> import this and good to go..with react
import React from "react";
import ReactDOM from "react-dom/client";

-> to build production build
npx parcel build index.html

add

  "scripts": {
    "start":"parcel index.html", 
    "build":"parcel build index.html",
    "test": "jest"
  },

    "start":"parcel index.html", 
    "build":"parcel build index.html",
adding this script in package.json makes our life easier.
now we can run the app easily like..

- npm run start or npm start
npm run build

How to use emailJS in few simple steps.

Bhavik Bhuva — Sat, 16 Nov 2024 14:16:01 GMT

Introduction

EmailJS: A Comprehensive Guide to Integrating Email Services in Web Applications

Introduction

In today's digital age, email remains a fundamental communication channel. For web applications, seamlessly integrating email functionalities can significantly enhance user experience and engagement. EmailJS, a powerful JavaScript library, simplifies this process by providing a robust API to send emails directly from your web applications.

Why EmailJS?

EmailJS offers a user-friendly solution to integrate email services into your web applications. By abstracting the complexities of email protocols and server configurations, it allows you to focus on building the core functionality of your application.

Setting Up EmailJS

1. Create an Account

Visit the EmailJS website and sign up for a free account.
Once registered, you'll gain access to your dashboard.

2. Configure Email Services

Select an Email Provider: EmailJS supports popular providers like Gmail, Outlook, SendGrid, and more.
Connect Your Account: Follow the specific instructions for your chosen provider to authorize EmailJS to send emails on your behalf.

3. Create an Email Template

Define Structure: Use HTML and CSS to design your email template.
Customize Content: Add dynamic placeholders to personalize emails based on user data.

Integrating EmailJS with Your Application

1. Install EmailJS

For JavaScript/Node.js: Bash
```
  npm install emailjs-com
```
2. Configure Client-Side Code


<script>
  emailjs.init("YOUR_USER_ID");

  function sendEmail() {
    emailjs.sendForm('YOUR_SERVICE_ID', 'YOUR_TEMPLATE_ID', '#your-form')
      .then((result) => {
          console.log(result.text);
          alert('Email sent successfully!');
      }, (error) => {
          console.error(error);
          alert('Email failed to send. Please try again.');
      });
  }
script>

Use code with caution.

Replace YOUR_USER_ID, YOUR_SERVICE_ID, and YOUR_TEMPLATE_ID with your actual EmailJS credentials.
The #your-form selector should point to the ID of your HTML form.

Testing Your Setup

Send a Test Email: Use your integrated form to send a test email to yourself.
Verify Delivery: Check your inbox for the email and ensure it matches your template.

Advanced Features and Customization

Dynamic Templates: Use placeholders to insert variable data into your email content.
Additional Services: Integrate with other services like Google Calendar or Stripe to enhance your email functionalities.
Security: Protect your API keys and credentials to prevent unauthorized access.

Troubleshooting Common Issues

Incorrect API Keys: Double-check your user ID, service ID, and template ID.
Network Errors: Ensure your application has a stable internet connection.
Email Provider Limits: Verify that your email provider hasn't imposed any sending limits.