Forem: Sudhanshu Gaikwad

How to Add Clerk Login & Logout Authentication in React.js Web Application

Sudhanshu Gaikwad — Sat, 30 Aug 2025 06:30:00 +0000

Authentication is one of the most essential parts of any modern web application. Instead of building everything from scratch, we can use Clerk, a developer-friendly authentication and user management solution, to add secure and scalable login to a React.js app.

Why Clerk?

Easy-to-use authentication flows (email, social logins, etc.)
Pre-built UI components for login, sign-up, and user profiles
Secure session management and JWT support
Scalable and customizable for your app’s needs

Method 1: Full Routing & Protected Pages Setup

Step-by-Step Guide to Adding Clerk Authentication

1. Set Up Your Clerk Account

Head to Clerk’s website and sign up for a free account.

Create a new application in the Clerk dashboard and grab your Publishable Key and Secret Key.

2. Install Clerk in Your React Project

Assuming you have a React.js app set up (if not, use npx create-react-app my-app), install the Clerk SDK:

npm install @clerk/clerk-react

3. Configure Clerk in Your App

Wrap your app with the ClerkProvider component to enable Clerk’s functionality. In your index.js or App.js:

import { ClerkProvider } from '@clerk/clerk-react';  
import { BrowserRouter } from 'react-router-dom';  

const clerkPubKey = 'YOUR_PUBLISHABLE_KEY'; // Replace with your Clerk Publishable Key  

function App() {  
  return (  
    <ClerkProvider publishableKey={clerkPubKey}>  
      <BrowserRouter>  
        {/* Your app components go here */}  
      </BrowserRouter>  
    </ClerkProvider>  
  );  
}  

export default App;

4. Add Clerk’s Pre-Built Components

Clerk provides ready-to-use components like SignIn and SignUp. Add a login page to your app:

// src/pages/Login.js  
import { SignIn } from '@clerk/clerk-react';  

function Login() {  
  return (  
    <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh' }}>  
      <SignIn />  
    </div>  
  );  
}  

export default Login;

Add this to your routes (e.g., using react-router-dom):

import { Routes, Route } from 'react-router-dom';  
import Login from './pages/Login';  

function App() {  
  return (  
    <ClerkProvider publishableKey={clerkPubKey}>  
      <BrowserRouter>  
        <Routes>  
          <Route path="/login" element={<Login />} />  
          {/* Other routes */}  
        </Routes>  
      </BrowserRouter>  
    </ClerkProvider>  
  );  
}

5. Protect Routes with Clerk

To restrict access to authenticated users only, use Clerk’s SignedIn and SignedOut components or the useAuth hook. Example:

import { SignedIn, SignedOut, RedirectToSignIn, UserButton } from '@clerk/clerk-react';  

function Dashboard() {  
  return (  
    <div>  
      <SignedIn>  
        <h1>Welcome to the Dashboard!</h1>  
        <UserButton /> {/* Displays user profile and sign-out option */}  
      </SignedIn>  
      <SignedOut>  
        <RedirectToSignIn /> {/* Redirects to login if not signed in */}  
      </SignedOut>  
    </div>  
  );  
}  

export default Dashboard;

6. Customize the Look and Feel

Clerk’s components are customizable via their dashboard or by overriding CSS. You can also use the appearance prop to style components:

<SignIn  
  appearance={{  
    elements: {  
      formButtonPrimary: 'bg-blue-500 hover:bg-blue-600 text-white',  
    },  
  }}  
/>

7. Test Your Authentication Flow

Run your app (npm start).
Navigate to /login to see the Clerk login UI.
Test signing up, logging in, and accessing protected routes.

Bonus: Accessing User Data

Use Clerk’s useUser hook to access the authenticated user’s info:

import { useUser } from '@clerk/clerk-react';  

function Profile() {  
  const { user } = useUser();  

  if (!user) return <div>Loading...</div>;  

  return <div>Welcome, {user.firstName}!</div>;  
}

Method 2: Minimal Setup with SignIn/SignUp

Authentication is one of the most essential parts of any modern app. Instead of building everything manually, Clerk gives us:

Pre-built sign-in/sign-up components
Support for Google, GitHub & other providers
Simple React hooks & APIs

Step 1: Create React App

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

Step 2: Install Clerk

npm install @clerk/clerk-react

Step 3: Wrap with ClerkProvider

import React from "react";
import ReactDOM from "react-dom";
import { ClerkProvider } from "@clerk/clerk-react";
import App from "./App";

const clerkFrontendApi = "YOUR_FRONTEND_API_KEY";

ReactDOM.render(
  <ClerkProvider publishableKey={clerkFrontendApi}>
    <App />
  </ClerkProvider>,
  document.getElementById("root")
);

Step 4: Add Authentication Components

import { SignIn, SignUp, UserButton, useUser } from "@clerk/clerk-react";

function App() {
  const { isSignedIn } = useUser();

  return (
    <div>
      {!isSignedIn ? (
        <>
          <h2>Welcome! Please Sign In</h2>
          <SignIn />
          <SignUp />
        </>
      ) : (
        <>
          <h2>Dashboard</h2>
          <UserButton />
        </>
      )}
    </div>
  );
}

export default App;

Step 5: Run Your App

npm start

You now have a working React app with Clerk authentication 🎉

Next Steps

Add protected routes with SignedIn and SignedOut.
Explore OAuth (Google, GitHub, etc.).
Build a custom Profile Page using useUser.

Resources

Conclusion

Clerk makes authentication in React apps simple, secure, and production-ready without the headache of managing sessions and tokens manually. If you’re building a React.js project, Clerk is worth trying out for fast authentication setup.

Free APIs for Developers Learn, Experiment & Create Effortlessly

Sudhanshu Gaikwad — Sun, 24 Aug 2025 17:40:11 +0000

APIs are the secret sauce of modern applications. Whether you’re building a web app, a mobile app, or a SaaS product, APIs help you fetch data, integrate services, and scale faster.

But most APIs require API keys or subscriptions, which can feel like a roadblock for students, beginners, or indie developers.

This is where API Key Free APIs come to the rescue. These APIs let you experiment, learn, and prototype without signup, credit cards, or complicated authentication.

Why Use Free APIs Without Keys?

No Setup Overhead: Call them directly from your frontend or backend without registration.
Cost-Free: Unlimited usage in most cases (check rate limits).
Project-Friendly: Ideal for React apps, as you can fetch data client-side without CORS issues (many support JSONP or have open CORS).

Benefits of API Key Free APIs

Faster Prototyping – Build and test quickly

🧑‍💻 Perfect for Beginners – Learn API integration without complexity
💸 Completely Free – No credit card or paid plan needed
🌍 Community Driven – Open-source and educational APIs
⚡ Hackathon Friendly – Save time in competitions

Top 10 Free APIs Without API Keys

Here’s a curated list of useful, fun, and beginner-friendly APIs that work without authentication:

1 JSONPlaceholder – Fake REST API Realistic E-Commerce Data

https://jsonplaceholder.typicode.com/posts

2 Reqres – Test REST APIs for front-end developers

https://reqres.in/api/users

3 Dog CEO API – Random dog images

https://dog.ceo/api/breeds/image/random

4 PokeAPI – Pokémon database

https://pokeapi.co/api/v2/pokemon/pikachu

5 The Cat API – Random cat images

https://api.thecatapi.com/v1/images/search

6 Open-Meteo API – Free weather forecast API

https://api.open-meteo.com/v1/forecast?latitude=35&longitude=139&hourly=temperature_2m

7 Public APIs Project – Directory of 1000+ APIs

https://api.publicapis.org/entries

8 Bored API – Get activity ideas

https://www.boredapi.com/api/activity

9 Advice Slip API – Random advice

https://api.adviceslip.com/advice

10 University API – Global universities list

http://universities.hipolabs.com/search?country=India

https://github.com/Hipo/university-domains-list

1 Example

Here’s a quick JavaScript example using the Fake REST API:

Output :

{
  "message": "https://fakestoreapi.com/img/81fPKd-2AYL._AC_SL1500_t.png",
  "status": "success"
}

2 Example

Here’s a quick React JS example using the Fake REST API:

Resources:

Conclusion

Free APIs without keys are perfect for learning, testing, and prototyping without barriers. They let you build faster, experiment freely, and focus on creating. Try one today and share your favorite free API with the community!

How to Use GenKit in Your React.js Project

Sudhanshu Gaikwad — Sat, 16 Aug 2025 06:30:00 +0000

If you’ve been exploring AI-powered applications in React, you might have come across GenKit — an AI toolkit that helps you build intelligent features like chatbots, text generation, and more.

In this post, we’ll learn how to integrate GenKit into a React.js app with a simple example:
An AI-powered text generator.

Step 1 — Install GenKit

First, make sure you have a React project ready.
If not, create one:

npx create-react-app genkit-demo
cd genkit-demo

Now install GenKit:

npm install @genkit-ai/core @genkit-ai/llm

Step 2 — Set up GenKit in Your Project

We’ll create a simple function to call GenKit’s text generation API.

// src/genkit.js
import { Genkit, LLM } from "@genkit-ai/core";
import { OpenAI } from "@genkit-ai/llm-openai"; // Example provider

// Initialize GenKit
const genkit = new Genkit({
  llm: new OpenAI({
    apiKey: process.env.REACT_APP_OPENAI_KEY, // Store securely in .env
  }),
});

export async function generateText(prompt) {
  const result = await genkit.llm.generate({
    prompt: prompt,
    maxTokens: 100,
  });

  return result.outputText;
}

Step 3 — Create a Simple React UI

// src/App.js
import React, { useState } from "react";
import { generateText } from "./genkit";

function App() {
  const [prompt, setPrompt] = useState("");
  const [output, setOutput] = useState("");

  const handleGenerate = async () => {
    const text = await generateText(prompt);
    setOutput(text);
  };

  return (
    <div style={{ padding: "20px" }}>
      <h2>🧠 GenKit AI Text Generator</h2>
      <textarea
        rows="4"
        cols="50"
        placeholder="Enter your prompt..."
        value={prompt}
        onChange={(e) => setPrompt(e.target.value)}
      />
      <br />
      <button onClick={handleGenerate}>Generate</button>
      <div style={{ marginTop: "20px", padding: "10px", border: "1px solid gray" }}>
        <strong>Output:</strong>
        <p>{output}</p>
      </div>
    </div>
  );
}

