@surajprasad/create-starterkit 0.1.0

package/templates/mern/frontend/src/modules/dashboard/pages/DashboardPage.jsx

@@ -0,0 +1,41 @@
+import { Button } from "../../../shared/components/Button.jsx";
+import { Toast } from "../../../shared/components/Toast.jsx";
+import { useState } from "react";
+
+import { useAuthStore } from "../../auth/store/authStore.js";
+
+export const DashboardPage = () => {
+  const user = useAuthStore((s) => s.user);
+  const clearAuth = useAuthStore((s) => s.clearAuth);
+  const [toast, setToast] = useState(null);
+
+  const onLogout = () => {
+    clearAuth();
+    setToast({ type: "success", message: "Logged out" });
+  };
+
+  return (
+    <div style={{ padding: 24, maxWidth: 860, margin: "0 auto" }}>
+      <div
+        style={{
+          background: "white",
+          border: "1px solid #E5E7EB",
+          borderRadius: 16,
+          padding: 18
+        }}
+      >
+        <h1 style={{ margin: 0, fontSize: 22 }}>Dashboard</h1>
+        <p style={{ marginTop: 8, color: "#6B7280", fontSize: 13 }}>
+          You are logged in as <strong>{user?.email || "unknown"}</strong>
+        </p>
+        <div style={{ marginTop: 14 }}>
+          <Button onClick={onLogout} variant="secondary">
+            Logout
+          </Button>
+        </div>
+      </div>
+      <Toast message={toast?.message} type={toast?.type} onClose={() => setToast(null)} />
+    </div>
+  );
+};
+

package/templates/mern/frontend/src/shared/components/Button.jsx

@@ -0,0 +1,31 @@
+export const Button = ({ children, variant = "primary", ...props }) => {
+  const styles =
+    variant === "primary"
+      ? {
+          background: "#4F46E5",
+          color: "white",
+          border: "1px solid #4F46E5"
+        }
+      : {
+          background: "white",
+          color: "#111827",
+          border: "1px solid #E5E7EB"
+        };
+
+  return (
+    <button
+      {...props}
+      style={{
+        ...styles,
+        padding: "10px 14px",
+        borderRadius: 10,
+        fontWeight: 700,
+        cursor: "pointer",
+        opacity: props.disabled ? 0.6 : 1
+      }}
+    >
+      {children}
+    </button>
+  );
+};
+

package/templates/mern/frontend/src/shared/components/Input.jsx

@@ -0,0 +1,23 @@
+export const Input = ({ label, ...props }) => {
+  return (
+    <label style={{ display: "block" }}>
+      {label ? (
+        <div style={{ marginBottom: 6, fontSize: 12, color: "#374151", fontWeight: 700 }}>
+          {label}
+        </div>
+      ) : null}
+      <input
+        {...props}
+        style={{
+          width: "100%",
+          padding: "10px 12px",
+          borderRadius: 10,
+          border: "1px solid #E5E7EB",
+          outline: "none",
+          fontSize: 14
+        }}
+      />
+    </label>
+  );
+};
+

package/templates/mern/frontend/src/shared/components/Toast.jsx

@@ -0,0 +1,52 @@
+import { useEffect } from "react";
+
+export const Toast = ({ message, type = "info", onClose }) => {
+  useEffect(() => {
+    if (!message) return;
+    const t = setTimeout(() => onClose?.(), 3500);
+    return () => clearTimeout(t);
+  }, [message, onClose]);
+
+  if (!message) return null;
+
+  const bg =
+    type === "error" ? "#FEE2E2" : type === "success" ? "#DCFCE7" : "#E0E7FF";
+  const border =
+    type === "error" ? "#FCA5A5" : type === "success" ? "#86EFAC" : "#A5B4FC";
+
+  return (
+    <div
+      style={{
+        position: "fixed",
+        bottom: 16,
+        right: 16,
+        maxWidth: 360,
+        background: bg,
+        border: `1px solid ${border}`,
+        padding: "10px 12px",
+        borderRadius: 12,
+        color: "#111827",
+        boxShadow: "0 10px 20px rgba(0,0,0,0.08)"
+      }}
+      role="status"
+    >
+      <div style={{ display: "flex", gap: 10, alignItems: "start" }}>
+        <div style={{ flex: 1, fontSize: 13, lineHeight: 1.4 }}>{message}</div>
+        <button
+          onClick={onClose}
+          style={{
+            background: "transparent",
+            border: "none",
+            cursor: "pointer",
+            fontWeight: 900,
+            color: "#111827"
+          }}
+          aria-label="Close"
+        >
+          ×
+        </button>
+      </div>
+    </div>
+  );
+};
+

