create-fe-boilerplate 0.3.1 → 0.4.0

package/templates/react/js/scss/rtk/package.json

@@ -0,0 +1,35 @@
+{
+  "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": {
+    "@reduxjs/toolkit": "^2.11.2",
+    "axios": "^1.13.2",
+    "crypto-js": "^4.2.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "react-redux": "^9.2.0",
+    "react-router-dom": "^7.12.0",
+    "react-toastify": "^11.0.5",
+    "sass": "^1.97.2"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.1",
+    "@types/crypto-js": "^4.2.2",
+    "@types/node": "^24.10.1",
+    "@vitejs/plugin-react": "^5.1.1",
+    "eslint": "^9.39.1",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.24",
+    "globals": "^16.5.0",
+    "typescript-eslint": "^8.46.4",
+    "vite": "^7.2.4"
+  }
+}

package/templates/react/js/scss/rtk/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/js/scss/rtk/react-ts-tailwind-axios/.env.example

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

package/templates/react/js/scss/rtk/src/App.jsx

@@ -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/js/scss/rtk/src/api/axios.js

@@ -0,0 +1,201 @@
+import axios 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 = import.meta?.env?.VITE_API_HOST || "";
+
+/* ---------------------------------- */
+/* AXIOS INSTANCE */
+/* ---------------------------------- */
+
+export const axiosApi = axios.create({
+  baseURL: BASE_URL,
+});
+
+/* ---------------------------------- */
+/* REQUEST INTERCEPTOR */
+/* ---------------------------------- */
+
+axiosApi.interceptors.request.use(
+  (config) => {
+    const token =
+      localStorage.getItem("token") || localStorage.getItem("forgotPassToken");
+
+    if (token && config.headers) {
+      config.headers.Authorization = `Bearer ${token}`;
+    }
+
+    return config;
+  },
+  (error) => Promise.reject(error)
+);
+
+/* ---------------------------------- */
+/* RESPONSE INTERCEPTOR */
+/* ---------------------------------- */
+
+axiosApi.interceptors.response.use(
+  (response) => {
+    if (Number(ENVIRONMENT.ENABLE_ENCRYPTION)) {
+      const decryptedData = decryptData(response?.data?.resData);
+
+      response.data = {
+        ...response.data,
+        data: decryptedData,
+      };
+    }
+
+    return response;
+  },
+  (error) => {
+    if (Number(ENVIRONMENT.ENABLE_ENCRYPTION)) {
+      const decryptedData = decryptData(error?.response?.data?.resData);
+      handleError(decryptedData);
+      throw decryptedData;
+    }
+
+    handleError(error);
+    throw error;
+  }
+);
+
+/* ---------------------------------- */
+/* HELPERS */
+/* ---------------------------------- */
+
+const formatUrl = (url, params = {}) => {
+  if (!params || Object.keys(params).length === 0) return url;
+
+  return `${url}?${new URLSearchParams(params).toString()}`;
+};
+
+const clearWaitingQueue = () => {
+  toast.clearWaitingQueue();
+};
+
+const handleError = (error) => {
+  const errorStatus = error?.response?.status || error?.status;
+
+  const errorMessage =
+    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 {
+    if (errorMessage) {
+      toasts.error(errorMessage);
+    }
+    clearWaitingQueue();
+  }
+};
+
+const handleSuccess = (res) => {
+  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, url = "") => {
+  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 (url, params = {}, toastOn) => {
+  try {
+    const res = await axiosApi.get(formatUrl(url, params));
+    toastOn && handleSuccess(res.data);
+    return res.data;
+  } catch (error) {
+    return error?.response?.data;
+  }
+};
+
+export const apiCallPost = async (url, data, params = {}, toastOn, header) => {
+  try {
+    const res = await axiosApi.post(
+      formatUrl(url, params),
+      getPayloadData(data, url),
+      header || {}
+    );
+
+    toastOn && handleSuccess(res.data);
+    return res.data;
+  } catch (error) {
+    return error?.response?.data;
+  }
+};
+
+export const apiCallPatch = async (url, data, params = {}, toastOn) => {
+  try {
+    const res = await axiosApi.patch(
+      formatUrl(url, params),
+      getPayloadData(data, url)
+    );
+
+    toastOn && handleSuccess(res.data);
+    return res.data;
+  } catch (error) {
+    return error?.response?.data;
+  }
+};
+
+export const apiCallPut = async (url, data, params = {}, toastOn) => {
+  try {
+    const res = await axiosApi.put(
+      formatUrl(url, params),
+      getPayloadData(data, url)
+    );
+
+    toastOn && handleSuccess(res.data);
+    return res.data;
+  } catch (error) {
+    return error?.response?.data;
+  }
+};
+
+export const apiCallDelete = async (url, data, params = {}, toastOn) => {
+  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/js/scss/rtk/src/component/auth/VerifyOtpModal.jsx

@@ -0,0 +1,61 @@
+import { useState } from "react";
+import { apiCallPost } from "../../api/axios";
+import { toasts } from "../common/ui/Toast/Toast";
+import "./VerifyOtpModal.scss";
+
+const VerifyOtpModal = ({ isOpen, onClose, onVerifySuccess }) => {
+  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="modal-overlay">
+      <div className="modal-content">
+        <h2 className="modal-title">Verify OTP</h2>
+
+        <input
+          maxLength={6}
+          value={otp}
+          onChange={(e) => setOtp(e.target.value.replace(/\D/g, ""))}
+          className="otp-input"
+          placeholder="Enter OTP"
+        />
+
+        <div className="modal-actions">
+          <button onClick={onClose} className="btn-cancel">
+            Cancel
+          </button>
+
+          <button
+            onClick={handleVerify}
+            disabled={loading}
+            className="btn-verify"
+          >
+            {loading ? "Verifying..." : "Verify"}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default VerifyOtpModal;

package/templates/react/js/scss/rtk/src/component/auth/VerifyOtpModal.scss

@@ -0,0 +1,62 @@
+.modal-overlay {
+  position: fixed;
+  inset: 0;
+  background-color: rgba(0, 0, 0, 0.4); // bg-black bg-opacity-40
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 50;
+
+
+  .modal-content {
+    background-color: #ffffff;
+    width: 24rem; // w-96
+    padding: 1.5rem; // p-6
+    border-radius: 0.5rem; // rounded
+    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); // shadow-lg
+
+    .modal-title {
+      font-size: 1.25rem; // text-xl
+      font-weight: 700; // font-bold
+      margin-bottom: 1rem; // mb-4
+    }
+
+    .otp-input {
+      border: 1px solid #d1d5db;
+      width: 100%;
+      padding: 0.5rem; // p-2
+      margin-bottom: 1rem; // mb-4
+      text-align: center;
+      letter-spacing: 0.25em; // tracking-widest
+      font-size: 1.125rem; // text-lg
+      border-radius: 0.25rem;
+    }
+
+    .modal-actions {
+      display: flex;
+      justify-content: space-between;
+
+      .btn-cancel {
+        padding: 0.5rem 1rem; // px-4 py-2
+        border: 1px solid #d1d5db;
+        border-radius: 0.25rem;
+        background: transparent;
+        cursor: pointer;
+      }
+
+      .btn-verify {
+        padding: 0.5rem 1rem; // px-4 py-2
+        background-color: #2563eb; // bg-blue-600
+        color: #ffffff;
+        border-radius: 0.25rem;
+        border: none;
+        cursor: pointer;
+
+        &:disabled {
+          opacity: 0.7;
+          cursor: not-allowed;
+        }
+      }
+    }
+  }
+}

package/templates/react/js/scss/rtk/src/component/common/ui/Toast/Toast.js

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

package/templates/react/js/scss/rtk/src/contants/constants.js

@@ -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/js/scss/rtk/src/main.jsx

@@ -0,0 +1,16 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import "./styles/global.scss";
+import App from "./App.jsx";
+import { Provider } from "react-redux";
+import { store } from "./store/index.js";
+
+const rootElement = document.getElementById("root");
+
+createRoot(rootElement).render(
+  <StrictMode>
+    <Provider store={store}>
+      <App />
+    </Provider>
+  </StrictMode>
+);

package/templates/react/js/scss/rtk/src/pages/Dashboard.jsx

@@ -0,0 +1,12 @@
+import "./Dashboard.scss";
+
+const Dashboard = () => {
+  return (
+    <div className="dashboard-container">
+      <h1 className="dashboard-title">Dashboard</h1>
+      <p className="dashboard-text">This is a static sample dashboard.</p>
+    </div>
+  );
+};
+
+export default Dashboard;

package/templates/react/js/scss/rtk/src/pages/Dashboard.scss

@@ -0,0 +1,13 @@
+.dashboard-container {
+  padding: 1.5rem; // p-6
+
+  .dashboard-title {
+    font-size: 1.5rem; // text-2xl
+    font-weight: 700; // font-bold
+  }
+
+  .dashboard-text {
+    margin-top: 0.5rem; // mt-2
+    color: #4b5563; // text-gray-600
+  }
+}

package/templates/react/js/scss/rtk/src/pages/Login.jsx

@@ -0,0 +1,75 @@
+import { useState } from "react";
+import { Link, useNavigate } from "react-router-dom";
+import VerifyOtpModal from "../component/auth/VerifyOtpModal";
+import "./Login.scss";
+import { useLoginMutation } from "../store/services/api";
+
+const Login = () => {
+  const navigate = useNavigate();
+  const [login, { isLoading }] = useLoginMutation();
+
+  const [showOtp, setShowOtp] = useState(false);
+
+  const [form, setForm] = useState({
+    email: "",
+    password: "",
+  });
+
+  const handleLogin = async () => {
+    // await login({
+    //   email: "test@test.com",
+    //   password: "123456",
+    // });
+    setShowOtp(true);
+  };
+
+  const handleOtpSuccess = () => {
+    localStorage.setItem("token", "dummy-token");
+    navigate("/dashboard");
+  };
+
+  return (
+    <div className="login-container">
+      <div className="auth-card">
+        <h2 className="auth-title">Login</h2>
+
+        <input
+          className="auth-input"
+          placeholder="Email"
+          value={form.email}
+          onChange={(e) => setForm({ ...form, email: e.target.value })}
+        />
+
+        <input
+          type="password"
+          className="auth-input password-input"
+          placeholder="Password"
+          value={form.password}
+          onChange={(e) => setForm({ ...form, password: e.target.value })}
+        />
+
+        <button
+          className="auth-button"
+          onClick={handleLogin}
+          disabled={isLoading}
+        >
+          {isLoading ? "Loading..." : "Login"}
+        </button>
+        <span className="auth-footer">
+          Dont have an account?{" "}
+          <Link to="/signup" className="auth-link">
+            Signup
+          </Link>
+        </span>
+      </div>
+
+      <VerifyOtpModal
+        isOpen={showOtp}
+        onClose={() => setShowOtp(false)}
+        onVerifySuccess={handleOtpSuccess}
+      />
+    </div>
+  );
+};
+
+export default Login;

package/templates/react/js/scss/rtk/src/pages/Login.scss

@@ -0,0 +1,67 @@
+.login-container {
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #f3f4f6;
+
+  .auth-card {
+    width: 24rem; // w-96
+    padding: 1.5rem; // p-6
+    background-color: #ffffff;
+    border-radius: 0.375rem; // rounded
+    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); // shadow
+
+    .auth-title {
+      font-size: 1.25rem; // text-xl
+      font-weight: 700; // font-bold
+      margin-bottom: 1rem; // mb-4
+    }
+
+    .auth-input {
+      width: 100%;
+      padding: 0.5rem; // p-2
+      margin-bottom: 0.5rem; // mb-2
+      border: 1px solid #d1d5db; // border
+      border-radius: 0.25rem; // rounded
+
+      &.password-input {
+        margin-bottom: 1rem; // mb-4
+      }
+    }
+
+    .auth-button {
+      width: 100%;
+      background-color: #2563eb; // blue-600
+      color: #ffffff;
+      padding: 0.5rem 0;
+      border-radius: 0.25rem;
+      border: none;
+      cursor: pointer;
+      font-weight: 600;
+
+      &:disabled {
+        opacity: 0.7;
+        cursor: not-allowed;
+      }
+    }
+
+    .auth-footer {
+      display: block;
+      text-align: center;
+      margin-top: 0.5rem; // mt-2
+      font-size: 0.875rem; // text-sm
+      color: #4b5563; // text-gray-600
+
+      .auth-link {
+        color: #2563eb; // text-blue-600
+        text-decoration: none;
+        cursor: pointer;
+
+        &:hover {
+          text-decoration: underline;
+        }
+      }
+    }
+  }
+}