export default App;

Step 4 — Store Your API Key Securely

In .env:

REACT_APP_OPENAI_KEY=your_openai_api_key

Then restart your app:

npm start

Tips

You can swap the LLM provider (e.g., Anthropic, Gemini) easily.
GenKit can also do streaming outputs, chat sessions, embeddings, and tool integration.
Always keep your API key secure (never commit .env to GitHub).

Conclusion

GenKit makes adding AI features to React super easy. With just a few lines of code, you can bring natural language capabilities to your project.

Top 10 JavaScript Libraries and Tools You Can’t Ignore in 2025

Sudhanshu Gaikwad — Fri, 01 Aug 2025 14:30:00 +0000

JavaScript continues to dominate web development in 2025, powering dynamic, scalable, and interactive applications. With an ever-evolving ecosystem, developers need tools and libraries that streamline workflows, enhance code quality, and boost performance. This article highlights 10 must-know JavaScript libraries and tools—Lodash, Axios, Day.js, D3.js, Zustand, Vite, ESLint, Prettier, Chart.js, and React Hook Form—that are essential for building modern apps. We’ll explore their features, use cases, and provide practical examples using the JSONPlaceholder API (https://jsonplaceholder.typicode.com) to demonstrate their power. These tools are popular because they save time, reduce complexity, and help developers build robust, scalable applications.

1. Lodash

What It Is: A utility library offering over 300 functions for manipulating arrays, objects, strings, and more, with a focus on functional programming.
Why It’s Essential: Despite ES6+ advancements, Lodash offers concise and optimised utilities for complex tasks, although selective imports are recommended to minimise bundle size.
Use Case: Simplifying data transformations in data-heavy apps.

Example: Filtering and mapping posts from JSONPlaceholder:

import _ from 'lodash';

async function fetchAndProcessPosts() {
  const response = await fetch('https://jsonplaceholder.typicode.com/posts');
  const posts = await response.json();
  const filteredPosts = _.filter(posts, post => post.userId === 1);
  const titles = _.map(filteredPosts, 'title');
  console.log('Titles:', titles.slice(0, 2));
}

fetchAndProcessPosts();

Why Use It: Lodash’s_.filter and _.map simplify array operations, though ES6 equivalents (filter, map) are viable for basic tasks. Use modular imports (e.g., import filter from 'lodash/filter') to keep bundles lean.

2. Axios

What It Is: A promise-based HTTP client for making API requests, supporting both browser and Node.js environments.
Why It’s Essential: Axios simplifies HTTP requests with features like interceptors, automatic JSON parsing, and request cancellation. While the native Fetch API has improved, Axios remains a favorite for its clean syntax and robust error handling.
Use Case: Fetching data from APIs in frontend or backend apps.

Example: Fetching a post and its comments from JSONPlaceholder:

import axios from 'axios';

async function fetchPostAndComments(postId) {
  try {
    const post = await axios.get(`https://jsonplaceholder.typicode.com/posts/${postId}`);
    const comments = await axios.get(`https://jsonplaceholder.typicode.com/posts/${postId}/comments`);
    console.log('Post:', post.data);
    console.log('Comments:', comments.data.slice(0, 2));
  } catch (error) {
    console.error('Error:', error.response?.data || error.message);
  }
}

fetchPostAndComments(1);

Why Use It: Axios’s clean API and error handling make it ideal for complex API interactions, though Fetch is sufficient for simpler cases.

3. Day.js

What It Is: A lightweight (2KB) library for parsing, manipulating, and formatting dates, a modern alternative to Moment.js.
Why It’s Essential: Day.js offers a familiar API with better performance and a smaller footprint, perfect for handling dates in modern apps.
Use Case: Formatting and manipulating dates in user interfaces.

Example: Formatting a post’s creation date (mocked for JSONPlaceholder):

import dayjs from 'dayjs';

async function fetchPostWithDate(postId) {
  const response = await fetch(`https://jsonplaceholder.typicode.com/posts/${postId}`);
  const post = await response.json();
  const mockDate = new Date(2025, 0, 1); // Mock post creation date
  const formattedDate = dayjs(mockDate).format('MMMM D, YYYY');
  console.log('Post:', post.title);
  console.log('Created:', formattedDate);
}

fetchPostWithDate(1);

Why Use It: Day.js is fast, lightweight, and supports plugins for advanced features like relative time (fromNow). It’s a safer bet than Moment.js, which is in maintenance mode.

4. D3.js

What It Is: A powerful library for creating data-driven visualizations using HTML, SVG, and Canvas.
Why It’s Essential: D3.js enables highly customizable, interactive charts and dashboards, making it the go-to for data visualization in 2025.
Use Case: Building interactive data dashboards or charts.

Example: Creating a simple bar chart with JSONPlaceholder data:

import * as d3 from 'd3';

async function renderPostLengths() {
  const response = await fetch('https://jsonplaceholder.typicode.com/posts');
  const posts = await response.json();
  const data = posts.slice(0, 5).map(post => ({ id: post.id, length: post.body.length }));

  const svg = d3.select('body').append('svg').attr('width', 400).attr('height', 200);
  svg.selectAll('rect')
    .data(data)
    .enter()
    .append('rect')
    .attr('x', (d, i) => i * 80)
    .attr('y', d => 200 - d.length)
    .attr('width', 70)
    .attr('height', d => d.length)
    .attr('fill', 'steelblue');
}

renderPostLengths();

Why Use It: D3.js’s flexibility and data-binding capabilities make it unmatched for complex visualizations, though it has a steeper learning curve.

5. Zustand

What It Is: A lightweight state management library for React, using simplified flux principles.
Why It’s Essential: Zustand offers a minimal API for managing global and local state, making it ideal for React apps without the boilerplate of Redux.
Use Case: Managing state in React applications.

Example: Managing a post list state with JSONPlaceholder:

import create from 'zustand';

const usePostStore = create(set => ({
  posts: [],
  fetchPosts: async () => {
    const response = await fetch('https://jsonplaceholder.typicode.com/posts');
    const posts = await response.json();
    set({ posts: posts.slice(0, 5) });
  }
}));

function PostList() {
  const { posts, fetchPosts } = usePostStore();
  return (
    <div>
      <button onClick={fetchPosts}>Fetch Posts</button>
      <ul>
        {posts.map(post => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
}

Why Use It: Zustand’s simplicity and performance make it a top choice for React state management, especially for small to medium-sized apps.

6. Vite

What It Is: A modern build tool and development server focused on speed and simplicity, supporting frameworks like React and Vue.
Why It’s Essential: Vite’s fast hot module replacement (HMR) and ES module-based bundling make it a favorite over Webpack for many projects in 2025.
Use Case: Building and bundling modern web apps.

Example Setup (vite.config.js):

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  server: {
    port: 3000
  }
});

Why Use It: Vite’s performance and ease of use make it ideal for single-page applications (SPAs) and rapid development. Companies like OpenAI and Google have adopted it for its speed.

7. ESLint

What It Is: A static code analysis tool for identifying and fixing JavaScript code issues.
Why It’s Essential: ESLint enforces coding standards, catches errors early, and integrates with IDEs for real-time feedback.
Use Case: Maintaining clean, consistent codebases.

Example Configuration (.eslintrc.json):

{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended"
  ],
  "parserOptions": {
    "ecmaVersion": 12,
    "sourceType": "module"
  },
  "rules": {
    "no-console": "warn"
  }
}

Why Use It: ESLint ensures code quality and prevents bugs, especially in team projects. Pair it with popular style guides like Airbnb’s.

8. Prettier

What It Is: An opinionated code formatter for JavaScript, CSS, and HT**ML, ensuring consistent code style.
**Why It’s Essential: Prettier automates formatting, saving time and reducing style debates in teams.
Use Case: Enforcing uniform code formatting.

Example Configuration (.prettierrc):

{
  "semi": true,
  "trailingComma": "es5",
  "singleQuote": true,
  "printWidth": 80
}

Why Use It: Prettier integrates with ESLint and IDEs, formatting code on save for a polished codebase.

9. Chart.js

What It Is: A simple, responsive library for creating interactive charts and graphs.
Why It’s Essential: Chart.js is lightweight and easy to use, making it ideal for quick data visualizations without D3.js’s complexity.
Use Case: Adding charts to dashboards or reports.

Example: Plotting post counts by user from JSONPlaceholder:

import Chart from 'chart.js/auto';

async function renderUserPostChart() {
  const response = await fetch('https://jsonplaceholder.typicode.com/posts');
  const posts = await response.json();
  const userCounts = posts.reduce((acc, post) => {
    acc[post.userId] = (acc[post.userId] || 0) + 1;
    return acc;
  }, {});
  const labels = Object.keys(userCounts);
  const data = Object.values(userCounts);

  new Chart(document.getElementById('chart'), {
    type: 'bar',
    data: {
      labels,
      datasets: [{ label: 'Posts per User', data, backgroundColor: 'rgba(75, 192, 192, 0.2)' }]
    }
  });
}

renderUserPostChart();

Why Use It: Chart.js is perfect for simple, attractive charts with minimal setup.

10. React Hook Form

What It Is: A performant, flexible library for managing forms in React with minimal re-renders.
Why It’s Essential: React Hook Form simplifies form validation and state management, outperforming alternatives like Formik in 2025.
Use Case: Building complex forms in React apps.

Example: Creating a form to submit a new post to JSONPlaceholder:

import { useForm } from 'react-hook-form';

function PostForm() {
  const { register, handleSubmit, formState: { errors } } = useForm();

  const onSubmit = async data => {
    try {
      const response = await fetch('https://jsonplaceholder.typicode.com/posts', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(data)
      });
      const result = await response.json();
      console.log('Posted:', result);
    } catch (error) {
      console.error('Error:', error);
    }
  };

  return (
    <form onClick={handleSubmit(onSubmit)}>
      <input {...register('title', { required: 'Title is required' })} placeholder="Title" />
      {errors.title && <p>{errors.title.message}</p>}
      <textarea {...register('body')} placeholder="Body"></textarea>
      <button type="submit">Submit</button>
    </form>
  );
}

