create-fe-boilerplate 0.1.0

package/templates/react/ts/tailwind/axios/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "react-ts-tailwind-axios",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "axios": "^1.13.2",
+    "crypto-js": "^4.2.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "react-router-dom": "^7.12.0",
+    "react-toastify": "^11.0.5"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.1",
+    "@types/crypto-js": "^4.2.2",
+    "@types/node": "^24.10.1",
+    "@types/react": "^19.2.5",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.1",
+    "autoprefixer": "^10.4.23",
+    "eslint": "^9.39.1",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.24",
+    "globals": "^16.5.0",
+    "postcss": "^8.5.6",
+    "tailwindcss": "^3.4.17",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.46.4",
+    "vite": "^7.2.4"
+  }
+}

package/templates/react/ts/tailwind/axios/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

package/templates/react/ts/tailwind/axios/public/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/templates/react/ts/tailwind/axios/react-ts-tailwind-axios/.env.example

@@ -0,0 +1 @@
+VITE_API_HOST=https://api.example.com

package/templates/react/ts/tailwind/axios/src/App.tsx

@@ -0,0 +1,14 @@
+import { ToastContainer } from "react-toastify";
+import "react-toastify/dist/ReactToastify.css";
+import AppRouter from "./router/AppRoutes";
+
+const App = () => {
+  return (
+    <>
+      <AppRouter />
+      <ToastContainer aria-label="Notification Container" />
+    </>
+  );
+};
+
+export default App;

package/templates/react/ts/tailwind/axios/src/api/axios.ts

