@imksh/create 1.0.25 → 1.0.27

package/templates/production-fullstack/client/src/features/auth/store/useAuthStore.ts

@@ -0,0 +1,143 @@
+import { create } from "zustand";
+import { authService } from "../api/authService";
+
+export interface User {
+  _id: string;
+  name: string;
+  email: string;
+  phone?: string;
+  role: string;
+  avatar?: {
+    url?: string;
+    publicId?: string;
+  };
+  createdAt?: string;
+  updatedAt?: string;
+}
+
+export interface AuthState {
+  user: User | null;
+  loading: boolean;
+  isCheckingAuth: boolean;
+  error: string | null;
+  sendOtp: (email: string) => Promise<boolean>;
+  signup: (name: string, email: string, password: string, otp: string, role?: string) => Promise<boolean>;
+  login: (email: string, password: string) => Promise<boolean>;
+  getMe: () => Promise<void>;
+  updateProfile: (updates: Partial<User> | FormData) => Promise<boolean>;
+  logout: () => Promise<void>;
+}
+
+export const useAuthStore = create<AuthState>((set) => ({
+  user: null,
+  loading: false,
+  isCheckingAuth: true,
+  error: null,
+
+  sendOtp: async (email: string) => {
+    set({ loading: true, error: null });
+    try {
+      await authService.sendOtp(email);
+      return true;
+    } catch (err: any) {
+      set({
+        error: err.response?.data?.message || err.message,
+        loading: false,
+      });
+      return false;
+    } finally {
+      set({ loading: false });
+    }
+  },
+
+  signup: async (name: string, email: string, password: string, otp: string, role = "user") => {
+    set({ loading: true, error: null });
+    try {
+      const { data } = await authService.signup(name, email, password, otp, role);
+      if (data.token) {
+        localStorage.setItem("token", data.token);
+      }
+      set({
+        user: data.data,
+        loading: false,
+      });
+      return true;
+    } catch (err: any) {
+      set({
+        error: err.response?.data?.message || err.message,
+        loading: false,
+      });
+      return false;
+    } finally {
+      set({ loading: false });
+    }
+  },
+
+  login: async (email: string, password: string) => {
+    set({ loading: true, error: null });
+    try {
+      const { data } = await authService.login(email, password);
+      if (data.token) {
+        localStorage.setItem("token", data.token);
+      }
+      set({
+        user: data.data,
+        loading: false,
+      });
+      return true;
+    } catch (err: any) {
+      set({
+        error: err.response?.data?.message || err.message,
+        loading: false,
+      });
+      return false;
+    } finally {
+      set({ loading: false });
+    }
+  },
+
+  getMe: async () => {
+    set({ isCheckingAuth: true });
+    try {
+      const { data } = await authService.getMe();
+      set({ user: data.data, isCheckingAuth: false });
+    } catch (err: any) {
+      set({ isCheckingAuth: false });
+    } finally {
+      set({ isCheckingAuth: false });
+    }
+  },
+
+  updateProfile: async (updates: Partial<User> | FormData) => {
+    set({ loading: true, error: null });
+    try {
+      const { data } = await authService.updateMe(updates);
+      set({ user: data.data, loading: false });
+      return true;
+    } catch (err: any) {
+      set({
+        error: err.response?.data?.message || err.message,
+        loading: false,
+      });
+      return false;
+    } finally {
+      set({ loading: false });
+    }
+  },
+
+  logout: async () => {
+    try {
+      await authService.logout();
+    } catch (_) {
+      // ignore errors — cookie may already be expired
+    } finally {
+      localStorage.removeItem("token");
+      set({ loading: false });
+    }
+    set({
+      user: null,
+      error: null,
+    });
+  },
+}));
+

package/templates/production-fullstack/client/src/features/core/pages/Home.tsx