Why Use It: React Hook Form’s hook-based API and validation (e.g., with Zod) make it ideal for efficient form handling in React.

Why These Tools Matter in 2025

These libraries and tools address key developer needs:

Efficiency: Lodash, Axios, and Day.js simplify common tasks.
Scalability: Zustand and React Hook Form streamline state and form management in large apps.
Quality: ESLint and Prettier ensure clean, maintainable code.
Performance: Vite’s fast builds and D3.js/Chart.js’s optimized visualizations boost app speed.
User Experience: Interactive visualizations (D3.js, Chart.js) and forms (React Hook Form) enhance UI.

Tips for Using These Tools

Optimize Bundles: Use modular imports for Lodash and tree-shakeable libraries to reduce bundle size.
Stay Updated: Follow tools’ GitHub repos or newsletters (e.g., JavaScript Weekly) for updates.
Combine Wisely: Pair ESLint with Prettier for code quality, and use Vite for fast development.
Test Thoroughly: Test API integrations (Axios, React Hook Form) with JSONPlaceholder to simulate real-world scenarios.

Conclusion
In 2025, mastering these 10 JavaScript libraries and tools—Lodash, Axios, Day.js, D3.js, Zustand, Vite, ESLint, Prettier, Chart.js, and React Hook Form—will empower you to build faster, cleaner, and more scalable web apps. Experiment with the JSONPlaceholder examples, integrate these tools into your projects, and watch your productivity soar. Stay ahead in the JavaScript ecosystem by leveraging these powerful, developer-friendly solutions!

How to Use Shadcn UI in Your React + Vite Project

Sudhanshu Gaikwad — Fri, 04 Jul 2025 06:30:00 +0000

Shadcn UI is a modern React + Tailwind component library that gives you full control by letting you copy and customize components directly. This guide shows how to integrate Shadcn UI into a React.js project using Vite for a fast and efficient setup.

Step 1: Create a New Vite + React Project

npm create vite@latest my-shadcn-app -- --template react
cd my-shadcn-app
npm install

This sets up a Vite project with the React template (JavaScript). If you prefer TypeScript, replace react with react-ts in the template flag.

Step 2: Install and Configure Tailwind CSS

Shadcn UI relies on Tailwind CSS for styling. Install Tailwind CSS and its dependencies:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

This creates two configuration files: tailwind.config.js and postcss.config.js. Update tailwind.config.js to include the paths for your project files:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

Next, update src/index.css to include Tailwind's directives. Replace its content with:

@import "tailwindcss";

Step 3: Configure Vite for Path Aliases

To simplify imports, configure Vite to use the @ alias for the src directory. Update vite.config.js:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import path from 'path';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
});

Install @types/node to avoid errors with the path module:

npm install -D @types/node

For JavaScript projects, create a jsconfig.json file in the root directory to enable path alias support in your IDE:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

Step 4: Initialize Shadcn UI

Install the Shadcn UI CLI and initialize it in your project:

npx shadcn@latest init

Follow the prompts to configure components.json. A typical configuration might look like this:

Would you like to use TypeScript? No (for JavaScript projects)
Which style would you like to use? New York
Which color would you like to use as base color? Zinc
Where is your global CSS file? src/index.css
Where is your tailwind.config.js located? tailwind.config.js
Configure the import alias for components: @/components
Configure the import alias for utils: @/lib/utils
Are you using React Server Components? No
Do you want to use CSS variables for colors? Yes

This creates a components.json file and sets up the necessary dependencies, including tailwindcss-animate, class-variance-authority, clsx, tailwind-merge, and lucide-react.

Step 5: Add a Shadcn UI Component

To test the setup, add a Button component using the Shadcn CLI:

npx shadcn@latest add button

This creates a src/components/ui/button.jsx file. You can now use the Button component in your application.
For example, update src/App.jsx:

import { Button } from '@/components/ui/button';

function App() {
  return (
    <div className="flex flex-col justify-center items-center gap-4 min-h-screen">
      <h1 className="text-3-5xl font-bold">Vite + React + Shadcn UI</h1>
      <Button>Primary Button</Button>
      <Button variant="outline">Outline Button</Button>
      <Button variant="destructive">Destructive Button</Button>
    </div>
  );
}

export default App;

Simple Shadcn UI Landing Page

Folder structure of Project

Shadcn UI Landing Page

Project Code

GitHub Link : Simple Shadcn UI Project

Conclusion

Integrating Shadcn UI with React and Vite provides a powerful, flexible, and modern setup for building web applications. By leveraging Vite's speed, Tailwind's utility-first styling, and Shadcn UI's customizable components, developers can create professional-grade UIs with ease. This guide walked you through the setup process, from initializing a Vite project to adding dark mode support. Now, you're ready to build stunning, responsive applications!

10 Useful JavaScript Utility Functions Every Developer Should Know

Sudhanshu Gaikwad — Fri, 06 Jun 2025 14:30:00 +0000

JavaScript is a versatile language, and having a set of reliable utility functions can significantly enhance development efficiency. These functions simplify common tasks, improve code readability, and reduce errors. Below, we explore ten essential JavaScript utility functions that every developer should have in their toolkit, complete with explanations and practical examples.

1.Deep Clone an Object

Creating a deep copy of an object ensures that nested objects or arrays are fully copied, preventing unintended mutations of the original data.


function deepClone(obj) {
  return JSON.parse(JSON.stringify(obj));
}

Example:

const original = { a: 1, b: { c: 2 } };
const copy = deepClone(original);
copy.b.c = 99; // original remains unchanged

2.Format Numbers with Commas

Formatting numbers for display, such as adding commas for thousands or fixing decimal places, enhances user experience.

function formatNumber(n) {
  return n.toLocaleString();
}

Example:

formatNumber(1000000); // "1,000,000"

3.Capitalize the First Letter

function capitalize(str) {
  return str.charAt(0).toUpperCase() + str.slice(1);
}

Example:

capitalize("hello world"); // "Hello world"

4.Flatten an Array

function flattenArray(arr) {
  return arr.flat(Infinity);
}

Example:

const log = debounce(() => console.log('Debounced!'), 500);
window.addEventListener('resize', log); // Logs only after 500ms of no resizing

5.Debounce a Function

function debounce(fn, delay = 300) {
  let timeout;
  return (...args) => {
    clearTimeout(timeout);
    timeout = setTimeout(() => fn(...args), delay);
  };
}

Example:


window.addEventListener('resize', debounce(() => {
  console.log('Window resized!');
}, 500));

6.Generate a Random Hex Color


function randomColor() {
  return `#${Math.floor(Math.random() * 0xffffff).toString(16).padStart(6, '0')}`;
}

Example:


randomColor(); // "#a3e12f"

7.Check If an Object is Empty


function isEmpty(obj) {
  return Object.keys(obj).length === 0;
}

Example:


isEmpty({}); // true
isEmpty({ name: 'John' }); // false

8.Convert Query String to Object


function parseQueryString(query) {
  return Object.fromEntries(new URLSearchParams(query));
}

Example:
Converts ?name=John&age=30 into a usable object.

parseQueryString('?name=John&age=30'); // { name: "John", age: "30" }

9.Copy Text to Clipboard

Splitting an array into smaller chunks is useful for pagination or batch processing.


async function copyToClipboard(text) {
  await navigator.clipboard.writeText(text);
}

Example:
Enable “copy” buttonsfor links, promo codes, etc.


copyToClipboard("Hello, world!");

Works only on HTTPSand requires user interaction in modern browsers.

10.Generate a UUID (v4-style)


function generateUUID() {
  return crypto.randomUUID();
}

Example:
Create unique IDs for form elements, DB records, or tokens.


generateUUID(); // "6fd9f51c-8df3-4a7b-a1f7-3c72ec518d1a"

Native crypto.randomUUID() is supported in all modern browsers (2022+).

Bonus: Wrap These in a Utility Module

You can group all of these into a single reusable file:


// utils.js
export {
  deepClone,
  formatNumber,
  capitalize,
  flattenArray,
  debounce,
  randomColor,
  isEmpty,
  parseQueryString,
  copyToClipboard,
  generateUUID
};

Then use them across your app:


import { debounce, formatNumber } from './utils.js';

JavaScript utility functions are more than time-savers — they make your code cleaner, safer, and easier to maintain. Whether you're building a side project, an enterprise dashboard, or contributing to open source, mastering these functions gives you a real productivity boost.

Tip: Avoid rewriting the wheel on large projects. Use libraries like Lodash, Ramda, or Rambdawhen your app grows.

Destructuring in JavaScript

Sudhanshu Gaikwad — Fri, 30 May 2025 11:30:00 +0000

Destructuring is one of JavaScript's most powerful features, introduced in ES6 (ECMAScript 2015), that allows developers to extract values from arrays or objects into distinct variables in a concise and readable way. It simplifies code, reduces repetition, and makes data manipulation more intuitive. Whether you're working with arrays, objects, or complex data structures, destructuring can streamline your workflow. In this article, we'll dive deep into all types of destructuring in JavaScript, including array destructuring, object destructuring, and destructuring arrays of objects, with practical examples to help you master this feature.

What is Destructuring?

Destructuring is a syntax that lets you "unpack" values from arrays or properties from objects into individual variables. Instead of accessing elements or properties one by one, you can assign them to variables in a single statement. This not only makes your code cleaner but also improves its maintainability.

Destructuring allows us to unpack values from arrays or properties from objects into variables in a concise and readable way.

Without Destructuring:

const user = { name: "Sam", age: 25 };
const name = user.name;
const age = user.age;

With Destructuring:

const { name, age } = user;

Array Destructuring

Array destructuring allows you to extract elements from an array and assign them to variables based on their position. The syntax uses square brackets [] on the left side of an assignment.

const colors = ['red', 'blue', 'green'];

// Without destructuring
const first = colors[0]; // red
const second = colors[1]; // blue
const third = colors[2]; // green

// With destructuring
const [firstColor, secondColor, thirdColor] = colors;

