@imksh/create 1.0.0

package/templates/mern-ts/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/mern-ts/client/src/main.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import { BrowserRouter } from "react-router-dom";
+import App from "./App.jsx";
+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")).render(
+  <React.StrictMode>
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
+  </React.StrictMode>,
+);

package/templates/mern-ts/client/src/pages/Home.tsx

@@ -0,0 +1,154 @@
+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/appConfig";
+import toast from "react-hot-toast";
+import { useState } from "react";
+
+const Home = () => {
+  const [count, setCount] = useState(0);
+
+  return (
+    <div className="min-h-screen w-full relative overflow-hidden flex flex-col items-center justify-center bg-gradient-to-br from-slate-950 via-slate-900 to-indigo-950 text-white font-sans p-6">
+      {/* Animated Glowing Ambient Orbs */}
+      <div className="absolute top-1/4 left-1/4 w-96 h-96 bg-primary/20 rounded-full blur-3xl -z-10 animate-pulse-glow" />
+      <div className="absolute bottom-1/4 right-1/4 w-96 h-96 bg-indigo-500/10 rounded-full blur-3xl -z-10 animate-pulse-glow" />
+
+      {/* 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/20 text-primary border border-primary/30 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 bg-clip-text text-transparent bg-gradient-to-r from-white via-indigo-200 to-primary-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-slate-300 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-white/[0.03] backdrop-blur border border-white/[0.08] p-5 rounded-2xl flex flex-col gap-3">
+          <div className="text-primary text-xl">
+            <FiLayers />
+          </div>
+          <div>
+            <h3 className="text-sm font-bold text-white">Zustand & UI</h3>
+            <p className="text-xs text-slate-400 mt-1">
+              Light/Dark theme, sidebar collapse & responsive menu states.
+            </p>
+          </div>
+        </div>
+
+        {/* Card 2 */}
+        <div className="bg-white/[0.03] backdrop-blur border border-white/[0.08] p-5 rounded-2xl flex flex-col gap-3">
+          <div className="text-success text-xl">
+            <FiZap />
+          </div>
+          <div>
+            <h3 className="text-sm font-bold text-white">Tailwind & UI</h3>
+            <p className="text-xs text-slate-400 mt-1">
+              Tailwind CSS v4 + FlyonUI components pre-configured.
+            </p>
+          </div>
+        </div>
+
+        {/* Card 3 */}
+        <div className="bg-white/[0.03] backdrop-blur border border-white/[0.08] p-5 rounded-2xl flex flex-col gap-3">
+          <div className="text-warning text-xl">
+            <FiCpu />
+          </div>
+          <div>
+            <h3 className="text-sm font-bold text-white">Layouts & Router</h3>
+            <p className="text-xs text-slate-400 mt-1">
+              Public & Dashboard layouts with dynamic headers.
+            </p>
+          </div>
+        </div>
+
+        {/* Card 4 */}
+        <div className="bg-white/[0.03] backdrop-blur border border-white/[0.08] p-5 rounded-2xl flex flex-col gap-3">
+          <div className="text-error text-xl">
+            <FiShield />
+          </div>
+          <div>
+            <h3 className="text-sm font-bold text-white">Helpers</h3>
+            <p className="text-xs text-slate-400 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 text-white border-white"
+        >
+          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-slate-500 font-medium"
+      >
+        Generated with @imksh/cli • Version {appConfig.app.version}
+      </motion.div>
+    </div>
+  );
+};
+
+export default Home;

package/templates/mern-ts/client/src/pages/Login.tsx