package/templates/mern/frontend/src/shared/services/api.js

@@ -0,0 +1,20 @@
+import axios from "axios";
+
+import { storage } from "../utils/storage.util.js";
+
+const baseURL = import.meta.env.VITE_API_URL || "http://localhost:5000";
+
+export const api = axios.create({
+  baseURL,
+  withCredentials: false
+});
+
+api.interceptors.request.use((config) => {
+  const token = storage.get("token");
+  if (token) {
+    config.headers = config.headers || {};
+    config.headers.Authorization = `Bearer ${token}`;
+  }
+  return config;
+});
+

package/templates/mern/frontend/src/shared/utils/formatError.util.js

@@ -0,0 +1,8 @@
+export const formatError = (err) => {
+  const msg =
+    err?.response?.data?.message ||
+    err?.message ||
+    "Something went wrong";
+  return String(msg);
+};
+

package/templates/mern/frontend/src/shared/utils/storage.util.js

@@ -0,0 +1,25 @@
+export const storage = {
+  get(key) {
+    try {
+      const raw = localStorage.getItem(key);
+      return raw ? JSON.parse(raw) : null;
+    } catch {
+      return null;
+    }
+  },
+  set(key, value) {
+    try {
+      localStorage.setItem(key, JSON.stringify(value));
+    } catch {
+      // ignore
+    }
+  },
+  remove(key) {
+    try {
+      localStorage.removeItem(key);
+    } catch {
+      // ignore
+    }
+  }
+};
+

package/templates/mern/frontend/vite.config.js

@@ -0,0 +1,13 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    port: 5173,
+    proxy: {
+      "/api": "http://localhost:5000"
+    }
+  }
+});
+

package/templates/mern/frontend-next/.env.example

@@ -0,0 +1 @@
+NEXT_PUBLIC_API_URL=http://localhost:5000

package/templates/mern/frontend-next/app/forgot-password/page.js

@@ -0,0 +1,8 @@
+"use client";
+
+import { ForgotPasswordPage } from "../../src/modules/auth/pages/ForgotPasswordPage.jsx";
+
+export default function Page() {
+  return <ForgotPasswordPage />;
+}
+

package/templates/mern/frontend-next/app/layout.js

@@ -0,0 +1,15 @@
+export const metadata = {
+  title: "StarterKit",
+  description: "Production-ready StarterKit"
+};
+
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en">
+      <body style={{ margin: 0, background: "#F9FAFB", fontFamily: "Arial, Helvetica, sans-serif" }}>
+        {children}
+      </body>
+    </html>
+  );
+}
+

package/templates/mern/frontend-next/app/login/page.js

@@ -0,0 +1,8 @@
+"use client";
+
+import { LoginPage } from "../../src/modules/auth/pages/LoginPage.jsx";
+
+export default function Page() {
+  return <LoginPage />;
+}
+

package/templates/mern/frontend-next/app/page.js

@@ -0,0 +1,22 @@
+"use client";
+
+import { useEffect } from "react";
+
+import { DashboardPage } from "../src/modules/dashboard/pages/DashboardPage.jsx";
+import { useAuthStore } from "../src/modules/auth/store/authStore.js";
+import { ProtectedRoute } from "../src/modules/auth/components/ProtectedRoute.jsx";
+
+export default function HomePage() {
+  const refreshMe = useAuthStore((s) => s.refreshMe);
+
+  useEffect(() => {
+    refreshMe().catch(() => {});
+  }, [refreshMe]);
+
+  return (
+    <ProtectedRoute>
+      <DashboardPage />
+    </ProtectedRoute>
+  );
+}
+

package/templates/mern/frontend-next/app/register/page.js

@@ -0,0 +1,8 @@
+"use client";
+
+import { RegisterPage } from "../../src/modules/auth/pages/RegisterPage.jsx";
+
+export default function Page() {
+  return <RegisterPage />;
+}
+

package/templates/mern/frontend-next/app/reset-password/page.js

@@ -0,0 +1,8 @@
+"use client";
+
+import { ResetPasswordPage } from "../../src/modules/auth/pages/ResetPasswordPage.jsx";
+
+export default function Page() {
+  return <ResetPasswordPage />;
+}
+

package/templates/mern/frontend-next/app/verify-email/page.js