console.log(firstColor); // red
console.log(secondColor); // blue
console.log(thirdColor); // green

Skipping Elements

You can skip elements in an array by using commas without variable names.

const numbers = [1, 2, 3, 4, 5];
const [first, , third, , fifth] = numbers;

console.log(first); // 1
console.log(third); // 3
console.log(fifth); // 5

Here, the commas with no variable names skip the second and fourth elements.

Rest Operator in Array Destructuring

The rest operator (...) collects the remaining elements into a new array.

const fruits = ['apple', 'banana', 'orange', 'mango'];
const [firstFruit, ...otherFruits] = fruits;

console.log(firstFruit); // apple
console.log(otherFruits); // ['banana', 'orange', 'mango']

The otherFruitsvariable captures all elements after the first one as an array.

Default Values

You can assign default values in case an element is undefined.

const coordinates = [10, 20];
const [x, y, z = 0] = coordinates;

console.log(x); // 10
console.log(y); // 20
console.log(z); // 0 (default value)

If the array has fewer elements than variables, the default value is used.

Object Destructuring

Object destructuring extracts properties from an object and assigns them to variables with the same name as the properties. The syntax uses curly braces {}.

const user = {
  name: 'Alice',
  age: 30,
  city: 'New York'
};

// Without destructuring
const name = user.name;
const age = user.age;

// With destructuring
const { name, age } = user;

console.log(name); // Alice
console.log(age); // 30

Renaming Variables

You can assign properties to variables with different names using the property: newName syntax.

const person = {
  firstName: 'Bob',
  lastName: 'Smith'
};

const { firstName: fname, lastName: lname } = person;

console.log(fname); // Bob
console.log(lname); // Smith

Here, firstName is renamed to fname, and lastNameto lname.

Default Values in Object Destructuring

Similar to arrays, you can provide default values for missing properties.

const settings = {
  theme: 'dark',
  fontSize: 16
};

const { theme, fontSize, mode = 'standard' } = settings;

console.log(theme); // dark
console.log(fontSize); // 16
console.log(mode); // standard (default value)

Rest Operator in Object Destructuring

The rest operator collects the remaining properties into a new object.

const product = {
  id: 1,
  name: 'Laptop',
  price: 999,
  brand: 'TechCo'
};

const { id, ...details } = product;

console.log(id); // 1
console.log(details); // { name: 'Laptop', price: 999, brand: 'TechCo' }

Nested Object Destructuring

You can destructure nested objects by nesting curly braces.

const employee = {
  id: 101,
  info: {
    name: 'Carol',
    role: 'Developer'
  }
};

const { id, info: { name, role } } = employee;

console.log(id); // 101
console.log(name); // Carol
console.log(role); // Developer

Destructuring Arrays of Objects

Arrays of objects are common in JavaScript, especially when working with APIs or databases. Destructuring can simplify accessing their properties.

Basic Array of Objects Destructuring

Suppose you have an array of objects representing users:

const users = [
  { id: 1, name: 'Alice', role: 'Admin' },
  { id: 2, name: 'Bob', role: 'User' },
  { id: 3, name: 'Carol', role: 'Moderator' }
];

const [user1, user2, user3] = users;

console.log(user1.name); // Alice
console.log(user2.name); // Bob
console.log(user3.name); // Carol

Using Rest Operator with Arrays of Objects

The rest operator can collect remaining objects in the array.

const users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 3, name: 'Carol' }
];

const [{ name: firstName }, ...otherUsers] = users;

console.log(firstName); // Alice
console.log(otherUsers); // [{ id: 2, name: 'Bob' }, { id: 3, name: 'Carol' }]

Practical Use Cases

Destructuring is incredibly versatile. Here are some real-world scenarios where it shines:

1. Function Parameters

Destructuring can simplify function parameters, especially when passing objects.

function displayUser({ name, age, city = 'Unknown' }) {
  console.log(`${name} is ${age} years old and lives in ${city}.`);
}

const user = { name: 'Dave', age: 25 };
displayUser(user); // Dave is 25 years old and lives in Unknown.

2. Swapping Variables

Array destructuring makes swapping variables straightforward without needing a temporary variable.

let a = 10, b = 20;
[a, b] = [b, a];

console.log(a); // 20
console.log(b); // 10

3. Working with APIs

When fetching data from an API, destructuring simplifies accessing nested data.

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(({ results: [{ id, name }] }) => {
    console.log(`ID: ${id}, Name: ${name}`);
  });

4. Looping Through Arrays of Objects

Destructuring can make loops cleaner when working with arrays of objects.

const users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' }
];

for (const { id, name } of users) {
  console.log(`ID: ${id}, Name: ${name}`);
}

Conclusion

Destructuring in JavaScript is a game-changer for writing concise, readable, and maintainable code. Whether you're unpacking arrays, objects, or arrays of objects, this feature simplifies data extraction and manipulation. By mastering array destructuring, object destructuring, and their combinations, you can handle complex data structures with ease. Experiment with the examples above, and try incorporating destructuring into your next project to see how it improves your code.

Connect a React App with MongoDB using Node.js and Express.js

Sudhanshu Gaikwad — Fri, 23 May 2025 14:35:56 +0000

Unlock the full potential of the MERN stack with this complete, beginner-to-pro guide! In this hands-on tutorial, you'll learn how to seamlessly connect your React.js frontend to a MongoDB database using Node.js and Express.js in 2025. We cover everything step-by-step—from setting up the backend server and creating RESTful APIs to integrating them into your React application.

📁 Folder Structure

project-root/
│
├── backend/
│   ├── config/
│   │   └── db.js
│   ├── models/
│   │   └── Note.js
│   ├── routes/
│   │   └── notes.js
│   ├── server.js
│
├── frontend/
│   ├── src/
│   │   ├── components/
│   │   └── App.js

Setup the Backend with Node.js, Express & MongoDB

mkdir backend
cd backend
npm init -y
npm install express mongoose cors dotenv

Create MongoDB Connection File (`config/db.js`)

const mongoose = require("mongoose");

const connectDB = async (url) => {
  try {
    await mongoose.connect(url); // ✅ Clean usage
    console.log("✅ MongoDB Connected");
  } catch (error) {
    console.error("❌ MongoDB connection error:", error.message);
    process.exit(1);
  }
};

module.exports = connectDB;

Define a Mongoose Model (`models/Note.js`)

const express = require("express");
const router = express.Router();
const Note = require("../models/Note");

router.get("/", async (req, res) => {
  const notes = await Note.find();
  res.json(notes);
});

router.post("/", async (req, res) => {
  const note = new Note(req.body);
  await note.save();
  res.status(201).json(note);
});

module.exports = router;

Create API Routes (`routes/notes.js`)

const express = require("express");
const router = express.Router();
const Note = require("../models/Note");

router.get("/", async (req, res) => {
  const notes = await Note.find();
  res.json(notes);
});

router.post("/", async (req, res) => {
  const note = new Note(req.body);
  await note.save();
  res.status(201).json(note);
});

module.exports = router;

Create server.js (Entry Point)

const express = require("express");
const cors = require("cors");
const dotenv = require("dotenv"); // ✅ Required for env support

const connectDB = require("./config/db");
const notesRoutes = require("./routes/notes");

dotenv.config(); // ✅ Load .env variables

const app = express();

const connection_url = "Enter your URL";

// ✅ Pass your connection URL to the connectDB function
connectDB(connection_url);

app.use(cors());
app.use(express.json());

app.use("/api/notes", notesRoutes);

const PORT = process.env.PORT || 5000;
app.listen(PORT, () => console.log(`🚀 Server running on port ${PORT}`));

Setup Frontend with React

npx create-react-app frontend
cd frontend
npm install axios

Connect Frontend to Backend

import React, { useEffect, useState } from "react";
import axios from "axios";
import styled from "styled-components";
import { FaEdit, FaTrash } from "react-icons/fa"; // React Icons

// Styled Components
const Container = styled.div`
  max-width: 800px;
  margin: auto;
  padding: 1rem;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  color: #fff;
  /* background: linear-gradient(145deg, #0d0d0d, #1a1a1a); */
  min-height: 100vh;
`;

const Title = styled.h1`
  text-align: center;
  color: #00aaff;
`;

const Form = styled.div`
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 2rem;
`;

const Input = styled.input`
  padding: 0.75rem;
  font-size: 1rem;
  border: none;
  border-radius: 8px;
  background: transparent;
  border: 1px solid #353535;
  color: white;
  &:focus {
    border-color: #3f51ff;
    outline: none;
  }
`;

const TextArea = styled.textarea`
  padding: 0.75rem;
  font-size: 1rem;
  border: none;
  border-radius: 8px;
  background: transparent;
  border: 1px solid #353535;
  color: white;
  resize: vertical;
  &:focus {
    border-color: #3f51ff;
    outline: none;
  }
`;

const Button = styled.button`
  padding: 0.75rem;
  font-size: 1rem;
  background: #194bfd;
  background: linear-gradient(
    90deg,
    rgba(25, 75, 253, 1) 0%,
    rgba(173, 19, 251, 1) 100%
  );
  transition: all 0.3s ease;
  color: #ffffff;

  border: none;
  border-radius: 8px;
  cursor: pointer;

  &:hover {
    background-color: #5a189a;
    box-shadow: 0 6px 16px rgba(90, 24, 154, 0.5);
    color: #ffffff;
    transform: translateY(-2px);
  }
`;

const NoteGrid = styled.div`
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
`;

const NoteCard = styled.div`
  background: #1e1e1e;
  border-radius: 12px;
  padding: 1.5rem;
  position: relative;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);

  h3 {
    margin-top: 0;
    color: #00aaff;
  }

  p {
    color: #ccc;
  }

  .actions {
    margin-top: 1rem;
    display: flex;
    gap: 0.5rem;

    button {
      flex: 1;
      padding: 0.5rem;
      border: none;
      border-radius: 6px;
      cursor: pointer;
      font-weight: 500;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
    }

    .edit {
      background-color: #ffaa00;
      color: #121212;

      &:hover {
        background-color: #e69a00;
      }
    }

    .delete {
      background-color: #ff4d4d;
      color: white;

      &:hover {
        background-color: #e04343;
      }
    }
  }
`;

