AWS account creation - Sep2026

AWS conosle to build AWS skills- Account creation inclues Digilocker - Aadhar connectivity, UPI autopay, mobile, email verification process.

Claude Code worflow

The Claude code task cycle 1. Gater context Reads files, explore projec structure, code base 2. Plan Break the task in to steps 3. Execute Implements Edits files, run test, execute commands 4. Verify Output is correct- runs test, reviews diffs

Tanstack query vs React Fetch -Axios

import { useQuery } from "@tanstack/react-query";

function Users() {
  const { data, isLoading, isError, error } = useQuery({
    queryKey: ["users"],
    queryFn: async () => {
      const res = await fetch("/api/users");
      if (!res.ok) {
        throw new Error("Failed to fetch users");
      }
      return res.json();
    },
  });

  if (isLoading) return <p>Loading...</p>;

  if (isError) {
    return <p>{error.message}</p>;
  }

  return (
    <ul>
      {data.map((user: any) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

//Plain fetch 

useEffect(() => {
  fetch("/api/users")
    .then(...)
}, []);

import { useState, useEffect } from 'react';
function UserList() {
  const [users, setUsers] = useState([]);
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState(null);
  useEffect(() => {
    setIsLoading(true);
    fetch('https://api.example.com/users')
      .then((res) => {
        if (!res.ok) throw new Error('Failed to fetch');
        return res.json();
      })
      .then((data) => {
        setUsers(data);
        setIsLoading(false);
      })
      .catch((err) => {
        setError(err.message);
        setIsLoading(false);
      });
  }, []);
  if (isLoading) return 
Loading...
;
  if (error) return 
Error: {error}
;
  return (
    

      {users.map((user) => (
        
{user.name}
      ))}
    
  );
}

Reactjs-toolkit react-redux vs ContextAPI

 

react19-gh-pages: Github Actions

 Here's a polished LinkedIn post based on your content:

🚀 Deploy Your React 19 + Vite App to GitHub Pages in Minutes!

Want to host your React 19 + TypeScript + Vite application for free on GitHub Pages? Here's a simple two-part guide that gets your app online and then automates future deployments using GitHub Actions.

✅ Part 1: Deploy React 19 + Vite to GitHub Pages

📌 Create your project:

npm create vite@latest my-react-app --template react-ts

📌 Initialize Git and push your project to GitHub.

📌 Install GitHub Pages:

npm install --save-dev gh-pages

📌 Update your vite.config.ts:

base: '/your-repository-name/'

📌 Add deployment scripts to package.json:

• predeploy

• deploy

📌 Run:

npm run deploy

🎉 Your React application is now live on GitHub Pages!

---

⚡ Part 2: Automate Deployment with GitHub Actions

Why deploy manually every time?

Configure GitHub Actions once, and every push to the main branch will automatically:

✅ Install dependencies
✅ Build your Vite application
✅ Deploy the latest version to GitHub Pages

Steps:

🔹 Set GitHub Pages → Source → GitHub Actions

🔹 Create:

.github/workflows/deploy.yml

🔹 Add the deployment workflow.

Now every time you run:

git add .
git commit -m "Update app"
git push

GitHub automatically builds and deploys your application. 🚀

No more running:

npm run deploy

---

💡 This setup is perfect for:

✔ React 19
✔ Vite
✔ TypeScript
✔ Portfolio websites
✔ Learning projects
✔ Production-ready static applications

Automating deployments saves time, reduces errors, and keeps your GitHub Pages site always up to date.

Have you started using GitHub Actions for your React projects? Share your experience in the comments! 👇

#React #ReactJS #React19 #Vite #TypeScript #GitHub #GitHubPages #GitHubActions #WebDevelopment #Frontend #JavaScript #DevOps #Automation #OpenSource #Programming #SoftwareDevelopment

This version is optimized for LinkedIn with a strong hook, clean formatting, scannable sections, and a call to action to encourage engagement.

Design pattern

 

Cloud Service Comparision

 

AWS CLF-C03 Services InSight

 

System Design

1. Scalability

Scalability refers to a system’s ability to handle increasing workloads, users, or data without affecting performance.. A scalable system can expand resources such as servers, storage, or processing power when needed.

• When a system's workload or scope rises, it should be able to maintain or even improve its performance, efficiency, and dependability. This is known as scalability.
• A system must be scalable in order to accommodate growing user traffic, data volumes, or computing demands without suffering a major performance hit or necessitating a total redesign.

2. Latency

Latency in system design is the total time delay between a user making a request and the system delivering the response. It is a critical performance metric measured in milliseconds (ms), where a lower number indicates a faster, more responsive application.

---

Latency vs. Throughput

These two metrics define system performance but measure different things:

• Latency: The time it takes for a single data packet to travel across the system (e.g., 50 ms response time).
• Throughput: The total volume of requests or data a system can process in a given timeframe (e.g., 10,000 requests per second).

3. Throughput

4. Bottleneck

5. Availability

6. Fault Tolerance

AWS Regions, Availability Zones, and Edge Locations

 

React Core Architectural princciples

Core Architectural Principles

Modern React applications typically follow these foundational concepts to manage complexity: 

• Component-Based Design: The UI is divided into independent, reusable units called components. These components can be nested into a hierarchical tree structure.
• Unidirectional Data Flow: Data flows in one direction, from parent to child components via "props". This "data down, events up" model makes the application's state more predictable.
• Virtual DOM: React uses an in-memory representation of the real DOM. When the state changes, React "diffs" the Virtual DOM against the real one and updates only the necessary parts, significantly boosting performance.
• Separation of Concerns: Clean architecture in React involves separating the UI (view) from the business logic. Developers often use custom hooks to encapsulate logic, keeping components focused purely on rendering. 

Layered Architecture (Recommended for 2025)

For large-scale applications, a layered approach is widely adopted to decouple different parts of the system: 

1. UI Layer: Contains presentational components (buttons, inputs) and high-level pages.
2. State Layer: Manages data using local state (useState), global state (Redux Toolkit, Zustand), or configuration state (Context API).
3. Data/API Layer: Handles network requests, typically using Axios or fetch, often managed by server-state libraries like TanStack Query (React Query) for caching and synchronization.
4. Utility Layer: House reusable helper functions (e.g., date formatting, validation) in a dedicated /utils directory