@anmol0493/fullstack-app 1.0.3 → 1.0.5

package/README.md

@@ -15,10 +15,10 @@ This is a **full-stack template** designed to help developers quickly bootstrap
 ## Getting Started
 
 ### Prerequisites
-- [Node.js](https://nodejs.org/) (v16 or higher)
+- [Node.js](https://nodejs.org/) (v20 or higher)
 - [npm](https://www.npmjs.com/)
 
 ### Installation
 - ```bash
     npx @anmol0493/fullstack-app my-project
-  ```
+  ```

package/frontend/src/components/Layout.tsx

@@ -1,21 +1,29 @@
-import { useSelector } from "react-redux";
-import { actions, RootState } from "../redux/store";
-import { Button } from "./ui/Button";
 import { LogOut, TriangleAlert } from "lucide-react";
-import { cn } from "../lib/utils";
-import toast from "react-hot-toast";
 import { useState } from "react";
+import toast from "react-hot-toast";
+import { useDispatch, useSelector } from "react-redux";
+import { cn } from "../lib/utils";
+import { authApi } from "../redux/api/auth";
+import { actions, RootState } from "../redux/store";
+import { Button } from "./ui/Button";
 import { CommonAlertDialog } from "./ui/CommonAlertDialog";
 
 interface LayoutProps {
   children: React.ReactNode;
 }
 
+const apiArray = [authApi];
+
 export const Layout = ({ children }: LayoutProps) => {
   const { currentUser } = useSelector((state: RootState) => state.auth);
   const [isDialogOpen, setIsDialogOpen] = useState(false);
 
+  const dispatch = useDispatch();
+
   const handleLogout = () => {
+    apiArray.forEach(api => {
+      dispatch(api.util.resetApiState());
+    });
     actions.auth.clearToken(null);
     toast.success("Logged out successfully");
   };

package/frontend/src/lib/utils.ts

@@ -1,14 +1,14 @@
-import { clsx, type ClassValue } from "clsx";
-import { twMerge } from "tailwind-merge";
 import {
   BaseQueryFn,
   FetchArgs,
   fetchBaseQuery,
   FetchBaseQueryError
-} from "@reduxjs/toolkit/query/react";
-import { AUTH_TOKEN } from "./constants";
-import { actions } from "../redux/store";
-import toast from "react-hot-toast";
+} from '@reduxjs/toolkit/query/react';
+import { clsx, type ClassValue } from 'clsx';
+import toast from 'react-hot-toast';
+import { twMerge } from 'tailwind-merge';
+import { clearToken } from '../redux/slice/auth';
+import { AUTH_TOKEN } from './constants';
 
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs));
@@ -21,7 +21,7 @@ export const isAuth = (): boolean => {
   }
 
   try {
-    const decoded = JSON.parse(atob(token.split(".")[1]));
+    const decoded = JSON.parse(atob(token.split('.')[1]));
     const currentTime = Date.now() / 1000;
     return decoded.exp > currentTime;
   } catch (error) {
@@ -29,7 +29,7 @@ export const isAuth = (): boolean => {
   }
 };
 
-const Headers = () => localStorage.getItem(AUTH_TOKEN) || "";
+const Headers = () => localStorage.getItem(AUTH_TOKEN) || '';
 
 export const baseQueryInterceptor = (
   baseUrl: string
@@ -37,7 +37,7 @@ export const baseQueryInterceptor = (
   const baseQuery = fetchBaseQuery({
     baseUrl: baseUrl,
     prepareHeaders: (headers) => {
-      headers.set("Authorization", `Bearer ${Headers()}`);
+      headers.set('Authorization', `Bearer ${Headers()}`);
       return headers;
     }
   });
@@ -45,7 +45,7 @@ export const baseQueryInterceptor = (
   return async (args, api, extraOptions) => {
     const result = await baseQuery(args, api, extraOptions);
     if (result.error && result.error.status === 401) {
-      actions.auth.clearToken(null);
+      api.dispatch(clearToken());
     }
 
     return result;
@@ -54,18 +54,18 @@ export const baseQueryInterceptor = (
 
 export const handleError = async (error: any) => {
   toast.error(
-    error?.data?.message ? error.data.message : "Something went wrong"
+    error?.data?.message ? error.data.message : 'Something went wrong'
   );
 };
 
 export const handleSuccess = async (obj: any) => {
-  toast.success(obj?.message ? obj.message : "Success");
+  toast.success(obj?.message ? obj.message : 'Success');
 };
 
 export const handleValue = (row: any, field: any) => {
-  if (!field) return "-";
-  if (typeof field === "function") return field(row) ?? "-";
+  if (!field) return '-';
+  if (typeof field === 'function') return field(row) ?? '-';
   return field
-    .split(".")
-    .reduce((acc: any, part: any) => acc && (acc[part] ?? "-"), row);
+    .split('.')
+    .reduce((acc: any, part: any) => acc && (acc[part] ?? '-'), row);
 };

package/frontend/src/redux/slice/auth.ts

@@ -1,6 +1,6 @@
-import { createSlice } from "@reduxjs/toolkit";
-import { User } from "../../types";
-import { AUTH_TOKEN } from "../../lib/constants";
+import { createSlice } from '@reduxjs/toolkit';
+import { AUTH_TOKEN } from '../../lib/constants';
+import { User } from '../../types';
 
 interface AuthState {
   currentUser: null | User;
@@ -15,7 +15,7 @@ const initialState: AuthState = {
 };
 
 export const authSlice = createSlice({
-  name: "auth",
+  name: 'auth',
   initialState,
   reducers: {
     setCurrentUser: (state, action) => {
@@ -35,5 +35,5 @@ export const authSlice = createSlice({
   }
 });
 
-export const { setIsLoading, setCurrentUser } = authSlice.actions;
+export const { setIsLoading, setCurrentUser, clearToken } = authSlice.actions;
 export default authSlice.reducer;

package/frontend/vite.config.ts

@@ -1,19 +1,26 @@
-import { defineConfig } from 'vite';
-import react from '@vitejs/plugin-react-swc';
 import tailwindcss from '@tailwindcss/vite';
+import react from '@vitejs/plugin-react-swc';
+import path from 'path';
+import { defineConfig, loadEnv } from 'vite';
 
-const apiUrl = import.meta.env.VITE_API_URL;
+export default defineConfig(({ mode }) => {
+  const env = loadEnv(mode, process.cwd(), '');
 
-// https://vite.dev/config/
-export default defineConfig({
-  plugins: [react(), tailwindcss()],
-  server: {
-    proxy: {
-      '/api': {
-        target: apiUrl,
-        changeOrigin: true,
-        rewrite: (path) => path.replace(/^\/api/, '')
+  return {
+    plugins: [react(), tailwindcss()],
+    resolve: {
+      alias: {
+        '@': path.resolve(__dirname, './src')
+      }
+    },
+    server: {
+      proxy: {
+        '/api': {
+          target: env.VITE_API_URL,
+          changeOrigin: true,
+          rewrite: (path) => path.replace(/^\/api/, '')
+        }
       }
     }
-  }
+  };
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@anmol0493/fullstack-app",
-  "version": "1.0.3",
+  "version": "1.0.5",
   "description": "A full-stack template with Vite React frontend and Express/NestJS backend options.",
   "main": "index.js",
   "type": "module",

package/scripts/setup.js

@@ -4,7 +4,7 @@ import * as fs from 'fs';
 import * as path from 'path';
 import enquirer from 'enquirer'; // Install enquirer: npm install enquirer
 const { prompt } = enquirer;
-// import { execa } from 'execa'; // Install execa: npm install execa
+import { execa } from 'execa'; // Install execa: npm install execa
 import { fileURLToPath } from 'url';
 import { dirname } from 'path';