@@ -0,0 +1,150 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import { motion } from "framer-motion";
+import { FiZap, FiLayers, FiCpu, FiShield, FiArrowRight } from "react-icons/fi";
+import appConfig from "../../../config/index";
+import toast from "react-hot-toast";
+import { useState } from "react";
+
+const Home = () => {
+  const [count, setCount] = useState(0);
+
+  return (
+    <div className="h-full w-full relative overflow-hidden flex flex-col items-center justify-center  p-6 text-base-content">
+      {/* Hero Welcome Section */}
+      <div className="max-w-3xl w-full text-center space-y-6">
+        <motion.div
+          initial={{ opacity: 0, scale: 0.95 }}
+          animate={{ opacity: 1, scale: 1 }}
+          transition={{ duration: 0.5 }}
+          className="flex items-center justify-center gap-3 mb-2"
+        >
+          <div className="bg-primary/10 text-primary p-2.5 rounded-2xl">
+            <img
+              src={appConfig.app.logo}
+              alt={appConfig.app.name}
+              className="w-8 h-8 rounded-full"
+            />
+          </div>
+          <span className="text-sm font-semibold tracking-widest uppercase text-primary-content/65">
+            React Starter Kit
+          </span>
+        </motion.div>
+
+        <motion.h1
+          initial={{ opacity: 0, y: 15 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.5, delay: 0.1 }}
+          className="text-4xl sm:text-5xl font-black tracking-tight text-base-content"
+        >
+          Welcome to {appConfig.app.name}
+        </motion.h1>
+
+        <motion.p
+          initial={{ opacity: 0, y: 15 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.5, delay: 0.2 }}
+          className="text-sm sm:text-base text-base-content/70 max-w-xl mx-auto leading-relaxed"
+        >
+          A production-ready React setup built using <strong>@imksh/cli</strong>
+          . Everything is pre-configured and ready to publish.
+        </motion.p>
+      </div>
+
+      {/* Features Grid */}
+      <motion.div
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.6, delay: 0.3 }}
+        className="grid grid-cols-2 md:grid-cols-4 gap-4 max-w-4xl w-full my-10 shrink-0"
+      >
+        {/* Card 1 */}
+        <div className="bg-base-200/50 backdrop-blur border border-base-content/10 p-5 rounded-2xl flex flex-col gap-3 hover:bg-base-200 transition-colors">
+          <div className="text-primary text-xl">
+            <FiLayers />
+          </div>
+          <div>
+            <h3 className="text-sm font-bold text-base-content">Zustand & UI</h3>
+            <p className="text-xs text-base-content/70 mt-1">
+              Light/Dark theme, sidebar collapse & responsive menu states.
+            </p>
+          </div>
+        </div>
+
+        {/* Card 2 */}
+        <div className="bg-base-200/50 backdrop-blur border border-base-content/10 p-5 rounded-2xl flex flex-col gap-3 hover:bg-base-200 transition-colors">
+          <div className="text-success text-xl">
+            <FiZap />
+          </div>
+          <div>
+            <h3 className="text-sm font-bold text-base-content">Tailwind & UI</h3>
+            <p className="text-xs text-base-content/70 mt-1">
+              Tailwind CSS v4 + FlyonUI components pre-configured.
+            </p>
+          </div>
+        </div>
+
+        {/* Card 3 */}
+        <div className="bg-base-200/50 backdrop-blur border border-base-content/10 p-5 rounded-2xl flex flex-col gap-3 hover:bg-base-200 transition-colors">
+          <div className="text-warning text-xl">
+            <FiCpu />
+          </div>
+          <div>
+            <h3 className="text-sm font-bold text-base-content">Layouts & Router</h3>
+            <p className="text-xs text-base-content/70 mt-1">
+              Public & Dashboard layouts with dynamic headers.
+            </p>
+          </div>
+        </div>
+
+        {/* Card 4 */}
+        <div className="bg-base-200/50 backdrop-blur border border-base-content/10 p-5 rounded-2xl flex flex-col gap-3 hover:bg-base-200 transition-colors">
+          <div className="text-error text-xl">
+            <FiShield />
+          </div>
+          <div>
+            <h3 className="text-sm font-bold text-base-content">Helpers</h3>
+            <p className="text-xs text-base-content/70 mt-1">
+              Modal system, Tables, Loading Skeletons, and Auth Services.
+            </p>
+          </div>
+        </div>
+      </motion.div>
+
+      {/* Call to Actions */}
+      <motion.div
+        initial={{ opacity: 0, y: 15 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.5, delay: 0.4 }}
+        className="flex gap-4"
+      >
+        <motion.button
+          whileTap={{ scale: 0.95 }}
+          onClick={() => setCount((prev) => prev + 1)}
+          className="btn btn-primary rounded-xl px-6 py-2.5 font-semibold text-sm gap-2 shadow-lg shadow-primary/20 flex items-center transition-all"
+        >
+          count {count}
+        </motion.button>
+        <motion.button
+          whileTap={{ scale: 0.95 }}
+          onClick={() => toast.success("Hello World")}
+          className="btn btn-outline rounded-xl px-6 py-2.5 font-semibold text-sm gap-2 flex items-center transition-all border-base-content/20 text-base-content hover:bg-base-content/5"
+        >
+          Show Toast
+        </motion.button>
+      </motion.div>
+
+      {/* Footer Branding */}
+      <motion.div
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 0.5 }}
+        transition={{ duration: 0.5, delay: 0.5 }}
+        className="absolute bottom-6 text-xs text-base-content/50 font-medium"
+      >
+        Generated with @imksh/cli • Version {appConfig.app.version}
+      </motion.div>
+    </div>
+  );
+};
+
+export default Home;

