Forem: Sahil Verma

Use Multiple GitHub Accounts on same machine with SSH

Sahil Verma — Fri, 08 Aug 2025 06:13:21 +0000

Learn how to manage multiple GitHub accounts on the same machine using SSH keys and SSH config.

1. Generate a new SSH key for each GitHub account

# For personal account
ssh-keygen -t ed25519 -C "your-personal-email@example.com" -f ~/.ssh/id_ed25519_personal

# For work account
ssh-keygen -t ed25519 -C "your-work-email@example.com" -f ~/.ssh/id_ed25519_work

2. Add keys to the SSH agent

eval "$(ssh-agent -s)"
ssh-add ~/.ssh/id_ed25519_personal
ssh-add ~/.ssh/id_ed25519_work

3. Add public keys to GitHub

Go to GitHub → Settings → SSH and GPG Keys for each account and add:

cat ~/.ssh/id_ed25519_personal.pub
cat ~/.ssh/id_ed25519_work.pub

4. Create or edit SSH config

nano ~/.ssh/config # code ~/.ssh/config  to open on vs code

Add this:

# Personal GitHub
Host github-personal
  HostName github.com
  User git
  IdentityFile ~/.ssh/id_ed25519_personal

# Work GitHub
Host github-work
  HostName github.com
  User git
  IdentityFile ~/.ssh/id_ed25519_work

5. Use correct GitHub alias when cloning

# Personal repo
git clone git@github-personal:username/repo.git

# Work repo
git clone git@github-work:work-username/repo.git

6. Set Git identity per project

# Inside personal repo
git config user.name "Your Personal Name"
git config user.email "your-personal-email@example.com"

# Inside work repo
git config user.name "Your Work Name"
git config user.email "your-work-email@example.com"

You can now work with multiple GitHub accounts on the same machine without conflicts.

Firebase with React and TypeScript: A Comprehensive Guide

Sahil Verma — Fri, 30 Aug 2024 07:32:41 +0000

Introduction

Firebase 9 has revolutionized how we build web applications, offering a suite of tools that simplify backend development and real-time data synchronization. In this comprehensive guide, we'll explore how to leverage Firebase 9 in a React application with TypeScript, focusing on three core Firebase services: Authentication, Firestore, and Cloud Storage.

This guide is structured to take you from the basics to advanced concepts, providing both theoretical knowledge and practical code examples. By the end of this journey, you'll have the skills to build robust, full-stack applications using Firebase and React.

1: Setting Up the Project

1.1 Introduction to Firebase

Firebase 9 introduces a modular approach to using Firebase services, allowing for better tree-shaking and reduced bundle sizes. It provides a range of services including real-time database, authentication, hosting, and more, making it an excellent choice for rapid application development.

1.2 Setting up a new React project with TypeScript

To get started, let's create a new React project with TypeScript:

npm create vite my-firebase-app --template typescript
cd my-firebase-app

1.3 Installing and configuring Firebase in your React app

Install the Firebase SDK:

npm install firebase

1.4 Understanding Firebase configuration and environment variables

Create a new file named src/firebase.ts and add the following code:

import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";
import { getFirestore } from "firebase/firestore";
import { getStorage } from "firebase/storage";

const firebaseConfig = {
  apiKey: import.meta.env.VITE_APP_FIREBASE_API_KEY,
  authDomain: import.meta.env.VITE_APP_FIREBASE_AUTH_DOMAIN,
  projectId: import.meta.env.VITE_APP_FIREBASE_PROJECT_ID,
  storageBucket: import.meta.env.VITE_APP_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: import.meta.env.VITE_APP_FIREBASE_MESSAGING_SENDER_ID,
  appId: import.meta.env.VITE_APP_FIREBASE_APP_ID
};

const app = initializeApp(firebaseConfig);
export const auth = getAuth(app);
export const db = getFirestore(app);
export const storage = getStorage(app);

Create a .env file in the root of your project and add your Firebase configuration:

VITE_APP_FIREBASE_API_KEY=your_api_key
VITE_APP_FIREBASE_AUTH_DOMAIN=your_auth_domain
VITE_APP_FIREBASE_PROJECT_ID=your_project_id
VITE_APP_FIREBASE_STORAGE_BUCKET=your_storage_bucket
VITE_APP_FIREBASE_MESSAGING_SENDER_ID=your_messaging_sender_id
VITE_APP_FIREBASE_APP_ID=your_app_id

This setup initializes Firebase and exports the necessary services (Auth, Firestore, and Storage) for use throughout your application.

2: Firebase Authentication

2.1 Introduction to Firebase Authentication

Firebase Authentication provides easy-to-use SDKs and ready-made UI libraries to authenticate users to your app. It supports authentication using passwords, phone numbers, popular federated identity providers like Google, Facebook, and Twitter, and more.

2.2 Setting up Email/Password authentication

To get started with email/password authentication, we'll create a simple registration form. First, let's create a new component src/components/Register.tsx:

import React, { useState } from 'react';
import { createUserWithEmailAndPassword, updateProfile } from "firebase/auth";
import { auth } from '../firebase';

const Register: React.FC = () => {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [displayName, setDisplayName] = useState('');

  const handleRegister = async (e: React.FormEvent) => {
    e.preventDefault();
    try {
      const userCredential = await createUserWithEmailAndPassword(auth, email, password);
      await updateProfile(userCredential.user, { displayName });
      console.log("User registered successfully");
    } catch (error) {
      console.error("Error registering user:", error);
    }
  };

  return (
    <form onSubmit={handleRegister}>
      <input
        type="text"
        value={displayName}
        onChange={(e) => setDisplayName(e.target.value)}
        placeholder="Display Name"
        required
      />
      <input
        type="email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        placeholder="Email"
        required
      />
      <input
        type="password"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
        placeholder="Password"
        required
      />
      <button type="submit">Register</button>
    </form>
  );
};

export default Register;

2.3 Implementing user login

Next, let's create a login component src/components/Login.tsx:

import React, { useState } from 'react';
import { signInWithEmailAndPassword } from "firebase/auth";
import { auth } from '../firebase';

const Login: React.FC = () => {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const handleLogin = async (e: React.FormEvent) => {
    e.preventDefault();
    try {
      await signInWithEmailAndPassword(auth, email, password);
      console.log("User logged in successfully");
    } catch (error) {
      console.error("Error logging in:", error);
    }
  };

  return (
    <form onSubmit={handleLogin}>
      <input
        type="email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        placeholder="Email"
        required
      />
      <input
        type="password"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
        placeholder="Password"
        required
      />
      <button type="submit">Login</button>
    </form>
  );
};

export default Login;

2.4 Handling authentication state changes

To manage the authentication state across your app, you can create a custom hook. Create a new file src/hooks/useAuth.ts:

import { useState, useEffect } from "react";
import { onAuthStateChanged, User } from "firebase/auth";
import { auth } from '../firebase';

export const useAuth = () => {
  const [user, setUser] = useState<User | null>(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const unsubscribe = onAuthStateChanged(auth, (user) => {
      setUser(user);
      setLoading(false);
    });

    return unsubscribe;
  }, []);

  return { user, loading };
};

You can now use this hook in your components to access the current user's authentication state:

import React from 'react';
import { useAuth } from '../hooks/useAuth';

const AuthStatus: React.FC = () => {
  const { user, loading } = useAuth();

  if (loading) {
    return <div>Loading...</div>;
  }

  return (
    <div>
      {user ? `Logged in as ${user.displayName}` : "Not logged in"}
    </div>
  );
};

export default AuthStatus;

2.5 Implementing user logout

To implement logout functionality, you can create a simple component:

import React from 'react';
import { signOut } from "firebase/auth";
import { auth } from '../firebase';