function App() {
  const [notes, setNotes] = useState([]);
  const [form, setForm] = useState({ title: "", content: "" });
  const [editingId, setEditingId] = useState(null);

  const fetchNotes = async () => {
    const res = await axios.get("http://localhost:5000/api/notes");
    setNotes(res.data);
  };

  const addOrUpdateNote = async () => {
    if (editingId) {
      await axios.put(`http://localhost:5000/api/notes/${editingId}`, form);
      setEditingId(null);
    } else {
      await axios.post("http://localhost:5000/api/notes", form);
    }
    fetchNotes();
    setForm({ title: "", content: "" });
  };

  const deleteNote = async (id) => {
    await axios.delete(`http://localhost:5000/api/notes/${id}`);
    fetchNotes();
  };

  const editNote = (note) => {
    setForm({ title: note.title, content: note.content });
    setEditingId(note._id);
  };

  useEffect(() => {
    fetchNotes();
  }, []);

  return (
    <Container>
      <Title>📝 Notes App</Title>
      <Form>
        <Input
          type="text"
          placeholder="Title"
          value={form.title}
          onChange={(e) => setForm({ ...form, title: e.target.value })}
        />
        <TextArea
          placeholder="Content"
          rows={4}
          value={form.content}
          onChange={(e) => setForm({ ...form, content: e.target.value })}
        />
        <Button onClick={addOrUpdateNote}>
          {editingId ? "Update Note" : "Add Note"}
        </Button>
      </Form>

      <h2 style={{ color: "#ccc" }}>All Notes</h2>
      <NoteGrid>
        {notes.map((note) => (
          <NoteCard key={note._id}>
            <h3>{note.title}</h3>
            <p>{note.content}</p>
            <div className="actions">
              <button className="edit" onClick={() => editNote(note)}>
                <FaEdit /> Edit
              </button>
              <button className="delete" onClick={() => deleteNote(note._id)}>
                <FaTrash /> Delete
              </button>
            </div>
          </NoteCard>
        ))}
      </NoteGrid>
    </Container>
  );
}

export default App;

Final Steps

Run backend:

node server.js

Run frontend:

npm start

Deploying to the Internet

Use Render or Railway for backend deployment
Use Vercel or Netlify for frontend deployment
Connect via environment variables and update frontend API URL

Conclusion

Congratulations! You've successfully built a full-stack MERN application by connecting a React frontend to a MongoDB database using Node.js and Express. From setting up the server and creating RESTful APIs to integrating them into your React components—you've now covered all the essential steps needed to master the foundational flow of full-stack development.

API Development with React.js, PHP, and MySQL – From Beginner to Advanced

Sudhanshu Gaikwad — Fri, 16 May 2025 14:30:00 +0000

Building a modern web application often involves creating a frontend (user interface) and a backend (server-side logic) that communicate through an API (Application Programming Interface). In this guide, we’ll walk you through the process of developing a full-stack application using React.js for the frontend, PHP for the backend, and MySQL as the database. This tutorial is written in simple English, covering everything from basic to advanced concepts, so anyone can understand. Let’s create a professional, SEO-friendly post for the dev.to community that ranks high on Google!

What is API Development?

An API is like a waiter in a restaurant. The frontend (customer) sends a request (order), the backend (kitchen) processes it, and the API delivers the response (food). In our case, the frontend (React.js) will send requests to the backend (PHP), which interacts with the MySQL database to store or retrieve data.

Key Terms:

REST API: A type of API that uses HTTP methods (GET, POST, PUT, DELETE) to perform actions.
Frontend: The part users see and interact with (built with React.js).
Backend: The server-side logic that handles requests and data (built with PHP and MySQL).

What is the Appointment Scheduling App?

The app allows users to schedule appointments (e.g., passport appointments) and manage them efficiently. It uses a REST API to connect a React.js frontend (with Styled-Components for responsive, animated UI) to a PHP backend with a MySQL database.

Key Features:

Book appointments with fields: Name, Email, Mobile, DOB, Appointment Date, Time (10:00 AM–5:00 PM).
Cancel appointments.
Generate a unique PNR (e.g., AB12345).
View all users in a table, search by PNR, and display user details in a pop-up with a download button.

App Features and Requirements

Features

- Book Appointment: Users enter details and select a time slot (10:00 AM–5:00 PM).
- Cancel Appointment: Cancel by PNR.
- Track Appointment: Search by PNR to view details.
- User Table: Display all users, search by PNR, and show details in a pop-up.

Requirements

- Fields: Name, Email, Mobile, DOB, Appointment Date, Time, PNR (auto-generated, e.g., AB12345).
- Time Slots: Automatically generated from 10:00 AM to 5:00 PM (30-minute intervals).
- PNR: 2 letters + 5 digits (e.g., AB12345).
- Responsive UI: Works on mobile and desktop with animations (e.g., fade-in, button hover).
- Tools: Node.js, XAMPP, React, Styled-Components, axios.

Folder Structure

appointment-app/
├── backend/                    # PHP API and database files
│   ├── db.php                  # Database connection
│   ├── appointments.php        # REST API for appointments
│   └── database.sql            # MySQL database setup
├── frontend/                   # React.js app
│   ├── src/
│   │   ├── components/
│   │   │   ├── AppointmentForm.js  # Form for booking
│   │   │   ├── UserTable.js        # Table for all users
│   │   │   └── Popup.js            # Pop-up for user details
│   │   ├── App.js                  # Main app component
│   │   ├── App.css                 # Global styles (if needed)
│   │   └── index.js                # React entry point
│   ├── public/
│   │   └── index.html              # HTML template
│   └── package.json                # Dependencies

Setting Up the Environment
Prerequisites

Node.js: For React.js (download from nodejs.org).
XAMPP: For PHP and MySQL (download from apachefriends.org).
Code Editor: VS Code or similar.
Browser: For testing.

Steps

Install XAMPP: Start Apache and MySQL.
Create React App: Run npx create-react-app frontend in appointment-app.
Install Dependencies:
Run npm install styled-components axios jspdfin frontend.

Backend Setup (PHP & Mysql)

1. Database Configuration

Create a Mysql database named appointment_db and a table appointments:

CREATE DATABASE appointment_db;

USE appointment_db;

