@surajprasad/create-starterkit 0.1.0

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

@@ -0,0 +1,76 @@
+"use client";
+
+import { useMemo, useState } from "react";
+import Link from "next/link";
+import { useSearchParams } 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 { resetPasswordApi } from "../services/auth.service.js";
+
+export const ResetPasswordPage = () => {
+  const params = useSearchParams();
+  const token = useMemo(() => params.get("token") || "", [params]);
+
+  const [password, setPassword] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [toast, setToast] = useState(null);
+
+  const onSubmit = async (e) => {
+    e.preventDefault();
+    setLoading(true);
+    try {
+      await resetPasswordApi({ token, password });
+      setToast({ type: "success", message: "Password reset successfully. You can login now." });
+    } 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 }}>Reset password</h1>
+        <p style={{ marginTop: 6, marginBottom: 16, color: "#6B7280", fontSize: 13 }}>
+          Set a new password for your account.
+        </p>
+
+        <div style={{ display: "grid", gap: 12 }}>
+          <Input label="Reset token" value={token} readOnly style={{ background: "#F9FAFB" }} />
+          <Input
+            label="New password"
+            type="password"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+          />
+          <Button disabled={loading || !token} type="submit">
+            {loading ? "Please wait..." : "Reset password"}
+          </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/VerifyEmailPage.jsx

@@ -0,0 +1,71 @@
+"use client";
+
+import { useState } from "react";
+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 { verifyEmailApi } from "../services/auth.service.js";
+import { useAuthStore } from "../store/authStore.js";
+
+export const VerifyEmailPage = () => {
+  const router = useRouter();
+  const refreshMe = useAuthStore((s) => s.refreshMe);
+
+  const [otp, setOtp] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [toast, setToast] = useState(null);
+
+  const onSubmit = async (e) => {
+    e.preventDefault();
+    setLoading(true);
+    try {
+      await verifyEmailApi({ otp });
+      await refreshMe();
+      setToast({ type: "success", message: "Email verified" });
+      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 }}>Verify Email</h1>
+        <p style={{ marginTop: 6, marginBottom: 16, color: "#6B7280", fontSize: 13 }}>
+          Enter the 6-digit OTP sent to your email.
+        </p>
+
+        <div style={{ display: "grid", gap: 12 }}>
+          <Input
+            label="OTP"
+            value={otp}
+            onChange={(e) => setOtp(e.target.value)}
+            placeholder="123456"
+          />
+          <Button disabled={loading} type="submit">
+            {loading ? "Please wait..." : "Verify"}
+          </Button>
+        </div>
+      </form>
+
+      <Toast message={toast?.message} type={toast?.type} onClose={() => setToast(null)} />
+    </div>
+  );
+};
+

package/templates/mern/frontend-next/src/modules/auth/services/auth.service.js

@@ -0,0 +1,29 @@
+import { apiFetch } from "../../../shared/services/api.js";
+
+export const registerApi = async ({ name, email, password }) => {
+  return apiFetch("/api/auth/register", { method: "POST", body: { name, email, password } });
+};
+
+export const loginApi = async ({ email, password }) => {
+  return apiFetch("/api/auth/login", { method: "POST", body: { email, password } });
+};
+
+export const meApi = async () => {
+  return apiFetch("/api/auth/me");
+};
+
+export const verifyEmailApi = async ({ otp }) => {
+  return apiFetch("/api/auth/verify-email", { method: "POST", body: { otp } });
+};
+
+export const forgotPasswordApi = async ({ email }) => {
+  return apiFetch("/api/auth/forgot-password", { method: "POST", body: { email } });
+};
+
+export const resetPasswordApi = async ({ token, password }) => {
+  return apiFetch(`/api/auth/reset-password?token=${encodeURIComponent(token)}`, {
+    method: "POST",
+    body: { password }
+  });
+};
+

package/templates/mern/frontend-next/src/modules/auth/store/authStore.js

@@ -0,0 +1,37 @@
+import { create } from "zustand";
+
+import { storage } from "../../../shared/utils/storage.util.js";
+import { meApi } from "../services/auth.service.js";
+
+export const useAuthStore = create((set, get) => ({
+  user: storage.get("user"),
+  token: storage.get("token"),
+  loading: false,
+
+  setAuth({ user, token }) {
+    storage.set("user", user);
+    storage.set("token", token);
+    set({ user, token });
+  },
+
+  clearAuth() {
+    storage.remove("user");
+    storage.remove("token");
+    set({ user: null, token: null });
+  },
+
+  async refreshMe() {
+    const token = get().token;
+    if (!token) return;
+    set({ loading: true });
+    try {
+      const res = await meApi();
+      const user = res?.data?.user || null;
+      storage.set("user", user);
+      set({ user });
+    } finally {
+      set({ loading: false });
+    }
+  }
+}));
+

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

@@ -0,0 +1,46 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+
+import { Button } from "../../../shared/components/Button.jsx";
+import { Toast } from "../../../shared/components/Toast.jsx";
+import { useAuthStore } from "../../auth/store/authStore.js";
+
+export const DashboardPage = () => {
+  const router = useRouter();
+  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" });
+    router.replace("/login");
+  };
+
+  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-next/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-next/src/shared/components/Input.jsx

@@ -0,0 +1,24 @@
+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,
+          ...(props.style || {})
+        }}
+      />
+    </label>
+  );
+};
+

package/templates/mern/frontend-next/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-next/src/shared/services/api.js

@@ -0,0 +1,25 @@
+import { storage } from "../utils/storage.util.js";
+
+const baseURL = process.env.NEXT_PUBLIC_API_URL || "http://localhost:5000";
+
+export const apiFetch = async (path, { method = "GET", body, headers } = {}) => {
+  const token = storage.get("token");
+  const res = await fetch(`${baseURL}${path}`, {
+    method,
+    headers: {
+      "Content-Type": "application/json",
+      ...(token ? { Authorization: `Bearer ${token}` } : {}),
+      ...(headers || {})
+    },
+    body: body ? JSON.stringify(body) : undefined
+  });
+
+  const data = await res.json().catch(() => ({}));
+  if (!res.ok) {
+    const err = new Error(data?.message || "Request failed");
+    err.response = { data };
+    throw err;
+  }
+  return data;
+};
+

package/templates/mern/frontend-next/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-next/src/shared/utils/storage.util.js

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

package/templates/mern/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "starterkit-root",
+  "version": "0.1.0",
+  "private": true
+}
+