const Logout: React.FC = () => {
  const handleLogout = async () => {
    try {
      await signOut(auth);
      console.log("User logged out successfully");
    } catch (error) {
      console.error("Error logging out:", error);
    }
  };

  return <button onClick={handleLogout}>Logout</button>;
};

export default Logout;

3: Firestore Database

3.1 Introduction to Firestore

Firestore is a flexible, scalable NoSQL cloud database to store and sync data for client- and server-side development. It offers real-time updates, strong consistency, and offline support, making it an excellent choice for modern web applications.

3.2 Setting up Firestore in your project

We've already initialized Firestore in our firebase.ts file. Now, let's create a simple data model and implement CRUD operations.

3.3 CRUD operations with Firestore

For this example, we'll create a task management system. First, let's define our Task interface in a new file src/types/Task.ts:

export interface Task {
  id?: string;
  title: string;
  description: string;
  completed: boolean;
  userId: string;
  createdAt: Date;
}

Now, let's create a src/services/taskService.ts file to handle our Firestore operations:

import { db } from '../firebase';
import { collection, addDoc, getDoc, getDocs, updateDoc, deleteDoc, doc, query, where } from "firebase/firestore";
import { Task } from '../types/Task';

// Create a new task
export const addTask = async (task: Omit<Task, 'id'>): Promise<string> => {
  try {
    const docRef = await addDoc(collection(db, "tasks"), task);
    return docRef.id;
  } catch (error) {
    console.error("Error adding task:", error);
    throw error;
  }
};

// Read a single task
export const getTask = async (taskId: string): Promise<Task | null> => {
  try {
    const taskDoc = await getDoc(doc(db, "tasks", taskId));
    if (taskDoc.exists()) {
      return { id: taskDoc.id, ...taskDoc.data() } as Task;
    } else {
      return null;
    }
  } catch (error) {
    console.error("Error getting task:", error);
    throw error;
  }
};

// Read all tasks for a user
export const getUserTasks = async (userId: string): Promise<Task[]> => {
  try {
    const q = query(collection(db, "tasks"), where("userId", "==", userId));
    const querySnapshot = await getDocs(q);
    return querySnapshot.docs.map(doc => ({ id: doc.id, ...doc.data() }) as Task);
  } catch (error) {
    console.error("Error getting user tasks:", error);
    throw error;
  }
};

// Update a task
export const updateTask = async (taskId: string, updates: Partial<Task>): Promise<void> => {
  try {
    await updateDoc(doc(db, "tasks", taskId), updates);
  } catch (error) {
    console.error("Error updating task:", error);
    throw error;
  }
};

// Delete a task
export const deleteTask = async (taskId: string): Promise<void> => {
  try {
    await deleteDoc(doc(db, "tasks", taskId));
  } catch (error) {
    console.error("Error deleting task:", error);
    throw error;
  }
};

3.4 Using Firestore in React components

Now, let's create a TaskList component that uses these Firestore operations. Create a new file src/components/TaskList.tsx:

import React, { useState, useEffect } from 'react';
import { useAuth } from '../hooks/useAuth';
import { Task } from '../types/Task';
import { getUserTasks, addTask, updateTask, deleteTask } from '../services/taskService';