@@ -0,0 +1,8 @@
+"use client";
+
+import { VerifyEmailPage } from "../../src/modules/auth/pages/VerifyEmailPage.jsx";
+
+export default function Page() {
+  return <VerifyEmailPage />;
+}
+

package/templates/mern/frontend-next/jsconfig.json

@@ -0,0 +1,6 @@
+{
+  "compilerOptions": {
+    "baseUrl": "."
+  }
+}
+

package/templates/mern/frontend-next/next.config.mjs

@@ -0,0 +1,7 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true
+};
+
+export default nextConfig;
+

package/templates/mern/frontend-next/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "starterkit-frontend",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "next": "^15.2.2",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "zustand": "^5.0.3"
+  }
+}
+

package/templates/mern/frontend-next/src/modules/auth/components/ProtectedRoute.jsx

@@ -0,0 +1,19 @@
+"use client";
+
+import { useEffect } from "react";
+import { useRouter } from "next/navigation";
+
+import { useAuthStore } from "../store/authStore.js";
+
+export const ProtectedRoute = ({ children }) => {
+  const router = useRouter();
+  const token = useAuthStore((s) => s.token);
+
+  useEffect(() => {
+    if (!token) router.replace("/login");
+  }, [token, router]);
+
+  if (!token) return null;
+  return children;
+};
+

package/templates/mern/frontend-next/src/modules/auth/pages/ForgotPasswordPage.jsx

