@imksh/create 1.0.26 → 1.0.28

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

@@ -1,154 +0,0 @@
-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

@@ -1,233 +0,0 @@
-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, sendOtp, loading, isCheckingAuth, error, user } = useAuthStore();
-
-  const [mode, setMode] = useState("login"); // "login" | "signup"
-  const [showPassword, setShowPassword] = useState(false);
-  const [form, setForm] = useState({ name: "", email: "", password: "", otp: "" });
-  const [otpSent, setOtpSent] = useState(false);
-
-  const handleChange = (e) =>
-    setForm((prev) => ({ ...prev, [e.target.name]: e.target.value }));
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-    let ok;
-    if (mode === "login") {
-      ok = await login(form.email, form.password);
-      if (ok) navigate("/");
-    } else {
-      if (!otpSent) {
-        ok = await sendOtp(form.email);
-        if (ok) setOtpSent(true);
-      } else {
-        ok = await signup(form.name, form.email, form.password, form.otp);
-        if (ok) navigate("/");
-      }
-    }
-  };
-
-  if (isCheckingAuth || 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");
-                setOtpSent(false);
-              }}
-              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");
-                setOtpSent(false);
-              }}
-              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>
-
-            {/* OTP Input - only visible when OTP is sent during signup */}
-            {mode === "signup" && otpSent && (
-              <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="otp"
-                  type="text"
-                  placeholder="Enter OTP"
-                  value={form.otp}
-                  onChange={handleChange}
-                  required
-                  className="grow text-sm bg-transparent outline-none placeholder:text-base-content/30"
-                />
-              </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 →"
-              ) : otpSent ? (
-                "Verify & Create Account →"
-              ) : (
-                "Send OTP →"
-              )}
-            </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");
-                    setOtpSent(false);
-                  }}
-                  className="text-primary font-bold hover:underline"
-                >
-                  Create an account
-                </button>
-              </>
-            ) : (
-              <>
-                Already have an account?{" "}
-                <button
-                  type="button"
-                  onClick={() => {
-                    setMode("login");
-                    setOtpSent(false);
-                  }}
-                  className="text-primary font-bold hover:underline"
-                >
-                  Sign in
-                </button>
-              </>
-            )}
-          </p>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default Login;

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

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

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

@@ -1,74 +0,0 @@
-import { create } from "zustand";
-import { ReactNode } from "react";
-
-export interface UiState {
-  open: boolean;
-  collapsed: boolean;
-  isMobileMenuOpened: boolean;
-  headerTitle: string;
-  headerActions: ReactNode;
-  setHeaderTitle: (title: string) => void;
-  setHeaderActions: (actions: ReactNode) => void;
-  toggleCollapsed: () => void;
-  setMobileMenuOpened: (open: boolean) => void;
-  toggleMobileMenuOpened: () => void;
-  theme: string;
-  setTheme: (theme: string) => void;
-  toggleTheme: () => void;
-  toggleSidebar: () => void;
-  openSidebar: () => void;
-  close: () => void;
-}
-
-export const useUiStore = create<UiState>((set, get) => ({
-  open: false,
-  collapsed: false,
-  isMobileMenuOpened: false,
-  headerTitle: "Dashboard",
-  headerActions: null,
-  setHeaderTitle: (title: string) => set({ headerTitle: title }),
-  setHeaderActions: (actions: ReactNode) => set({ headerActions: actions }),
-  toggleCollapsed: () => set((state) => ({ collapsed: !state.collapsed })),
-
-  setMobileMenuOpened: (open) => {
-    set({ isMobileMenuOpened: open });
-  },
-  toggleMobileMenuOpened: () => {
-    set((state) => ({ isMobileMenuOpened: !state.isMobileMenuOpened }));
-  },
-
-  theme: localStorage.getItem("theme") || "light",
-
-  setTheme: (theme) => {
-    document.documentElement.setAttribute("data-theme", theme);
-
-    localStorage.setItem("theme", theme);
-
-    set({ theme });
-  },
-
-  toggleTheme: () => {
-    const nextTheme = get().theme === "light" ? "dark" : "light";
-
-    document.documentElement.setAttribute("data-theme", nextTheme);
-
-    localStorage.setItem("theme", nextTheme);
-
-    set({ theme: nextTheme });
-  },
-
-  toggleSidebar: () =>
-    set((state) => ({
-      open: !state.open,
-    })),
-
-  openSidebar: () =>
-    set({
-      open: true,
-    }),
-
-  close: () =>
-    set({
-      open: false,
-    }),
-}));

package/templates/mern-ts/server/README.md

