@anmol0493/fullstack-app 1.0.0

package/frontend/src/pages/Signup.tsx

@@ -0,0 +1,67 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import { SignupFormData } from "../types";
+import { useForm } from "react-hook-form";
+import { SignupSchema } from "../lib/schema";
+import { AUTH_TOKEN, SignUpFields } from "../lib/constants";
+import { FormInput } from "../components/ui/FormInput";
+import { Button } from "../components/ui/Button";
+import { Link } from "react-router-dom";
+import { handleError, handleSuccess } from "../lib/utils";
+import { useRegisterMutation } from "../redux/api/auth";
+import { actions } from "../redux/store";
+
+export default function Signup() {
+  const [registerApi, { isLoading }] = useRegisterMutation();
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors }
+  } = useForm<SignupFormData>({
+    resolver: zodResolver(SignupSchema)
+  });
+
+  const onSubmit = async (data: SignupFormData) => {
+    const { data: res, error } = await registerApi(data);
+    if (error) {
+      handleError(error);
+    } else {
+      localStorage.setItem(AUTH_TOKEN, res.token);
+      actions.auth.setToken(res.token);
+      handleSuccess(res);
+    }
+  };
+  return (
+    <div className="h-full flex items-center justify-center bg-white">
+      <div className="w-full sm:max-w-[500px] p-4 sm:p-8 sm:py-10 sm:shadow-md rounded-lg space-y-8">
+        <div className="text-center text-3xl font-bold  text-gray-900">
+          Signup
+        </div>
+
+        <form className="space-y-6" onSubmit={handleSubmit(onSubmit)}>
+          {SignUpFields.map(({ name, ...rest }) => (
+            <FormInput
+              key={name}
+              name={name}
+              register={register}
+              error={errors?.[name]?.message}
+              {...rest}
+            />
+          ))}
+
+          <Button
+            type="submit"
+            className="w-full text-md"
+            isLoading={isLoading}
+          >
+            Signup
+          </Button>
+
+          <Link to="/" className="text-[14px] text-blue-500 underline">
+            Already have an account? Sign in
+          </Link>
+        </form>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,19 @@
+import { createApi } from "@reduxjs/toolkit/query/react";
+import { baseQueryInterceptor } from "../../lib/utils";
+
+export const authApi = createApi({
+  reducerPath: "authApi",
+  baseQuery: baseQueryInterceptor("/api/auth"),
+  endpoints: (builder) => ({
+    getUser: builder.query({ query: () => "/profile" }),
+    login: builder.mutation({
+      query: (body) => ({ url: "/login", method: "POST", body })
+    }),
+    register: builder.mutation({
+      query: (body) => ({ url: "/register", method: "POST", body })
+    })
+  })
+});
+
+export const { useLazyGetUserQuery, useLoginMutation, useRegisterMutation } =
+  authApi;

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

@@ -0,0 +1,39 @@
+import { createSlice } from "@reduxjs/toolkit";
+import { User } from "../../types";
+import { AUTH_TOKEN } from "../../lib/constants";
+
+interface AuthState {
+  currentUser: null | User;
+  loading: boolean;
+  token: string | null;
+}
+
+const initialState: AuthState = {
+  currentUser: null,
+  loading: false,
+  token: null
+};
+
+export const authSlice = createSlice({
+  name: "auth",
+  initialState,
+  reducers: {
+    setCurrentUser: (state, action) => {
+      state.currentUser = action.payload;
+    },
+    setIsLoading: (state, action) => {
+      state.loading = action.payload;
+    },
+    setToken: (state, action) => {
+      state.token = action.payload;
+    },
+    clearToken: (state) => {
+      localStorage.removeItem(AUTH_TOKEN);
+      state.currentUser = null;
+      state.token = null;
+    }
+  }
+});
+
+export const { setIsLoading, setCurrentUser } = authSlice.actions;
+export default authSlice.reducer;

package/frontend/src/redux/store.ts

@@ -0,0 +1,30 @@
+import { configureStore } from "@reduxjs/toolkit";
+import authReducer, { authSlice } from "./slice/auth";
+import { authApi } from "./api/auth";
+
+export const store = configureStore({
+  reducer: {
+    auth: authReducer,
+    [authApi.reducerPath]: authApi.reducer
+  },
+  middleware: (getDefaultMiddleware) =>
+    getDefaultMiddleware().concat(authApi.middleware)
+});
+
+export type RootState = ReturnType<typeof store.getState>;
+export type AppDispatch = typeof store.dispatch;
+
+const createActions = (slice: any) => {
+  const actions: any = {};
+
+  Object.keys(slice.actions).forEach((key) => {
+    actions[key] = (payload: any) =>
+      store.dispatch(slice.actions[key](payload));
+  });
+
+  return actions;
+};
+
+export const actions = {
+  auth: createActions(authSlice)
+};

package/frontend/src/routes/index.tsx

@@ -0,0 +1,20 @@
+import { lazy, Suspense } from "react";
+import { Navigate, Route, Routes } from "react-router-dom";
+import { Loader } from "../components/ui/Loader";
+
+const Home = lazy(() => import("../pages/Home"));
+const Login = lazy(() => import("../pages/Login"));
+const Signup = lazy(() => import("../pages/Signup"));
+
+export default function PageRoutes() {
+  return (
+    <Suspense fallback={<Loader />}>
+      <Routes>
+        <Route path="/" element={<Home />} />
+        <Route path="/login" element={<Login />} />
+        <Route path="/signup" element={<Signup />} />
+        <Route path="*" element={<Navigate to="/" replace />} />
+      </Routes>
+    </Suspense>
+  );
+}

package/frontend/src/routes/middleware.ts

@@ -0,0 +1,18 @@
+import { useEffect } from 'react'
+import { useSelector } from 'react-redux'
+import { useLocation, useNavigate } from 'react-router-dom'
+import { RootState } from '../redux/store'
+
+export const AuthHandler = () => {
+  const navigate = useNavigate()
+  const { pathname } = useLocation()
+  const { currentUser, loading } = useSelector((state: RootState) => state.auth)
+
+  useEffect(() => {
+    if (!loading) {
+      if (!currentUser && !['/login', '/signup'].includes(pathname)) navigate('/login')
+      else if (currentUser && ['/login', '/signup'].includes(pathname)) navigate('/')
+    }
+  }, [loading, currentUser, pathname])
+  return null
+}

package/frontend/src/types/index.ts

@@ -0,0 +1,12 @@
+import { z } from "zod";
+import { SigninSchema, SignupSchema } from "../lib/schema";
+
+export interface User {
+  _id: string;
+  name: string;
+  email: string;
+}
+
+export type LoginFormData = z.infer<typeof SigninSchema>;
+
+export type SignupFormData = z.infer<typeof SignupSchema>;

package/frontend/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/frontend/tsconfig.app.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src"]
+}