@@ -0,0 +1,66 @@
+"use client";
+
+import { useState } from "react";
+import Link from "next/link";
+
+import { Button } from "../../../shared/components/Button.jsx";
+import { Input } from "../../../shared/components/Input.jsx";
+import { Toast } from "../../../shared/components/Toast.jsx";
+import { formatError } from "../../../shared/utils/formatError.util.js";
+import { forgotPasswordApi } from "../services/auth.service.js";
+
+export const ForgotPasswordPage = () => {
+  const [email, setEmail] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [toast, setToast] = useState(null);
+
+  const onSubmit = async (e) => {
+    e.preventDefault();
+    setLoading(true);
+    try {
+      await forgotPasswordApi({ email });
+      setToast({ type: "success", message: "If the email exists, a reset link was sent." });
+    } catch (err) {
+      setToast({ type: "error", message: formatError(err) });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div style={{ minHeight: "100vh", display: "grid", placeItems: "center", padding: 24 }}>
+      <form
+        onSubmit={onSubmit}
+        style={{
+          width: "100%",
+          maxWidth: 420,
+          background: "white",
+          border: "1px solid #E5E7EB",
+          borderRadius: 16,
+          padding: 20
+        }}
+      >
+        <h1 style={{ margin: 0, fontSize: 22 }}>Forgot password</h1>
+        <p style={{ marginTop: 6, marginBottom: 16, color: "#6B7280", fontSize: 13 }}>
+          We will email you a reset link.
+        </p>
+
+        <div style={{ display: "grid", gap: 12 }}>
+          <Input label="Email" value={email} onChange={(e) => setEmail(e.target.value)} />
+          <Button disabled={loading} type="submit">
+            {loading ? "Please wait..." : "Send reset link"}
+          </Button>
+        </div>
+
+        <div style={{ marginTop: 14 }}>
+          <Link href="/login" style={{ color: "#4F46E5", fontWeight: 700, fontSize: 13 }}>
+            Back to login
+          </Link>
+        </div>
+      </form>
+
+      <Toast message={toast?.message} type={toast?.type} onClose={() => setToast(null)} />
+    </div>
+  );
+};
+

package/templates/mern/frontend-next/src/modules/auth/pages/LoginPage.jsx

@@ -0,0 +1,88 @@
+"use client";
+
+import { useState } from "react";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+
+import { Button } from "../../../shared/components/Button.jsx";
+import { Input } from "../../../shared/components/Input.jsx";
+import { Toast } from "../../../shared/components/Toast.jsx";
+import { formatError } from "../../../shared/utils/formatError.util.js";
+import { loginApi } from "../services/auth.service.js";
+import { useAuthStore } from "../store/authStore.js";
+
+export const LoginPage = () => {
+  const router = useRouter();
+  const setAuth = useAuthStore((s) => s.setAuth);
+
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [toast, setToast] = useState(null);
+
+  const onSubmit = async (e) => {
+    e.preventDefault();
+    setLoading(true);
+    try {
+      const res = await loginApi({ email, password });
+      const token = res?.data?.token;
+      const user = res?.data?.user;
+      setAuth({ token, user });
+      setToast({ type: "success", message: "Logged in" });
+      router.replace("/");
+    } catch (err) {
+      setToast({ type: "error", message: formatError(err) });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div style={{ minHeight: "100vh", display: "grid", placeItems: "center", padding: 24 }}>
+      <form
+        onSubmit={onSubmit}
+        style={{
+          width: "100%",
+          maxWidth: 420,
+          background: "white",
+          border: "1px solid #E5E7EB",
+          borderRadius: 16,
+          padding: 20
+        }}
+      >
+        <h1 style={{ margin: 0, fontSize: 22 }}>Login</h1>
+        <p style={{ marginTop: 6, marginBottom: 16, color: "#6B7280", fontSize: 13 }}>
+          Sign in to your account.
+        </p>
+
+        <div style={{ display: "grid", gap: 12 }}>
+          <Input label="Email" value={email} onChange={(e) => setEmail(e.target.value)} />
+          <Input
+            label="Password"
+            type="password"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+          />
+          <Button disabled={loading} type="submit">
+            {loading ? "Please wait..." : "Login"}
+          </Button>
+        </div>
+
+        <div style={{ display: "flex", justifyContent: "space-between", marginTop: 14 }}>
+          <Link href="/register" style={{ color: "#4F46E5", fontWeight: 700, fontSize: 13 }}>
+            Create account
+          </Link>
+          <Link
+            href="/forgot-password"
+            style={{ color: "#4F46E5", fontWeight: 700, fontSize: 13 }}
+          >
+            Forgot password?
+          </Link>
+        </div>
+      </form>
+
+      <Toast message={toast?.message} type={toast?.type} onClose={() => setToast(null)} />
+    </div>
+  );
+};
+

package/templates/mern/frontend-next/src/modules/auth/pages/RegisterPage.jsx

@@ -0,0 +1,84 @@
+"use client";
+
+import { useState } from "react";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+
+import { Button } from "../../../shared/components/Button.jsx";
+import { Input } from "../../../shared/components/Input.jsx";
+import { Toast } from "../../../shared/components/Toast.jsx";
+import { formatError } from "../../../shared/utils/formatError.util.js";
+import { registerApi } from "../services/auth.service.js";
+import { useAuthStore } from "../store/authStore.js";
+
+export const RegisterPage = () => {
+  const router = useRouter();
+  const setAuth = useAuthStore((s) => s.setAuth);
+
+  const [name, setName] = useState("");
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [toast, setToast] = useState(null);
+
+  const onSubmit = async (e) => {
+    e.preventDefault();
+    setLoading(true);
+    try {
+      const res = await registerApi({ name, email, password });
+      const token = res?.data?.token;
+      const user = res?.data?.user;
+      setAuth({ token, user });
+      setToast({ type: "success", message: "Registered. Verify your email with OTP." });
+      router.replace("/verify-email");
+    } catch (err) {
+      setToast({ type: "error", message: formatError(err) });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div style={{ minHeight: "100vh", display: "grid", placeItems: "center", padding: 24 }}>
+      <form
+        onSubmit={onSubmit}
+        style={{
+          width: "100%",
+          maxWidth: 420,
+          background: "white",
+          border: "1px solid #E5E7EB",
+          borderRadius: 16,
+          padding: 20
+        }}
+      >
+        <h1 style={{ margin: 0, fontSize: 22 }}>Create account</h1>
+        <p style={{ marginTop: 6, marginBottom: 16, color: "#6B7280", fontSize: 13 }}>
+          Get started with StarterKit.
+        </p>
+
+        <div style={{ display: "grid", gap: 12 }}>
+          <Input label="Name" value={name} onChange={(e) => setName(e.target.value)} />
+          <Input label="Email" value={email} onChange={(e) => setEmail(e.target.value)} />
+          <Input
+            label="Password"
+            type="password"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+          />
+          <Button disabled={loading} type="submit">
+            {loading ? "Please wait..." : "Register"}
+          </Button>
+        </div>
+
+        <div style={{ marginTop: 14 }}>
+          <Link href="/login" style={{ color: "#4F46E5", fontWeight: 700, fontSize: 13 }}>
+            Already have an account? Login
+          </Link>
+        </div>
+      </form>
+
+      <Toast message={toast?.message} type={toast?.type} onClose={() => setToast(null)} />
+    </div>
+  );
+};
+