@@ -0,0 +1,196 @@
+import React, { useState } from "react";
+import { Link, useNavigate } from "react-router-dom";
+import {
+  Mail,
+  Lock,
+  User,
+  Eye,
+  EyeOff,
+  ArrowLeft,
+  GraduationCap,
+} from "lucide-react";
+import { useAuthStore } from "../store/useAuthStore";
+import Loading from "../components/common/Loading";
+
+const Login = () => {
+  const navigate = useNavigate();
+  const { login, signup, loading, error, user } = useAuthStore();
+
+  const [mode, setMode] = useState("login"); // "login" | "signup"
+  const [showPassword, setShowPassword] = useState(false);
+  const [form, setForm] = useState({ name: "", email: "", password: "" });
+
+  const handleChange = (e) =>
+    setForm((prev) => ({ ...prev, [e.target.name]: e.target.value }));
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    let ok;
+    if (mode === "login") {
+      ok = await login(form.email, form.password);
+    } else {
+      ok = await signup(form.name, form.email, form.password);
+    }
+    if (ok) navigate("/");
+  };
+
+  if (loading || user) {
+    return <Loading />;
+  }
+
+  return (
+    <div className="min-h-dvh w-screen bg-base-100 text-base-content flex items-center justify-center p-4 font-sans">
+      <div className="relative w-full max-w-md">
+        {/* Card */}
+        <div className="bg-base-200/80 backdrop-blur-md border border-base-300 rounded-3xl p-8 shadow-2xl">
+          {/* Logo & title */}
+          <div className="flex flex-col items-center gap-2 mb-8">
+            <div className="w-12 h-12 rounded-2xl bg-primary/15 border border-primary/20 flex items-center justify-center text-2xl shadow-inner text-primary font-bold">
+              <GraduationCap size={24} />
+            </div>
+            <h1 className="text-2xl font-black tracking-tight">
+              {mode === "login" ? "Welcome back" : "Create account"}
+            </h1>
+            <p className="text-xs text-base-content/50 text-center">
+              {mode === "login"
+                ? "Sign in to continue your learning journey"
+                : "Join LMS and start learning the MERN stack"}
+            </p>
+          </div>
+
+          {/* Tab switcher */}
+          <div className="tabs tabs-box bg-base-300/50 p-1 rounded-2xl w-full flex mb-6 border border-base-300">
+            <button
+              type="button"
+              onClick={() => setMode("login")}
+              className={`tab flex-1 rounded-xl text-sm font-bold transition-all ${
+                mode === "login"
+                  ? "tab-active bg-primary text-primary-content!"
+                  : ""
+              }`}
+            >
+              Sign In
+            </button>
+            <button
+              type="button"
+              onClick={() => setMode("signup")}
+              className={`tab flex-1 rounded-xl text-sm font-bold transition-all ${
+                mode === "signup"
+                  ? "tab-active bg-primary text-primary-content!"
+                  : ""
+              }`}
+            >
+              Sign Up
+            </button>
+          </div>
+
+          {/* Error */}
+          {error && (
+            <div className="alert alert-error alert-soft rounded-2xl text-xs mb-4 p-3 border border-error/20">
+              ⚠️ {error}
+            </div>
+          )}
+
+          {/* Form */}
+          <form onSubmit={handleSubmit} className="flex flex-col gap-4">
+            {/* Name — signup only */}
+            {mode === "signup" && (
+              <label className="input input-bordered rounded-2xl flex items-center gap-2 bg-base-100 border-base-300 focus-within:border-primary transition-colors">
+                <User size={16} className="text-base-content/40 shrink-0" />
+                <input
+                  name="name"
+                  type="text"
+                  placeholder="Full name"
+                  value={form.name}
+                  onChange={handleChange}
+                  required
+                  className="grow text-sm bg-transparent outline-none placeholder:text-base-content/30"
+                />
+              </label>
+            )}
+
+            {/* Email */}
+            <label className="input input-bordered rounded-2xl flex items-center gap-2 bg-base-100 border-base-300 focus-within:border-primary transition-colors">
+              <Mail size={16} className="text-base-content/40 shrink-0" />
+              <input
+                name="email"
+                type="email"
+                placeholder="Email address"
+                value={form.email}
+                onChange={handleChange}
+                required
+                className="grow text-sm bg-transparent outline-none placeholder:text-base-content/30"
+              />
+            </label>
+
+            {/* Password */}
+            <label className="input input-bordered rounded-2xl flex items-center gap-2 bg-base-100 border-base-300 focus-within:border-primary transition-colors">
+              <Lock size={16} className="text-base-content/40 shrink-0" />
+              <input
+                name="password"
+                type={showPassword ? "text" : "password"}
+                placeholder="Password"
+                value={form.password}
+                onChange={handleChange}
+                required
+                minLength={6}
+                className="grow text-sm bg-transparent outline-none placeholder:text-base-content/30"
+              />
+              <button
+                type="button"
+                onClick={() => setShowPassword((p) => !p)}
+                className="text-base-content/40 hover:text-base-content transition-colors"
+              >
+                {showPassword ? <EyeOff size={16} /> : <Eye size={16} />}
+              </button>
+            </label>
+
+            {/* Submit */}
+            <button
+              type="submit"
+              disabled={loading}
+              className="btn btn-primary rounded-2xl font-bold mt-2 w-full shadow-lg hover:scale-[1.01] active:scale-[0.99] transition-transform"
+            >
+              {loading ? (
+                <span className="loading loading-spinner loading-sm" />
+              ) : mode === "login" ? (
+                "Sign In →"
+              ) : (
+                "Create Account →"
+              )}
+            </button>
+          </form>
+
+          {/* Footer note */}
+          <p className="text-center text-xs text-base-content/40 mt-6">
+            {mode === "login" ? (
+              <>
+                New here?{" "}
+                <button
+                  type="button"
+                  onClick={() => setMode("signup")}
+                  className="text-primary font-bold hover:underline"
+                >
+                  Create an account
+                </button>
+              </>
+            ) : (
+              <>
+                Already have an account?{" "}
+                <button
+                  type="button"
+                  onClick={() => setMode("login")}
+                  className="text-primary font-bold hover:underline"
+                >
+                  Sign in
+                </button>
+              </>
+            )}
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Login;

package/templates/mern-ts/client/src/pages/Profile.tsx

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

package/templates/mern-ts/client/src/services/authService.ts

@@ -0,0 +1,16 @@
+import { api } from "../config/api";
+
+export const authService = {
+  signup: (name, email, password, role = "user") =>
+    api.post("/auth/signup", { name, email, password, role }),
+
+  login: (email, password) =>
+    api.post("/auth/login", { email, password }),
+
+  getMe: () => api.get("/auth/me"),
+
+  updateMe: (data) => api.put("/auth/me", data),
+
+  logout: () =>
+    api.post("/auth/logout"),
+};

package/templates/mern-ts/client/src/store/useAuthStore.ts

@@ -0,0 +1,98 @@
+import { create } from "zustand";
+import { authService } from "../services/authService";
+
+export const useAuthStore = create((set, get) => ({
+  user: null,
+  loading: true,
+  error: null,
+
+  signup: async (name, email, password, role = "user") => {
+    set({ loading: true, error: null });
+    try {
+      const { data } = await authService.signup(name, email, password, role);
+      if (data.token) {
+        localStorage.setItem("token", data.token);
+      }
+      set({
+        user: data,
+        loading: false,
+      });
+      return true;
+    } catch (err) {
+      set({
+        error: err.response?.data?.message || err.message,
+        loading: false,
+      });
+      return false;
+    } finally {
+      set({ loading: false });
+    }
+  },
+
+  login: async (email, password) => {
+    set({ loading: true, error: null });
+    try {
+      const { data } = await authService.login(email, password);
+      if (data.token) {
+        localStorage.setItem("token", data.token);
+      }
+      set({
+        user: data,
+        loading: false,
+      });
+      return true;
+    } catch (err) {
+      set({
+        error: err.response?.data?.message || err.message,
+        loading: false,
+      });
+      return false;
+    } finally {
+      set({ loading: false });
+    }
+  },
+
+  getMe: async () => {
+    set({ loading: true });
+    try {
+      const { data } = await authService.getMe();
+      set({ user: data, loading: false });
+    } catch (err) {
+      set({ loading: false });
+    } finally {
+      set({ loading: false });
+    }
+  },
+
+  updateProfile: async (updates) => {
+    set({ loading: true, error: null });
+    try {
+      const { data } = await authService.updateMe(updates);
+      set({ user: data, loading: false });
+      return true;
+    } catch (err) {
+      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,
+    });
+  },
+}));