@imksh/create 1.0.27 → 1.0.30

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;

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

@@ -1,57 +0,0 @@
-import mongoose, { Document } from "mongoose";
-
-export interface IUser extends Document {
-  name: string;
-  email: string;
-  phone?: string;
-  avatar?: {
-    publicId?: string;
-    url?: string;
-  };
-  password?: string;
-  role: "user" | "admin" | "other";
-  createdAt: Date;
-  updatedAt: Date;
-}
-
-const userSchema = new mongoose.Schema<IUser>(
-  {
-    name: {
-      type: String,
-      required: [true, "Name is required"],
-      trim: true,
-    },
-
-    email: {
-      type: String,
-      required: [true, "Email is required"],
-      unique: true,
-      lowercase: true,
-      trim: true,
-    },
-    phone: {
-      type: String,
-    },
-    avatar: {
-      publicId: {
-        type: String,
-      },
-      url: {
-        type: String,
-      },
-    },
-    password: {
-      type: String,
-      required: [true, "Password is required"],
-    },
-    role: {
-      type: String,
-      enum: ["user", "admin", "other"],
-      default: "user",
-    },
-  },
-  { timestamps: true },
-);
-
-const User = mongoose.model<IUser>("User", userSchema);
-export default User;

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

@@ -1,10 +0,0 @@
-import express from "express";
-import authRoutes from "./auth.route.js";
-import uploadRoutes from "./upload.route.js";
-
-const router = express.Router();
-
-router.use("/auth", authRoutes);
-router.use("/upload", uploadRoutes);
-
-export default router;

package/templates/next/next.config.mjs

@@ -1,23 +0,0 @@
-import withPWAInit from "@ducanh2912/next-pwa";
-
-const withPWA = withPWAInit({
-  dest: "public",
-  disable: process.env.NODE_ENV === "development",
-  register: true,
-  skipWaiting: true,
-});
-
-/** @type {import('next').NextConfig} */
-const nextConfig = {
-  async rewrites() {
-    return [
-      {
-        source: "/api/external/:path*",
-        destination: "http://localhost:5000/api/:path*", // Example backend URL
-      },
-    ];
-  },
-  turbopack: {},
-};
-
-export default withPWA(nextConfig);

package/templates/next/public/manifest.json

@@ -1,21 +0,0 @@
-{
-  "name": "IMKSH Next.js App",
-  "short_name": "IMKSH App",
-  "description": "Next.js App Router template with PWA support",
-  "start_url": "/",
-  "display": "standalone",
-  "background_color": "#ffffff",
-  "theme_color": "#4f46e5",
-  "icons": [
-    {
-      "src": "/icon-192x192.png",
-      "sizes": "192x192",
-      "type": "image/png"
-    },
-    {
-      "src": "/icon-512x512.png",
-      "sizes": "512x512",
-      "type": "image/png"
-    }
-  ]
-}

package/templates/next/src/assets/data/navigation.js

@@ -1,29 +0,0 @@
-import {
-    FaHome,
-    FaUser,
-    FaCog,
-    FaBook
-} from "react-icons/fa";
-
-export const navigation = [
-    {
-        title: "Home",
-        path: "/",
-        icon: FaHome,
-    },
-    {
-        title: "Courses",
-        path: "/courses",
-        icon: FaBook,
-    },
-    {
-        title: "Profile",
-        path: "/profile",
-        icon: FaUser,
-    },
-    {
-        title: "Settings",
-        path: "/settings",
-        icon: FaCog,
-    },
-];