const TaskList: React.FC = () => {
  const [tasks, setTasks] = useState<Task[]>([]);
  const [newTaskTitle, setNewTaskTitle] = useState('');
  const { user } = useAuth();

  useEffect(() => {
    if (user) {
      loadTasks();
    }
  }, [user]);

  const loadTasks = async () => {
    if (user) {
      const userTasks = await getUserTasks(user.uid);
      setTasks(userTasks);
    }
  };

  const handleAddTask = async (e: React.FormEvent) => {
    e.preventDefault();
    if (user && newTaskTitle.trim()) {
      const newTask: Omit<Task, 'id'> = {
        title: newTaskTitle,
        description: '',
        completed: false,
        userId: user.uid,
        createdAt: new Date()
      };
      await addTask(newTask);
      setNewTaskTitle('');
      loadTasks();
    }
  };

  const handleToggleComplete = async (task: Task) => {
    await updateTask(task.id!, { completed: !task.completed });
    loadTasks();
  };

  const handleDeleteTask = async (taskId: string) => {
    await deleteTask(taskId);
    loadTasks();
  };

  if (!user) {
    return <div>Please log in to view tasks.</div>;
  }

  return (
    <div>
      <h2>Tasks</h2>
      <form onSubmit={handleAddTask}>
        <input
          type="text"
          value={newTaskTitle}
          onChange={(e) => setNewTaskTitle(e.target.value)}
          placeholder="New task title"
        />
        <button type="submit">Add Task</button>
      </form>
      <ul>
        {tasks.map((task) => (
          <li key={task.id}>
            <input
              type="checkbox"
              checked={task.completed}
              onChange={() => handleToggleComplete(task)}
            />
            {task.title}
            <button onClick={() => handleDeleteTask(task.id!)}>Delete</button>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default TaskList;

3.5 Real-time data synchronization

To implement real-time updates, we can use Firestore's onSnapshot method. Let's modify our getUserTasks function in taskService.ts:

import { collection, query, where, onSnapshot } from "firebase/firestore";

export const getUserTasksRealtime = (userId: string, callback: (tasks: Task[]) => void) => {
  const q = query(collection(db, "tasks"), where("userId", "==", userId));
  return onSnapshot(q, (querySnapshot) => {
    const tasks = querySnapshot.docs.map(doc => ({ id: doc.id, ...doc.data() }) as Task);
    callback(tasks);
  });
};

Now, update the TaskList component to use this real-time function:

import React, { useState, useEffect } from 'react';
import { useAuth } from '../hooks/useAuth';
import { Task } from '../types/Task';
import { getUserTasksRealtime, addTask, updateTask, deleteTask } from '../services/taskService';

const TaskList: React.FC = () => {
  const [tasks, setTasks] = useState<Task[]>([]);
  const [newTaskTitle, setNewTaskTitle] = useState('');
  const { user } = useAuth();

  useEffect(() => {
    let unsubscribe: () => void;
    if (user) {
      unsubscribe = getUserTasksRealtime(user.uid, setTasks);
    }
    return () => {
      if (unsubscribe) {
        unsubscribe();
      }
    };
  }, [user]);

  // ... rest of the component remains the same
};

export default TaskList;

This implementation now provides real-time updates whenever the tasks collection changes.

4: Cloud Storage

4.1 Introduction to Firebase Cloud Storage

Firebase Cloud Storage is designed to help you quickly and easily store and serve user-generated content, such as photos and videos. It provides robust operations to upload and download files, and integrates seamlessly with Firebase Authentication and Security Rules.

4.2 Setting up Cloud Storage in your project

We've already initialized Cloud Storage in our firebase.ts file. Now, let's create a service to handle file uploads and retrievals.

4.3 Uploading files to Cloud Storage

First, let's create a new file src/services/storageService.ts:

import { storage } from '../firebase';
import { ref, uploadBytes, getDownloadURL } from "firebase/storage";

export const uploadFile = async (file: File, userId: string): Promise<string> => {
  try {
    const fileRef = ref(storage, `files/${userId}/${file.name}`);
    const snapshot = await uploadBytes(fileRef, file);
    const downloadURL = await getDownloadURL(snapshot.ref);
    return downloadURL;
  } catch (error) {
    console.error("Error uploading file:", error);
    throw error;
  }
};

Now, let's create a component to handle file uploads. Create a new file src/components/FileUploader.tsx:

import React, { useState } from 'react';
import { useAuth } from '../hooks/useAuth';
import { uploadFile } from '../services/storageService';

const FileUploader: React.FC = () => {
  const [file, setFile] = useState<File | null>(null);
  const [uploading, setUploading] = useState(false);
  const [downloadURL, setDownloadURL] = useState<string | null>(null);
  const { user } = useAuth();

  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    if (e.target.files) {
      setFile(e.target.files[0]);
    }
  };

  const handleUpload = async () => {
    if (file && user) {
      setUploading(true);
      try {
        const url = await uploadFile(file, user.uid);
        setDownloadURL(url);
      } catch (error) {
        console.error("Error uploading file:", error);
      } finally {
        setUploading(false);
      }
    }
  };

  return (
    <div>
      <input type="file" onChange={handleFileChange} />
      <button onClick={handleUpload} disabled={!file || uploading}>
        {uploading ? 'Uploading...' : 'Upload'}
      </button>
      {downloadURL && (
        <div>
          <p>File uploaded successfully!</p>
          <a href={downloadURL} target="_blank" rel="noopener noreferrer">View File</a>
        </div>
      )}
    </div>
  );
};

export default FileUploader;

4.4 Retrieving and displaying files from Cloud Storage

To retrieve and display files, we can use the download URL we got after uploading. Let's create a component to display a list of uploaded files. First, we need to store the file metadata in Firestore.

Update the uploadFile function in storageService.ts:

import { storage, db } from '../firebase';
import { ref, uploadBytes, getDownloadURL } from "firebase/storage";
import { collection, addDoc } from "firebase/firestore";

export const uploadFile = async (file: File, userId: string): Promise<string> => {
  try {
    const fileRef = ref(storage, `files/${userId}/${file.name}`);
    const snapshot = await uploadBytes(fileRef, file);
    const downloadURL = await getDownloadURL(snapshot.ref);

    // Store file metadata in Firestore
    await addDoc(collection(db, "files"), {
      name: file.name,
      type: file.type,
      size: file.size,
      userId: userId,
      downloadURL: downloadURL,
      createdAt: new Date()
    });

    return downloadURL;
  } catch (error) {
    console.error("Error uploading file:", error);
    throw error;
  }
};

Now, let's create a component to display the list of files. Create a new file src/components/FileList.tsx:

import React, { useEffect, useState } from 'react';
import { useAuth } from '../hooks/useAuth';
import { collection, query, where, onSnapshot } from "firebase/firestore";
import { db } from '../firebase';

interface FileMetadata {
  id: string;
  name: string;
  type: string;
  size: number;
  downloadURL: string;
  createdAt: Date;
}

const FileList: React.FC = () => {
  const [files, setFiles] = useState<FileMetadata[]>([]);
  const { user } = useAuth();

  useEffect(() => {
    if (user) {
      const q = query(collection(db, "files"), where("userId", "==", user.uid));
      const unsubscribe = onSnapshot(q, (querySnapshot) => {
        const fileList: FileMetadata[] = [];
        querySnapshot.forEach((doc) => {
          fileList.push({ id: doc.id, ...doc.data() } as FileMetadata);
        });
        setFiles(fileList);
      });

      return () => unsubscribe();
    }
  }, [user]);

  return (
    <div>
      <h2>Your Files</h2>
      <ul>
        {files.map((file) => (
          <li key={file.id}>
            <a href={file.downloadURL} target="_blank" rel="noopener noreferrer">
              {file.name}
            </a>
            <span> ({(file.size / 1024 / 1024).toFixed(2)} MB)</span>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default FileList;

4.5 Deleting files from Cloud Storage

To allow users to delete their files, we need to update our storageService.ts and add a delete function:

import { storage, db } from '../firebase';
import { ref, deleteObject } from "firebase/storage";
import { doc, deleteDoc } from "firebase/firestore";

export const deleteFile = async (fileId: string, filePath: string): Promise<void> => {
  try {
    // Delete file from Storage
    const fileRef = ref(storage, filePath);
    await deleteObject(fileRef);

    // Delete file metadata from Firestore
    await deleteDoc(doc(db, "files", fileId));
  } catch (error) {
    console.error("Error deleting file:", error);
    throw error;
  }
};

Now, let's update our FileList component to include a delete button for each file:

import React, { useEffect, useState } from 'react';
import { useAuth } from '../hooks/useAuth';
import { collection, query, where, onSnapshot } from "firebase/firestore";
import { db } from '../firebase';
import { deleteFile } from '../services/storageService';

// ... (previous FileMetadata interface)

const FileList: React.FC = () => {
  // ... (previous state and useEffect)

  const handleDelete = async (file: FileMetadata) => {
    if (window.confirm(`Are you sure you want to delete ${file.name}?`)) {
      try {
        await deleteFile(file.id, `files/${user!.uid}/${file.name}`);
      } catch (error) {
        console.error("Error deleting file:", error);
      }
    }
  };

  return (
    <div>
      <h2>Your Files</h2>
      <ul>
        {files.map((file) => (
          <li key={file.id}>
            <a href={file.downloadURL} target="_blank" rel="noopener noreferrer">
              {file.name}
            </a>
            <span> ({(file.size / 1024 / 1024).toFixed(2)} MB)</span>
            <button onClick={() => handleDelete(file)}>Delete</button>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default FileList;

5: Advanced Topics and Best Practices

5.1 Error Handling and Form Validation

Proper error handling is crucial for a good user experience. Let's create a custom hook for form validation and error handling:

// src/hooks/useForm.ts
import { useState } from 'react';

interface FormErrors {
  [key: string]: string;
}

export const useForm = <T extends { [key: string]: any }>(initialState: T, validate: (values: T) => FormErrors) => {
  const [values, setValues] = useState<T>(initialState);
  const [errors, setErrors] = useState<FormErrors>({});
  const [isSubmitting, setIsSubmitting] = useState(false);

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { name, value } = e.target;
    setValues({
      ...values,
      [name]: value
    });
  };

  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>, onSubmit: (values: T) => Promise<void>) => {
    e.preventDefault();
    const validationErrors = validate(values);
    setErrors(validationErrors);
    setIsSubmitting(true);

    if (Object.keys(validationErrors).length === 0) {
      try {
        await onSubmit(values);
      } catch (error) {
        console.error("Form submission error:", error);
        setErrors({ submit: "An error occurred while submitting the form" });
      }
    }

    setIsSubmitting(false);
  };

  return { values, errors, isSubmitting, handleChange, handleSubmit };
};

Now, let's use this hook in our Register component:

// src/components/Register.tsx
import React from 'react';
import { createUserWithEmailAndPassword, updateProfile } from "firebase/auth";
import { auth } from '../firebase';
import { useForm } from '../hooks/useForm';

interface RegisterForm {
  displayName: string;
  email: string;
  password: string;
}

const initialState: RegisterForm = {
  displayName: '',
  email: '',
  password: ''
};

const validate = (values: RegisterForm) => {
  const errors: { [key: string]: string } = {};
  if (!values.displayName) {
    errors.displayName = "Display name is required";
  }
  if (!values.email) {
    errors.email = "Email is required";
  } else if (!/\S+@\S+\.\S+/.test(values.email)) {
    errors.email = "Email is invalid";
  }
  if (!values.password) {
    errors.password = "Password is required";
  } else if (values.password.length < 6) {
    errors.password = "Password must be at least 6 characters";
  }
  return errors;
};

const Register: React.FC = () => {
  const { values, errors, isSubmitting, handleChange, handleSubmit } = useForm<RegisterForm>(initialState, validate);

  const onSubmit = async (values: RegisterForm) => {
    try {
      const userCredential = await createUserWithEmailAndPassword(auth, values.email, values.password);
      await updateProfile(userCredential.user, { displayName: values.displayName });
      console.log("User registered successfully");
    } catch (error) {
      console.error("Error registering user:", error);
      throw error;
    }
  };

  return (
    <form onSubmit={(e) => handleSubmit(e, onSubmit)}>
      <div>
        <input
          type="text"
          name="displayName"
          value={values.displayName}
          onChange={handleChange}
          placeholder="Display Name"
        />
        {errors.displayName && <p>{errors.displayName}</p>}
      </div>
      <div>
        <input
          type="email"
          name="email"
          value={values.email}
          onChange={handleChange}
          placeholder="Email"
        />
        {errors.email && <p>{errors.email}</p>}
      </div>
      <div>
        <input
          type="password"
          name="password"
          value={values.password}
          onChange={handleChange}
          placeholder="Password"
        />
        {errors.password && <p>{errors.password}</p>}
      </div>
      <button type="submit" disabled={isSubmitting}>
        {isSubmitting ? 'Registering...' : 'Register'}
      </button>
      {errors.submit && <p>{errors.submit}</p>}
    </form>
  );
};

export default Register;

5.2 State Management with Context API

For larger applications, it's beneficial to use a state management solution. Let's use React's Context API to manage our authentication state:

// src/contexts/AuthContext.tsx
import React, { createContext, useContext, useState, useEffect } from 'react';
import { User } from 'firebase/auth';
import { auth } from '../firebase';

interface AuthContextType {
  user: User | null;
  loading: boolean;
}

const AuthContext = createContext<AuthContextType>({ user: null, loading: true });

export const useAuth = () => useContext(AuthContext);

export const AuthProvider: React.FC = ({ children }) => {
  const [user, setUser] = useState<User | null>(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const unsubscribe = auth.onAuthStateChanged((user) => {
      setUser(user);
      setLoading(false);
    });

    return unsubscribe;
  }, []);

  return (
    <AuthContext.Provider value={{ user, loading }}>
      {children}
    </AuthContext.Provider>
  );
};

Wrap your main App component with this provider:

// src/App.tsx
import React from 'react';
import { AuthProvider } from './contexts/AuthContext';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Home from './components/Home';
import Register from './components/Register';
import Login from './components/Login';
import PrivateRoute from './components/PrivateRoute';

const App: React.FC = () => {
  return (
    <AuthProvider>
      <Router>
        <Switch>
          <PrivateRoute exact path="/" component={Home} />
          <Route path="/register" component={Register} />
          <Route path="/login" component={Login} />
        </Switch>
      </Router>
    </AuthProvider>
  );
};

export default App;

5.3 Custom Hooks for Firebase Operations

To keep your components clean and reusable, create custom hooks for common Firebase operations:

// src/hooks/useFirestore.ts
import { useState, useEffect } from 'react';
import { db } from '../firebase';
import { collection, query, where, onSnapshot, QueryConstraint } from "firebase/firestore";

export const useFirestoreQuery = <T>(
  collectionName: string,
  constraints: QueryConstraint[] = []
) => {
  const [documents, setDocuments] = useState<T[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<Error | null>(null);

  useEffect(() => {
    const q = query(collection(db, collectionName), ...constraints);
    const unsubscribe = onSnapshot(q, 
      (snapshot) => {
        const docs = snapshot.docs.map(doc => ({ id: doc.id, ...doc.data() } as T));
        setDocuments(docs);
        setLoading(false);
      },
      (err) => {
        console.error("Firestore query error:", err);
        setError(err);
        setLoading(false);
      }
    );

    return unsubscribe;
  }, [collectionName, constraints]);

  return { documents, loading, error };
};

You can use this hook in your components like this:

const TaskList: React.FC = () => {
  const { user } = useAuth();
  const { documents: tasks, loading, error } = useFirestoreQuery<Task>(
    'tasks',
    [where("userId", "==", user?.uid)]
  );

  if (loading) return <div>Loading tasks...</div>;
  if (error) return <div>Error: {error.message}</div>;

  return (
    <ul>
      {tasks.map(task => (
        <li key={task.id}>{task.title}</li>
      ))}
    </ul>
  );
};

5.4 Security Rules

Don't forget to set up proper security rules for your Firestore and Storage. Here's an example of Firestore security rules:

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /users/{userId} {
      allow read, write: if request.auth != null && request.auth.uid == userId;
    }
    match /tasks/{taskId} {
      allow read, write: if request.auth != null && request.auth.uid == resource.data.userId;
    }
    match /files/{fileId} {
      allow read, write: if request.auth != null && request.auth.uid == resource.data.userId;
    }
  }
}

And for Storage:

rules_version = '2';
service firebase.storage {
  match /b/{bucket}/o {
    match /files/{userId}/{allPaths=**} {
      allow read, write: if request.auth != null && request.auth.uid == userId;
    }
  }
}

5.5 Performance Optimization

To optimize your Firebase usage:

Use Firebase SDK's built-in offline persistence for Firestore.
Implement pagination for large data sets.
Use Firebase Performance Monitoring to identify bottlenecks.
Optimize your Firebase Security Rules to avoid unnecessary reads.

5.6 Testing

For testing Firebase functionality, you can use the Firebase Emulator Suite. Set up your tests to use the emulator instead of the production Firebase services.

Here's an example of how to set up Jest tests with the Firebase emulator:

// src/setupTests.ts
import { initializeApp } from 'firebase/app';
import { getAuth, connectAuthEmulator } from 'firebase/auth';
import { getFirestore, connectFirestoreEmulator } from 'firebase/firestore';

const app = initializeApp({
  projectId: 'demo-test-project',
});

const auth = getAuth(app);
const db = getFirestore(app);

connectAuthEmulator(auth, 'http://localhost:9099');
connectFirestoreEmulator(db, 'localhost', 8080);

Then in your test file:

// src/components/TaskList.test.tsx
import React from 'react';
import { render, screen, waitFor } from '@testing-library/react';
import { AuthProvider } from '../contexts/AuthContext';
import TaskList from './TaskList';
import { addDoc, collection } from 'firebase/firestore';
import { db } from '../firebase';

test('renders task list', async () => {
  // Add a test task to Firestore emulator
  await addDoc(collection(db, 'tasks'), {
    title: 'Test Task',
    userId: 'testuser',
    completed: false
  });

  render(
    <AuthProvider>
      <TaskList />
    </AuthProvider>
  );

  await waitFor(() => {
    expect(screen.getByText('Test Task')).toBeInTheDocument();
  });
});

Comprehensive Guide to Firebase Security Rules

Security rules are a critical component of Firebase that allow you to control access to your data and validate operations in Firestore and Cloud Storage. They act as your application's first line of defense, ensuring that only authorized users can read or write data.

Firestore Security Rules

Firestore security rules are written in a domain-specific language that allows you to specify conditions for read and write operations.

Basic Structure

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    // Rules go here
  }
}

Common Operations

allow read: Allows get and list operations
allow write: Allows create, update, and delete operations
allow get: Allows only get operations
allow list: Allows only list operations
allow create: Allows only document creation
allow update: Allows only document updates
allow delete: Allows only document deletion

Authentication Check

To check if a user is authenticated:

allow read, write: if request.auth != null;

User-specific Data

To restrict access to user-specific data:

match /users/{userId} {
  allow read, write: if request.auth != null && request.auth.uid == userId;
}

Data Validation

You can validate data before allowing write operations:

match /tasks/{taskId} {
  allow create: if request.auth != null 
                && request.resource.data.title is string
                && request.resource.data.title.size() > 0
                && request.resource.data.title.size() <= 100;
}

Complex Rules

You can create more complex rules using functions:

function isOwner(userId) {
  return request.auth != null && request.auth.uid == userId;
}

match /tasks/{taskId} {
  allow read: if isOwner(resource.data.userId);
  allow create: if isOwner(request.resource.data.userId)
                && request.resource.data.title is string
                && request.resource.data.title.size() > 0
                && request.resource.data.title.size() <= 100;
  allow update: if isOwner(resource.data.userId)
                && (!request.resource.data.diff(resource.data).affectedKeys()
                    .hasAny(['userId', 'createdAt']));
  allow delete: if isOwner(resource.data.userId);
}

Cloud Storage Security Rules

Cloud Storage security rules are similar to Firestore rules but are specifically designed for file operations.

Basic Structure

rules_version = '2';
service firebase.storage {
  match /b/{bucket}/o {
    // Rules go here
  }
}

User-specific Files

To restrict access to user-specific files:

match /files/{userId}/{fileName} {
  allow read, write: if request.auth != null && request.auth.uid == userId;
}

File Type Validation

You can validate file types:

match /images/{imageId} {
  allow write: if request.resource.contentType.matches('image/.*');
}

File Size Limitation

You can limit the size of uploaded files:

match /files/{fileName} {
  allow write: if request.resource.size < 5 * 1024 * 1024; // 5MB
}

Combining Rules

You can combine multiple conditions:

match /files/{userId}/{fileName} {
  allow read: if request.auth != null && request.auth.uid == userId;
  allow write: if request.auth != null 
               && request.auth.uid == userId
               && request.resource.size < 5 * 1024 * 1024
               && request.resource.contentType.matches('image/.*');
}

Best Practices for Security Rules

Principle of Least Privilege: Give users the minimum level of access they need.
Validate All Data: Always validate data on the server-side, even if you're also doing client-side validation.
Use Security Rules to Enforce Data Structure: Ensure that all written data conforms to your expected structure.
Keep Rules Simple: Complex rules can be hard to maintain and may impact performance.
Test Your Rules: Use the Firebase Emulator Suite to test your security rules thoroughly.
Use Custom Claims for Role-Based Access: For more complex authorization scenarios, use custom claims in Firebase Authentication.
Monitor and Audit: Regularly review your security rules and monitor for any unauthorized access attempts.
Don't Rely on Client-Side Security: Remember that any client-side checks can be bypassed, so always enforce security on the server.
Keep Sensitive Data Out of Rules: Don't include API keys or other secrets in your security rules.
Use Firestore and Storage Together: For files with metadata, store the metadata in Firestore and use its rules in conjunction with Storage rules.

By following these guidelines and understanding how to craft effective security rules, you can ensure that your Firebase application remains secure and that your data is protected from unauthorized access or manipulation.

Setting Up Android Studio on Linux

Sahil Verma — Sun, 30 Jun 2024 07:24:10 +0000

Android development on Linux is straightforward and provides a powerful platform for app creation. This guide will walk you through installing Android Studio, Java Development Kit (JDK), and setting up necessary environment variables.

1. Installing Android Studio

Android Studio is the official Integrated Development Environment (IDE) for Android app development. Here's how to install it on Linux:

a) Update your package lists:

sudo apt update

b) Install required dependencies:

sudo apt install default-jdk libc6:i386 libncurses5:i386 libstdc++6:i386 lib32z1 libbz2-1.0:i386

c) Download Android Studio:

wget https://redirector.gvt1.com/edgedl/android/studio/ide-zips/2023.1.1.26/android-studio-2023.1.1.26-linux.tar.gz

d) Extract the downloaded archive:

sudo tar -xvzf android-studio-*.tar.gz -C /opt/

e) Create a desktop entry for easy access:

echo "[Desktop Entry]
Version=1.0
Type=Application
Name=Android Studio
Exec="/opt/android-studio/bin/studio.sh" %f
Icon=/opt/android-studio/bin/studio.svg
Categories=Development;IDE;
Terminal=false
StartupNotify=true
StartupWMClass=android-studio" | sudo tee /usr/share/applications/android-studio.desktop

f) Make the desktop entry executable:

sudo chmod +x /usr/share/applications/android-studio.desktop

g) Launch Android Studio:

/opt/android-studio/bin/studio.sh

2. Installing Java Development Kit (JDK)

JDK is a crucial component for Android development. Here's how to install it:

a) Update package lists:

sudo apt update

b) Install default JDK:

sudo apt install default-jdk

c) Verify the installation:

java -version
javac -version

3. Setting Environment Variables

Setting ANDROID_HOME and JAVA_HOME is important for smooth Android development:

a) Find your Java installation path:

update-alternatives --display java

b) Edit your .bashrc file:

nano ~/.bashrc  # with nano
code ~/.bashrc  # with vs code

c) Add these lines at the end of the file:

export JAVA_HOME=/usr/lib/jvm/java-17-openjdk-amd64 # Check for installed version
export PATH=$PATH:$JAVA_HOME/bin
export ANDROID_HOME=/opt/android-studio/sdk
export PATH=$PATH:$ANDROID_HOME/tools:$ANDROID_HOME/platform-tools

d) Save and close the file.

e) Apply the changes:

source ~/.bashrc

f) Verify the settings:

echo $JAVA_HOME
echo $ANDROID_HOME

With these steps completed, you'll have a fully functional Android development environment on your Linux system. Remember to keep your tools updated and explore the vast world of Android app development!

New frontend for react-icons

Sahil Verma — Mon, 20 Nov 2023 18:09:31 +0000

If you're a React developer, chances are you're familiar with the popular library, react-icons, an invaluable resource for incorporating icons seamlessly into your projects. While the library itself is fantastic, the official website might not have the visual appeal that matches its functionality.