package/templates/production-fullstack/client/src/features/core/pages/Profile.tsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+const Profile = () => {
+  return (
+    <div>Profile</div>
+  )
+}
+
+export default Profile

package/templates/production-fullstack/client/src/hooks/useLenis.ts

@@ -0,0 +1,28 @@
+import { useEffect } from "react";
+import Lenis from "lenis";
+
+const useLenis = () => {
+  useEffect(() => {
+    const lenis = new Lenis({
+      duration: 1.1, // reduce
+      easing: (t) => 1 - Math.pow(1 - t, 3),
+      smooth: true,
+      smoothTouch: false,
+    });
+
+    let rafId;
+    const raf = (time) => {
+      lenis.raf(time);
+      rafId = requestAnimationFrame(raf);
+    };
+
+    rafId = requestAnimationFrame(raf);
+
+    return () => {
+      cancelAnimationFrame(rafId);
+      lenis.destroy();
+    };
+  }, []);
+};
+
+export default useLenis;

package/templates/production-fullstack/client/src/hooks/usePwaInstall.ts

@@ -0,0 +1,45 @@
+import { useState, useEffect } from "react";
+
+const usePwaInstall = () => {
+  const [canInstall, setCanInstall] = useState(false);
+  const [isInstalled, setIsInstalled] = useState(false);
+  const [deferredPrompt, setDeferredPrompt] = useState(null);
+
+  useEffect(() => {
+    const handleBeforeInstallPrompt = (e) => {
+      e.preventDefault();
+      setDeferredPrompt(e);
+      setCanInstall(true);
+    };
+
+    const handleAppInstalled = () => {
+      setIsInstalled(true);
+      setCanInstall(false);
+    };
+
+    window.addEventListener("beforeinstallprompt", handleBeforeInstallPrompt);
+    window.addEventListener("appinstalled", handleAppInstalled);
+
+    if (window.matchMedia("(display-mode: standalone)").matches) {
+      setIsInstalled(true);
+    }
+
+    return () => {
+      window.removeEventListener("beforeinstallprompt", handleBeforeInstallPrompt);
+      window.removeEventListener("appinstalled", handleAppInstalled);
+    };
+  }, []);
+
+  const promptInstall = async () => {
+    if (!deferredPrompt) return null;
+    deferredPrompt.prompt();
+    const choiceResult = await deferredPrompt.userChoice;
+    setDeferredPrompt(null);
+    setCanInstall(false);
+    return choiceResult;
+  };
+
+  return { canInstall, isInstalled, promptInstall };
+};
+
+export default usePwaInstall;