CREATE TABLE appointments (
  id INT AUTO_INCREMENT PRIMARY KEY,
  name VARCHAR(100) NOT NULL,
  email VARCHAR(100) NOT NULL,
  mobile VARCHAR(15) NOT NULL,
  dob DATE NOT NULL,
  appointment_date DATE NOT NULL,
  appointment_time TIME NOT NULL,
  pnr VARCHAR(7) NOT NULL UNIQUE,
  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

2. Database Connection (`db.php`)

Establish a connection to the Mysql database:

<?php
$host = '';
$user = '';
$password = '';
$database = 'appointment_db';

$conn = new mysqli($host, $user, $password, $database);

if ($conn->connect_error) {
  die("Connection failed: " . $conn->connect_error);
}
?>

3. API Endpoints `appointments.php`

<?php
require 'db.php';

header("Access-Control-Allow-Origin: *");
header("Content-Type: application/json; charset=UTF-8");
header("Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS");
header("Access-Control-Allow-Headers: Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With");

// Your existing code...


if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {
    http_response_code(200);
    exit();
}

$method = $_SERVER['REQUEST_METHOD'];

// Generate PNR (e.g., AB12345)
function generatePNR() {
    $letters = substr(str_shuffle('ABCDEFGHIJKLMNOPQRSTUVWXYZ'), 0, 2);
    $numbers = sprintf("%05d", rand(0, 99999));
    return $letters . $numbers;
}

switch ($method) {
    // GET: Fetch all or one appointment
    case 'GET':
        if (isset($_GET['pnr'])) {
            $pnr = $_GET['pnr'];
            $stmt = $pdo->prepare("SELECT * FROM appointments WHERE pnr = ?");
            $stmt->execute([$pnr]);
            $appointment = $stmt->fetch(PDO::FETCH_ASSOC);
            echo json_encode($appointment ?: ["message" => "No appointment found"]);
        } else {
            $stmt = $pdo->query("SELECT * FROM appointments");
            $appointments = $stmt->fetchAll(PDO::FETCH_ASSOC);
            echo json_encode($appointments);
        }
        break;

    // POST: Create new appointment
    case 'POST':
        $data = json_decode(file_get_contents("php://input"));
        $pnr = generatePNR();
        $stmt = $pdo->prepare("INSERT INTO appointments (pnr, name, email, mobile, dob, appointment_date, appointment_time) VALUES (?, ?, ?, ?, ?, ?, ?)");
        $stmt->execute([$pnr, $data->name, $data->email, $data->mobile, $data->dob, $data->appointment_date, $data->appointment_time]);
        echo json_encode(["message" => "Appointment created", "pnr" => $pnr]);
        break;

    // PUT: Update appointment date/time
    case 'PUT':
        $data = json_decode(file_get_contents("php://input"));
        if (isset($data->pnr)) {
            $stmt = $pdo->prepare("UPDATE appointments SET appointment_date = ?, appointment_time = ? WHERE pnr = ?");
            $stmt->execute([$data->appointment_date, $data->appointment_time, $data->pnr]);
            echo json_encode(["message" => "Appointment updated"]);
        } else {
            echo json_encode(["message" => "Invalid request"]);
        }
        break;

    // DELETE: Cancel appointment
    case 'DELETE':
        $data = json_decode(file_get_contents("php://input"));
        $stmt = $pdo->prepare("DELETE FROM appointments WHERE pnr = ?");
        $stmt->execute([$data->pnr]);
        echo json_encode(["message" => "Appointment canceled"]);
        break;

    default:
        echo json_encode(["message" => "Unsupported request"]);
        break;
}
?>

Create Appointment (create.php): Handles appointment booking.
Read Appointments (read.php): Fetches all appointments.
Update Appointment (update.php): Cancels an appointment.

Each endpoint interacts with the appointments table to perform the necessary operations.

Frontend Setup (React.js & styled-components)

1. Initialize React App

Use Create React App to set up the frontend:

npx create-react-app frontend
cd frontend
npm install styled-components axios react-modal

1. App Component(`App.js`):

import React, { useState } from "react";
import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";
import styled from "styled-components";
import AppointmentForm from "./components/AppointmentForm";
import UserTable from "./components/UserTable";

const Container = styled.div`
  max-width: 1200px;
  margin: auto;
  padding: 20px;
  font-family: Arial, sans-serif;

  @media (max-width: 768px) {
    padding: 10px;
  }
`;

const Nav = styled.nav`
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
  flex-wrap: wrap;

  a {
    text-decoration: none;
    color: #333;
    padding: 10px 15px;
    background-color: #e0e0e0;
    border-radius: 5px;
    transition: background-color 0.3s ease;

    &:hover {
      background-color: #ccc;
    }
  }

  @media (max-width: 600px) {
    gap: 10px;
    a {
      padding: 8px 12px;
      font-size: 14px;
    }
  }
`;

const Heading = styled.h1`
  text-align: center;
  margin-bottom: 30px;
  color: #007bff;

  @media (max-width: 600px) {
    font-size: 24px;
  }
`;

const ArticleLink = styled.div`
  text-align: center;
  margin-bottom: 20px;

  a {
    font-size: 18px;
    text-decoration: none;
    color: #007bff;
    border-bottom: 2px solid #007bff;
    transition: color 0.3s ease;

    &:hover {
      color: #0056b3;
    }
  }
`;

const InfoContainer = styled.div`
  text-align: center;
  margin-bottom: 40px;
  font-size: 16px;
  color: #555;

  ul {
    text-align: left;
    margin: 0 auto;
    display: inline-block;
  }

  li {
    margin: 10px 0;
  }
`;

const App = () => {
  const [selectedAppointment, setSelectedAppointment] = useState(null);

  return (
    <Router>
      <Container>
        <ArticleLink>
          <a href="https://dev.to" target="_blank" rel="noopener noreferrer">
            Read the Full Article on API Development with React.js, PHP, and
            MySQL
          </a>
        </ArticleLink>

        <Nav>
          <Link to="/appointment">Home</Link>
          <Link to="/UserTable">User Table</Link>
        </Nav>
        <Routes>
          <Route path="/" element={<AppointmentForm />} />
          <Route path="/appointment" element={<AppointmentForm />} />
          <Route path="/UserTable" element={<UserTable />} />
        </Routes>
      </Container>
    </Router>
  );
};

export default App;

2. Appointment Form (`AppointmentForm.jsx`)

Create a form for users to book appointments:

import React, { useState } from "react";
import styled from "styled-components";
import axios from "axios";

const Form = styled.form`
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 600px;
  margin: 20px auto;
  padding: 25px;
  border: 1px solid #ddd;
  border-radius: 10px;
  background: #f9f9f9;

  @media (max-width: 768px) {
    padding: 15px;
    gap: 15px;
  }

  @media (max-width: 480px) {
    padding: 10px;
  }
`;

const Field = styled.div`
  display: flex;
  flex-direction: column;
`;

const Label = styled.label`
  font-size: 15px;
  margin-bottom: 5px;
  color: #333;
`;

const Input = styled.input`
  padding: 10px;
  font-size: 15px;
  border: 1px solid #ccc;
  border-radius: 5px;

  &:focus {
    border-color: #007bff;
    outline: none;
  }
`;

const Select = styled.select`
  padding: 10px;
  font-size: 15px;
  border: 1px solid #ccc;
  border-radius: 5px;
`;

const Button = styled.button`
  padding: 10px;
  background: #ffbf00;
  color: #000000;
  border: none;
  border-radius: 5px;
  font-size: 15px;
  cursor: pointer;
  transition: background 0.3s, transform 0.2s;

  &:hover {
    background: #ecb40b;
    transform: scale(1.05);
  }
`;

const Message = styled.p`
  color: ${(props) => (props.error ? "red" : "green")};
  text-align: center;
`;

const AppointmentForm = () => {
  const [formData, setFormData] = useState({
    name: "",
    email: "",
    mobile: "",
    dob: "",
    appointment_date: "",
    appointment_time: "",
  });
  const [pnr, setPnr] = useState("");
  const [message, setMessage] = useState("");
  const [isError, setIsError] = useState(false);

  const timeSlots = [];
  for (let hour = 10; hour <= 17; hour++) {
    for (let min = 0; min < 60; min += 30) {
      if (hour === 17 && min > 0) break;
      const time = `${hour.toString().padStart(2, "0")}:${min
        .toString()
        .padStart(2, "0")}`;
      timeSlots.push(time);
    }
  }

  const handleChange = (e) => {
    setFormData({ ...formData, [e.target.name]: e.target.value });
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      const response = await axios.post(
        "http://localhost/Appointment_scheduling_Application_DB/appointments.php",
        formData
      );
      setPnr(response.data.pnr);
      setMessage("Appointment booked! PNR: " + response.data.pnr);
      setIsError(false);
      setFormData({
        name: "",
        email: "",
        mobile: "",
        dob: "",
        appointment_date: "",
        appointment_time: "",
      });
    } catch (error) {
      setMessage("Error booking appointment");
      setIsError(true);
    }
  };

  const handleCancel = async () => {
    if (!pnr) {
      setMessage("Enter PNR to cancel");
      setIsError(true);
      return;
    }
    try {
      await axios.delete("http://localhost/appointments.php", {
        data: { pnr },
      });
      setMessage("Appointment canceled");
      setIsError(false);
      setPnr("");
    } catch (error) {
      setMessage("Error canceling appointment");
      setIsError(true);
    }
  };

  return (
    <Form onSubmit={handleSubmit}>
      <Field>
        <Label htmlFor="name">Name</Label>
        <Input
          id="name"
          type="text"
          name="name"
          value={formData.name}
          onChange={handleChange}
          required
        />
      </Field>

      <Field>
        <Label htmlFor="email">Email</Label>
        <Input
          id="email"
          type="email"
          name="email"
          value={formData.email}
          onChange={handleChange}
          required
        />
      </Field>

      <Field>
        <Label htmlFor="mobile">Mobile</Label>
        <Input
          id="mobile"
          type="tel"
          name="mobile"
          value={formData.mobile}
          onChange={handleChange}
          required
        />
      </Field>

      <Field>
        <Label htmlFor="dob">Date of Birth</Label>
        <Input
          id="dob"
          type="date"
          name="dob"
          value={formData.dob}
          onChange={handleChange}
          required
        />
      </Field>

      <Field>
        <Label htmlFor="appointment_date">Appointment Date</Label>
        <Input
          id="appointment_date"
          type="date"
          name="appointment_date"
          value={formData.appointment_date}
          onChange={handleChange}
          required
        />
      </Field>

      <Field>
        <Label htmlFor="appointment_time">Appointment Time</Label>
        <Select
          id="appointment_time"
          name="appointment_time"
          value={formData.appointment_time}
          onChange={handleChange}
          required
        >
          <option value="">Select Time</option>
          {timeSlots.map((time) => (
            <option key={time} value={time}>
              {time}
            </option>
          ))}
        </Select>
      </Field>

      <Button type="submit">Book Appointment</Button>

      {message && <Message error={isError}>{message}</Message>}
    </Form>
  );
};

export default AppointmentForm;

3. User Table (`UserTable.jsx`)

Display all appointments in a searchable table:

import React, { useState, useEffect } from "react";
import styled from "styled-components";
import axios from "axios";

const TableContainer = styled.div`
  margin: 20px 0;
  overflow-x: auto;
`;

const Table = styled.table`
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);

  th,
  td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid #ddd;
  }

  th {
    background: #ffbf00;
    color: #000000;
  }

  tr:hover {
    background: #f1f1f1;
    cursor: pointer;
  }

  @media (max-width: 768px) {
    th,
    td {
      padding: 8px;
      font-size: 14px;
    }
  }
`;

const SearchContainer = styled.div`
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
`;

const SearchInput = styled.input`
  padding: 10px;
  width: 100%;
  max-width: 250px;
  border: 1px solid #ccc;
  border-radius: 4px;
`;

const CancelButton = styled.button`
  background-color: #ff4d4d;
  color: white;
  border: none;
  padding: 8px 16px;
  cursor: pointer;
  border-radius: 4px;

  &:hover {
    background-color: #ff1a1a;
  }
`;

const UserTable = ({ onSelectAppointment }) => {
  const [appointments, setAppointments] = useState([]);
  const [searchFields, setSearchFields] = useState({
    pnr: "",
    name: "",
    mobile: "",
  });

  useEffect(() => {
    const fetchAppointments = async () => {
      try {
        const queryParams = new URLSearchParams();
        if (searchFields.pnr) queryParams.append("pnr", searchFields.pnr);
        if (searchFields.name) queryParams.append("name", searchFields.name);
        if (searchFields.mobile)
          queryParams.append("mobile", searchFields.mobile);

        const url = `http://localhost/Appointment_scheduling_Application_DB/appointments.php${
          queryParams.toString() ? `?${queryParams.toString()}` : ""
        }`;

        const response = await axios.get(url);
        setAppointments(
          Array.isArray(response.data) ? response.data : [response.data]
        );
      } catch (error) {
        console.error("Error fetching appointments:", error);
      }
    };

    fetchAppointments();
  }, [searchFields]);

  const handleInputChange = (e) => {
    const { name, value } = e.target;
    setSearchFields((prev) => ({ ...prev, [name]: value }));
  };

  const handleCancelAppointment = async (pnr) => {
    const confirmDelete = window.confirm(
      "Are you sure you want to delete this appointment?"
    );
    if (confirmDelete) {
      try {
        await axios.delete(
          "http://localhost/Appointment_scheduling_Application_DB/appointments.php",
          {
            data: { pnr },
          }
        );

        // Remove the canceled appointment from the list
        setAppointments((prevAppointments) =>
          prevAppointments.filter((appointment) => appointment.pnr !== pnr)
        );
      } catch (error) {
        console.error("Error canceling appointment:", error);
      }
    }
  };

  return (
    <TableContainer>
      <SearchContainer>
        <SearchInput
          name="pnr"
          type="text"
          value={searchFields.pnr}
          onChange={handleInputChange}
          placeholder="Search by PNR"
        />
      </SearchContainer>
      <Table>
        <thead>
          <tr>
            <th>PNR</th>
            <th>Name</th>
            <th>Email</th>
            <th>Mobile</th>
            <th>Appointment Date</th>
            <th>Appointment Time</th>
            <th>Action</th>
          </tr>
        </thead>
        <tbody>
          {appointments.map((appointment) => (
            <tr key={appointment.pnr}>
              <td>{appointment.pnr}</td>
              <td>{appointment.name}</td>
              <td>{appointment.email}</td>
              <td>{appointment.mobile}</td>
              <td>{appointment.appointment_date}</td>
              <td>{appointment.appointment_time}</td>
              <td>
                <CancelButton
                  onClick={() => handleCancelAppointment(appointment.pnr)}
                >
                  Cancel Appointment
                </CancelButton>
              </td>
            </tr>
          ))}
        </tbody>
      </Table>
    </TableContainer>
  );
};