In response to this, I've taken the initiative to create a new frontend for the react-icons website, giving it a sleek and modern design that enhances the user experience. Leveraging cutting-edge technologies such as Next.js 14, Tailwind CSS, and the Shadcn component library, the revamped interface aims to provide users with an aesthetically pleasing and intuitive platform for exploring and implementing icons.

Check out the redesigned React-Icons website: React Icons v2

GitHub Repository: React Icons v2 GitHub

Your feedback is invaluable and will contribute to the ongoing refinement of this project. Remember, this is not an official website, but a community-driven effort to enhance the accessibility and appeal of the react-icons library.

Thank you for your time, and happy coding with React-Icons v2!

How I updated my portfolio.

Sahil Verma — Mon, 21 Aug 2023 18:00:53 +0000

In the fast-paced world of technology and design, staying current and relevant is key. As a full stack developer, I believe in not only keeping up with the latest trends but also in pushing the boundaries of what's possible. This led me to embark on a journey of upgrading my portfolio, transforming it into a dynamic and immersive showcase of my skills and expertise.

Here's the link for my updated portfolio.
https://sahilverma.dev/

The Starting Point

When I initially developed my portfolio, I used a stack that included Next.js, Tailwind CSS, Framer Motion, JavaScript, and Firebase. The result was a decent and functional website that reflected my abilities at the time. However, as time went on and I gained more experience, I realized that there was room for improvement.

Embracing New Technologies

The first step in my upgrade journey was embracing new technologies that were emerging in the web development landscape. I transitioned from using JavaScript to TypeScript, which brought enhanced type safety and code quality to my projects. TypeScript's static analysis helped me catch potential bugs early and streamline the development process.

A Leap with Next.js 13

One of the highlights of this upgrade was incorporating Next.js 13. This new version introduced advanced server-side rendering capabilities, taking my portfolio's performance to a whole new level. The lightning-fast loading times and improved user experience were immediately noticeable, reaffirming my choice to stay at the forefront of technology.

From Firebase to Sanity

While Firebase served me well, I decided to explore new content management options. Enter Sanity, a headless CMS that revolutionized how I manage and update content on my portfolio. Its flexibility allowed me to seamlessly integrate dynamic content, and its rich text capabilities enabled me to craft detailed articles and project descriptions effortlessly.

UI Excellence with Tailwind CSS

Tailwind CSS, a utility-first CSS framework, became my go-to for crafting stunning UI. Its responsive design system and extensive class library expedited my development process while allowing for a high degree of customization. The result? A sleek and modern user interface that captivates visitors.

Elevating Interaction with Framer Motion

To breathe life into my portfolio, I turned to Framer Motion for animations and interactions. The subtle yet impactful animations added an element of interactivity, making the user experience more engaging and delightful. Framer Motion's ease of use and robust capabilities aligned perfectly with my vision for an immersive interface.

