Forem: Harish Kumar

Secret Productivity Hack On VS Code

Harish Kumar — Thu, 16 Oct 2025 06:13:23 +0000

Hey Techies,

I was watching some random coding react conf video(If your a react developer you should try once). Guess what I found a hack which I don't see people usally use this hack which is very cool thing to use and I am sure your going to use this hack on daily basis.

So, Lets assume that you have type ready for a object which is complex.

type Address = {
  street: string;
  city: string;
  state: string;
  country: string;
  zip: string;
};

export type CompanySize =
  | "0-20"
  | "20-50"
  | "50-100"
  | "100-200"
  | "200-500"
  | "500-1000"
  | "1000-2000"
  | "2000+";

export interface OrganizationForm {
  name: string;
  description?: string;
  address: Address;
  contactEmail: string;
  phoneNumber: string;
  website: string;
  industry: string;
  size: CompanySize;
  interests: string[];
  techStack: string[];
}

export interface OrganizationState {
  formData: OrganizationForm;
  currentStep: number;
  isLoading: boolean;
  error: string | null;
  successMessage: string | null;
}

export interface OrganizationActions {
  setField: <K extends keyof OrganizationForm>(
    key: K,
    value: OrganizationForm[K]
  ) => void;
}

export interface OrganizationAsyncActions {
  createOrganization: () => Promise<void>;
}

Then you want to create a default state or something a intial object with the type.
Usually you would go type all the properties and their default values. If your a person who is little smart would use suggestion or intellisense(like the ctrl+space) to fill in the properties.

But we have now more smarter way to do it thats all about this blog.
We can use a Ctrl+. shortcut to open the quick fix option and there another option called fill properties. This would instantly fill the object with default properties.

Conclusion

Yeah Yeah Yeah… VS Code is full of surprise starting from the emmet to various features like this. Untill I find another hack goodbye.
Linkedin: https://www.linkedin.com/in/harish-kumar-418a47237/
Github: https://github.com/harish-20

Look How I Created Animated Generic Modal (Next.js, Zustand, Motion)

Harish Kumar — Sat, 11 Oct 2025 13:24:58 +0000

Hey Techies 👋,
What’s up…!

I’ve been working on my personal project to explore more on Next.js, Zustand, and Motion.
And today, I ran into one of those “every app needs this” moments —

Oh, I need a modal.
A common one.
A reusable one.
And with cool enter and exit animations.

One more thing — it should be architecturally perfect too. 😎

🧱 Store Setup

I configured a Zustand store to handle which modal is open, what props it needs, and the open/close logic.

File Structure

I broke the Zustand logic into three files — a clean, scalable approach:

index.ts → configures the store and initializes the state
types.ts → holds state and action types
actions.ts → contains store actions (open/close modal)

🗂️ `store/modal/index.ts`

import { create } from "zustand";
import { ModalState, ModalStore } from "./types";
import { modalActions } from "./actions";

const initialState: ModalState = {
  type: null,
  props: {},
};

const useModalStore = create<ModalStore>((set, get, store) => ({
  ...initialState,
  ...modalActions(set, get, store),
}));

export default useModalStore;

🧩 `store/modal/types.ts`

export type AvailableModals = "confirm";

export interface ModalState {
  type: AvailableModals | null;
  props: Record<any, any>;
}

export interface ModalActions {
  openModal: (type: AvailableModals) => void;
  closeModal: () => void;
}

export interface ModalStore extends ModalState, ModalActions {}

⚙️ `store/modal/actions.ts`

import { StateCreator } from "zustand";
import { ModalActions, ModalStore } from "./types";

export const modalActions: StateCreator<ModalStore, [], [], ModalActions> = (
  set
) => ({
  openModal: (type) => {
    set({ type });
  },
  closeModal: () => {
    set({ type: null });
  },
});

Well, well, well — the store is done and dusted!
Now we need to handle the UI and connect it to this state… and of course, add some animation magic. ✨

🧱 Generic Modal Component

I used React Portal, which not only looks cleaner but also saves you from fighting with z-index and layout stacking nightmares.

Here’s a custom hook to get the portal target from the DOM 👇

🔧 `lib/hooks/usePortalTarget.tsx`

import { useEffect, useState } from "react";

const usePortalTarget: (elementId: string) => Element | null = (elementId) => {
  const [mounted, setMounted] = useState(false);
  const [element, setElement] = useState<Element | null>(null);

  useEffect(() => {
    setElement(document.getElementById(elementId));
    setMounted(true);
  }, [elementId]);

  if (!mounted || !element) return null;

  return element;
};