@@ -0,0 +1,236 @@
+import axios, {
+  AxiosError,
+  type AxiosInstance,
+  type AxiosRequestConfig,
+  type AxiosResponse,
+} from "axios";
+import { decryptData, encryptData } from "../utils/utils";
+import { toast } from "react-toastify";
+import { toasts } from "../component/common/ui/Toast/Toast";
+import ENVIRONMENT, {
+  ENCRYPTION_EXCLUDED,
+  ROUTES,
+} from "../contants/constants";
+
+/* ---------------------------------- */
+/* ENV */
+/* ---------------------------------- */
+
+const BASE_URL: string = (import.meta as any)?.env?.VITE_API_HOST || "";
+
+/* ---------------------------------- */
+/* AXIOS INSTANCE */
+/* ---------------------------------- */
+
+export const axiosApi: AxiosInstance = axios.create({
+  baseURL: BASE_URL,
+});
+
+/* ---------------------------------- */
+/* REQUEST INTERCEPTOR */
+/* ---------------------------------- */
+
+axiosApi.interceptors.request.use(
+  (
+    config: import("axios").InternalAxiosRequestConfig
+  ): import("axios").InternalAxiosRequestConfig => {
+    const token =
+      localStorage.getItem("token") || localStorage.getItem("forgotPassToken");
+
+    if (token && config.headers) {
+      config.headers.Authorization = `Bearer ${token}`;
+    }
+
+    return config;
+  },
+  (error: AxiosError) => Promise.reject(error)
+);
+
+/* ---------------------------------- */
+/* RESPONSE INTERCEPTOR */
+/* ---------------------------------- */
+
+axiosApi.interceptors.response.use(
+  (response: AxiosResponse): AxiosResponse => {
+    if (Number(ENVIRONMENT.ENABLE_ENCRYPTION)) {
+      const decryptedData = decryptData(response?.data?.resData);
+
+      response.data = {
+        ...response.data,
+        data: decryptedData,
+      };
+    }
+
+    return response;
+  },
+  (error: AxiosError<any>) => {
+    if (Number(ENVIRONMENT.ENABLE_ENCRYPTION)) {
+      const decryptedData = decryptData(error?.response?.data?.resData);
+      handleError(decryptedData);
+      throw decryptedData;
+    }
+
+    handleError(error);
+    throw error;
+  }
+);
+
+/* ---------------------------------- */
+/* HELPERS */
+/* ---------------------------------- */
+
+const formatUrl = (
+  url: string,
+  params?: Record<string, string | number>
+): string => {
+  if (!params || Object.keys(params).length === 0) return url;
+  return `${url}?${new URLSearchParams(
+    params as Record<string, string>
+  ).toString()}`;
+};
+
+const clearWaitingQueue = (): void => {
+  toast.clearWaitingQueue();
+};
+
+const handleError = (error: any): void => {
+  const errorStatus: number | undefined =
+    error?.response?.status || error?.status;
+
+  const errorMessage: string | undefined =
+    error?.response?.data?.message || error?.data?.message || error?.message;
+
+  if (errorStatus === 401 || errorStatus === 403) {
+    toasts.error("Please re-login, last login session expired.");
+
+    localStorage.clear();
+    window.dispatchEvent(new Event("storage"));
+    clearWaitingQueue();
+
+    if (window.location.pathname !== ROUTES.ROOT) {
+      window.location.replace(ROUTES.ROOT);
+    }
+  } else {
+    errorMessage && toasts.error(errorMessage);
+    clearWaitingQueue();
+  }
+};
+
+const handleSuccess = (res: any): void => {
+  if (res?.status === 200 || res?.status === 201) {
+    res?.message && toasts.success(res.message);
+    res?.data?.message && toasts.success(res.data.message);
+  }
+
+  if (res?.status === 400 || res?.status === 403) {
+    res?.message && toasts.warning(res.message);
+  }
+};
+
+const getPayloadData = (data: any, url = ""): any => {
+  if (!data) return data;
+
+  if (
+    Number(ENVIRONMENT.ENABLE_ENCRYPTION) &&
+    !ENCRYPTION_EXCLUDED.includes(url)
+  ) {
+    return { reqData: encryptData(data) };
+  }
+
+  return data;
+};
+
+/* ---------------------------------- */
+/* HTTP METHODS */
+/* ---------------------------------- */
+
+export const apiCallGet = async <T = any>(
+  url: string,
+  params: Record<string, string | number> = {},
+  toastOn?: boolean
+): Promise<T> => {
+  try {
+    const res = await axiosApi.get(formatUrl(url, params));
+    toastOn && handleSuccess(res.data);
+    return res.data;
+  } catch (error: any) {
+    return error?.response?.data;
+  }
+};
+
+export const apiCallPost = async <T = any>(
+  url: string,
+  data: any,
+  params: Record<string, string | number> = {},
+  toastOn?: boolean,
+  header?: AxiosRequestConfig
+): Promise<T> => {
+  try {
+    const res = await axiosApi.post(
+      formatUrl(url, params),
+      getPayloadData(data, url),
+      header || {}
+    );
+
+    toastOn && handleSuccess(res.data);
+    return res.data;
+  } catch (error: any) {
+    return error?.response?.data;
+  }
+};
+
+export const apiCallPatch = async <T = any>(
+  url: string,
+  data: any,
+  params: Record<string, string | number> = {},
+  toastOn?: boolean
+): Promise<T> => {
+  try {
+    const res = await axiosApi.patch(
+      formatUrl(url, params),
+      getPayloadData(data, url)
+    );
+
+    toastOn && handleSuccess(res.data);
+    return res.data;
+  } catch (error: any) {
+    return error?.response?.data;
+  }
+};
+
+export const apiCallPut = async <T = any>(
+  url: string,
+  data: any,
+  params: Record<string, string | number> = {},
+  toastOn?: boolean
+): Promise<T> => {
+  try {
+    const res = await axiosApi.put(
+      formatUrl(url, params),
+      getPayloadData(data, url)
+    );
+
+    toastOn && handleSuccess(res.data);
+    return res.data;
+  } catch (error: any) {
+    return error?.response?.data;
+  }
+};
+
+export const apiCallDelete = async <T = any>(
+  url: string,
+  data: any,
+  params: Record<string, string | number> = {},
+  toastOn?: boolean
+): Promise<T> => {
+  try {
+    const res = await axiosApi.delete(formatUrl(url, params), {
+      data: getPayloadData(data, url),
+    });
+
+    toastOn && handleSuccess(res.data);
+    return res.data;
+  } catch (error) {
+    throw error;
+  }
+};