How to Setup

If you're inspired to create an upgraded portfolio of your own, follow these steps to get started:

Clone the Repository: Begin by cloning the repository to your local machine using git clone https://github.com/sahilverma-dev/sahil-verma.
Install Dependencies: Navigate to the project directory and install the necessary dependencies with npm install.
Customize Content: Modify the content, images, and links to make the portfolio truly yours.
Add token: Go to the API section of your Sanity project and add a new token with editor access. https://www.sanity.io/manage/personal/project/YOUR_PROJECT_ID/api
Configure environment variables: Create a new .env on the basis of the .env.example.
Launch the Development Server: Run npm run dev to start the development server and preview your changes.
Deploy Your Portfolio: Once you're satisfied with your modifications, deploy your portfolio to your chosen hosting platform.

Why These Technologies?

TypeScript: I chose TypeScript for its enhanced code quality, improved type safety, and streamlined development process. It helps me catch potential errors early and write more robust code.
Next.js 13: The advanced server-side rendering capabilities of Next.js 13 result in lightning-fast loading times and an improved user experience.
Sanity: Switching to Sanity as a headless CMS allows for seamless content management and dynamic content integration, enhancing the overall user engagement.
Tailwind CSS: Tailwind CSS offers a utility-first approach that speeds up UI development while providing extensive customization options.
Framer Motion: Framer Motion empowers me to create engaging animations and interactions, making the user experience more enjoyable and immersive.

Embarking on a New Chapter

With each technology upgrade, my portfolio transformed into an evolved representation of my growth as a developer. It's a testament to my dedication to delivering exceptional user experiences, combining innovative technology with elegant design. This upgraded version not only reflects my current skills but also sets the stage for even greater achievements in the future.

As I continue to evolve as a developer, my portfolio will always be a canvas to experiment with new technologies, design approaches, and creative ideas. This journey of continuous improvement mirrors my commitment to excellence in the digital realm.

Whether you're a fellow developer, an employer, or simply someone who appreciates innovation, I invite you to explore my upgraded portfolio and witness the journey firsthand. Discover the seamless blend of technology and design that makes my work stand out in the ever-evolving landscape of web development.

Thank you for reading this and also please give me feedback about my portfolio🙏.

Stay curious, stay creative, and keep coding!

— Sahil Verma
🚀 Full Stack Developer
Portfolio
GitHub

React Query Cheat Sheet

Sahil Verma — Sat, 08 Apr 2023 08:17:53 +0000

Basic Concepts

Query

A query represents a request for data. It includes a key, which is a unique identifier for the data being fetched, and a query function, which is responsible for fetching the data. The query function can be an asynchronous function that returns the data or a promise that resolves to the data.

import { useQuery } from 'react-query';

const { data, isLoading, isError } = useQuery('todos', async () => {
  const response = await fetch('/api/todos');
  const data = await response.json();
  return data;
});

In the example above, we're using the useQuery hook user query data from an API. The key for this query is 'todos', and the query function is an asynchronous function that uses fetch to make a request to the API and returns the JSON response.

Query Result

A query result is an object that contains the data, loading state, and error state for a query. It is returned by the useQuery hook.

const { data, isLoading, isError } = useQuery('todos', async () => {
  // ...
});

In the example above, we're destructuring the query result into three variables: data, isLoading, and isError. data contains the data returned by the query function, isLoading is a boolean that indicates whether the query is currently loading, and isError is a boolean that indicates whether an error occurred while fetching the data.

Mutation

A mutation is a request to modify data. It includes a key, a unique identifier for the mutation, and a mutation function responsible for making the modification. The mutation function can be an asynchronous function that returns the updated data or a promise that resolves the updated data.

import { useMutation } from 'react-query';

const { mutate, isLoading, isError } = useMutation(async (text) => {
  const response = await fetch('/api/todos', {
    method: 'POST',
    body: JSON.stringify({ text }),
    headers: {
      'Content-Type': 'application/json',
    },
  });
  const data = await response.json();
  return data;
});

In the example above, we're using the useMutation hook to create a mutation that adds a new todo item to the API. The mutation function is an asynchronous function that uses fetch to make a POST request to the API with the new todo item's text property.

Query Client

A query client is a central object that manages the caching and execution of queries and mutations. It is created using the QueryClient constructor and can be accessed and used throughout your application using the QueryClientProvider component.

jsxCopy code
import { QueryClient, QueryClientProvider } from 'react-query';

const queryClient = new QueryClient();

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      {/* Your app code here */}
    </QueryClientProvider>
  );
}

In the example above, we're creating a QueryClient object and passing it to the QueryClientProvider component as a prop. This makes the QueryClient available throughout the app.

Hooks

React Query provides several hooks that you can use to manage and retrieve data in your application:

useQuery

The useQuery hook is used to fetch and cache data. It takes a key and a query function as arguments and returns a query result object.

const { data, isLoading, isError } = useQuery('todos', async () => {
  const response = await fetch('/api/todos');
  const data = await response.json();
  return data;
});

In the example above, we're using useQuery to fetch and cache data from the /api/todos endpoint. The key for this query is 'todos', and the query function is an asynchronous function that uses fetch to make a request to the API and returns the JSON response.

useMutation

The useMutation hook is used to modify data. It takes a mutation function as an argument and returns a mutation result object.

const { mutate, isLoading, isError } = useMutation(async (text) => {
  const response = await fetch('/api/todos', {
    method: 'POST',
    body: JSON.stringify({ text }),
    headers: {
      'Content-Type': 'application/json',
    },
  });
  const data = await response.json();
  return data;
});

In the example above, we're using useMutation to create a mutation that adds a new todo item to the API. The mutation function is an asynchronous function that uses fetch to make a POST request to the API with the new todo item's text property.

useQueryClient

The useQueryClient hook is used to access the QueryClient object in your components. It returns the QueryClient object.

const queryClient = useQueryClient();

In the example above, we're using useQueryClient to get access to the QueryClient object. We can then use this object to manually fetch or invalidate queries, or to manually mutate data.

Advanced Concepts

Query Caching

React Query automatically caches query results for you. When you fetch data using useQuery, React Query checks if the data is already in the cache. If it is, it returns the cached data instead of making a new request to the server.

const { data, isLoading, isError } = useQuery('todos', async () => {
  const response = await fetch('/api/todos');
  const data = await response.json();
  return data;
});

In the example above, if the 'todos' query has already been fetched and cached, React Query will return the cached data instead of making a new request to the server.

Query Refetching

You can manually refetch query data using the refetch function that is returned by the useQuery hook.

const { data, isLoading, isError, refetch } = useQuery('todos', async () => {
  const response = await fetch('/api/todos');
  const data = await response.json();
  return data;
});

function handleRefresh() {
  refetch();
}

In the example above, we're using the refetch function to manually refresh the 'todos' query data. This can be useful if you need to update the data after a mutation or if the data has become stale.

Query Invalidation

You can manually invalidate query data using the invalidateQueries function on the QueryClient object.

const queryClient = useQueryClient();

function handleClearCache() {
  queryClient.invalidateQueries('todos');
}

In the example above, we're using the invalidateQueries function to manually invalidate the 'todos' query data. This can be useful if you need to force the query to refetch data from the server, rather than returning cached data.

Query Pagination

React Query provides built-in support for pagination. You can use the useInfiniteQuery hook to fetch paginated data.

const { data, isLoading, isError, fetchNextPage, hasNextPage } = useInfiniteQuery('todos', async ({ pageParam = 0 }) => {
  const response = await fetch(`/api/todos?page=${pageParam}`);
  const data = await response.json();
  return data;
}, {
  getNextPageParam: (lastPage) => lastPage.nextPage,
});

function handleLoadMore() {
  fetchNextPage();
}