export default usePortalTarget;

🧠 `components/modal/BaseModal.tsx`

import { PropsWithChildren } from "react";
import { createPortal } from "react-dom";
import { motion } from "motion/react";

import usePortalTarget from "@/lib/hooks/usePortalTarget";
import Backdrop from "../UI/Backdrop";

interface BaseModalProps extends PropsWithChildren, ModalProps {}

const BaseModal: React.FC<BaseModalProps> = ({ onClose, children }) => {
  const target = usePortalTarget("modal");

  if (!target) return null;

  const modalElement = (
    <>
      <motion.div
        animate={{ translateY: ["-30%", "-70%"], opacity: [0, 1] }}
        exit={{ translateY: ["-70%", "-30%"], opacity: [1, 0] }}
        className="z-10 absolute top-1/2 left-1/2 -translate-x-1/2"
      >
        {children}
      </motion.div>

      <Backdrop onClose={onClose} />
    </>
  );

  return createPortal(modalElement, target);
};

export default BaseModal;

Here, I used motion.div from Motion to animate the modal’s entry and exit transitions.

🪄 Connecting the Modal to the App

Now we need to connect our modal globally to the Next.js app.
I created a provider for that:

⚙️ `lib/providers/modal-provider.tsx`

"use client";

import { PropsWithChildren, useMemo } from "react";
import { AnimatePresence } from "motion/react";

import ConfirmModal from "@/components/modal/ConfirmModal";
import useModalStore from "../store/modal";
import { AvailableModals } from "../store/modal/types";

const modalMap: Record<AvailableModals, React.FC<ModalProps & any>> = {
  confirm: ConfirmModal,
};

interface ModalProviderProps extends PropsWithChildren {}

const ModalProvider: React.FC<ModalProviderProps> = ({ children }) => {
  const { type, props: modalProps, closeModal } = useModalStore();
  const ModalToRender = useMemo(() => (type ? modalMap[type] : null), [type]);

  return (
    <>
      {children}

      <AnimatePresence mode="wait">
        {ModalToRender && (
          <ModalToRender key={type} {...modalProps} onClose={closeModal} />
        )}
      </AnimatePresence>
    </>
  );
};

export default ModalProvider;

✅ I added a modalMap object to register modals.
✅ Used AnimatePresence to handle entry/exit animations.

🌐 Adding to Layout

Now, let’s connect it in the Next.js layout.

🏗️ `app/dashboard/layout.tsx`

import { Metadata } from "next";
import { Inter } from "next/font/google";
import { PropsWithChildren } from "react";

import { AuthStoreProvider } from "@/lib/providers/auth-store-provider";
import ModalProvider from "@/lib/providers/modal-provider";
import AuthGuard from "@/components/auth/AuthGuard";
import AppLayout from "@/layouts/AppLayout";

import "@/app/globals.css";

const inter = Inter();

export const metadata: Metadata = {
  title: "Taskify",
  description:
    "A simple and powerful task management app to organize your work, track progress, and boost productivity every day.",
};

interface DashboardLayoutProps extends PropsWithChildren {}

const DashboardLayout: React.FC<DashboardLayoutProps> = ({ children }) => (
  <html lang="en" suppressHydrationWarning>
    <body className={inter.className}>
      <AuthStoreProvider>
        <ModalProvider>
          <AuthGuard mode="auth">
            <AppLayout>{children}</AppLayout>
          </AuthGuard>
        </ModalProvider>
      </AuthStoreProvider>

      {/* Decoupled elements for rendering modals and backdrops through portals */}
      <div id="modal"></div>
      <div id="backdrop"></div>
    </body>
  </html>
);

export default DashboardLayout;

Those two <div>s might look weird, but trust me — they’re lifesavers.
That’s where our modals and backdrops get rendered via portals, without disturbing the main layout.

🎭 Backdrop Component

Here’s the reusable Backdrop component (I reused it for the mobile sidebar too 👀).

`components/UI/Backdrop.tsx`

import { Ref } from "react";
import { motion } from "motion/react";
import { createPortal } from "react-dom";

import usePortalTarget from "@/lib/hooks/usePortalTarget";

interface BackdropProps {
  onClose: () => void;
  ref?: Ref<any>;
}

