create-rex-app 1.0.0

package/template/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "the-react-experiment",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "nodemon --watch server.js --watch api server.js",
+    "build": "vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@tailwindcss/vite": "^4.2.0",
+    "@tanstack/react-query": "^5.90.21",
+    "axios": "^1.13.5",
+    "express": "^5.2.1",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "tailwindcss": "^4.2.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^10.0.1",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.4",
+    "eslint": "^10.0.1",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.5.0",
+    "globals": "^17.3.0",
+    "nodemon": "^3.1.13",
+    "vite": "^7.3.1"
+  }
+}

package/template/server.js

@@ -0,0 +1,77 @@
+import fs from 'fs'
+import path from 'path'
+import { fileURLToPath } from 'url'
+import express from 'express'
+import apiRoutes from './api/routes.js'
+
+// 1. Setup Constants
+const __dirname = path.dirname(fileURLToPath(import.meta.url))
+const app = express()
+const isProduction = process.env.NODE_ENV === 'production'
+const PORT = process.env.PORT || 5173
+
+ 
+  // 2. Global Middleware (JSON parser is usually good to have)
+  app.use(express.json())
+
+  // 3. API Routes (Always load these first!)
+  app.use('/api', apiRoutes)
+
+async function createServer(app) {
+ 
+
+  // ---------------------------------------------------------
+  // 🚀 PRODUCTION MODE (Vercel / Render)
+  // ---------------------------------------------------------
+  if (isProduction) {
+    console.log('🚀 Running in PRODUCTION mode')
+
+    // Serve static files from the 'dist' folder
+    app.use(express.static(path.resolve(__dirname, 'dist')))
+
+    // SPA Fallback: The Regex Fix 💊
+    // Matches ANY route and sends index.html
+    app.get(/.*/, (req, res) => {
+      res.sendFile(path.resolve(__dirname, 'dist', 'index.html'))
+    })
+  }
+
+  // ---------------------------------------------------------
+  // 🛠️ DEVELOPMENT MODE (Localhost)
+  // ---------------------------------------------------------
+  else {
+    console.log('🛠️ Running in DEVELOPMENT mode')
+    
+    // Dynamic import: Only load Vite in dev mode!
+    const { createServer: createViteServer } = await import('vite')
+
+    const vite = await createViteServer({
+      server: { middlewareMode: true },
+      appType: 'custom'
+    })
+
+    app.use(vite.middlewares)
+
+    app.use(async (req, res, next) => {
+      const url = req.originalUrl
+      try {
+        let template = fs.readFileSync(path.resolve(__dirname, 'index.html'), 'utf-8')
+        template = await vite.transformIndexHtml(url, template)
+        res.status(200).set({ 'Content-Type': 'text/html' }).end(template)
+      } catch (e) {
+        vite.ssrFixStacktrace(e)
+        next(e)
+      }
+    })
+  }
+
+  // 4. Start Server
+   app.listen(PORT, () => {
+    console.log(`Server running at http://localhost:${PORT}`)
+  })
+}
+
+createServer(app)
+
+
+export default app

package/template/src/App.css

@@ -0,0 +1,42 @@
+#root {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.react:hover {
+  filter: drop-shadow(0 0 2em #61dafbaa);
+}
+
+@keyframes logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  a:nth-of-type(2) .logo {
+    animation: logo-spin infinite 20s linear;
+  }
+}
+
+.card {
+  padding: 2em;
+}
+
+.read-the-docs {
+  color: #888;
+}

package/template/src/App.jsx

