create-rex-app 1.0.0

package/template-mongo/src/pages/Home.jsx

@@ -0,0 +1,93 @@
+import { Link } from 'react-router-dom'
+import { useAuthContext } from '../hooks/useAuthContext'
+
+const Home = () => {
+  const { user } = useAuthContext()
+
+  return (
+    <div className="relative min-h-[80vh] flex items-center z-10">
+      
+      {/* BACKGROUND ORBS (Changed to fixed to prevent scrollbar/white patch) */}
+      <div className="fixed top-1/4 left-1/4 w-[500px] h-[500px] bg-[radial-gradient(circle,_#7C3AED,_transparent_60%)] opacity-10 blur-[100px] pointer-events-none -z-10"></div>
+      <div className="fixed bottom-1/4 right-1/4 w-[400px] h-[400px] bg-[radial-gradient(circle,_#F97316,_transparent_60%)] opacity-10 blur-[100px] pointer-events-none -z-10"></div>
+
+      {/* TWO-COLUMN CONTAINER */}
+      <div className="w-full max-w-7xl mx-auto flex flex-col lg:flex-row items-center gap-12 lg:gap-20">
+        
+        {/* LEFT SIDE: LOGO IMAGE */}
+        <div className="flex-1 w-full max-w-sm lg:max-w-md mx-auto relative group">
+          {/* Animated glow behind the image */}
+          <div className="absolute inset-0 bg-gradient-to-br from-purple-600 to-orange-500 blur-3xl opacity-20 group-hover:opacity-40 transition-opacity duration-700 rounded-full"></div>
+          {/* Static image with subtle hover scale instead of bouncing */}
+          <img 
+            src="/rex logo.png" 
+            alt="Rex Logo" 
+            className="relative z-10 w-full h-auto object-contain drop-shadow-2xl transition-transform duration-500 hover:scale-105"
+          />
+        </div>
+
+        {/* RIGHT SIDE: TEXT & CTA */}
+        <div className="flex-1 flex flex-col items-center lg:items-start text-center lg:text-left">
+          
+          {/* Dynamic Badge */}
+          <div className="inline-flex items-center gap-2 bg-white/5 border border-white/10 text-slate-300 px-4 py-1.5 rounded-full text-xs font-mono font-semibold tracking-wider uppercase mb-6 shadow-lg">
+            <span className="w-2 h-2 rounded-full bg-orange-400 animate-pulse"></span>
+            {user ? 'Authenticated Session' : 'Powered by Rex'}
+          </div>
+
+          <h1 className="text-5xl sm:text-6xl lg:text-7xl font-extrabold tracking-tight leading-[1.1] mb-6">
+            {user ? (
+              <>
+                Welcome back,<br/>
+                <span className="bg-gradient-to-r from-purple-400 to-orange-400 bg-clip-text text-transparent">
+                  {user.name}!
+                </span>
+              </>
+            ) : (
+              <>
+                One House.<br/>
+                <span className="bg-gradient-to-r from-purple-400 to-orange-400 bg-clip-text text-transparent">
+                  Full Stack.
+                </span>
+              </>
+            )}
+          </h1>
+
+          <p className="text-lg sm:text-xl text-slate-400 max-w-xl leading-relaxed mb-10">
+            {user
+              ? <>You are logged in as a <strong className="text-white uppercase tracking-wide text-sm bg-white/10 px-2 py-1 rounded mx-1">{user.role}</strong>. Ready to build something <span className="text-purple-400 italic font-medium">dhaasu</span> in your unified workspace?</>
+              : 'Experience the ultimate boilerplate. Express rules the backend, React powers the frontend, and MongoDB stores the data—all in a single, blazing-fast setup.'
+            }
+          </p>
+
+          {/* BUTTONS SECTION */}
+          <div className="flex flex-col sm:flex-row gap-4 w-full sm:w-auto justify-center lg:justify-start">
+            {user ? (
+              // --- LOGGED IN USERS SEE THIS ---
+              <>
+                <button className="px-8 py-3.5 bg-gradient-to-r from-purple-600 to-orange-500 text-white rounded-xl font-bold shadow-[0_0_30px_rgba(124,58,237,0.3)] hover:-translate-y-1 hover:shadow-[0_0_50px_rgba(124,58,237,0.5)] transition-all">
+                  Go to Dashboard
+                </button>
+
+                <Link to="/docs" className="px-8 py-3.5 bg-white/5 border border-white/10 text-slate-200 hover:bg-white/10 hover:border-purple-500/40 rounded-xl font-semibold hover:-translate-y-1 transition-all flex items-center justify-center gap-2">
+                  Documentation
+                  <svg width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2">
+                    <path strokeLinecap="round" strokeLinejoin="round" d="M12 15v2m-6 4h12a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
+                  </svg>
+                </Link>
+              </>
+            ) : (
+              // --- GUESTS SEE THIS ---
+              <Link to="/signup" className="px-8 py-3.5 bg-gradient-to-r from-purple-600 to-orange-500 text-white rounded-xl font-bold shadow-[0_0_30px_rgba(124,58,237,0.3)] hover:-translate-y-1 hover:shadow-[0_0_50px_rgba(124,58,237,0.5)] transition-all flex justify-center">
+                Create Account
+              </Link>
+            )}
+          </div>
+
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default Home

package/template-mongo/src/pages/Login.jsx

@@ -0,0 +1,97 @@
+import { useState } from 'react'
+import { useLogin } from '../hooks/useLogin'
+import { Link } from 'react-router-dom'
+
+const Login = () => {
+  const [formData, setFormData] = useState({ email: '', password: '' })
+  const { mutate, isPending } = useLogin()
+
+  const handleChange = (e) => setFormData({ ...formData, [e.target.name]: e.target.value })
+  
+  const handleSubmit = (e) => {
+    e.preventDefault()
+    mutate(formData)
+  }
+
+  return (
+    <div className="relative flex flex-col items-center justify-center min-h-[80vh] z-10 px-4">
+      
+      {/* BACKGROUND ORB */}
+      <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[400px] h-[400px] bg-[radial-gradient(circle,_#7C3AED,_transparent_60%)] opacity-10 blur-[80px] pointer-events-none -z-10"></div>
+
+      {/* LOGIN CARD */}
+      <div className="w-full max-w-md bg-white/[0.02] border border-white/10 p-8 sm:p-10 rounded-3xl shadow-2xl backdrop-blur-md">
+        
+        <div className="text-center mb-8">
+          <div className="inline-flex items-center justify-center w-12 h-12 rounded-xl bg-purple-500/10 border border-purple-500/20 mb-4 text-purple-400">
+            <svg width="24" height="24" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2">
+              <path strokeLinecap="round" strokeLinejoin="round" d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1" />
+            </svg>
+          </div>
+          <h2 className="text-3xl font-extrabold text-white tracking-tight">
+            Welcome <span className="bg-gradient-to-r from-purple-400 to-orange-400 bg-clip-text text-transparent">Back</span>
+          </h2>
+        </div>
+        
+        <form onSubmit={handleSubmit} className="flex flex-col gap-5">
+          <div>
+            <label className="block text-xs font-semibold text-slate-400 uppercase tracking-wider mb-2 ml-1">Email Address</label>
+            <input 
+              type="email" 
+              name="email" 
+              placeholder="saumya@dev.com" 
+              onChange={handleChange} 
+              className="w-full p-3.5 rounded-xl bg-black/40 border border-white/10 focus:border-purple-500 focus:ring-1 focus:ring-purple-500 outline-none text-white placeholder-slate-600 transition-all" 
+              required 
+            />
+          </div>
+
+          <div>
+            <label className="block text-xs font-semibold text-slate-400 uppercase tracking-wider mb-2 ml-1">Password</label>
+            <input 
+              type="password" 
+              name="password" 
+              placeholder="••••••••" 
+              onChange={handleChange} 
+              className="w-full p-3.5 rounded-xl bg-black/40 border border-white/10 focus:border-purple-500 focus:ring-1 focus:ring-purple-500 outline-none text-white placeholder-slate-600 transition-all" 
+              required 
+            />
+          </div>
+          
+          <button 
+            type="submit" 
+            disabled={isPending} 
+            className={`mt-4 w-full py-3.5 flex items-center justify-center gap-2 rounded-xl font-bold text-base transition-all duration-300 ${
+              isPending 
+                ? 'bg-white/10 text-slate-400 cursor-not-allowed border border-white/5' 
+                : 'bg-gradient-to-r from-purple-600 to-orange-500 text-white shadow-[0_0_20px_rgba(124,58,237,0.3)] hover:-translate-y-0.5 hover:shadow-[0_0_30px_rgba(124,58,237,0.5)]'
+            }`}
+          >
+            {isPending ? (
+              <>
+                <svg className="animate-spin -ml-1 mr-2 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                  <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
+                  <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                </svg>
+                Unlocking...
+              </>
+            ) : (
+              <>
+                Login
+                <svg width="18" height="18" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2.5">
+                  <path strokeLinecap="round" strokeLinejoin="round" d="M14 5l7 7m0 0l-7 7m7-7H3" />
+                </svg>
+              </>
+            )}
+          </button>
+        </form>
+
+        <p className="text-slate-400 mt-8 text-center text-sm">
+          New here? <Link to="/signup" className="text-purple-400 font-semibold hover:text-orange-400 transition-colors hover:underline underline-offset-4 decoration-purple-500/30">Create Account</Link>
+        </p>
+      </div>
+    </div>
+  )
+}
+
+export default Login

package/template-mongo/src/pages/Signup.jsx

@@ -0,0 +1,112 @@
+import { useState } from 'react'
+import { useSignup } from '../hooks/useSignup'
+import { Link } from 'react-router-dom'
+
+const Signup = () => {
+  const [formData, setFormData] = useState({ name: '', email: '', password: '' })
+  const { mutate, isPending } = useSignup()
+
+  const handleChange = (e) => setFormData({ ...formData, [e.target.name]: e.target.value })
+  
+  const handleSubmit = (e) => {
+    e.preventDefault()
+    mutate(formData)
+  }
+
+  return (
+    <div className="relative flex flex-col items-center justify-center min-h-[80vh] z-10 px-4">
+      
+      {/* BACKGROUND ORB (Orange variation to complement Login's purple) */}
+      <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[400px] h-[400px] bg-[radial-gradient(circle,_#F97316,_transparent_60%)] opacity-10 blur-[80px] pointer-events-none -z-10"></div>
+
+      {/* SIGNUP CARD */}
+      <div className="w-full max-w-md bg-white/[0.02] border border-white/10 p-8 sm:p-10 rounded-3xl shadow-2xl backdrop-blur-md">
+        
+        <div className="text-center mb-8">
+          <div className="inline-flex items-center justify-center w-12 h-12 rounded-xl bg-orange-500/10 border border-orange-500/20 mb-4 text-orange-400">
+            {/* User Add Icon */}
+            <svg width="24" height="24" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2">
+              <path strokeLinecap="round" strokeLinejoin="round" d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" />
+            </svg>
+          </div>
+          <h2 className="text-3xl font-extrabold text-white tracking-tight">
+            Join the <span className="bg-gradient-to-r from-purple-400 to-orange-400 bg-clip-text text-transparent">Squad</span>
+          </h2>
+        </div>
+        
+        <form onSubmit={handleSubmit} className="flex flex-col gap-5">
+          <div>
+            <label className="block text-xs font-semibold text-slate-400 uppercase tracking-wider mb-2 ml-1">Full Name</label>
+            <input 
+              type="text" 
+              name="name" 
+              placeholder="Saumya" 
+              onChange={handleChange} 
+              className="w-full p-3.5 rounded-xl bg-black/40 border border-white/10 focus:border-purple-500 focus:ring-1 focus:ring-purple-500 outline-none text-white placeholder-slate-600 transition-all" 
+              required 
+            />
+          </div>
+
+          <div>
+            <label className="block text-xs font-semibold text-slate-400 uppercase tracking-wider mb-2 ml-1">Email Address</label>
+            <input 
+              type="email" 
+              name="email" 
+              placeholder="saumya@dev.com" 
+              onChange={handleChange} 
+              className="w-full p-3.5 rounded-xl bg-black/40 border border-white/10 focus:border-purple-500 focus:ring-1 focus:ring-purple-500 outline-none text-white placeholder-slate-600 transition-all" 
+              required 
+            />
+          </div>
+
+          <div>
+            <label className="block text-xs font-semibold text-slate-400 uppercase tracking-wider mb-2 ml-1">Password</label>
+            <input 
+              type="password" 
+              name="password" 
+              placeholder="••••••••" 
+              onChange={handleChange} 
+              className="w-full p-3.5 rounded-xl bg-black/40 border border-white/10 focus:border-purple-500 focus:ring-1 focus:ring-purple-500 outline-none text-white placeholder-slate-600 transition-all" 
+              required 
+            />
+          </div>
+          
+          <button 
+            type="submit" 
+            disabled={isPending} 
+            className={`mt-4 w-full py-3.5 flex items-center justify-center gap-2 rounded-xl font-bold text-base transition-all duration-300 ${
+              isPending 
+                ? 'bg-white/10 text-slate-400 cursor-not-allowed border border-white/5' 
+                : 'bg-gradient-to-r from-purple-600 to-orange-500 text-white shadow-[0_0_20px_rgba(124,58,237,0.3)] hover:-translate-y-0.5 hover:shadow-[0_0_30px_rgba(124,58,237,0.5)]'
+            }`}
+          >
+            {isPending ? (
+              <>
+                {/* Tailwind SVG Spinner */}
+                <svg className="animate-spin -ml-1 mr-2 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                  <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
+                  <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                </svg>
+                Creating Account...
+              </>
+            ) : (
+              <>
+                Sign Up
+                {/* Replaced Rocket Emoji with sleek Lightning Bolt SVG */}
+                <svg width="18" height="18" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2.5">
+                  <path strokeLinecap="round" strokeLinejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z" />
+                </svg>
+              </>
+            )}
+          </button>
+        </form>
+
+        <p className="text-slate-400 mt-8 text-center text-sm">
+          Already have an account? <Link to="/login" className="text-purple-400 font-semibold hover:text-orange-400 transition-colors hover:underline underline-offset-4 decoration-purple-500/30">Login here</Link>
+        </p>
+      </div>
+    </div>
+  )
+}
+
+export default Signup

package/template-mongo/vercel.json

@@ -0,0 +1,13 @@
+{
+  "version": 2,
+  "rewrites": [
+    {
+      "source": "/api/(.*)",
+      "destination": "/server.js"
+    },
+    {
+      "source": "/(.*)",
+      "destination": "/index.html"
+    }
+  ]
+}

package/template-mongo/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()],
+})