package/templates/production-fullstack/client/src/hooks/useWindowSize.ts

@@ -0,0 +1,25 @@
+import { useState, useEffect } from "react";
+
+const useWindowSize = () => {
+  const [size, setSize] = useState({
+    width: window.innerWidth,
+    height: window.innerHeight,
+  });
+
+
+  useEffect(() => {
+    const handleResize = () => {
+      setSize({
+        width: window.innerWidth,
+        height: window.innerHeight,
+      });
+    };
+
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+
+  return size;
+};
+
+export default useWindowSize;

package/templates/production-fullstack/client/src/index.css

@@ -0,0 +1,158 @@
+@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&display=swap');
+@import "tailwindcss";
+@plugin "flyonui";
+
+
+/* ========================================
+   LIGHT THEME 
+======================================== */
+:root, [data-theme="light"] {
+  /* --font-sans: "Outfit", sans-serif; */
+  --color-base-100: #ffffff;
+  --color-base-200: #f8fafc;
+  --color-base-300: #e2e8f0;
+  --color-base-content: #0f172a;
+
+  --color-primary: #2563eb;
+  --color-primary-content: #ffffff;
+  --color-secondary: #64748b;
+  --color-secondary-content: #ffffff;
+  --color-accent: #00b8a3;
+  --color-accent-content: #ffffff;
+  --color-neutral: #1e293b;
+  --color-neutral-content: #ffffff;
+
+  --color-info: #0ea5e9;
+  --color-success: #22c55e;
+  --color-warning: #f59e0b;
+  --color-error: #ef4444;
+
+  --rounded-box: 12px;
+  --rounded-btn: 10px;
+  --rounded-badge: 8px;
+}
+
+/* ========================================
+   DARK THEME 
+======================================== */
+[data-theme="dark"] {
+  --color-base-100: #282828;
+  --color-base-200: #242424;
+  --color-base-300: #2d2d2d;
+  --color-base-content: #f5f5f5;
+
+  --color-primary: #2563eb;
+  --color-primary-content: #ffffff;
+  --color-secondary: #3a3a3a;
+  --color-secondary-content: #d4d4d4;
+  --color-accent: #00b8a3;
+  --color-accent-content: #ffffff;
+  --color-neutral: #2d2d2d;
+  --color-neutral-content: #f5f5f5;
+
+  --color-info: #38bdf8;
+  --color-success: #22c55e;
+  --color-warning: #f59e0b;
+  --color-error: #ef4444;
+
+  --rounded-box: 12px;
+  --rounded-btn: 10px;
+  --rounded-badge: 8px;
+}
+
+/* ========================================
+   MODERN UI UTILITIES & ANIMATIONS
+======================================== */
+html {
+  scroll-behavior: smooth;
+}
+
+body {
+  font-family: var(--font-sans);
+}
+
+.glass-panel {
+  background: rgba(255, 255, 255, 0.03);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+  border: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+[data-theme="light"] .glass-panel {
+  background: rgba(255, 255, 255, 0.6);
+  border: 1px solid rgba(0, 0, 0, 0.05);
+}
+
+@keyframes float {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(-10px); }
+}
+.animate-float {
+  animation: float 6s ease-in-out infinite;
+}
+
+@keyframes float-slow {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(-20px); }
+}
+.animate-float-slow {
+  animation: float-slow 8s ease-in-out infinite;
+}
+
+@keyframes pulse-glow {
+  0%, 100% { opacity: 0.4; transform: scale(1); }
+  50% { opacity: 0.8; transform: scale(1.05); }
+}
+.animate-pulse-glow {
+  animation: pulse-glow 4s ease-in-out infinite;
+}
+
+/* ========================================
+   ANIMATIONS
+======================================== */
+@keyframes slideInRight {
+  from { transform: translateX(100%); opacity: 0; }
+  to   { transform: translateX(0);    opacity: 1; }
+}
+
+.animate-slideInRight {
+  animation: slideInRight 0.22s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(8px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+
+.animate-fadeIn {
+  animation: fadeIn 0.3s ease forwards;
+}
+
+@keyframes zoomIn {
+  from { opacity: 0; transform: scale(0.95); }
+  to   { opacity: 1; transform: scale(1); }
+}
+
+.animate-zoomIn {
+  animation: zoomIn 0.18s ease forwards;
+}
+
+/* Hide Scrollbar */
+
+::-webkit-scrollbar {
+  width: 0px;
+  height: 0px;
+}
+
+* {
+  scrollbar-width: none;
+}
+
+.hide-scrollbar {
+  -ms-overflow-style: none; /* IE & Edge */
+  scrollbar-width: none; /* Firefox */
+}
+
+.hide-scrollbar::-webkit-scrollbar {
+  display: none; /* Chrome, Safari */
+}

package/templates/production-fullstack/client/src/lib/axios.ts

@@ -0,0 +1,22 @@
+import axios from "axios";
+
+export const api = axios.create({
+  baseURL: import.meta.env.VITE_API_URL || "http://localhost:5001/api",
+  withCredentials: true, // send httpOnly cookies on every request
+  headers: {
+    "Content-Type": "application/json",
+  },
+});
+
+api.interceptors.request.use(
+  (config) => {
+    const token = localStorage.getItem("token");
+    if (token) {
+      config.headers.Authorization = `Bearer ${token}`;
+    }
+    return config;
+  },
+  (error) => {
+    return Promise.reject(error);
+  }
+);

package/templates/production-fullstack/client/src/lib/dayjs.ts

@@ -0,0 +1,12 @@
+import dayjs from "dayjs";
+import relativeTime from "dayjs/plugin/relativeTime";
+import timezone from "dayjs/plugin/timezone";
+import utc from "dayjs/plugin/utc";
+import localizedFormat from "dayjs/plugin/localizedFormat";
+
+dayjs.extend(relativeTime);
+dayjs.extend(timezone);
+dayjs.extend(utc);
+dayjs.extend(localizedFormat);
+
+export default dayjs;

package/templates/production-fullstack/client/src/lib/query-client.ts

@@ -0,0 +1,11 @@
+import { QueryClient } from "@tanstack/react-query";
+
+export const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      refetchOnWindowFocus: false,
+      retry: 1,
+      staleTime: 5 * 60 * 1000, // 5 minutes
+    },
+  },
+});

package/templates/production-fullstack/client/src/lib/socket.ts

@@ -0,0 +1,6 @@
+import { io } from "socket.io-client";
+
+export const socket = io(import.meta.env.VITE_API_URL?.replace("/api", "") || "http://localhost:5001", {
+  autoConnect: false,
+  withCredentials: true,
+});

package/templates/production-fullstack/client/src/main.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import { BrowserRouter } from "react-router-dom";
+import { QueryClientProvider } from "@tanstack/react-query";
+import { queryClient } from "./lib/query-client.js";
+import App from "./App.js";
+import "./index.css";
+
+if ("serviceWorker" in navigator) {
+  window.addEventListener("load", () => {
+    navigator.serviceWorker
+      .register("/sw.js")
+      .then((reg) =>
+        console.log("Service Worker registered successfully:", reg.scope),
+      )
+      .catch((err) => console.log("Service Worker registration failed:", err));
+  });
+}
+
+ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
+  <React.StrictMode>
+    <QueryClientProvider client={queryClient}>
+      <BrowserRouter>
+        <App />
+      </BrowserRouter>
+    </QueryClientProvider>
+  </React.StrictMode>,
+);