export default UserTable;

4. Main File( `index.js` ):

The App.js component is included here.

PNR Generation Logic

Generate a unique PNR with 2 alphabets followed by 5 digits:

function generatePNR() {
  $letters = substr(str_shuffle("ABCDEFGHIJKLMNOPQRSTUVWXYZ"), 0, 2);
  $numbers = substr(str_shuffle("0123456789"), 0, 5);
  return $letters . $numbers;
}

Your Appointment Scheduling Web App project looks like this.

Conclusion

By following this tutorial, you've built a responsive appointment scheduling application using React.js, styled-components, PHP, and MySQL. This project demonstrates full-stack development, integrating frontend responsiveness and animations with backend data management.

How to Connect a React App with MySQL Database

Sudhanshu Gaikwad — Sat, 05 Apr 2025 18:30:00 +0000

Are you looking to build a dynamic React application with a MySQL database backend? In this post, we’ll walk you through how to connect a React app with a MySQL database using PHP as the intermediary. We’ll cover the file structure, set up a simple registration form (Name, Email, Mobile Number, Address), and display all registered users in a styled table component. Whether you’re a beginner or an experienced developer, this guide will help you integrate React, PHP, and MySQL seamlessly.

Why Connect React with MySQL?

React is a powerful front-end library for building interactive UIs, while MySQL is a reliable relational database for storing structured data. By connecting them with PHP as the backend, you can create full-stack applications like user management systems, e-commerce platforms, or dashboards. Let’s dive into the process!

Project Overview

We’ll create a React app with:

A Registration Form component to collect user data (Name, Email, Mobile Number, Address).
A User List component to display all users in a table.
A PHP backend to handle MySQL database operations.
Styled components for clean, reusable CSS.

File Structure

Here’s the basic file structure for our project:

my-react-mysql-app/
├── backend/                # PHP backend files
│   ├── config.php         # Database connection
│   ├── register.php       # API to handle registration
│   └── fetch_users.php    # API to fetch all users
├── src/                   # React app source
│   ├── components/        # React components
│   │   ├── RegisterForm.js  # Registration form component
│   │   └── UserList.js      # User list table component
│   ├── App.js             # Main app component
│   ├── index.js           # React entry point
│   └── styles/            # Styled components CSS
└── package.json           # Project dependencies

Step 1: Set Up the MySQL Database

Create a MySQL database and a users table to store registration data.

CREATE DATABASE react_mysql_db;
USE react_mysql_db;

CREATE TABLE users (
    id INT AUTO_INCREMENT PRIMARY KEY,
    name VARCHAR(100) NOT NULL,
    email VARCHAR(100) NOT NULL UNIQUE,
    mobile VARCHAR(15) NOT NULL,
    address TEXT NOT NULL
);

Step 2: Build the PHP Backend

`backend/config.php` (Database Connection)

<?php
$host = "localhost";
$dbname = "react_mysql_db";
$username = "root";
$password = "";

try {
    $conn = new PDO("mysql:host=$host;dbname=$dbname", $username, $password);
    $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch (PDOException $e) {
    echo "Connection failed: " . $e->getMessage();
}
?>

`backend/register.php` (Handle Registration)

<?php
header("Access-Control-Allow-Origin: *");
header("Content-Type: application/json");

include 'config.php';

$data = json_decode(file_get_contents("php://input"), true);

$name = $data['name'];
$email = $data['email'];
$mobile = $data['mobile'];
$address = $data['address'];

$sql = "INSERT INTO users (name, email, mobile, address) VALUES (:name, :email, :mobile, :address)";
$stmt = $conn->prepare($sql);
$stmt->execute(['name' => $name, 'email' => $email, 'mobile' => $mobile, 'address' => $address]);

echo json_encode(["message" => "User registered successfully"]);
?>

`backend/fetch_users.php` (Fetch All Users)

<?php
header("Access-Control-Allow-Origin: *");
header("Content-Type: application/json");

include 'config.php';

$sql = "SELECT * FROM users";
$stmt = $conn->prepare($sql);
$stmt->execute();
$users = $stmt->fetchAll(PDO::FETCH_ASSOC);

echo json_encode($users);
?>

Host this backendfolder on a server (e.g., XAMPP or a live server) to make the APIs accessible.

Step 3: Build the React Front-End

Install Dependencies

Run the following in your React project folder:

npx create-react-app my-react-mysql-app
cd my-react-mysql-app
npm install styled-components axios

`src/components/RegisterForm.js`

import React, { useState } from 'react';
import styled from 'styled-components';
import axios from 'axios';

const Form = styled.form`
  display: flex;
  flex-direction: column;
  max-width: 400px;
  margin: 20px auto;
`;

const Input = styled.input`
  padding: 10px;
  margin: 10px 0;
  border-radius: 5px;
  border: 1px solid #ccc;
`;

const Button = styled.button`
  padding: 10px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
`;

const RegisterForm = () => {
  const [formData, setFormData] = useState({ name: '', email: '', mobile: '', address: '' });

  const handleChange = (e) => {
    setFormData({ ...formData, [e.target.name]: e.target.value });
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      await axios.post('http://localhost/backend/register.php', formData);
      alert('User registered successfully!');
      setFormData({ name: '', email: '', mobile: '', address: '' });
    } catch (error) {
      console.error('Error:', error);
    }
  };

  return (
    <Form onSubmit={handleSubmit}>
      <Input
        type="text"
        name="name"
        placeholder="Name"
        value={formData.name}
        onChange={handleChange}
      />
      <Input
        type="email"
        name="email"
        placeholder="Email"
        value={formData.email}
        onChange={handleChange}
      />
      <Input
        type="text"
        name="mobile"
        placeholder="Mobile Number"
        value={formData.mobile}
        onChange={handleChange}
      />
      <Input
        type="text"
        name="address"
        placeholder="Address"
        value={formData.address}
        onChange={handleChange}
      />
      <Button type="submit">Register</Button>
    </Form>
  );
};

export default RegisterForm;

`src/components/UserList.js`

import React, { useEffect, useState } from 'react';
import styled from 'styled-components';
import axios from 'axios';

const Table = styled.table`
  width: 80%;
  margin: 20px auto;
  border-collapse: collapse;
`;

const Th = styled.th`
  padding: 10px;
  background-color: #007bff;
  color: white;
`;

const Td = styled.td`
  padding: 10px;
  border: 1px solid #ccc;
`;

const UserList = () => {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    const fetchUsers = async () => {
      try {
        const response = await axios.get('http://localhost/backend/fetch_users.php');
        setUsers(response.data);
      } catch (error) {
        console.error('Error fetching users:', error);
      }
    };
    fetchUsers();
  }, []);

  return (
    <Table>
      <thead>
        <tr>
          <Th>ID</Th>
          <Th>Name</Th>
          <Th>Email</Th>
          <Th>Mobile</Th>
          <Th>Address</Th>
        </tr>
      </thead>
      <tbody>
        {users.map((user) => (
          <tr key={user.id}>
            <Td>{user.id}</Td>
            <Td>{user.name}</Td>
            <Td>{user.email}</Td>
            <Td>{user.mobile}</Td>
            <Td>{user.address}</Td>
          </tr>
        ))}
      </tbody>
    </Table>
  );
};

export default UserList;

`src/App.js`

import React from 'react';
import RegisterForm from './components/RegisterForm';
import UserList from './components/UserList';

function App() {
  return (
    <div>
      <h1>User Registration App</h1>
      <RegisterForm />
      <UserList />
    </div>
  );
}

export default App;

Step 4: Run the Application