@@ -0,0 +1,326 @@
+import { useTest } from './hooks/useTest'
+import { useState, useEffect } from "react";
+
+const features = [
+  {
+    icon: (
+      <svg viewBox="0 0 24 24" fill="none" className="w-6 h-6" stroke="currentColor" strokeWidth={1.5}>
+        <path strokeLinecap="round" strokeLinejoin="round" d="M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z" />
+      </svg>
+    ),
+    title: "Lightning Fast",
+    desc: "Vite-powered HMR with Express acting as the boss. Zero cold start, instant feedback loop.",
+  },
+  {
+    icon: (
+      <svg viewBox="0 0 24 24" fill="none" className="w-6 h-6" stroke="currentColor" strokeWidth={1.5}>
+        <path strokeLinecap="round" strokeLinejoin="round" d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />
+      </svg>
+    ),
+    title: "One House",
+    desc: "Frontend & backend unified. No proxy configs, no CORS headaches. Just one coherent project.",
+  },
+  {
+    icon: (
+      <svg viewBox="0 0 24 24" fill="none" className="w-6 h-6" stroke="currentColor" strokeWidth={1.5}>
+        <path strokeLinecap="round" strokeLinejoin="round" d="M14.25 9.75L16.5 12l-2.25 2.25m-4.5 0L7.5 12l2.25-2.25M6 20.25h12A2.25 2.25 0 0020.25 18V6A2.25 2.25 0 0018 3.75H6A2.25 2.25 0 003.75 6v12A2.25 2.25 0 006 20.25z" />
+      </svg>
+    ),
+    title: "Express + React",
+    desc: "Full power of Express.js for your API routes, with React + Vite for the frontend. Best of both.",
+  },
+  {
+    icon: (
+      <svg viewBox="0 0 24 24" fill="none" className="w-6 h-6" stroke="currentColor" strokeWidth={1.5}>
+        <path strokeLinecap="round" strokeLinejoin="round" d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z" />
+      </svg>
+    ),
+    title: "Production Ready",
+    desc: "Unified build system. Ship your entire app — API and UI — as one deployable unit.",
+  },
+];
+
+const steps = [
+  { cmd: "npx create-rex-app my-app", label: "Scaffold your app" },
+  { cmd: "cd my-app && npm install", label: "Install dependencies" },
+  { cmd: "npm run dev", label: "Start developing" },
+];
+
+function AnimatedCounter({ target, suffix = "" }) {
+  const [count, setCount] = useState(0);
+  useEffect(() => {
+    if (target === 0) return;
+    let start = 0;
+    const step = Math.ceil(target / 40);
+    const timer = setInterval(() => {
+      start += step;
+      if (start >= target) { setCount(target); clearInterval(timer); }
+      else setCount(start);
+    }, 30);
+    return () => clearInterval(timer);
+  }, [target]);
+  return <span>{count}{suffix}</span>;
+}
+
+// Live server status badge — powered by useTest hook → GET /api/test
+function ServerStatusBadge() {
+  const { data, isLoading, isError, error } = useTest();
+
+  if (isLoading) {
+    return (
+      <div className="inline-flex items-center gap-2 bg-white/[0.04] border border-white/10 rounded-full px-4 py-1.5 text-xs text-white/50 mb-8">
+        <span className="w-1.5 h-1.5 rounded-full bg-yellow-400 animate-pulse" />
+        Connecting to server…
+      </div>
+    );
+  }
+
+  if (isError) {
+    return (
+      <div className="inline-flex items-center gap-2 bg-red-500/[0.08] border border-red-500/20 rounded-full px-4 py-1.5 text-xs text-red-400 mb-8">
+        <span className="w-1.5 h-1.5 rounded-full bg-red-500" />
+        Server offline — {error?.message ?? "Connection failed"}
+      </div>
+    );
+  }
+
+  // Handles both plain string responses and { message: "..." } shaped objects
+  const msg =
+    typeof data === "string"
+      ? data
+      : typeof data?.message === "string"
+      ? data.message
+      : "Server connected";
+
+  return (
+    <div className="inline-flex items-center gap-2 bg-emerald-500/[0.08] border border-emerald-500/20 rounded-full px-4 py-1.5 text-xs text-emerald-400 mb-8">
+      <span className="w-1.5 h-1.5 rounded-full bg-emerald-400 animate-pulse" />
+      {msg}
+    </div>
+  );
+}
+
+export default function App() {
+  const [copied, setCopied] = useState(null);
+
+  const copy = (text, idx) => {
+    navigator.clipboard.writeText(text);
+    setCopied(idx);
+    setTimeout(() => setCopied(null), 2000);
+  };
+
+  return (
+    <div className="min-h-screen bg-[#0a0a0f] text-white font-[system-ui] overflow-x-hidden">
+      {/* Ambient background */}
+      <div className="fixed inset-0 pointer-events-none z-0">
+        <div className="absolute top-[-20%] left-[10%] w-[600px] h-[600px] rounded-full bg-[#ff4d00] opacity-[0.06] blur-[120px]" />
+        <div className="absolute bottom-[-10%] right-[5%] w-[500px] h-[500px] rounded-full bg-[#ff7a38] opacity-[0.05] blur-[100px]" />
+        <div className="absolute top-[40%] left-[40%] w-[300px] h-[300px] rounded-full bg-[#ff4d00] opacity-[0.04] blur-[80px]" />
+      </div>
+
+      {/* Grid overlay */}
+      <div
+        className="fixed inset-0 z-0 pointer-events-none opacity-[0.03]"
+        style={{
+          backgroundImage:
+            "linear-gradient(#ff4d00 1px, transparent 1px), linear-gradient(90deg, #ff4d00 1px, transparent 1px)",
+          backgroundSize: "60px 60px",
+        }}
+      />
+
+      {/* Nav */}
+      <nav className="relative z-10 flex items-center justify-between px-6 md:px-12 py-5 border-b border-white/[0.06]">
+        <div className="flex items-center gap-3">
+          <img src="/rex.png" alt="Rex" className="h-8 w-auto drop-shadow-[0_0_20px_rgba(255,77,0,0.4)]" />
+          <span className="text-lg font-bold tracking-tight text-white/90">rex</span>
+          <span className="ml-1 text-[10px] font-semibold uppercase tracking-widest bg-[#ff4d00]/20 text-[#ff6a2a] border border-[#ff4d00]/30 px-2 py-0.5 rounded-full">
+            v1.0
+          </span>
+        </div>
+        <div className="hidden md:flex items-center gap-8 text-sm text-white/50">
+          <a href="https://rex-docs.vercel.app/" className="hover:text-white transition-colors">Docs</a>
+          {/* <a href="#" className="hover:text-white transition-colors">Examples</a>
+          <a href="#" className="hover:text-white transition-colors">Changelog</a> */}
+        </div>
+        <a
+          href="https://github.com/saumyarawal-webdev"
+          className="flex items-center gap-2 text-sm bg-[#ff4d00] hover:bg-[#ff6a2a] text-white px-4 py-2 rounded-lg font-medium transition-all duration-200 hover:shadow-[0_0_20px_rgba(255,77,0,0.4)]"
+        >
+          <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
+            <path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z" />
+          </svg>
+          GitHub
+        </a>
+      </nav>
+
+      {/* Hero */}
+      <section className="relative z-10 flex flex-col items-center text-center px-6 pt-24 pb-20 md:pt-32 md:pb-28">
+
+        {/* Live server status — driven by useTest → /api/test */}
+        <ServerStatusBadge />
+
+        <div className="flex justify-center mb-8">
+          <img
+            src="/rex.png"
+            alt="Rex Logo"
+            className="h-24 md:h-32 w-auto drop-shadow-[0_0_40px_rgba(255,77,0,0.35)]"
+          />
+        </div>
+
+        <h1 className="text-5xl md:text-7xl lg:text-8xl font-black tracking-tight leading-none mb-6">
+          <span className="text-white">Build Faster.</span>
+          <br />
+          <span className="bg-gradient-to-r from-[#ff4d00] via-[#ff6a2a] to-[#ffaa44] bg-clip-text text-transparent">
+            Ship Together.
+          </span>
+        </h1>
+
+        <p className="text-lg md:text-xl text-white/50 max-w-2xl mb-10 leading-relaxed">
+          Rex unifies React + Vite and Express.js under one roof — 10× faster than alternatives.
+          No more context switching between frontend and backend.
+        </p>
+
+        <div className="flex flex-col sm:flex-row items-center gap-4">
+          <a
+            href="https://rex-docs.vercel.app/"
+            className="w-full sm:w-auto bg-[#ff4d00] hover:bg-[#ff6a2a] text-white font-semibold px-8 py-3.5 rounded-xl transition-all duration-200 hover:shadow-[0_0_30px_rgba(255,77,0,0.5)] text-sm"
+          >
+            Read the Docs →
+          </a>
+          {/* <a
+            href="#"
+            className="w-full sm:w-auto bg-white/[0.05] hover:bg-white/[0.08] border border-white/10 text-white/80 font-semibold px-8 py-3.5 rounded-xl transition-all duration-200 text-sm"
+          >
+            View Examples
+          </a> */}
+        </div>
+
+        {/* Stats */}
+        <div className="mt-20 grid grid-cols-3 gap-6 md:gap-16 w-full max-w-lg">
+          {[
+            { val: 10, suffix: "×", label: "Faster" },
+            { val: 1, suffix: "", label: "Unified Codebase" },
+            { val: 0, suffix: " ms", label: "Config to Start" },
+          ].map((s, i) => (
+            <div key={i} className="flex flex-col items-center">
+              <span className="text-3xl md:text-4xl font-black text-[#ff4d00]">
+                <AnimatedCounter target={s.val} suffix={s.suffix} />
+              </span>
+              <span className="text-xs text-white/40 mt-1">{s.label}</span>
+            </div>
+          ))}
+        </div>
+      </section>
+
+      {/* Architecture Banner */}
+      <section className="relative z-10 mx-4 md:mx-12 mb-20 rounded-2xl border border-white/[0.07] bg-white/[0.02] backdrop-blur-sm overflow-hidden">
+        <div className="absolute inset-0 bg-gradient-to-br from-[#ff4d00]/5 to-transparent" />
+        <div className="relative p-8 md:p-12">
+          <p className="text-xs uppercase tracking-[0.25em] text-[#ff6a2a] mb-4 font-semibold">Architecture</p>
+          <div className="flex flex-col md:flex-row items-center justify-center gap-4 md:gap-6 text-sm">
+            {["React + Vite (Frontend)", "→", "Vite Middleware", "→", "Express.js (Boss)", "→", "Your API"].map((item, i) => (
+              <div key={i}>
+                {item === "→" ? (
+                  <span className="text-[#ff4d00]/60 text-lg font-light hidden md:block">→</span>
+                ) : (
+                  <div className="bg-white/[0.05] border border-white/[0.08] rounded-lg px-4 py-2 text-white/70 font-mono text-xs md:text-sm text-center">
+                    {item}
+                  </div>
+                )}
+              </div>
+            ))}
+          </div>
+          <p className="text-center text-white/30 text-xs mt-6">One process. One port. Full control.</p>
+        </div>
+      </section>
+
+      {/* Features */}
+      <section className="relative z-10 px-6 md:px-12 mb-24">
+        <p className="text-xs uppercase tracking-[0.25em] text-[#ff6a2a] mb-3 font-semibold text-center">Why Rex</p>
+        <h2 className="text-3xl md:text-4xl font-bold text-center mb-12 text-white/90">
+          Everything you need. Nothing you don't.
+        </h2>
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 max-w-6xl mx-auto">
+          {features.map((f, i) => (
+            <div
+              key={i}
+              className="group relative bg-white/[0.03] hover:bg-white/[0.06] border border-white/[0.07] hover:border-[#ff4d00]/30 rounded-2xl p-6 transition-all duration-300"
+            >
+              <div className="text-[#ff4d00] mb-4 group-hover:scale-110 transition-transform duration-200">
+                {f.icon}
+              </div>
+              <h3 className="font-semibold text-white/90 mb-2">{f.title}</h3>
+              <p className="text-sm text-white/40 leading-relaxed">{f.desc}</p>
+            </div>
+          ))}
+        </div>
+      </section>
+
+      {/* Get Started */}
+      <section className="relative z-10 px-6 md:px-12 mb-24">
+        <p className="text-xs uppercase tracking-[0.25em] text-[#ff6a2a] mb-3 font-semibold text-center">Quick Start</p>
+        <h2 className="text-3xl md:text-4xl font-bold text-center mb-12 text-white/90">
+          Up and running in seconds.
+        </h2>
+        <div className="max-w-2xl mx-auto space-y-3">
+          {steps.map((step, i) => (
+            <div
+              key={i}
+              className="flex items-center gap-4 bg-white/[0.03] border border-white/[0.07] rounded-xl px-5 py-4 group hover:border-white/[0.15] transition-all"
+            >
+              <span className="w-7 h-7 rounded-full bg-[#ff4d00]/20 text-[#ff6a2a] text-xs font-bold flex items-center justify-center shrink-0 border border-[#ff4d00]/30">
+                {i + 1}
+              </span>
+              <code className="flex-1 font-mono text-sm text-white/70">{step.cmd}</code>
+              <button
+                onClick={() => copy(step.cmd, i)}
+                className="shrink-0 text-white/30 hover:text-white/70 transition-colors"
+                title="Copy"
+              >
+                {copied === i ? (
+                  <svg className="w-4 h-4 text-[#ff6a2a]" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                    <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
+                  </svg>
+                ) : (
+                  <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+                    <path strokeLinecap="round" strokeLinejoin="round" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
+                  </svg>
+                )}
+              </button>
+            </div>
+          ))}
+        </div>
+      </section>
+
+      {/* Edit hint */}
+      <section className="relative z-10 px-6 md:px-12 mb-24 flex justify-center">
+        <div className="bg-white/[0.02] border border-white/[0.07] rounded-2xl px-8 py-6 text-center max-w-md">
+          <p className="text-white/50 text-sm leading-relaxed">
+            Edit{" "}
+            <code className="bg-white/[0.08] text-[#ff6a2a] px-1.5 py-0.5 rounded text-xs font-mono">
+              src/App.jsx
+            </code>{" "}
+            to get started. Changes appear instantly thanks to Vite HMR.
+          </p>
+        </div>
+      </section>
+
+      {/* Footer */}
+      <footer className="relative z-10 border-t border-white/[0.06] px-6 md:px-12 py-8 flex flex-col md:flex-row items-center justify-between gap-4 text-sm text-white/30">
+        <div className="flex items-center gap-2">
+          <img src="/rex.png" alt="Rex" className="h-5 w-auto opacity-50" />
+          <span>Rex Framework</span>
+        </div>
+        <p>
+          Built with{" "}
+          <span className="text-[#ff4d00]">♥</span> using React, Vite & Express
+        </p>
+        <div className="flex gap-6">
+          <a href="https://rex-docs.vercel.app/" className="hover:text-white/70 transition-colors">Docs</a>
+          <a href="https://github.com/saumyarawal-webdev" className="hover:text-white/70 transition-colors">GitHub</a>
+          <a href="#" className="hover:text-white/70 transition-colors">License</a>
+        </div>
+      </footer>
+    </div>
+  );
+}