return (
  <div>
    {data.pages.map((page) => (
      <ul key={page.pageNumber}>
        {page.todos.map((todo) => (
          <li key={todo.id}>{todo.text}</li>
        ))}
      </ul>
    ))}
    <button onClick={handleLoadMore} disabled={!hasNextPage}>
      {isLoading ? 'Loading...' : 'Load More'}
    </button>
  </div>
);

In the example above, we're using the useInfiniteQuery hook to fetch paginated todo items from the API. The query key is 'todos', and the query function takes a pageParam argument that specifies which page of data to fetch. The getNextPageParam option is used to determine the next page of data to fetch based on the last page's data.

The fetchNextPage function is used to fetch the next page of data, and the hasNextPage property is used to determine if there is more data to fetch. The isLoading property is used to display a loading indicator while data is being fetched.

Query Prefetching

React Query provides built-in support for prefetching. You can use the useQuery hook with the initialData option to prefetch query data.

const { data, isLoading, isError } = useQuery('todos', async () => {
  const response = await fetch('/api/todos');
  const data = await response.json();
  return data;
}, {
  initialData: preloadedData,
  staleTime: 1000 * 60 * 5, // 5 minutes
});

return (
  <div>
    <ul>
      {data.map((todo) => (
        <li key={todo.id}>{todo.text}</li>
      ))}
    </ul>
  </div>
);

In the example above, we're using the useQuery hook to prefetch todo items from the server using the initialData option. The preloadedData variable contains the prefetched data. The staleTime option is used to specify how long the data is considered fresh and can be returned from the cache without making a new request to the server.

Query Retry

React Query automatically retries failed queries by default. You can customize the retry behavior using the retry option.

const { data, isLoading, isError } = useQuery('todos', async () => {
  const response = await fetch('/api/todos');
  const data = await response.json();
  if (!response.ok) {
    throw new Error('Failed to fetch todo items');
  }
  return data;
}, {
  retry: 3,
  retryDelay: (attempt) => Math.min(1000 * 2 ** attempt, 30000),
});

In the example above, we're using the retry and retryDelay options to specify that the query should be retried up to 3 times, with a delay that increases exponentially with each retry attempt. If the query fails after the maximum number of retries, an error will be thrown.

Query Cancellation

React Query provides built-in support for query cancellation. You can use the cancelQuery function to cancel a running query.

const { data, isLoading, isError, isFetching, error, cancel } = useQuery('todos', async () => {
  const response = await fetch('/api/todos');
  const data = await response.json();
  return data;
});

function handleClick() {
  cancel();
}

return (
  <div>
    {isLoading ? (
      <p>Loading...</p>
    ) : isError ? (
      <p>{error.message}</p>
    ) : (
      <>
        <ul>
          {data.map((todo) => (
            <li key={todo.id}>{todo.text}</li>
          ))}
        </ul>
        {isFetching && <p>Fetching...</p>}
        <button onClick={handleClick}>Cancel</button>
      </>
    )}
  </div>
);

In the example above, we're using the cancelQuery function to cancel the 'todos' query. The isFetching property is used to display a message while the query is being canceled.

Query Composition

React Query provides built-in support for query composition. You can use the useQueries hook to fetch multiple queries in parallel.


const [queryOneResult, queryTwoResult] = useQueries([
  {
    queryKey: 'todos',
    queryFn: async () => {
      const response = await fetch('/api/todos');
      const data = await response.json();
      return data;
    },
  },
  {
    queryKey: 'users',
    queryFn: async () => {
      const response = await fetch('/api/users');
      const data = await response.json();
      return data;
    },
  },
]);

const todos = queryOneResult.data;
const users = queryTwoResult.data;

return (
  <div>
    {queryOneResult.isLoading || queryTwoResult.isLoading ? (
      <p>Loading...</p>
    ) : queryOneResult.isError || queryTwoResult.isError ? (
      <p>Error!</p>
    ) : (
      <>
        <ul>
          {todos.map((todo) => (
            <li key={todo.id}>{todo.text}</li>
          ))}
        </ul>
        <ul>
          {users.map((user) => (
            <li key={user.id}>{user.name}</li>
          ))}
        </ul>
      </>
    )}
  </div>
);

In the example above, we're using the useQueries hook to fetch multiple queries in parallel. The queryKey property is used to identify each query, and the queryFn property is used to define the query function. The isLoading, isError, and data properties are used to display the query results.

Conclusion

React Query is a powerful library that provides a simple and elegant solution for managing data fetching in React applications. By providing a flexible and customizable API, React Query enables developers to easily manage complex data fetching scenarios with ease. By incorporating features such as caching, pagination, and prefetching, React Query enables developers to build fast and responsive user interfaces that can scale to handle large amounts of data.

Instagram Clone with Firebase

Sahil Verma — Thu, 03 Mar 2022 07:47:52 +0000

I made an Instagram Clone with React JS, Tailwind CSS and Firebase 9 with basic functionalities.
I tried my best to make this similar to real Instagram. Have a look.

Instagram Clone Link: https://instagram-firebase.netlify.app/
GitHub Repo Link: https://github.com/theviralboy/instagram-firebase.

How I made Instagram Content Fetching API in Node.js

Sahil Verma — Sat, 08 Jan 2022 03:30:44 +0000

GitHub Repo : instagram-api

So I was planning to build an Instagram downloading website. That's I was researching about this on Google, then I found this amazing trick.

If you put ?__a=1 after any Instagram link then it'll give a JSON in response.

For Instagram post

https://www.instagram.com/p/{post_id}/?__a=1

For Instagram user profile

https://www.instagram.com/p/{profile_username}/?__a=1

But if you try to fetch this API inside your code then, you'll get a CORS error like this.

To overcome this problem we have to use our server. So let's start building a node server for this project.

First, make a new folder and open that folder.

mkdir instagram-api
cd instagram-api

Then initialize a node project.

npm init -y

Now install the following dependencies.

npm i request express

Make a new JavaScript file.

touch index.js

Open VS Code in this folder.

code .

Modify your scripts inside package.json file.

Before

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
},

After

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "nodemon index.js" // you must have to install nodemon globally by npm install -g nodemon
},

Open the index.js file in VS Code and import all dependencies.

const express = require("express");
const request = require("request");

Now start listening to the port you want to.

const express = require("express");
const request = require("request");

const PORT = 1234;

const app = express();
app.listen(PORT, () => {
  console.clear();
  console.log(`listing in http://localhost:${PORT}`);
});

You can start the server to see the results side by side.

npm start

Now add a root route for testing and open the server in your browser.

app.get("/", (req, res) => {
  res?.send("I am working.");
});

Add another route for Instagram posts.

app.get("/post/:id", (req, res) => {
  const { id } = req?.params;
  if (id) {
    res.send(`Post id = ${id}`);
  }
});

Now I will use the request package to scrape the response data. It will scrape the data from Instagram API as a simple string and then I'll parse that string into JSON.

app.get("/post/:id", (req, res) => {
  const { id } = req?.params;
  if (id) {
    const link = `https://www.instagram.com/p/${id}/?__a=1`;
    request(link, (err, response, html) => {
      if (!err) {
        const json = JSON.parse(html);
        if (json) res.send(json);
      }
    });
  }
});

And now if I look into my server with a valid Instagram post id I'll see something like this.

I am getting a lot of data but I need only a certain type of data.
So I'll destructor it.