const Backdrop: React.FC<BackdropProps> = ({ onClose }) => {
  const target = usePortalTarget("backdrop");

  if (!target) return null;

  return createPortal(
    <motion.div
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      exit={{ opacity: 0 }}
      className="absolute top-0 left-0 w-full h-screen bg-black/30"
      onClick={onClose}
    />,
    target
  );
};

export default Backdrop;

🧩 Confirm Modal Example

Finally, let’s create an example Confirm Modal to see it all in action.

`components/modal/ConfirmModal.tsx`

import Button from "../UI/Button";
import BaseModal from "./BaseModal";

interface ConfirmModalProps extends ModalProps {
  onConfirm: () => void;
}

const ConfirmModal: React.FC<ConfirmModalProps> = ({ onClose }) => {
  return (
    <BaseModal onClose={onClose}>
      <div className="bg-white rounded-lg min-w-md">
        <h2 className="text-xl p-4 text-center">Confirm</h2>
        <hr className="text-gray-400" />

        <div className="p-4 min-h-[160px] flex flex-col justify-between">
          <p>Do you want to delete this task?</p>

          <div className="flex gap-4 justify-center">
            <Button size="md" variant="secondary-dark" onClick={onClose}>
              Cancel
            </Button>
            <Button size="md" onClick={onClose}>
              Confirm
            </Button>
          </div>
        </div>
      </div>
    </BaseModal>
  );
};

export default ConfirmModal;

🎉 Conclusion

That’s it!
We now have a nice, animated, reusable modal system you can use across your entire app.

Feel free to connect with me on LinkedIn for suggestions, feedback, or just to say “Hi” 👋

GitHub Repo: https://github.com/harish-20/Taskify
LinkedIn: https://www.linkedin.com/in/harish-kumar-418a47237/

Next.js ⚡ + Zustand 🐻: A Production-Grade File Structure for Scalable State Management

Harish Kumar — Fri, 10 Oct 2025 06:39:22 +0000

Hey techies!

If you’ve ever wrestled with a messy state management setup in a growing Next.js project, you’re not alone. I’ve been there — new ideas piling up, state logic sprawling across files, and debugging turning into a nightmare.

But fear not! After building my personal project with Next.js and Zustand (what a combo for performance and simplicity!), I’ve crafted a clean, modular, and production-ready file structure that keeps things organized and scalable.

🧱 Why Next.js + Zustand?

Next.js: A full-stack React framework with server-side rendering (SSR), static site generation (SSG), and the App Router for optimal performance.

Zustand: A lightweight, hook-based state management library that’s simple yet powerful — avoiding Redux boilerplate while supporting TypeScript and middlewares like persist and devtools.

Together, they’re a match made in heaven for building fast, maintainable web apps.
But as your app grows, a poorly organized store can turn your codebase into chaos. Let’s fix that.

⚠️ The Problem: State Management Chaos

Initially, my Zustand store was a single file with state, actions, and async logic mashed together. It worked for small features, but as the app grew, debugging became painful, and adding new features felt like playing Jenga with my codebase.

I needed a structure that:

✅ Separates concerns (state, actions, async actions, types)
✅ Scales with multiple features
✅ Integrates seamlessly with Next.js’s App Router and TypeScript
✅ Supports production-grade practices like persistence and debugging

Here’s the structure I landed on 👇

🗂️ Production-Grade File Structure

project/
├── app/
│   ├── components/
│   │   └── AuthComponent.tsx
│   └── page.tsx
├── lib/
│   ├── services/
│   │   ├── api/
│   │   │   └── auth.ts
│   │   └── localStorage.ts
│   └── store/
│       └── auth/
│           ├── index.ts
│           ├── state.ts
│           ├── actions.ts
│           ├── asyncActions.ts
│           └── types.ts
├── types/
│   └── index.ts

🧩 1. `types.ts` — Define TypeScript Types

// lib/store/auth/types.ts
import { User } from "@/types";

export interface AuthState {
  user: User | null;
  signinError: string | null;
  signupError: string | null;
  isSigningIn: boolean;
  isSigningUp: boolean;
  isSignupDone: boolean;
}

export interface AuthActions {
  setUser: (user: User | null) => void;
  clearAuth: () => void;
  clearErrors: () => void;
}

export interface AuthAsyncActions {
  signinWithEmail: (email: string, password: string) => Promise<void>;
  signupWithEmail: (name: string, email: string, password: string) => Promise<void>;
}

export type AuthStore = AuthState & AuthActions & AuthAsyncActions;

