create-fe-boilerplate 0.3.2 → 0.4.1

package/templates/react/js/scss/axios/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": {
+    "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",
+    "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",
+    "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",
+    "vite": "^7.2.4"
+  }
+}

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

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

package/templates/react/js/scss/axios/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/axios/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/axios/src/component/auth/VerifyOtpModal.jsx

@@ -0,0 +1,60 @@
+import { useState } from "react";
+import "../../pages/Auth.scss";
+import { toasts } from "../common/ui/Toast/Toast";
+import { apiCallPost } from "../../api/axios";
+
+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);
+    // Simulate API call or use apiCallPost if ready
+    // const res = await apiCallPost("/auth/verify-otp", { otp }, {}, true);
+
+    setTimeout(() => {
+      setLoading(false);
+      onVerifySuccess();
+      onClose();
+    }, 1000);
+  };
+
+  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="modal-input"
+          placeholder="000000"
+        />
+
+        <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/axios/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/axios/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/axios/src/index.css

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

package/templates/react/js/scss/axios/src/main.jsx

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

package/templates/react/js/scss/axios/src/pages/Auth.scss

@@ -0,0 +1,203 @@
+$primary-color: #4f46e5;
+$primary-hover: #4338ca;
+$bg-gradient: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+$card-bg: #ffffff;
+$text-main: #1f2937;
+$text-muted: #6b7280;
+$border-color: #e5e7eb;
+$shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
+
+.login-wrapper {
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: $bg-gradient;
+  padding: 1.5rem;
+
+  .login-card {
+    background: $card-bg;
+    width: 100%;
+    max-width: 400px;
+    padding: 2.5rem;
+    border-radius: 1rem;
+    box-shadow: $shadow;
+    transition: transform 0.3s ease;
+
+    &:hover {
+      transform: translateY(-4px);
+    }
+
+    .login-title {
+      font-size: 1.875rem;
+      font-weight: 700;
+      color: $text-main;
+      margin-bottom: 2rem;
+      text-align: center;
+    }
+
+    .login-input {
+      width: 100%;
+      padding: 0.75rem 1rem;
+      margin-bottom: 1rem;
+      border: 1px solid $border-color;
+      border-radius: 0.5rem;
+      font-size: 1rem;
+      transition: all 0.2s ease;
+      box-sizing: border-box;
+
+      &:focus {
+        outline: none;
+        border-color: $primary-color;
+        box-shadow: 0 0 0 3px rgba($primary-color, 0.1);
+      }
+
+      &::placeholder {
+        color: #9ca3af;
+      }
+    }
+
+    .login-button {
+      width: 100%;
+      padding: 0.75rem;
+      background-color: $primary-color;
+      color: white;
+      border: none;
+      border-radius: 0.5rem;
+      font-size: 1rem;
+      font-weight: 600;
+      cursor: pointer;
+      transition: background-color 0.2s ease;
+      margin-top: 0.5rem;
+
+      &:hover {
+        background-color: $primary-hover;
+      }
+
+      &:active {
+        transform: scale(0.98);
+      }
+    }
+
+    .login-footer {
+      margin-top: 1.5rem;
+      text-align: center;
+      font-size: 0.875rem;
+      color: $text-muted;
+
+      .signup-link {
+        color: $primary-color;
+        text-decoration: none;
+        font-weight: 600;
+        margin-left: 0.25rem;
+
+        &:hover {
+          text-decoration: underline;
+        }
+      }
+    }
+  }
+}
+
+.modal-overlay {
+  position: fixed;
+  inset: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  backdrop-filter: blur(4px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+  padding: 1rem;
+
+  .modal-content {
+    background: $card-bg;
+    width: 100%;
+    max-width: 400px;
+    padding: 2rem;
+    border-radius: 1rem;
+    box-shadow: $shadow;
+    animation: modal-fade-in 0.3s ease-out;
+
+    .modal-title {
+      font-size: 1.5rem;
+      font-weight: 700;
+      color: $text-main;
+      margin-bottom: 1.5rem;
+      text-align: center;
+    }
+
+    .modal-input {
+      width: 100%;
+      padding: 0.75rem 1rem;
+      margin-bottom: 1.5rem;
+      border: 1px solid $border-color;
+      border-radius: 0.5rem;
+      font-size: 1.25rem;
+      text-align: center;
+      letter-spacing: 0.5rem;
+      transition: all 0.2s ease;
+      box-sizing: border-box;
+
+      &:focus {
+        outline: none;
+        border-color: $primary-color;
+        box-shadow: 0 0 0 3px rgba($primary-color, 0.1);
+      }
+    }
+
+    .modal-actions {
+      display: flex;
+      gap: 1rem;
+
+      .btn-cancel {
+        flex: 1;
+        padding: 0.75rem;
+        background: transparent;
+        border: 1px solid $border-color;
+        border-radius: 0.5rem;
+        color: $text-muted;
+        font-weight: 600;
+        cursor: pointer;
+        transition: all 0.2s ease;
+
+        &:hover {
+          background: #f9fafb;
+          color: $text-main;
+        }
+      }
+
+      .btn-verify {
+        flex: 2;
+        padding: 0.75rem;
+        background: $primary-color;
+        border: none;
+        border-radius: 0.5rem;
+        color: white;
+        font-weight: 600;
+        cursor: pointer;
+        transition: background-color 0.2s ease;
+
+        &:hover {
+          background: $primary-hover;
+        }
+
+        &:disabled {
+          opacity: 0.7;
+          cursor: not-allowed;
+        }
+      }
+    }
+  }
+}
+
+@keyframes modal-fade-in {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}

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

@@ -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;