const json = JSON.parse(html)?.graphql?.shortcode_media;
res?.send({
  id,
  mainContent: {
    displayUrl: json?.display_url,
    resolutions: json?.display_resources.map((item) => ({
      src: item?.src,
    })),
  },
  user: {
    username: json?.owner?.username,
    isVerified: json?.owner?.is_verified,
    profilePic: json?.owner?.profile_pic_url,
  },
  caption: {
    main: json?.edge_media_to_caption.edges[0]?.node.text,
    accessibile: json?.accessibility_caption,
  },
  location: json?.location,
  comments: json?.edge_media_to_parent_comment?.count,
  likes: json?.edge_media_preview_like?.count,
  isVideo: json?.is_video,
  videoUrl: json?.video_url,
  allImages: json?.edge_sidecar_to_children?.edges?.map((item) => ({
    displayUrl: item?.node?.display_url,
    resolutions: item?.node?.display_resources?.map((item) => ({
      src: item?.src,
      size: item?.config_width,
    })),
  })),
});

Now its much clean and it gives me what I need.

You can also destructor it according to your needs.
I'll also do same for the user profile.

app.get("/user/:username", (req, res) => {
  const { username } = req?.params;
  if (username)
    const link = `https://www.instagram.com/${username}/?__a=1`;
    request(link, (err, response, html) => {
      if (!err) {
        const json = JSON.parse(html)?.graphql?.user;
        if (json)
          res?.send({
            username,
            bio: json.biography,
            profilePic: {
              sd: json?.profile_pic_url,
              hd: json?.profile_pic_url_hd,
            },
            fullName: json?.full_name,
            following: json?.edge_followed_by.count,
            follows: json?.edge_follow.count,
            posts: {
              total: json?.edge_owner_to_timeline_media?.count,
              content: json?.edge_owner_to_timeline_media?.edges?.map(
                (item) => ({
                  id: item?.node?.shortcode,
                  displayUrl: item?.node?.display_url,
                  caption: {
                    main: item?.node?.edge_media_to_caption.edges[0].node.text,
                    accessibile: item?.node?.accessibility_caption,
                  },
                  isVideo: item?.node?.is_video,
                  likes: item?.node?.edge_liked_by.count,
                  location: item?.node?.location,
                  comments: item?.node?.edge_media_to_comment.count,
                })
              ),
            },
          });
      }
    });
});

Now it's time to use this API inside the frontend.
I'll use React JS as a frontend framework and axios for fetching API in this project.

I'll fetch this API and set images to images.
As you can see in this block of code.

useEffect(() => {
  const [images, setImages] = useState();
  const getData = async () => {
    const { data } = await axios("http://localhost:1234/post/CYa0_SRtUrf");
    if (data) {
      setImages(data);
      console.log(data);
    }
  };
  getData();
}, []);

Now if I check the console there will be another CORS error.

To solve this error install another npm package called cros.

npm i cors

Now import it and use it

const express = require("express");
const cors = require("cors");

const app = express();
app.use(cors());

Now It will work.

But now, if I try to display images inside my webpage, it will again give me an error:

It is a bit difficult to deal with this error. But there are two ways to solve this problem. But I will show only the most convenient.

To solve this problem I'll convert to images I am getting from Instagram to base64.

If you don't know about base64 then it is.

Base64 is a group of binary-to-text encoding schemes that represent binary data (more specifically, a sequence of 8-bit bytes) in an ASCII string format by translating the data into a radix-64 representation. The term Base64 originates from a specific MIME content transfer encoding. Each non-final Base64 digit represents exactly 6 bits of data. Three bytes (i.e., a total of 24 bits) can therefore be represented by four 6-bit Base64 digits.
Source Wikipedia : Base64

To convert image to base64 first install another package called image-to-base64.

npm i image-to-base64

Import image-to-base641 and make a new asynchronous function getBase64.

const imageToBase64 = require("image-to-base64");

const getBase64 = async (link) => {
  const base64 = await imageToBase64(link);
  return `data:image/jpeg;base64,${base64}`;
};

This function will take the URL of the Instagram image and return it to the base64 code.
Since this is an asynchronous function, I need to wait for the response.
I have to change my code so that I get base64 in response.
Here is the final code.

const express = require("express");
const request = require("request");
const imageToBase64 = require("image-to-base64");
const cors = require("cors");

const PORT = 1234;

const app = express();
app.listen(PORT, () => {
  console.clear();
  console.log(`Listing in http://localhost:${PORT}`);
});

app.use(cors());

const getBase64 = async (link) => {
  const base64 = await imageToBase64(link);
  return `data:image/jpeg;base64,${base64}`;
};

app.get("/", (req, res) => {
  res?.send("I am working.");
});

app.get("/post/:id", (req, res) => {
  const { id } = req?.params;
  if (id) {
    const link = `https://www.instagram.com/p/${id}/?__a=1`;
    request(link, (err, response, html) => {
      if (!err) {
        const json = JSON.parse(html)?.graphql?.shortcode_media;
        const promiseArray = json?.edge_sidecar_to_children?.edges?.map(
          async (item) => ({
            displayUrl: await getBase64(item?.node?.display_url),
            resolutions: item?.node?.display_resources?.map((item) => ({
              src: item?.src,
              size: item?.config_width,
            })),
          })
        );
        let allImages;
        if (promiseArray) allImages = Promise.all(promiseArray);
        if (json) {
          (async () => {
            res?.send({
              id,
              mainContent: {
                displayUrl: await getBase64(json?.display_url),
                resolutions: json?.display_resources.map((item) => ({
                  src: item?.src,
                })),
              },
              user: {
                username: json?.owner?.username,
                isVerified: json?.owner?.is_verified,
                fullName: json?.owner?.full_name,
                profilePic: await getBase64(json?.owner?.profile_pic_url),
              },
              caption: {
                main: json?.edge_media_to_caption.edges[0]?.node.text,
                accessibile: json?.accessibility_caption,
              },
              location: json?.location,
              comments: json?.edge_media_to_parent_comment?.count,
              likes: json?.edge_media_preview_like?.count,
              isVideo: json?.is_video,
              videoUrl: json?.video_url,
              allImages: await allImages,
            });
          })();
        }
        if (!json) res?.status?.send("error");
      }
    });
  }
});
app.get("/user/:username", (req, res) => {
  const { username } = req?.params;
  if (username) {
    const link = `https://www.instagram.com/${username}/?__a=1`;
    request(link, (err, response, html) => {
      if (!err) {
        const json = JSON.parse(html)?.graphql?.user;
        const promiseArray = json?.edge_owner_to_timeline_media?.edges?.map(
          async (item) => ({
            displayUrl: await getBase64(item?.node?.display_url),
            id: item?.node?.shortcode,
            location: item?.node?.location,
            caption: {
              main: item?.node?.edge_media_to_caption.edges[0].node.text,
              accessibile: item?.node?.accessibility_caption,
            },
            comments: item?.node?.edge_media_to_comment.count,
            isVideo: item?.node?.is_video,
            likes: item?.node?.edge_liked_by.count,
            isCollection: item?.node?.edge_sidecar_to_children ? true : false,
            resolutions: item?.node?.thumbnail_resources,
          })
        );
        let allImages;
        if (promiseArray) allImages = Promise.all(promiseArray);
        if (json)
          (async () => {
            res?.send({
              username,
              bio: json.biography,
              isVerified: json?.is_verified,
              category: json?.category_name,
              externalURL: json?.external_url,
              profilePic: {
                sd: await getBase64(json?.profile_pic_url),
                hd: await getBase64(json?.profile_pic_url_hd),
              },
              fullName: json?.full_name,
              following: json?.edge_followed_by.count,
              follows: json?.edge_follow.count,
              posts: {
                total: json?.edge_owner_to_timeline_media?.count,
                content: await allImages,
              },
            });
          })();
        if (!json) res?.status(400).send("ERROR");
      }
    });
  }
  if (!username) res?.send(`Error`);
});

Now if you try this API in the frontend it will perfectly work. I have build an Instagram Downloader web-app with the help of this API.

Here is the preview.
Post

User

End

Now let me tell you more about myself that it is my very first API. I don't know much about building an API. So if you don't like my code and want to give some feedback then feel free to suggest me in comments, and also check out my GitHub repo and contribute to make this API more useful.