💡 Why: Centralizes type definitions for state, actions, and async actions.
Place shared types (like User) in types/index.ts to avoid circular imports.

⚙️ 2. `state.ts` — Define Initial State

// lib/store/auth/state.ts
import { AuthState } from './types';

export const defaultState: AuthState = {
  user: null,
  signinError: null,
  signupError: null,
  isSigningIn: false,
  isSigningUp: false,
  isSignupDone: false,
};

💡 Why: Keeps the initial state isolated, making it easy to modify defaults later.

🧠 3. `actions.ts` — Define Synchronous Actions

// lib/store/auth/actions.ts
import { StateCreator } from 'zustand';
import { AuthActions, AuthStore } from './types';

export const authActions: StateCreator<AuthStore, [], [], AuthActions> = (set) => ({
  setUser: (user) => set({ user }),
  clearAuth: () => set({ user: null, signinError: null, signupError: null }),
  clearErrors: () => set({ signinError: null, signupError: null }),
});

💡 Why: Separates synchronous updates from async logic for clarity.

🌐 4. `asyncActions.ts` — Handle Async Operations

// lib/store/auth/asyncActions.ts
import { StateCreator } from 'zustand';
import { signin, signup } from '@/lib/services/api/auth';
import { customLocalStorage } from '@/lib/services/localStorage';
import { AuthAsyncActions, AuthStore } from './types';

type ErrorCode =
  | 'INVALID_PASSWORD'
  | 'ACCOUNT_NOT_EXISTS'
  | 'DIFFERENT_PROVIDER_ACCOUNT'
  | 'EMAIL_ALREADY_EXISTS';

const getErrorMessage = (code: ErrorCode): string => {
  const messageMap: Partial<Record<ErrorCode, string>> = {
    INVALID_PASSWORD: 'The password you entered is incorrect',
    ACCOUNT_NOT_EXISTS: 'No account found for this email address',
    DIFFERENT_PROVIDER_ACCOUNT: 'This email is linked to a different sign-in method',
    EMAIL_ALREADY_EXISTS: 'An account with this email already exists',
  };
  return messageMap[code] || 'Something went wrong.';
};

export const authAsyncActions: StateCreator<AuthStore, [], [], AuthAsyncActions> = (set) => ({
  signinWithEmail: async (email, password) => {
    set({ isSigningIn: true, signinError: null });
    try {
      const response = await signin(email, password);
      if (response.data) {
        const { accessToken, user } = response.data;
        set({ user });
        customLocalStorage.setValue('accessToken', accessToken);
      }
    } catch (err: any) {
      const message = getErrorMessage(err.data?.code || 'UNKNOWN');
      set({ signinError: message });
    } finally {
      set({ isSigningIn: false });
    }
  },
  signupWithEmail: async (name, email, password) => {
    set({ isSigningUp: true, signupError: null });
    try {
      const response = await signup(name, email, password);
      if (response.data) {
        set({ isSignupDone: true });
        setTimeout(() => set({ isSignupDone: false }), 5000);
      }
    } catch (err: any) {
      const message = getErrorMessage(err.data?.code || 'UNKNOWN');
      set({ signupError: message });
    } finally {
      set({ isSigningUp: false });
    }
  },
});

💡 Why: Isolates async logic, error handling, and state updates.
Keep API calls inside lib/services/api/.

🧱 5. `index.ts` — Combine and Export the Store

// lib/store/auth/index.ts
import { createStore } from 'zustand/vanilla';
import { create } from 'zustand';
import { persist, createJSONStorage, devtools } from 'zustand/middleware';
import { defaultState } from './state';
import { authActions } from './actions';
import { authAsyncActions } from './asyncActions';
import { AuthStore } from './types';

export const createAuthStore = (initialState = defaultState) =>
  createStore<AuthStore>()(
    devtools(
      persist(
        (set, get) => ({
          ...initialState,
          ...authActions(set, get),
          ...authAsyncActions(set, get),
        }),
        {
          name: 'auth-storage',
          storage: createJSONStorage(() => localStorage),
        }
      ),
      { name: 'AuthStore' }
    )
  );

const useAuthStore = create<AuthStore>()(createAuthStore());
export default useAuthStore;

💡 Why: Combines everything with middleware support (persist, devtools).

💻 6. Using the Store in a Component

// app/components/AuthComponent.tsx
"use client";

import useAuthStore from "@/lib/store/auth";
import { FormEvent } from "react";

