@imksh/create 1.0.24 → 1.0.26

package/templates/mern-react-native/mobile/src/services/socket.service.ts

@@ -0,0 +1,36 @@
+import { io, Socket } from 'socket.io-client';
+import { get } from '../utils/storage';
+import Constants from 'expo-constants';
+
+let socket: Socket | null = null;
+
+// Set your backend socket URL
+const SOCKET_URL = Constants.expoConfig?.extra?.apiUrl || 'http://localhost:3000';
+
+export const initializeSocket = async () => {
+  if (socket) return;
+  const token = await get('token');
+  if (!token) return;
+
+  socket = io(SOCKET_URL, {
+    auth: { token },
+    transports: ['websocket'],
+  });
+
+  socket.on('connect', () => {
+    console.log('Connected to socket server');
+  });
+
+  socket.on('disconnect', () => {
+    console.log('Disconnected from socket server');
+  });
+};
+
+export const getSocket = () => socket;
+
+export const disconnectSocket = () => {
+  if (socket) {
+    socket.disconnect();
+    socket = null;
+  }
+};

package/templates/mern-react-native/mobile/src/store/useAuthStore.ts

@@ -1,20 +1,15 @@
 import { create } from "zustand";
 import { authService } from "../services/auth.service";
-import { save, remove } from "../utils/storage";
-
-export interface User {
-  _id: string;
-  name: string;
-  email: string;
-  phone?: string;
-  role: string;
-  avatar?: {
-    url?: string;
-    publicId?: string;
-  };
-  createdAt?: string;
-  updatedAt?: string;
-}
+import { save, remove, get } from "../utils/storage";
+import { User } from "../types/auth.type";
+import { initializeSocket, disconnectSocket } from "../services/socket.service";
+import { useNotificationStore } from "./useNotificationStore";
+
+// ── Module-level prefetch ──────────────────────────────────────────────────
+// Kick off the AsyncStorage read the instant this module is imported
+// (before any React component mounts). By the time loadCachedUser() is
+// called from a useEffect, the promise is already resolved or very close.
+const _prefetchedUser: Promise<User | null> = get("user");
 
 export interface AuthState {
   user: User | null;
@@ -34,6 +29,13 @@ export interface AuthState {
   getMe: () => Promise<void>;
   updateProfile: (updates: Partial<User> | FormData) => Promise<boolean>;
   logout: () => Promise<void>;
+  genOtp: (email: string) => Promise<boolean>;
+  verifyOtp: (email: string, otp: string) => Promise<boolean>;
+  resetPassword: (newPassword: string) => Promise<boolean>;
+  changePassword: (oldPassword: string, newPassword: string) => Promise<boolean>;
+  setUser: (user: User) => void;
+  clearError: () => void;
+  loadCachedUser: () => Promise<void>;
 }
 
 export const useAuthStore = create<AuthState>((set) => ({
@@ -42,6 +44,27 @@ export const useAuthStore = create<AuthState>((set) => ({
   isCheckingAuth: true,
   error: null,
 
+  setUser: (user: User) => set({ user }),
+
+  clearError: () => set({ error: null }),
+
+  loadCachedUser: async () => {
+    // Await the already-in-flight prefetch — typically resolves in <1ms here
+    const cached = await _prefetchedUser;
+    if (cached) {
+      set({ user: cached, isCheckingAuth: false });
+      // Re-establish socket + push on app resume with a cached session
+      initializeSocket();
+      const notifStore = useNotificationStore.getState();
+      notifStore.listenForSocketEvents();
+      notifStore.registerForPushNotificationsAsync();
+      notifStore.fetchNotifications();
+    } else {
+      // No cache — mark auth check done so routing doesn't hang
+      set({ isCheckingAuth: false });
+    }
+  },
+
   sendOtp: async (email: string) => {
     set({ loading: true, error: null });
     try {
@@ -74,13 +97,21 @@ export const useAuthStore = create<AuthState>((set) => ({
         otp,
         role,
       );
-      if (data.token) {
-        save("token", data.token);
+      if (data.data?.token) {
+        save("token", data.data.token);
       }
+      const user = data.data?.user;
+      if (user) save("user", user);
       set({
-        user: data.data,
+        user,
         loading: false,
       });
+      // Initialise socket + push after signup
+      initializeSocket();
+      const notifStore = useNotificationStore.getState();
+      notifStore.listenForSocketEvents();
+      notifStore.registerForPushNotificationsAsync();
+      notifStore.fetchNotifications();
       return true;
     } catch (err: any) {
       set({
@@ -97,13 +128,21 @@ export const useAuthStore = create<AuthState>((set) => ({
     set({ loading: true, error: null });
     try {
       const { data } = await authService.login(email, password);
-      if (data.token) {
-        save("token", data.token);
+      if (data.data?.token) {
+        save("token", data.data.token);
       }
+      const user = data.data?.user;
+      if (user) save("user", user);
       set({
-        user: data.data,
+        user,
         loading: false,
       });
+      // Initialise socket + push after login
+      initializeSocket();
+      const notifStore = useNotificationStore.getState();
+      notifStore.listenForSocketEvents();
+      notifStore.registerForPushNotificationsAsync();
+      notifStore.fetchNotifications();
       return true;
     } catch (err: any) {
       set({
@@ -123,7 +162,7 @@ export const useAuthStore = create<AuthState>((set) => ({
     save("token", "demo-token-123");
     set({
       user: {
-        _id: "demo_user_123",
+        id: "demo_user_123",
         name: "Demo User",
         email: "demo@imksh.com",
         role: "admin",
@@ -133,12 +172,13 @@ export const useAuthStore = create<AuthState>((set) => ({
   },
 
   getMe: async () => {
-    set({ isCheckingAuth: true });
     try {
       const { data } = await authService.getMe();
-      set({ user: data.data, isCheckingAuth: false });
-    } catch {
-      set({ isCheckingAuth: false });
+      const user = data.data;
+      // Always update cache with fresh server data
+      if (user) save("user", user);
+      set({ user, isCheckingAuth: false });
+      // Network failed — cached user (already loaded) stays in place
     } finally {
       set({ isCheckingAuth: false });
     }
@@ -167,7 +207,9 @@ export const useAuthStore = create<AuthState>((set) => ({
     } catch {
       // ignore errors — cookie may already be expired
     } finally {
-      remove("token");
+      await remove("token");
+      await remove("user");   // clear cached user on logout
+      disconnectSocket();
       set({ loading: false });
     }
     set({
@@ -175,4 +217,57 @@ export const useAuthStore = create<AuthState>((set) => ({
       error: null,
     });
   },
+
+  genOtp: async (email: string) => {
+    set({ loading: true, error: null });
+    try {
+      await authService.genOtp(email);
+      return true;
+    } catch (err: any) {
+      set({ error: err.response?.data?.message || err.message, loading: false });
+      return false;
+    } finally {
+      set({ loading: false });
+    }
+  },
+
+  verifyOtp: async (email: string, otp: string) => {
+    set({ loading: true, error: null });
+    try {
+      const { data } = await authService.verifyOtp(email, otp);
+      if (data.token) save("token", data.token);
+      return true;
+    } catch (err: any) {
+      set({ error: err.response?.data?.message || err.message, loading: false });
+      return false;
+    } finally {
+      set({ loading: false });
+    }
+  },
+
+  resetPassword: async (newPassword: string) => {
+    set({ loading: true, error: null });
+    try {
+      await authService.resetPassword(newPassword);
+      return true;
+    } catch (err: any) {
+      set({ error: err.response?.data?.message || err.message, loading: false });
+      return false;
+    } finally {
+      set({ loading: false });
+    }
+  },
+
+  changePassword: async (oldPassword: string, newPassword: string) => {
+    set({ loading: true, error: null });
+    try {
+      await authService.changePassword(oldPassword, newPassword);
+      return true;
+    } catch (err: any) {
+      set({ error: err.response?.data?.message || err.message, loading: false });
+      return false;
+    } finally {
+      set({ loading: false });
+    }
+  },
 }));

package/templates/mern-react-native/mobile/src/store/useNotificationStore.ts

@@ -0,0 +1,178 @@
+import { create } from "zustand";
+import { notificationService } from "../services/notification.service";
+import Constants from "expo-constants";
+import { Platform } from "react-native";
+import { getSocket } from "../services/socket.service";
+import { toast } from "../utils/toast";
+
+export interface AppNotification {
+  id: string;
+  title: string;
+  message: string;
+  type: string;
+  url: string | null;
+  isRead: boolean;
+  metadata: any | null;
+  createdAt: string;
+}
+
+interface NotificationState {
+  notifications: AppNotification[];
+  unreadCount: number;
+  loading: boolean;
+  error: string | null;
+  
+  fetchNotifications: () => Promise<void>;
+  markAsRead: (id: string) => Promise<void>;
+  markAllAsRead: () => Promise<void>;
+  registerForPushNotificationsAsync: () => Promise<string | undefined>;
+  listenForSocketEvents: () => void;
+}
+
+export const useNotificationStore = create<NotificationState>((set, get) => ({
+  notifications: [],
+  unreadCount: 0,
+  loading: false,
+  error: null,
+
+  fetchNotifications: async () => {
+    set({ loading: true, error: null });
+    try {
+      const response = await notificationService.getNotifications();
+      const notifications = response.data.data;
+      const unreadCount = notifications.filter((n: AppNotification) => !n.isRead).length;
+      
+      set({
+        notifications,
+        unreadCount,
+        loading: false,
+      });
+    } catch (error: any) {
+      set({
+        error: error.response?.data?.message || "Failed to fetch notifications",
+        loading: false,
+      });
+    }
+  },
+
+  markAsRead: async (id: string) => {
+    try {
+      // Optimistic update
+      const { notifications, unreadCount } = get();
+      const updated = notifications.map(n => 
+        n.id === id ? { ...n, isRead: true } : n
+      );
+      
+      set({ 
+        notifications: updated, 
+        unreadCount: Math.max(0, unreadCount - 1) 
+      });
+
+      await notificationService.markAsRead(id);
+    } catch{
+      // Revert if failed
+      get().fetchNotifications();
+    }
+  },
+
+  markAllAsRead: async () => {
+    try {
+      const { notifications } = get();
+      const updated = notifications.map(n => ({ ...n, isRead: true }));
+      
+      set({ 
+        notifications: updated, 
+        unreadCount: 0 
+      });
+
+      await notificationService.markAllAsRead();
+    } catch{
+      get().fetchNotifications();
+    }
+  },
+
+  registerForPushNotificationsAsync: async () => {
+    let token;
+
+    const isExpoGo = Constants.appOwnership === 'expo';
+    if (isExpoGo && Platform.OS === 'android') {
+      console.log('Skipping push notification registration: not supported in Expo Go on Android (SDK 53+).');
+      return;
+    }
+
+    try {
+      // eslint-disable-next-line @typescript-eslint/no-require-imports
+      const Notifications = require("expo-notifications");
+      // eslint-disable-next-line @typescript-eslint/no-require-imports
+      const Device = require("expo-device");
+
+      if (Platform.OS === 'android') {
+        await Notifications.setNotificationChannelAsync('default', {
+          name: 'default',
+          importance: Notifications.AndroidImportance.MAX,
+          vibrationPattern: [0, 250, 250, 250],
+          lightColor: '#FF231F7C',
+        });
+      }
+
+      if (Device.isDevice) {
+        const { status: existingStatus } = await Notifications.getPermissionsAsync();
+        let finalStatus = existingStatus;
+        
+        if (existingStatus !== 'granted') {
+          const { status } = await Notifications.requestPermissionsAsync();
+          finalStatus = status;
+        }
+        
+        if (finalStatus !== 'granted') {
+          console.log('Failed to get push token for push notification!');
+          return;
+        }
+        
+        const projectId =
+          Constants.expoConfig?.extra?.eas?.projectId ??
+          Constants.easConfig?.projectId ??
+          "f9a7053c-bc16-4717-805b-560c5a35e974";
+
+        token = (await Notifications.getExpoPushTokenAsync({ projectId })).data;
+        
+        // Send token to backend
+        try {
+          await notificationService.registerPushToken(token);
+        } catch (e) {
+          console.error("Failed to save push token to server", e);
+        }
+      } else {
+        console.log('Must use physical device for Push Notifications');
+      }
+    } catch (e) {
+      console.warn("Failed to setup push notifications dynamically:", e);
+    }
+
+    return token;
+  },
+
+  listenForSocketEvents: () => {
+    const socket = getSocket();
+    if (!socket) return;
+
+    // Remove any existing listener to prevent duplicates
+    socket.off("new_notification");
+
+    socket.on("new_notification", (notification: AppNotification) => {
+      const { notifications, unreadCount } = get();
+      
+      // Ensure we don't duplicate notifications if they were fetched via API around the same time
+      const exists = notifications.find((n) => n.id === notification.id);
+      if (!exists) {
+        set({
+          notifications: [notification, ...notifications],
+          unreadCount: unreadCount + 1,
+        });
+        
+        // Alert the user visually!
+        toast.info(notification.title, notification.message);
+      }
+    });
+  }
+}));

package/templates/mern-react-native/mobile/src/types/auth.type.ts

@@ -0,0 +1,14 @@
+export interface User {
+  id: string; // Updated from _id for Prisma consistency
+  _id?: string; // Fallback for mongo legacy if any
+  name: string;
+  email: string;
+  phone?: string;
+  role: string;
+  avatar?: {
+    url?: string;
+    publicId?: string;
+  };
+  createdAt?: string;
+  updatedAt?: string;
+}

package/templates/mern-react-native/mobile/tsconfig.json

@@ -1,6 +1,7 @@
 {
   "extends": "expo/tsconfig.base",
   "compilerOptions": {
+    "jsx": "react-jsx",
     "strict": true,
     "noImplicitAny": false,
     "paths": {

package/templates/mern-ts/client/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/templates/next/next.config.mjs

@@ -17,6 +17,7 @@ const nextConfig = {
       },
     ];
   },
+  turbopack: {},
 };
 
 export default withPWA(nextConfig);

package/templates/next/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "next-template",
+  "name": "client",
   "version": "0.1.0",
   "private": true,
   "scripts": {
@@ -9,24 +9,25 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "react": "^18",
-    "react-dom": "^18",
-    "next": "14.0.3",
     "@ducanh2912/next-pwa": "latest",
+    "@tailwindcss/postcss": "^4.3.3",
     "axios": "^1.6.0",
     "flyonui": "^2.4.1",
     "framer-motion": "^11.0.0",
     "lenis": "^1.1.3",
     "lottie-react": "^2.4.0",
-    "lucide-react": "^0.292.0",
+    "lucide-react": "^0.470.0",
+    "next": "^16.3.0",
+    "postcss": "^8.5.26",
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8",
     "react-hot-toast": "^2.4.1",
     "react-icons": "^4.11.0",
-    "tailwindcss": "^4.3.2",
-    "@tailwindcss/postcss": "^4.3.2",
+    "tailwindcss": "^4.3.3",
     "zustand": "^4.5.2"
   },
   "devDependencies": {
-    "eslint": "^8",
-    "eslint-config-next": "14.0.3"
+    "eslint": "^10.8.1",
+    "eslint-config-next": "^16.3.0"
   }
 }

package/templates/next/postcss.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+};

package/templates/next/src/app/layout.js

@@ -28,6 +28,7 @@ export default function RootLayout({ children }) {
         <div className="min-h-screen bg-base-100 text-base-content font-sans">
           <Toaster position="top-right" />
           <Scroll />
+          
           {children}
         </div>
       </body>

package/templates/next/src/app/page.js

@@ -2,7 +2,7 @@
 import React from "react";
 import Link from "next/link";
 import { motion } from "framer-motion";
-import { FiZap, FiLayers, FiCpu, FiShield, FiArrowRight } from "react-icons/fi";
+import { FiZap, FiLayers, FiCpu, FiShield } from "react-icons/fi";
 import appConfig from "../config/appConfig";
 import toast from "react-hot-toast";
 import { useState } from "react";

package/templates/next/src/components/layout/ProtectedRoute.jsx

@@ -9,16 +9,16 @@ const ProtectedRoute = ({ children, role }) => {
   const router = useRouter();
 
   useEffect(() => {
-    if (!loading) {
+    if (!isCheckingAuth) {
       if (!user) {
         router.replace("/login");
       } else if (role && user.role !== role) {
         router.replace("/");
       }
     }
-  }, [user, loading, role, router]);
+  }, [user, isCheckingAuth, role, router]);
 
-  if (loading || !user || (role && user.role !== role)) return <Loading />;
+  if (isCheckingAuth || !user || (role && user.role !== role)) return <Loading />;
 
   return <>{children}</>;
 };

package/templates/next/src/index.css

@@ -1,5 +1,6 @@
 @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&display=swap');
 @import "tailwindcss";
+@source "./";
 @plugin "flyonui";
 
 

package/templates/next/src/store/useUiStore.js

@@ -17,12 +17,15 @@ export const useUiStore = create((set, get) => ({
     set((state) => ({ isMobileMenuOpened: !state.isMobileMenuOpened }));
   },
 
-  theme: localStorage.getItem("theme") || "light",
+  theme: typeof window !== "undefined" ? localStorage.getItem("theme") || "light" : "light",
 
   setTheme: (theme) => {
-    document.documentElement.setAttribute("data-theme", theme);
-
-    localStorage.setItem("theme", theme);
+    if (typeof document !== "undefined") {
+      document.documentElement.setAttribute("data-theme", theme);
+    }
+    if (typeof window !== "undefined") {
+      localStorage.setItem("theme", theme);
+    }
 
     set({ theme });
   },
@@ -30,9 +33,12 @@ export const useUiStore = create((set, get) => ({
   toggleTheme: () => {
     const nextTheme = get().theme === "light" ? "dark" : "light";
 
-    document.documentElement.setAttribute("data-theme", nextTheme);
-
-    localStorage.setItem("theme", nextTheme);
+    if (typeof document !== "undefined") {
+      document.documentElement.setAttribute("data-theme", nextTheme);
+    }
+    if (typeof window !== "undefined") {
+      localStorage.setItem("theme", nextTheme);
+    }
 
     set({ theme: nextTheme });
   },

package/templates/next-ts/AGENTS.md

@@ -0,0 +1,37 @@
+<!-- BEGIN:nextjs-agent-rules -->
+
+# This is NOT the Next.js you know
+
+This version has breaking changes — APIs, conventions, and file structure may all differ from your training data. Read the relevant guide in `node_modules/next/dist/docs/` (resolved from this file's directory; in monorepos the `next` package may not be visible from the repo root) before writing any code. Heed deprecation notices.
+
+This block is written and re-added by `next dev` — verify at `node_modules/next/dist/server/lib/generate-agent-files.js`. Removing it from a diff only re-creates the uncommitted change; committing it with your work keeps the tree clean.
+
+<!-- END:nextjs-agent-rules -->
+
+# React Starter Template Rules
+
+When working on this template, adhere to the following tech stack and architectural conventions:
+
+## 1. Next.js 16 (App Router)
+- Always use the **App Router** (`src/app/`). Do NOT create a `pages/` directory.
+- Differentiate clearly between Server Components (default) and Client Components (add `"use client";` at the top). Use Client Components only when interactivity or browser APIs are required.
+- Do not create custom `_document.tsx` or `_app.tsx`. Use `layout.tsx`.
+
+## 2. Tailwind CSS v4
+- We use **Tailwind CSS v4**. Do not create or look for a `tailwind.config.js` or `tailwind.config.ts`.
+- All styling configuration, theme variables, and custom CSS should be handled in `src/index.css` using the new `@theme` syntax.
+- Do not use `@apply` if it can be solved with utility classes.
+
+## 3. FlyonUI
+- **FlyonUI v2** is pre-configured and available.
+- Prioritize using FlyonUI component classes (e.g., `btn`, `input`, `modal`, `card`) instead of building custom variants from scratch.
+- The plugin is initialized in `src/index.css` via `@plugin "flyonui";`.
+
+## 4. Zustand (State Management)
+- Place all global stores in `src/store/`.
+- **CRITICAL**: Be very careful with Server-Side Rendering (SSR) hydration mismatches when using Zustand. Do not initialize store values directly with browser APIs (e.g., `localStorage`). Always wrap browser API access in `typeof window !== "undefined"` checks or use a standard hydration mechanism.
+
+## 5. Components Architecture
+- Reusable, generic UI components (buttons, inputs) go in `src/components/ui/`.
+- Domain-specific or common page components go in `src/components/common/`.
+- Modals, layouts, and skeletons have their respective folders in `src/components/`.

package/templates/next-ts/CLAUDE.md

@@ -0,0 +1 @@
+@AGENTS.md

package/templates/next-ts/_gitignore

@@ -1,24 +0,0 @@
-# Logs
-logs
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-pnpm-debug.log*
-lerna-debug.log*
-
-node_modules
-dist
-dist-ssr
-*.local
-
-# Editor directories and files
-.vscode/*
-!.vscode/extensions.json
-.idea
-.DS_Store
-*.suo
-*.ntvs*
-*.njsproj
-*.sln
-*.sw?

package/templates/next-ts/next-env.d.ts

@@ -1,5 +1,7 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
+import "./.next/dev/types/routes.d.ts";
+import "./.next/dev/types/root-params.d.ts";
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.