@@ -1,71 +0,0 @@
-# Node.js TypeScript Backend Boilerplate
-
-A production-ready, strongly-typed Node.js & Express boilerplate project with best-practice architectures, modular routing, and TypeScript compilation.
-
-## Features
-
-- ⚙️ **Modular Architecture:** Express application setup decoupled into `app.ts` (middleware + router wiring) and `index.ts` (server initialization & db connection).
-- 📝 **Colorized Logging:** Zero-dependency custom logger with timestamped success, warning, info, and error layouts.
-- 🛡️ **Security Out-of-the-Box:** Pre-configured with Helmet headers, CORS policies, and global rate limiters (`apiLimiter`, `authLimiter`, `uploadLimiter`).
-- 🔑 **Authentication & JWT:** Custom middlewares for route protection, sign-ups, and log-ins with HTTP-only cookie-based tokens.
-- 📧 **SMTP Mailer & OTP:** Standard mailer transport using Gmail NodeMailer wrapper, integrated with an OTP generator and email template.
-- 🖼️ **File Uploads:** Cloudinary integration utilizing Multer memory buffers for secure, single or multi-file uploads.
-- 🔌 **Socket.io Setup:** Pre-installed Socket.io hooks mapping connected user sessions to active sockets.
-- ✉️ **Web Push:** Push notifications integration powered by VAPID key generators and web-push subscriptions.
-- 📦 **TSX Engine:** Fast runtime TS loader supporting ESM resolutions natively with instant reloads.
-
-## Getting Started
-
-### 1. Configure Environment Variables
-
-Create a `.env` file in the root directory (based on `.env.example`):
-
-```env
-PORT=5002
-JWT_SECRET=your_super_secret_jwt_key
-MONGO_URI=your_mongodb_connection_uri
-
-# Cloudinary
-CLOUDINARY_CLOUD_NAME=your_cloud_name
-CLOUDINARY_API_KEY=your_api_key
-CLOUDINARY_API_SECRET=your_api_secret
-
-# SMTP Settings
-SMTP_USER=your_email@gmail.com
-SMTP_PASS=your_app_password
-
-# Web Push
-VAPID_SUBJECT=mailto:your_email@example.com
-VAPID_PUBLIC_KEY=your_vapid_public_key
-VAPID_PRIVATE_KEY=your_vapid_private_key
-```
-
-### 2. Install & Start Development
-
-```bash
-# Install dependencies
-npm install
-
-# Start development server with reload (via tsx)
-npm run dev
-
-# Build the project to JS
-npm run build
-
-# Start production compiled server
-npm start
-```
-
-## API Endpoints
-
-### Auth Routes (`/api/auth`)
-
-- `POST /signup` - Registers a new user session
-- `POST /login` - Log in user and write token cookie
-- `POST /logout` - Clear token session cookies
-- `GET /me` - Returns logged-in user profile (requires auth)
-- `PUT /me` - Edit profile info and upload avatars (requires auth)
-
-### Upload Routes (`/api/upload`)
-
-- `POST /` - Securely uploads image/file to Cloudinary (requires auth)

package/templates/mern-ts/server/src/config/db.ts

@@ -1,15 +0,0 @@
-import mongoose from "mongoose";
-import logger from "../utils/logger.js";
-
-const connectDB = async () => {
-  try {
-    const MONGO_URI = process.env.MONGO_URI || "mongodb://localhost:27017/test";
-    const conn = await mongoose.connect(MONGO_URI);
-    logger.success(`MongoDB connected: ${conn.connection.host}`);
-  } catch (error: any) {
-    logger.error(`MongoDB connection error: ${error.message}`, error);
-    process.exit(1);
-  }
-};
-
-export default connectDB;

package/templates/mern-ts/server/src/index.ts

@@ -1,17 +0,0 @@
-import dotenv from "dotenv";
-import http from "http";
-import app from "./app.js";
-import connectDB from "./config/db.js";
-import logger from "./utils/logger.js";
-
-dotenv.config();
-
-const PORT = process.env.PORT || 5001;
-
-connectDB();
-
-const server = http.createServer(app);
-
-server.listen(PORT, () => {
-  logger.success(`Server is running on port ${PORT}`);
-});

package/templates/mern-ts/server/src/middleware/auth.middleware.ts

@@ -1,38 +0,0 @@
-import { Request, Response, NextFunction } from "express";
-import User from "../models/user.model.js";
-import { verifyToken } from "../utils/jwt.js";
-import logger from "../utils/logger.js";
-
-export const protect = async (req: Request, res: Response, next: NextFunction) => {
-  let token: string | undefined;
-
-  if (req.cookies?.token) {
-    token = req.cookies.token;
-  } else if (
-    req.headers.authorization &&
-    req.headers.authorization.startsWith("Bearer")
-  ) {
-    token = req.headers.authorization.split(" ")[1];
-  }
-
-  if (!token) {
-    return res.status(401).json({ message: "Not authorized, no token provided" });
-  }
-
-  try {
-    const decoded: any = verifyToken(token);
-    if (!decoded) {
-      return res.status(401).json({ message: "Not authorized, invalid token" });
-    }
-
-    req.user = await User.findById(decoded.id).select("-password");
-    if (!req.user) {
-      return res.status(401).json({ message: "Not authorized, user not found" });
-    }
-
-    return next();
-  } catch (error: any) {
-    logger.error("Auth middleware error", error);
-    return res.status(401).json({ message: "Not authorized, token verification failed" });
-  }
-};

package/templates/mern-ts/server/src/models/otp.model.ts

@@ -1,27 +0,0 @@
-import mongoose, { Document } from "mongoose";
-
-export interface IOtp extends Document {
-  email: string;
-  otp: string;
-  createdAt: Date;
-}
-
-const otpSchema = new mongoose.Schema<IOtp>({
-  email: {
-    type: String,
-    required: true,
-  },
-  otp: {
-    type: String,
-    required: true,
-  },
-  createdAt: {
-    type: Date,
-    default: Date.now(),
-    expires: 300,
-  },
-});
-
-const Otp = mongoose.model<IOtp>("Otp", otpSchema);
-
-export default Otp;