package/template/src/assets/react.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="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>

package/template/src/hooks/useTest.js

@@ -0,0 +1,18 @@
+import axios from 'axios'
+import { useQuery } from '@tanstack/react-query'
+
+// The Fetcher (Private to this file mostly, or exported if needed elsewhere)
+const fetchServerMessage = async () => {
+  const response = await axios.get('/api/test')
+  return response.data
+}
+
+// The Custom Hook
+export const useTest = () => {
+  return useQuery({
+    queryKey: ['serverMessage'],
+    queryFn: fetchServerMessage,
+    // You can add default options here if you want (e.g., staleTime)
+    staleTime: 1000 * 60 * 5, // Data is fresh for 5 minutes
+  })
+}

package/template/src/index.css

@@ -0,0 +1 @@
+@import "tailwindcss";

package/template/src/main.jsx

@@ -0,0 +1,14 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.jsx'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+
+const queryClient = new QueryClient()
+createRoot(document.getElementById('root')).render(
+  <StrictMode>
+    <QueryClientProvider client={queryClient}>
+      <App />
+    </QueryClientProvider>
+  </StrictMode>,
+)

package/template/vercel.json

@@ -0,0 +1,8 @@
+{
+  "rewrites": [
+    {
+      "source": "/api/(.*)",
+      "destination": "/server.js"
+    }
+  ]
+}