export default function AuthComponent() {
  const {
    user,
    signinError,
    signupError,
    isSigningIn,
    isSigningUp,
    isSignupDone,
    signinWithEmail,
    signupWithEmail,
  } = useAuthStore();

  const handleSignin = async (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    const formData = new FormData(e.currentTarget);
    const email = formData.get("email") as string;
    const password = formData.get("password") as string;
    await signinWithEmail(email, password);
  };

  const handleSignup = async (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    const formData = new FormData(e.currentTarget);
    const name = formData.get("name") as string;
    const email = formData.get("email") as string;
    const password = formData.get("password") as string;
    await signupWithEmail(name, email, password);
  };

  return (
    <div className="p-4">
      {user ? (
        <div>
          <h1>Welcome, {user.name}!</h1>
          <button onClick={() => useAuthStore.getState().clearAuth()}>
            Sign Out
          </button>
        </div>
      ) : (
        <div>
          <h1>Sign In</h1>
          <form onSubmit={handleSignin} className="mb-4">
            <input name="email" type="email" placeholder="Email" required />
            <input name="password" type="password" placeholder="Password" required />
            <button type="submit" disabled={isSigningIn}>
              {isSigningIn ? "Signing In..." : "Sign In"}
            </button>
            {signinError && <p className="text-red-500">{signinError}</p>}
          </form>

          <h1>Sign Up</h1>
          <form onSubmit={handleSignup}>
            <input name="name" type="text" placeholder="Name" required />
            <input name="email" type="email" placeholder="Email" required />
            <input name="password" type="password" placeholder="Password" required />
            <button type="submit" disabled={isSigningUp}>
              {isSigningUp ? "Signing Up..." : "Sign Up"}
            </button>
            {signupError && <p className="text-red-500">{signupError}</p>}
            {isSignupDone && <p className="text-green-500">Signup successful!</p>}
          </form>
        </div>
      )}
    </div>
  );
}

🌍 7. Integrating with a Next.js Page

// app/page.tsx
import AuthComponent from "@/app/components/AuthComponent";

export default function Home() {
  return (
    <div>
      <h1>My Next.js App with Zustand</h1>
      <AuthComponent />
    </div>
  );
}

🔧 8. Supporting Services

// lib/services/api/auth.ts
export interface User {
  id: string;
  name: string;
  email: string;
}

interface AuthResponse {
  data?: { accessToken: string; user: User };
  error?: { code: string; message: string };
}

export const signin = async (email: string, password: string): Promise<AuthResponse> => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (email === "test@example.com" && password === "password") {
        resolve({
          data: {
            accessToken: "mock-token",
            user: { id: "1", name: "Test User", email },
          },
        });
      } else {
        reject({ data: { code: "INVALID_PASSWORD" } });
      }
    }, 1000);
  });
};

export const signup = async (name: string, email: string, password: string): Promise<AuthResponse> => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (email === "test@example.com") {
        reject({ data: { code: "EMAIL_ALREADY_EXISTS" } });
      } else {
        resolve({ data: { accessToken: "mock-token", user: { id: "2", name, email } } });
      }
    }, 1000);
  });
};

// lib/services/localStorage.ts
export const customLocalStorage = {
  setValue: (key: string, value: string) => {
    if (typeof window !== "undefined") localStorage.setItem(key, value);
  },
  getValue: (key: string) => {
    if (typeof window !== "undefined") return localStorage.getItem(key);
    return null;
  },
};

🧰 9. Production-Grade Best Practices

Type Safety: Always use TypeScript.
Middleware:
- persist → Saves state to localStorage
- devtools → Integrates with Redux DevTools
Scalability: Create a folder per feature (e.g., cart, user).
Next.js Integration:
- Use "use client" in components that access Zustand stores.
- Pass server data via props for hydration.

💪 10. Why This Structure Rocks

✅ Clarity — Each file has a single responsibility.
✅ Scalability — Add new features easily by duplicating the folder structure.
✅ Maintainability — Debugging is faster when you know exactly where to look.
✅ Production-Ready — Works seamlessly with TypeScript, middlewares, and Next.js App Router.

🧠 Wrapping Up

This file structure transformed my Next.js + Zustand project from chaos into a well-organized, scalable system. Whether you’re building a small app or a large platform, this setup will keep your codebase clean and future-proof.

👉 GitHub: harish-20/Taskify
👉 LinkedIn: Harish Kumar

If you found this helpful, give the repo a ⭐ and share your thoughts or improvements below.

Happy coding, techies! 🚀