package/templates/react/ts/tailwind/axios/src/component/auth/VerifyOtpModal.tsx

@@ -0,0 +1,70 @@
+import { useState } from "react";
+import { apiCallPost } from "../../api/axios";
+import { toasts } from "../../component/common/ui/Toast/Toast";
+
+interface VerifyOtpModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onVerifySuccess: () => void;
+}
+
+const VerifyOtpModal = ({
+  isOpen,
+  onClose,
+  onVerifySuccess,
+}: VerifyOtpModalProps) => {
+  const [otp, setOtp] = useState("");
+  const [loading, setLoading] = useState(false);
+
+  if (!isOpen) return null;
+
+  const handleVerify = async () => {
+    if (otp.length !== 6) {
+      toasts.error("Please enter a valid 6-digit OTP");
+      return;
+    }
+
+    setLoading(true);
+
+    // const res = await apiCallPost("/auth/verify-otp", { otp }, {}, true);
+
+    setLoading(false);
+
+    // if (res?.success) {
+    onVerifySuccess();
+    onClose();
+    // }
+  };
+
+  return (
+    <div className="fixed inset-0 bg-black bg-opacity-40 flex items-center justify-center z-50">
+      <div className="bg-white w-96 p-6 rounded shadow-lg">
+        <h2 className="text-xl font-bold mb-4">Verify OTP</h2>
+
+        <input
+          maxLength={6}
+          value={otp}
+          onChange={(e) => setOtp(e.target.value.replace(/\D/g, ""))}
+          className="border w-full p-2 mb-4 text-center tracking-widest text-lg rounded"
+          placeholder="Enter OTP"
+        />
+
+        <div className="flex justify-between">
+          <button onClick={onClose} className="px-4 py-2 border rounded">
+            Cancel
+          </button>
+
+          <button
+            onClick={handleVerify}
+            disabled={loading}
+            className="px-4 py-2 bg-blue-600 text-white rounded"
+          >
+            {loading ? "Verifying..." : "Verify"}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default VerifyOtpModal;

package/templates/react/ts/tailwind/axios/src/component/common/ui/Toast/Toast.ts

@@ -0,0 +1,58 @@
+import { toast, type ToastOptions } from "react-toastify";
+import "react-toastify/dist/ReactToastify.css";
+
+/* ---------------------------------- */
+/* TOAST OPTIONS */
+/* ---------------------------------- */
+
+const toastOptions: ToastOptions = {
+  position: "top-right",
+  autoClose: 1000,
+  closeOnClick: true,
+  pauseOnHover: true,
+  draggable: true,
+  progress: 0,
+  hideProgressBar: false,
+  theme: "light",
+};
+
+/* ---------------------------------- */
+/* TOASTER CLASS */
+/* ---------------------------------- */
+
+class Toaster {
+  warning(message: string): void {
+    toast.warn(message, {
+      ...toastOptions,
+    });
+  }
+  success(message: string): void {
+    toast.success(message, {
+      ...toastOptions,
+    });
+  }
+
+  error(message: string): void {
+    toast.error(message, {
+      ...toastOptions,
+    });
+  }
+
+  warn(message: string): void {
+    toast.warn(message, {
+      ...toastOptions,
+    });
+  }
+
+  info(message: string): void {
+    toast.info(message, {
+      ...toastOptions,
+    });
+  }
+}
+
+/* ---------------------------------- */
+/* EXPORT SINGLETON */
+/* ---------------------------------- */
+
+export const toasts = new Toaster();

package/templates/react/ts/tailwind/axios/src/contants/constants.ts

@@ -0,0 +1,45 @@
+export const API_URLS = {
+  LOGIN: "api/v1/auth/login",
+  SIGNUP: "api/v1/auth/signup",
+  LOGOUT: "api/v1/auth/logout",
+  REFRESH_TOKEN: "api/v1/auth/refresh-token",
+  IMAGE_UPLOAD: "api/v1/auth/image-upload",
+};
+
+export const ROUTES = {
+  ROOT: "/",
+  LOGIN: "/login",
+  SIGNUP: "/signup",
+  DASHBOARD: "/dashboard",
+  PROFILE: "/profile",
+  SETTINGS: "/settings",
+};
+
+const ENVIRONMENT = {
+  ENABLE_ENCRYPTION: import.meta.env.VITE_ENABLE_ENCRYPTION,
+  API_HOST: import.meta.env.VITE_API_HOST,
+  S3_BUCKET_URL: import.meta.env.VITE_S3_BUCKET,
+  STRING: import.meta.env.VITE_STRING,
+
+  // CHAIN
+  RPC_URL: import.meta.env.VITE_RPC_URL,
+  CHAIN_ID: import.meta.env.VITE_CHAIN_ID,
+  CHAIN_SYMBOL: import.meta.env.VITE_CHAIN_SYMBOL,
+  CHAIN_NAME: import.meta.env.VITE_CHAIN_NAME,
+
+  // CONTRACT
+  EXAM_CONTRACT_ADD: import.meta.env.VITE_EXAM_CONTRACT_ADD,
+  STUDENT_CONTRACT_ADD: import.meta.env.VITE_STUDENT_CONTRACT_ADD,
+  RSA_PRIVATE_KEY: import.meta.env.VITE_RSA_PRIVATE_KEY,
+
+  // AWS S3 Configuration
+  AWS_S3_BUCKET_NAME: import.meta.env.VITE_AWS_S3_BUCKET_NAME,
+  AWS_ACCESS_KEY_ID: import.meta.env.VITE_AWS_ACCESS_KEY_ID,
+  AWS_SECRET_ACCESS_KEY: import.meta.env.VITE_AWS_SECRET_ACCESS_KEY,
+  AWS_REGION: import.meta.env.VITE_AWS_REGION,
+  S3_BUCKET_CDN_LINK: import.meta.env.VITE_S3_BUCKET_CDN_LINK,
+  IMAGE_KIT_URL: import.meta.env.VITE_IMAGE_KIT_URL,
+};
+export const ENCRYPTION_EXCLUDED = [API_URLS?.IMAGE_UPLOAD];
+
+export default ENVIRONMENT;

package/templates/react/ts/tailwind/axios/src/index.css

@@ -0,0 +1,4 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+

package/templates/react/ts/tailwind/axios/src/main.tsx

@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.tsx'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)

package/templates/react/ts/tailwind/axios/src/pages/Dashboard.tsx

@@ -0,0 +1,10 @@
+const Dashboard = () => {
+  return (
+    <div className="p-6">
+      <h1 className="text-2xl font-bold">Dashboard</h1>
+      <p className="mt-2 text-gray-600">This is a static sample dashboard.</p>
+    </div>
+  );
+};
+
+export default Dashboard;

package/templates/react/ts/tailwind/axios/src/pages/Login.tsx

@@ -0,0 +1,70 @@
+import { useState } from "react";
+import { Link, useNavigate } from "react-router-dom";
+import VerifyOtpModal from "../component/auth/VerifyOtpModal";
+
+const Login = () => {
+  const navigate = useNavigate();
+  const [showOtp, setShowOtp] = useState(false);
+
+  const [form, setForm] = useState({
+    email: "",
+    password: "",
+  });
+
+  const handleLogin = async () => {
+    // const res = await apiCallPost("/auth/login", form, {}, true);
+
+    // if (res?.success) {
+    setShowOtp(true);
+    // }
+  };
+
+  const handleOtpSuccess = () => {
+    localStorage.setItem("token", "dummy-token");
+    navigate("/dashboard");
+  };
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-gray-100">
+      <div className="w-96 p-6 bg-white rounded shadow">
+        <h2 className="text-xl font-bold mb-4">Login</h2>
+
+        <input
+          className="border w-full p-2 mb-2 rounded"
+          placeholder="Email"
+          value={form.email}
+          onChange={(e) => setForm({ ...form, email: e.target.value })}
+        />
+
+        <input
+          type="password"
+          className="border w-full p-2 mb-4 rounded"
+          placeholder="Password"
+          value={form.password}
+          onChange={(e) => setForm({ ...form, password: e.target.value })}
+        />
+
+        <button
+          onClick={handleLogin}
+          className="w-full bg-blue-600 text-white py-2 rounded"
+        >
+          Login
+        </button>
+        <span className="text-sm text-gray-600 mt-2 block text-center">
+          Dont have an account?{" "}
+          <Link to="/signup" className="text-blue-600 cursor-pointer">
+            Signup
+          </Link>
+        </span>
+      </div>
+
+      <VerifyOtpModal
+        isOpen={showOtp}
+        onClose={() => setShowOtp(false)}
+        onVerifySuccess={handleOtpSuccess}
+      />
+    </div>
+  );
+};
+
+export default Login;

package/templates/react/ts/tailwind/axios/src/pages/Signup.tsx

@@ -0,0 +1,75 @@
+import { useState } from "react";
+import { Link, useNavigate } from "react-router-dom";
+import VerifyOtpModal from "../component/auth/VerifyOtpModal";
+
+const Signup = () => {
+  const navigate = useNavigate();
+  const [showOtp, setShowOtp] = useState(false);
+
+  const [form, setForm] = useState({
+    email: "",
+    password: "",
+  });
+
+  const handleSignup = async () => {
+    // const res = await apiCallPost(
+    //   "/auth/signup",
+    //   form,
+    //   {},
+    //   true
+    // );
+
+    // if (res?.success) {
+    // setRefId(res?.data?.refId || "");
+    setShowOtp(true);
+    // }
+  };
+
+  const handleOtpSuccess = () => {
+    navigate("/login");
+  };
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-gray-100">
+      <div className="w-96 p-6 bg-white rounded shadow">
+        <h2 className="text-xl font-bold mb-4">Signup</h2>
+
+        <input
+          className="border w-full p-2 mb-2 rounded"
+          placeholder="Email"
+          value={form.email}
+          onChange={(e) => setForm({ ...form, email: e.target.value })}
+        />
+
+        <input
+          type="password"
+          className="border w-full p-2 mb-4 rounded"
+          placeholder="Password"
+          value={form.password}
+          onChange={(e) => setForm({ ...form, password: e.target.value })}
+        />
+
+        <button
+          onClick={handleSignup}
+          className="w-full bg-green-600 text-white py-2 rounded"
+        >
+          Create Account
+        </button>
+        <span className="text-sm text-gray-600 mt-2 block text-center">
+          Already have an account?{" "}
+          <Link to="/login" className="text-blue-600 cursor-pointer">
+            Login
+          </Link>
+        </span>
+      </div>
+
+      <VerifyOtpModal
+        isOpen={showOtp}
+        onClose={() => setShowOtp(false)}
+        onVerifySuccess={handleOtpSuccess}
+      />
+    </div>
+  );
+};
+
+export default Signup;

package/templates/react/ts/tailwind/axios/src/router/AppRoutes.tsx

@@ -0,0 +1,19 @@
+import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom";
+import Login from "../pages/Login";
+import Signup from "../pages/Signup";
+import Dashboard from "../pages/Dashboard";
+
+const AppRouter = () => {
+  return (
+    <BrowserRouter>
+      <Routes>
+        <Route path="/" element={<Navigate to="/login" />} />
+        <Route path="/login" element={<Login />} />
+        <Route path="/signup" element={<Signup />} />
+        <Route path="/dashboard" element={<Dashboard />} />
+      </Routes>
+    </BrowserRouter>
+  );
+};
+
+export default AppRouter;