npm - @surajprasad/create-starterkit - Versions diffs - 0.1.0 - Mend

@surajprasad/create-starterkit 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (84) hide show

package/templates/mern/frontend/Dockerfile ADDED Viewed

@@ -0,0 +1,13 @@
+FROM node:20-alpine
+WORKDIR /app
+COPY package.json package-lock.json* ./
+RUN npm install
+COPY . .
+EXPOSE 5173
+CMD ["npm", "run", "dev", "--", "--host", "0.0.0.0"]

package/templates/mern/frontend/index.html ADDED Viewed

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>StarterKit</title>
+  </head>
+  <body style="margin:0;background:#F9FAFB;">
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>

package/templates/mern/frontend/package.json ADDED Viewed

@@ -0,0 +1,23 @@
+{
+  "name": "starterkit-frontend",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "axios": "^1.7.9",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^6.28.2",
+    "zustand": "^5.0.3"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^4.3.4",
+    "vite": "^5.4.14"
+  }
+}

package/templates/mern/frontend/src/App.jsx ADDED Viewed

@@ -0,0 +1,102 @@
+import { useEffect, useState } from "react";
+import { Link, Route, Routes } from "react-router-dom";
+import { Toast } from "./shared/components/Toast.jsx";
+import { DashboardPage } from "./modules/dashboard/pages/DashboardPage.jsx";
+import { ProtectedRoute } from "./modules/auth/components/ProtectedRoute.jsx";
+import { LoginPage } from "./modules/auth/pages/LoginPage.jsx";
+import { RegisterPage } from "./modules/auth/pages/RegisterPage.jsx";
+import { VerifyEmailPage } from "./modules/auth/pages/VerifyEmailPage.jsx";
+import { ForgotPasswordPage } from "./modules/auth/pages/ForgotPasswordPage.jsx";
+import { ResetPasswordPage } from "./modules/auth/pages/ResetPasswordPage.jsx";
+import { useAuthStore } from "./modules/auth/store/authStore.js";
+export const App = () => {
+  const refreshMe = useAuthStore((s) => s.refreshMe);
+  const token = useAuthStore((s) => s.token);
+  const user = useAuthStore((s) => s.user);
+  const [toast, setToast] = useState(null);
+  useEffect(() => {
+    refreshMe().catch(() => {});
+  }, [refreshMe]);
+  useEffect(() => {
+    if (token && user && user.isEmailVerified === false) {
+      setToast({ type: "info", message: "Please verify your email to complete setup." });
+    }
+  }, [token, user]);
+  return (
+    <div style={{ minHeight: "100vh" }}>
+      <header
+        style={{
+          background: "white",
+          borderBottom: "1px solid #E5E7EB",
+          padding: "12px 16px"
+        }}
+      >
+        <div style={{ maxWidth: 860, margin: "0 auto", display: "flex", gap: 12 }}>
+          <Link
+            to="/"
+            style={{
+              fontWeight: 900,
+              color: "#111827",
+              textDecoration: "none"
+            }}
+          >
+            StarterKit
+          </Link>
+          <div style={{ marginLeft: "auto", display: "flex", gap: 12 }}>
+            {!token ? (
+              <>
+                <Link to="/login" style={{ color: "#4F46E5", fontWeight: 800 }}>
+                  Login
+                </Link>
+                <Link to="/register" style={{ color: "#4F46E5", fontWeight: 800 }}>
+                  Register
+                </Link>
+              </>
+            ) : (
+              <span style={{ color: "#6B7280", fontWeight: 700, fontSize: 13 }}>
+                {user?.email}
+              </span>
+            )}
+          </div>
+        </div>
+      </header>
+      <Routes>
+        <Route
+          path="/"
+          element={
+            <ProtectedRoute>
+              <DashboardPage />
+            </ProtectedRoute>
+          }
+        />
+        <Route path="/login" element={<LoginPage />} />
+        <Route path="/register" element={<RegisterPage />} />
+        <Route path="/verify-email" element={<VerifyEmailPage />} />
+        <Route path="/forgot-password" element={<ForgotPasswordPage />} />
+        <Route path="/reset-password" element={<ResetPasswordPage />} />
+        <Route
+          path="*"
+          element={
+            <div style={{ padding: 24 }}>
+              <div style={{ maxWidth: 860, margin: "0 auto" }}>
+                <h2 style={{ margin: 0 }}>Not Found</h2>
+                <p style={{ color: "#6B7280" }}>The page does not exist.</p>
+              </div>
+            </div>
+          }
+        />
+      </Routes>
+      <Toast message={toast?.message} type={toast?.type} onClose={() => setToast(null)} />
+    </div>
+  );
+};

package/templates/mern/frontend/src/main.jsx ADDED Viewed

@@ -0,0 +1,14 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import { BrowserRouter } from "react-router-dom";
+import { App } from "./App.jsx";
+ReactDOM.createRoot(document.getElementById("root")).render(
+  <React.StrictMode>
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
+  </React.StrictMode>
+);

package/templates/mern/frontend/src/modules/auth/components/ProtectedRoute.jsx ADDED Viewed

@@ -0,0 +1,10 @@
+import { Navigate } from "react-router-dom";
+import { useAuthStore } from "../store/authStore.js";
+export const ProtectedRoute = ({ children }) => {
+  const token = useAuthStore((s) => s.token);
+  if (!token) return <Navigate to="/login" replace />;
+  return children;
+};

package/templates/mern/frontend/src/modules/auth/index.js ADDED Viewed

@@ -0,0 +1,6 @@
+export * from "./components/ProtectedRoute.jsx";
+export * from "./pages/LoginPage.jsx";
+export * from "./pages/RegisterPage.jsx";
+export * from "./pages/VerifyEmailPage.jsx";
+export * from "./pages/ForgotPasswordPage.jsx";
+export * from "./pages/ResetPasswordPage.jsx";

package/templates/mern/frontend/src/modules/auth/pages/ForgotPasswordPage.jsx ADDED Viewed

@@ -0,0 +1,64 @@
+import { useState } from "react";
+import { Link } from "react-router-dom";
+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 to="/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/src/modules/auth/pages/LoginPage.jsx ADDED Viewed

@@ -0,0 +1,82 @@
+import { useState } from "react";
+import { Link, useNavigate } from "react-router-dom";
+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 navigate = useNavigate();
+  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" });
+      navigate("/", { replace: true });
+    } 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 to="/register" style={{ color: "#4F46E5", fontWeight: 700, fontSize: 13 }}>
+            Create account
+          </Link>
+          <Link to="/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/src/modules/auth/pages/RegisterPage.jsx ADDED Viewed

@@ -0,0 +1,81 @@
+import { useState } from "react";
+import { Link, useNavigate } from "react-router-dom";
+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 navigate = useNavigate();
+  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." });
+      navigate("/verify-email", { replace: true });
+    } 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 to="/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>
+  );
+};

package/templates/mern/frontend/src/modules/auth/pages/ResetPasswordPage.jsx ADDED Viewed

@@ -0,0 +1,78 @@
+import { useMemo, useState } from "react";
+import { Link, useSearchParams } from "react-router-dom";
+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 to="/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/src/modules/auth/pages/VerifyEmailPage.jsx ADDED Viewed

@@ -0,0 +1,69 @@
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+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 navigate = useNavigate();
+  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" });
+      navigate("/", { replace: true });
+    } 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/src/modules/auth/services/auth.service.js ADDED Viewed

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

package/templates/mern/frontend/src/modules/auth/store/authStore.js ADDED Viewed

@@ -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/src/modules/dashboard/index.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export * from "./pages/DashboardPage.jsx";
2	+