1.Start your PHP server (e.g., http://localhost/backend/).
2.Run the React app:

npm start

3.Open http://localhost:3000 in your browser.

Our Project Looks like This:

Project Sarcode: Sudhanshu Developer

Conclusion

In this guide, we’ve shown you how to connect a React app with a MySQL database using PHP. You’ve learned to:

Set up a MySQL database and PHP APIs.
Create a styled registration form in React.
Fetch and display data in a table.

This is a simple yet scalable foundation for full-stack development. Want to extend it? Add features like user authentication, data validation, or editing/deleting users. Happy coding!

What is DOM and BOM?

Sudhanshu Gaikwad — Sat, 29 Mar 2025 14:30:00 +0000

JavaScript is the backbone of dynamic web development, and two of its core concepts—the HTML Document Object Model (DOM) and the Browser Object Model (BOM)—enable us to interact with web pages and browsers effectively. In this article, we’ll explore the HTML DOM and BOM, how they work, and how you can leverage them in your projects. We’ll cover the DOM tree, DOM methods, and BOM features, complete with examples—and even a visualisation idea for the DOM tree!

The HTML DOM Tree of Objects

The HTML Document Object Model (DOM) is a programming interface that represents an HTML document as a structured tree of objects. Each element, attribute, and piece of text in an HTML file becomes a node in this tree, allowing JavaScript to manipulate the page dynamically.

How does the DOM Tree work?

Root Node: The document object is the entry point, representing the entire HTML document.
Element Nodes: HTML tags like <div>, <p>, or <h1> become element nodes.
Text Nodes: The text inside tags (e.g., “What is DOM and BOM?”) becomes text nodes.
Attribute Nodes: Attributes like id or class are linked to their respective elements.

For example, consider this HTML:

<!DOCTYPE html>
<html>
  <head>
    <title>@sudhanshudevelopers</title>
  </head>
  <body>
    <h1>Welcome Sudhanshu Developer</h1>
    <p id="intro">What is DOM and BOM?</p>
  </body>
</html>

Graphical DOM Tree representation

HTML DOM Methods

The DOM provides a rich set of methods to interact with this tree. Here are some key ones with examples:

1.Accessing Elements

document.getElementById(id): Finds an element by its ID.
document.querySelector(selector): Returns the first element matching a CSS selector.

const intro = document.getElementById('intro');
console.log(intro.textContent); // "This is a test."

const heading = document.querySelector('h1');
console.log(heading.textContent); // "Welcome"

2.Modifying Elements

element.innerHTML: Sets or gets the HTML inside an element.
element.textContent: Sets or gets the text content.

intro.innerHTML = '<strong>Updated text!</strong>';
heading.textContent = 'Hello, Developers!';

3.Creating and Adding Elements

document.createElement(tagName): Creates a new element.
parent.appendChild(child): Adds a child to a parent.

const newPara = document.createElement('p');
newPara.textContent = 'I’m new here!';
document.body.appendChild(newPara);

4.Removing Elements

element.remove(): Deletes an element from the DOM.

intro.remove(); // Goodbye, intro paragraph!

The Browser Object Model (BOM)

While the DOM deals with the document’s structure, the Browser Object Model (BOM) provides access to the browser itself. The BOM isn’t standardized like the DOM, but it’s widely supported and includes objects like window, navigator, location, and more.

1.windowObject

Represents the browser window and serves as the global object in JavaScript.
Includes properties like innerWidth and methods like alert().

console.log(window.innerWidth); // Browser window width in pixels
window.alert('Hello from the BOM!');

2.navigator Object

Provides info about the user’s browser and system.

console.log(navigator.userAgent); // Browser info, e.g., "Mozilla/5.0..."
console.log(navigator.language); // User’s preferred language, e.g., "en-US"

3.locationObject

Manages the browser’s URL and navigation.

console.log(location.href); // Current URL
// location.href = 'https://example.com'; // Redirects to a new page

4.history Object

Controls browser history.

history.back(); // Go to previous page
history.forward(); // Go to next page

5.screen Object

Provides info about the user’s screen.

console.log(screen.width); // Screen width in pixels
console.log(screen.height); // Screen height in pixels

Practical BOM Example: A Simple Redirect Button

<button onclick="redirect()">Go to Google</button>

<script>
  function redirect() {
    if (confirm('Leave this page?')) {
      location.href = 'https://www.google.com';
    }
  }
</script>

This uses the window.confirm() method (BOM) to ask for confirmation and location.href to redirect.

DOM vs. BOM: What’s the Difference?

DOM: Focuses on the document (HTML structure). Think elements, attributes, and content.
BOM: Focuses on the browser. Think windows, navigation, and screen info.
Overlap: The window.document object is where they meet—documentis part of the DOM, but it’s accessed via the BOM’s window.

Putting It All Together: A Real-World Example

Let’s combine DOM and BOM to create a dynamic page that greets the user based on their browser and screen size:

<!DOCTYPE html>
<html>
  <body>
    <h1 id="greeting"></h1>
    <p id="info"></p>

    <script>
      // DOM: Access elements
      const greeting = document.getElementById('greeting');
      const info = document.getElementById('info');

      // BOM: Get browser and screen info
      const browser = navigator.userAgent.includes('Chrome') ? 'Chrome' : 'Another Browser';
      const screenSize = `${screen.width}x${screen.height}`;

      // DOM: Update the page
      greeting.textContent = `Hello, ${browser} User!`;
      info.textContent = `Your screen resolution is ${screenSize}.`;
    </script>
  </body>
</html>

Output (varies by user):

“Hello, Chrome User!”
“Your screen resolution is 1920x1080.”

Conclusion

The HTML DOM and BOM are essential tools in a JavaScript developer’s toolkit. The DOM lets you manipulate the page’s structure and content, while the BOM gives you control over the browser environment. Together, they enable rich, interactive web experiences. Try experimenting with these examples—add some DOM manipulation or BOM features to your next project and see the magic happen!

HTM, CSS Form Connect With MySQL Database

Sudhanshu Gaikwad — Fri, 21 Mar 2025 23:11:54 +0000

Introduction

Would you be able to build a web project? Want to collect data from a form and store it in a MySQL database? You’re in the right place! In this guide, I’ll walk you through creating a clean, responsive registration form using HTML and CSS, and connect it to MySQL using PHP (a backend language that bridges the gap). Let’s dive in!

Setup Environment

Before we code, ensure you have:

XAMPP/WAMP installed (local server)
MySQL database setup
VS Code / Sublime Text or any preferred code editor

Create the MySQL Database

Open phpMyAdmin from XAMPP/WAMP.
Create a new database:


CREATE DATABASE user_registration;

Create a users table:

 CREATE TABLE users (
    id INT AUTO_INCREMENT PRIMARY KEY,
    name VARCHAR(100),
    email VARCHAR(100),
    password VARCHAR(100)
);

Build the Registration Form (HTML + CSS)

index.html


<!DOCTYPE html>
<html>
<head>
    <title>Registration Form</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div class="container">
        <h2>Register Here</h2>
        <form action="process.php" method="POST">
            <input type="text" name="name" placeholder="Enter your name" required>
            <input type="email" name="email" placeholder="Enter your email" required>
            <input type="password" name="password" placeholder="Enter your password" required>
            <button type="submit">Register</button>
        </form>
    </div>
</body>
</html>

style.css


body {
    font-family: 'Arial', sans-serif;
    background: #f4f4f4;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.container {
    background: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    width: 300px;
    text-align: center;
}

h2 {
    color: #333;
}

input {
    width: 100%;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #ddd;
    border-radius: 5px;
}

button {
    width: 100%;
    padding: 10px;
    background: #4caf50;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

button:hover {
    background: #45a049;
}

Create the Backend Connection (PHP):

Go to your XAMPP installation directory (C:\xampp on Windows).
Open the htdocs folder: C:\xampp\htdocs and include process.php file.

process.php


 <?php
$servername = "";
$username = "";
$password = "";
$dbname = "";

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);

// Check connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}

// Get data from the form
$name = $_POST['name'];
$email = $_POST['email'];
$password = $_POST['password'];

// Insert into the database
$sql = "INSERT INTO users (name, email, password) VALUES ('$name', '$email', '$password')";

if ($conn->query($sql) === TRUE) {
    echo "<h2>Registration successful!</h2>";
} else {
    echo "Error: " . $sql . "<br>" . $conn->error;
}

$conn->close();
?>

Test It!

Start your XAMPP/WAMP server.
Save all files in the htdocs folder (xampp/htdocs/your_project).
Open the browser and go to http://localhost/your_project/index.html.
Fill the form and hit Register.

Check phpMyAdmin
you’ll see the data saved!

Forem: Sudhanshu Gaikwad

How to Add Clerk Login & Logout Authentication in React.js Web Application

Why Clerk?

Method 1: Full Routing & Protected Pages Setup

Step-by-Step Guide to Adding Clerk Authentication

Method 2: Minimal Setup with SignIn/SignUp

Resources

Conclusion

Free APIs for Developers Learn, Experiment & Create Effortlessly

Why Use Free APIs Without Keys?

Benefits of API Key Free APIs

Top 10 Free APIs Without API Keys

1 Example

2 Example

Resources:

Conclusion

How to Use GenKit in Your React.js Project

Step 1 — Install GenKit

Step 2 — Set up GenKit in Your Project

Step 3 — Create a Simple React UI

Step 4 — Store Your API Key Securely

Tips

Conclusion

Top 10 JavaScript Libraries and Tools You Can’t Ignore in 2025

1. Lodash

2. Axios

3. Day.js

4. D3.js

5. Zustand

6. Vite

7. ESLint

8. Prettier

9. Chart.js

10. React Hook Form

Why These Tools Matter in 2025

Tips for Using These Tools

How to Use Shadcn UI in Your React + Vite Project

Step 1: Create a New Vite + React Project

Step 2: Install and Configure Tailwind CSS

Step 3: Configure Vite for Path Aliases

Step 4: Initialize Shadcn UI

Step 5: Add a Shadcn UI Component

Simple Shadcn UI Landing Page

Project Code

Conclusion

10 Useful JavaScript Utility Functions Every Developer Should Know

1.Deep Clone an Object

2.Format Numbers with Commas

3.Capitalize the First Letter

4.Flatten an Array

5.Debounce a Function

6.Generate a Random Hex Color

7.Check If an Object is Empty

8.Convert Query String to Object

9.Copy Text to Clipboard

10.Generate a UUID (v4-style)

Bonus: Wrap These in a Utility Module

Destructuring in JavaScript

What is Destructuring?

Array Destructuring

Skipping Elements

Rest Operator in Array Destructuring

Default Values

Object Destructuring

Renaming Variables

Default Values in Object Destructuring

Rest Operator in Object Destructuring

Nested Object Destructuring

Destructuring Arrays of Objects

Using Rest Operator with Arrays of Objects

Practical Use Cases

1. Function Parameters

2. Swapping Variables

3. Working with APIs

4. Looping Through Arrays of Objects

Conclusion

Connect a React App with MongoDB using Node.js and Express.js

📁 Folder Structure

Setup the Backend with Node.js, Express & MongoDB

Create MongoDB Connection File (config/db.js)

Create MongoDB Connection File (`config/db.js`)

Define a Mongoose Model (`models/Note.js`)

Create API Routes (`routes/notes.js`)

2. Database Connection (`db.php`)

3. API Endpoints `appointments.php`

1. App Component(`App.js`):

2. Appointment Form (`AppointmentForm.jsx`)

3. User Table (`UserTable.jsx`)

4. Main File( `index.js` ):

`backend/config.php` (Database Connection)

`backend/register.php` (Handle Registration)

`backend/fetch_users.php` (Fetch All Users)

`src/components/RegisterForm.js`

`src/components/UserList.js`

`src/App.js`