package/frontend/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

package/frontend/tsconfig.node.json

@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2022",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}

package/frontend/vite.config.ts

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

package/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "@anmol0493/fullstack-app",
+  "version": "1.0.0",
+  "description": "A full-stack template with Vite React frontend and Express/NestJS backend options.",
+  "main": "index.js",
+  "type": "module",
+  "scripts": {
+    "setup": "node scripts/setup.js"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Anmol0493/boilerplate.git"
+  },
+  "keywords": [
+    "fullstack",
+    "vite",
+    "react",
+    "express",
+    "nestjs"
+  ],
+  "author": "Anmol Dobariya",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/Anmol0493/boilerplate/issues"
+  },
+  "homepage": "https://github.com/Anmol0493/boilerplate#readme",
+  "dependencies": {
+    "enquirer": "^2.4.1",
+    "execa": "^9.5.2"
+  },
+  "bin": {
+    "create-fullstack-app": "./scripts/setup.js"
+  }
+}

package/scripts/setup.js

@@ -0,0 +1,73 @@
+#!/usr/bin/env node
+
+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 { fileURLToPath } from 'url';
+import { dirname } from 'path';
+
+// Derive __dirname for ESM
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+// Get the project name from the command-line arguments
+const projectName = process.argv[2];
+
+if (!projectName) {
+  console.error('Please provide a project name:');
+  console.error('  npx @anmol040903/fullstack-app <project-name>');
+  process.exit(1);
+}
+
+// Define paths
+const templateDir = path.join(__dirname, '..'); // Root directory of your template
+const targetDir = path.resolve(process.cwd(), projectName);
+
+// Ensure the target directory doesn't already exist
+if (fs.existsSync(targetDir)) {
+  console.error(`Directory "${projectName}" already exists.`);
+  process.exit(1);
+}
+
+(async () => {
+  try {
+    // Step 1: Prompt the user to choose a backend
+    const response = await prompt({
+      type: 'select',
+      name: 'backend',
+      message: 'Which backend would you like to use?',
+      choices: ['Express', 'NestJS'],
+    });
+
+    const selectedBackend = response.backend.toLowerCase(); // e.g., "express" or "nestjs"
+    const backendSourceDir = path.join(templateDir, `backend-${selectedBackend}/`);
+    const backendTargetDir = path.join(targetDir, 'backend/');
+
+    // Step 2: Create the project directory and copy files
+    console.log(`Creating project "${projectName}"...`);
+    fs.mkdirSync(targetDir, { recursive: true }); // Create the project directory
+
+    // Copy frontend files
+    console.log('Copying frontend files...');
+    fs.cpSync(path.join(templateDir, 'frontend/'), path.join(targetDir, 'frontend/'), { recursive: true });
+
+    // Copy the selected backend files
+    console.log(`Setting up ${response.backend} backend...`);
+    fs.mkdirSync(backendTargetDir, { recursive: true });
+    fs.cpSync(backendSourceDir, backendTargetDir, { recursive: true });
+
+    // Step 3: Install dependencies for frontend and backend
+    console.log('Installing dependencies...');
+    process.chdir(targetDir); // Navigate to the new project directory
+
+    await execa('npm', ['install'], { cwd: path.join(targetDir, 'frontend'), stdio: 'inherit' });
+    await execa('npm', ['install'], { cwd: backendTargetDir, stdio: 'inherit' });
+
+    console.log(`Project ${projectName} created successfully!`);
+  } catch (error) {
+    console.error('An error occurred during setup:', error);
+    process.exit(1); // Exit with a failure code
+  }
+})();