package/template/vite.config.js

@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import tailwindcss from '@tailwindcss/vite'
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react(),tailwindcss()],
+})

package/template-mongo/README.md

@@ -0,0 +1,96 @@
+# 🚂 React Express Boilerplate + MongoDB (Auth Ready)
+
+A robust, "Monolith-style" fullstack boilerplate that unifies **Vite (React)** and **Express** into a single development experience.
+
+Pre-configured with **MongoDB** connection, **JWT Authentication**, and **Protected Routes**.
+
+> **One Terminal. One Port. Fullstack Power.**
+
+## 🚀 Features
+
+* **Unified Server:** `server.js` acts as the single entry point. It serves the API *and* the Frontend (via Vite middleware).
+* **🔐 Secure Authentication:** Complete Login/Signup flow using **JWT (JSON Web Tokens)** and `bcryptjs` for password hashing.
+* **🛡️ Protected Routes:** Specialized `RequireAuth` wrapper component to guard pages from unauthenticated users.
+* **🗄️ MongoDB Ready:** Mongoose setup with a dedicated `User` model and schema.
+* **Global State:** Lightweight **Context API** for managing User/Auth state.
+* **Data Fetching:** Pre-configured with **Axios** and **TanStack Query (React Query)** for professional-grade state management.
+* **Modern UI:** Styled with **Tailwind CSS**.
+
+## 🛠️ Tech Stack
+
+* **Frontend:** React, Vite, Tailwind CSS
+* **Backend:** Express.js, Node.js
+* **Database:** MongoDB (Mongoose ODM)
+* **Auth:** JWT, bcryptjs
+* **State:** Context API (Auth), TanStack Query (Server State)
+
+## 📂 Project Structure
+
+```text
+root/
+├── .env                  # Secrets (DB URI, JWT Secret) - CREATE THIS!
+├── server.js             # The Engine (Express + Vite Middleware)
+├── api/                  # Backend Logic
+│   ├── db.js             # Database Connection
+│   ├── routes.js         # API Endpoints (Auth + User)
+│   ├── models/           # Mongoose Schemas (User.js)
+│   └── middleware/       # Auth Guard (authMiddleware.js)
+│
+└── src/                  # React Frontend
+    ├── main.jsx          # Entry point (Providers wrap App here)
+    ├── App.jsx           # Router & Route Definitions
+    ├── context/          # Global State (AuthContext.jsx)
+    ├── components/
+    │   ├── Layout.jsx    # Navbar & Footer
+    │   └── RequireAuth.jsx # 🔒 The Protected Route Guard
+    ├── hooks/            # Custom Hooks (useLogin, useSignup)
+    └── pages/            # Views (Home, Login, Docs, etc.)
+```
+
+
+## 🏁 Getting Started
+
+### 1. Clone & Install
+```bash
+git clone [https://github.com/saumyarawal-webdev/react-express-nosql.git](https://github.com/saumyarawal-webdev/react-express-nosql.git)
+cd react-express-boilerplate
+npm install
+```
+### 2. Start the Engine 🚂
+Run the development environment. This starts the Express server and the Vite middleware together.
+
+```bash
+npm run dev
+```
+* **Frontend:** `http://localhost:5173`
+* **API Endpoint:** `http://localhost:5173/api/test`
+* **Refer env-sample** for configuring database.
+### 3. Build for Production
+When ready to deploy, build the React app. The server is configured to serve the static files in production (requires minor `dist` folder config in server.js for final deploy).
+
+```bash
+npm run build
+```
+
+## 🔒 Authentication Architecture
+* **Signup**: Hashes password via `bcrypt` and saves user to `MongoDB`.
+
+* **Login**: Validates credentials and returns a `JWT Token`.
+
+* **Client**: Stores `Token` in localStorage and updates AuthContext.
+
+* **Requests**: `useLogin` hook automatically fetches User Profile after login to populate UI.
+
+* **Protection**: Routes wrapped in `<RequireAuth />` check for the user in Context. If missing, they redirect to Login.
+
+## 🧩 How to Add a New API
+
+1. **Backend:** Add a new route in `api/routes.js`:
+    ```javascript
+    router.get('/users', (req, res) => { ... })
+    ```
+2. **Frontend:** Create a hook in `src/hooks/useUsers.js` using Axios + useQuery.
+3. **UI:** Import the hook in your component and display the data.
+
+---
+*Made with 💙 by Saumya*

package/template-mongo/api/db.js

@@ -0,0 +1,17 @@
+import mongoose from 'mongoose';
+
+const connectDB = async () => {
+  try {
+    // Attempt to connect to the database
+    const conn = await mongoose.connect(process.env.MONGO_URI);
+    
+    // If successful, bark!
+    console.log(`🍃 MongoDB Connected`);
+  } catch (error) {
+    // If failed, whimper and exit
+    console.error(`❌ Error: ${error.message}`);
+    process.exit(1); 
+  }
+};
+
+export default connectDB;