create-workerstack 0.1.2 → 0.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-workerstack",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "Scaffold a full-stack Cloudflare Workers app with Hono, React, MUI, Better Auth, and Drizzle",
   "type": "module",
   "bin": {

package/template/package.json

@@ -25,6 +25,7 @@
     "postgres": "^3.4.8",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
+    "react-router": "^7.6.2",
     "resend": "^6.9.4"
   },
   "devDependencies": {

package/template/src/client/App.tsx

@@ -1,314 +1,32 @@
-import {
-  ThemeProvider,
-  createTheme,
-  CssBaseline,
-  Container,
-  Typography,
-  Box,
-  Card,
-  CardContent,
-  Chip,
-  Stack,
-  Grid,
-} from '@mui/material';
-
-const darkTheme = createTheme({
-  palette: {
-    mode: 'dark',
-    background: { default: '#0A0A0F', paper: '#12121A' },
-    text: { primary: '#F1F5F9', secondary: '#94A3B8' },
-    primary: { main: '#7C3AED' },
-  },
-  typography: {
-    fontFamily: "'Plus Jakarta Sans', sans-serif",
-    h1: { fontFamily: "'Sora', sans-serif" },
-    h2: { fontFamily: "'Sora', sans-serif" },
-  },
-  shape: { borderRadius: 12 },
-});
-
-const stackItems = [
-  {
-    name: 'Cloudflare Workers',
-    description: 'Edge-first serverless runtime. Your code runs in 300+ locations worldwide.',
-    icon: '\u2601\uFE0F',
-    url: 'https://developers.cloudflare.com/workers/',
-  },
-  {
-    name: 'Hono',
-    description: 'Ultrafast web framework built for the edge. Handles routing, middleware, and more.',
-    icon: '\uD83D\uDD25',
-    url: 'https://hono.dev/',
-  },
-  {
-    name: 'React 19',
-    description: 'The library for building user interfaces. Server and client rendering ready.',
-    icon: '\u269B\uFE0F',
-    url: 'https://react.dev/',
-  },
-  {
-    name: 'MUI Material',
-    description: 'Production-grade React component library with a comprehensive design system.',
-    icon: '\uD83C\uDFA8',
-    url: 'https://mui.com/',
-  },
-  {
-    name: 'Better Auth',
-    description: 'Authentication for modern apps. Email/password, OAuth, sessions, and admin.',
-    icon: '\uD83D\uDD10',
-    url: 'https://www.better-auth.com/',
-  },
-  {
-    name: 'Drizzle ORM',
-    description: 'Type-safe SQL ORM with zero dependencies. Migrations and schema management built-in.',
-    icon: '\uD83D\uDDC4\uFE0F',
-    url: 'https://orm.drizzle.team/',
-  },
-];
-
-const quickStartSteps = [
-  { cmd: 'src/client/App.tsx', desc: 'Edit this file to start building your UI' },
-  { cmd: 'src/api/index.ts', desc: 'Add your API routes here' },
-  { cmd: 'bun run dev', desc: 'Start the development server' },
-  { cmd: 'bun run deploy', desc: 'Deploy to Cloudflare Workers' },
-];
+import { BrowserRouter, Routes, Route } from 'react-router';
+import { ThemeProvider, CssBaseline } from '@mui/material';
+import theme from './theme';
+import { ProtectedRoute } from './components/ProtectedRoute';
+import HomePage from './pages/HomePage';
+import LoginPage from './pages/LoginPage';
+import RegisterPage from './pages/RegisterPage';
+import ForgotPasswordPage from './pages/ForgotPasswordPage';
+import ResetPasswordPage from './pages/ResetPasswordPage';
+import ChangePasswordPage from './pages/ChangePasswordPage';
+import DashboardPage from './pages/DashboardPage';
+import NotFoundPage from './pages/NotFoundPage';
 
 function App() {
   return (
-    <ThemeProvider theme={darkTheme}>
-      <CssBaseline />
-      <Box
-        sx={{
-          minHeight: '100vh',
-          position: 'relative',
-          overflow: 'hidden',
-        }}
-      >
-        {/* Background glow */}
-        <Box
-          sx={{
-            position: 'absolute',
-            top: '-20%',
-            left: '50%',
-            transform: 'translateX(-50%)',
-            width: '600px',
-            height: '600px',
-            borderRadius: '50%',
-            background: 'radial-gradient(circle, rgba(124,58,237,0.15) 0%, transparent 70%)',
-            filter: 'blur(80px)',
-            pointerEvents: 'none',
-            animation: 'pulse 6s ease-in-out infinite',
-          }}
-        />
-
-        <Container maxWidth="md" sx={{ position: 'relative', py: 8 }}>
-          {/* Hero */}
-          <Box
-            sx={{
-              textAlign: 'center',
-              mb: 8,
-              animation: 'fadeInUp 0.8s ease-out',
-            }}
-          >
-            <Typography
-              variant="h1"
-              sx={{
-                fontSize: { xs: '2.5rem', md: '4rem' },
-                fontWeight: 800,
-                background: 'linear-gradient(135deg, #7C3AED 0%, #A78BFA 50%, #C4B5FD 100%)',
-                backgroundClip: 'text',
-                WebkitBackgroundClip: 'text',
-                WebkitTextFillColor: 'transparent',
-                mb: 2,
-                letterSpacing: '-0.02em',
-              }}
-            >
-              WorkerStack
-            </Typography>
-            <Typography
-              variant="h5"
-              sx={{
-                color: 'text.secondary',
-                fontWeight: 400,
-                maxWidth: '500px',
-                mx: 'auto',
-                lineHeight: 1.6,
-              }}
-            >
-              Full-stack Cloudflare Workers starter with everything you need to ship fast.
-            </Typography>
-          </Box>
-
-          {/* Stack Grid */}
-          <Box sx={{ mb: 8 }}>
-            <Grid container spacing={2}>
-              {stackItems.map((item) => (
-                <Grid size={{ xs: 12, sm: 6 }} key={item.name}>
-                  <Card
-                    component="a"
-                    href={item.url}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    sx={{
-                      height: '100%',
-                      display: 'flex',
-                      bgcolor: 'background.paper',
-                      border: '1px solid',
-                      borderColor: 'rgba(124,58,237,0.15)',
-                      textDecoration: 'none',
-                      transition: 'all 0.2s ease',
-                      '&:hover': {
-                        borderColor: 'primary.main',
-                        transform: 'translateY(-2px)',
-                        boxShadow: '0 8px 30px rgba(124,58,237,0.15)',
-                      },
-                    }}
-                  >
-                    <CardContent sx={{ p: 3 }}>
-                      <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5, mb: 1 }}>
-                        <Typography sx={{ fontSize: '1.5rem' }}>{item.icon}</Typography>
-                        <Typography variant="h6" sx={{ fontWeight: 700, color: 'text.primary' }}>
-                          {item.name}
-                        </Typography>
-                      </Box>
-                      <Typography variant="body2" sx={{ color: 'text.secondary', lineHeight: 1.6 }}>
-                        {item.description}
-                      </Typography>
-                    </CardContent>
-                  </Card>
-                </Grid>
-              ))}
-            </Grid>
-          </Box>
-
-          {/* Quick Start */}
-          <Box
-            sx={{
-              mb: 8,
-              animation: 'fadeInUp 0.8s ease-out 0.2s both',
-            }}
-          >
-            <Typography
-              variant="h5"
-              sx={{
-                fontWeight: 700,
-                mb: 3,
-                textAlign: 'center',
-                fontFamily: "'Sora', sans-serif",
-              }}
-            >
-              Get started
-            </Typography>
-            <Box
-              sx={{
-                bgcolor: '#0D0D14',
-                border: '1px solid rgba(124,58,237,0.2)',
-                borderRadius: 2,
-                overflow: 'hidden',
-              }}
-            >
-              {/* Terminal header */}
-              <Box
-                sx={{
-                  px: 2,
-                  py: 1.5,
-                  borderBottom: '1px solid rgba(255,255,255,0.06)',
-                  display: 'flex',
-                  gap: 1,
-                }}
-              >
-                <Box sx={{ width: 12, height: 12, borderRadius: '50%', bgcolor: '#FF5F57' }} />
-                <Box sx={{ width: 12, height: 12, borderRadius: '50%', bgcolor: '#FFBD2E' }} />
-                <Box sx={{ width: 12, height: 12, borderRadius: '50%', bgcolor: '#28C840' }} />
-              </Box>
-              {/* Terminal content */}
-              <Box sx={{ p: 3 }}>
-                {quickStartSteps.map((step, i) => (
-                  <Box key={i} sx={{ mb: i < quickStartSteps.length - 1 ? 2 : 0 }}>
-                    <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
-                      <Typography
-                        component="span"
-                        sx={{ color: '#7C3AED', fontFamily: 'monospace', fontWeight: 700 }}
-                      >
-                        {'\u276F'}
-                      </Typography>
-                      <Typography
-                        component="span"
-                        sx={{ color: '#C4B5FD', fontFamily: 'monospace', fontSize: '0.95rem' }}
-                      >
-                        {step.cmd}
-                      </Typography>
-                    </Box>
-                    <Typography
-                      sx={{
-                        color: 'text.secondary',
-                        fontSize: '0.85rem',
-                        pl: 3,
-                        mt: 0.3,
-                      }}
-                    >
-                      {step.desc}
-                    </Typography>
-                  </Box>
-                ))}
-              </Box>
-            </Box>
-          </Box>
-
-          {/* Doc Links */}
-          <Box sx={{ textAlign: 'center', mb: 6 }}>
-            <Stack
-              direction="row"
-              spacing={1}
-              flexWrap="wrap"
-              justifyContent="center"
-              useFlexGap
-              sx={{ gap: 1 }}
-            >
-              {stackItems.map((item) => (
-                <Chip
-                  key={item.name}
-                  label={item.name}
-                  component="a"
-                  href={item.url}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  clickable
-                  sx={{
-                    bgcolor: 'rgba(124,58,237,0.1)',
-                    border: '1px solid rgba(124,58,237,0.2)',
-                    color: '#C4B5FD',
-                    fontWeight: 500,
-                    '&:hover': {
-                      bgcolor: 'rgba(124,58,237,0.2)',
-                    },
-                  }}
-                />
-              ))}
-            </Stack>
-          </Box>
-
-          {/* Footer */}
-          <Box sx={{ textAlign: 'center', pb: 4 }}>
-            <Typography variant="body2" sx={{ color: 'text.secondary' }}>
-              Built with{' '}
-              <Typography
-                component="span"
-                variant="body2"
-                sx={{
-                  background: 'linear-gradient(135deg, #7C3AED, #A78BFA)',
-                  backgroundClip: 'text',
-                  WebkitBackgroundClip: 'text',
-                  WebkitTextFillColor: 'transparent',
-                  fontWeight: 600,
-                }}
-              >
-                WorkerStack
-              </Typography>
-            </Typography>
-          </Box>
-        </Container>
-      </Box>
+    <ThemeProvider theme={theme} noSsr>
+      <CssBaseline enableColorScheme />
+      <BrowserRouter>
+        <Routes>
+          <Route path="/" element={<HomePage />} />
+          <Route path="/login" element={<LoginPage />} />
+          <Route path="/register" element={<RegisterPage />} />
+          <Route path="/forgot-password" element={<ForgotPasswordPage />} />
+          <Route path="/reset-password" element={<ResetPasswordPage />} />
+          <Route path="/dashboard" element={<ProtectedRoute><DashboardPage /></ProtectedRoute>} />
+          <Route path="/change-password" element={<ProtectedRoute><ChangePasswordPage /></ProtectedRoute>} />
+          <Route path="*" element={<NotFoundPage />} />
+        </Routes>
+      </BrowserRouter>
     </ThemeProvider>
   );
 }

package/template/src/client/components/AppNavbar.tsx

@@ -0,0 +1,100 @@
+import { AppBar, Toolbar, Typography, Button, Box } from '@mui/material';
+import { Link, useNavigate } from 'react-router';
+import { useSession, signOut } from '@/client/lib/auth-client';
+import { ThemeToggle } from './ThemeToggle';
+
+export function AppNavbar() {
+  const { data: session } = useSession();
+  const navigate = useNavigate();
+
+  const handleSignOut = async () => {
+    await signOut({
+      fetchOptions: {
+        onSuccess: () => navigate('/'),
+      },
+    });
+  };
+
+  return (
+    <AppBar
+      position="static"
+      elevation={0}
+      sx={{
+        bgcolor: 'transparent',
+        borderBottom: '1px solid',
+        borderColor: 'rgba(124,58,237,0.1)',
+      }}
+    >
+      <Toolbar sx={{ justifyContent: 'space-between' }}>
+        <Typography
+          component={Link}
+          to="/"
+          sx={{
+            fontWeight: 800,
+            fontFamily: "'Sora', sans-serif",
+            fontSize: '1.25rem',
+            background: 'linear-gradient(135deg, #7C3AED 0%, #A78BFA 100%)',
+            backgroundClip: 'text',
+            WebkitBackgroundClip: 'text',
+            WebkitTextFillColor: 'transparent',
+            textDecoration: 'none',
+          }}
+        >
+          WorkerStack
+        </Typography>
+
+        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+          <ThemeToggle />
+
+          {session ? (
+            <>
+              <Button
+                component={Link}
+                to="/dashboard"
+                size="small"
+                sx={{ color: 'text.primary' }}
+              >
+                Dashboard
+              </Button>
+              <Button
+                onClick={handleSignOut}
+                size="small"
+                variant="outlined"
+                sx={{
+                  borderColor: 'rgba(124,58,237,0.3)',
+                  color: 'text.primary',
+                  '&:hover': { borderColor: 'primary.main' },
+                }}
+              >
+                Sign Out
+              </Button>
+            </>
+          ) : (
+            <>
+              <Button
+                component={Link}
+                to="/login"
+                size="small"
+                sx={{ color: 'text.primary' }}
+              >
+                Login
+              </Button>
+              <Button
+                component={Link}
+                to="/register"
+                size="small"
+                variant="contained"
+                sx={{
+                  bgcolor: 'primary.main',
+                  '&:hover': { bgcolor: '#6D28D9' },
+                }}
+              >
+                Register
+              </Button>
+            </>
+          )}
+        </Box>
+      </Toolbar>
+    </AppBar>
+  );
+}

package/template/src/client/components/AuthLayout.tsx

@@ -0,0 +1,111 @@
+import { Box, Card, CardContent, Typography } from '@mui/material';
+import { Link } from 'react-router';
+import { ThemeToggle } from './ThemeToggle';
+
+interface AuthLayoutProps {
+  title: string;
+  subtitle?: string;
+  children: React.ReactNode;
+  footer?: React.ReactNode;
+}
+
+export function AuthLayout({ title, subtitle, children, footer }: AuthLayoutProps) {
+  return (
+    <Box
+      sx={{
+        minHeight: '100vh',
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+        position: 'relative',
+        overflow: 'hidden',
+        px: 2,
+      }}
+    >
+      {/* Background glow */}
+      <Box
+        sx={{
+          position: 'absolute',
+          top: '-20%',
+          left: '50%',
+          transform: 'translateX(-50%)',
+          width: '600px',
+          height: '600px',
+          borderRadius: '50%',
+          background: 'radial-gradient(circle, rgba(124,58,237,0.15) 0%, transparent 70%)',
+          filter: 'blur(80px)',
+          pointerEvents: 'none',
+          animation: 'pulse 6s ease-in-out infinite',
+        }}
+      />
+
+      {/* Theme toggle */}
+      <Box sx={{ position: 'absolute', top: 16, right: 16 }}>
+        <ThemeToggle />
+      </Box>
+
+      {/* Brand */}
+      <Typography
+        component={Link}
+        to="/"
+        sx={{
+          fontSize: '1.5rem',
+          fontWeight: 800,
+          fontFamily: "'Sora', sans-serif",
+          background: 'linear-gradient(135deg, #7C3AED 0%, #A78BFA 50%, #C4B5FD 100%)',
+          backgroundClip: 'text',
+          WebkitBackgroundClip: 'text',
+          WebkitTextFillColor: 'transparent',
+          textDecoration: 'none',
+          mb: 4,
+        }}
+      >
+        WorkerStack
+      </Typography>
+
+      <Card
+        sx={{
+          width: '100%',
+          maxWidth: 440,
+          bgcolor: 'background.paper',
+          border: '1px solid',
+          borderColor: 'rgba(124,58,237,0.15)',
+          position: 'relative',
+          animation: 'fadeInUp 0.6s ease-out',
+        }}
+      >
+        <CardContent sx={{ p: 4 }}>
+          <Typography
+            variant="h5"
+            sx={{
+              fontWeight: 700,
+              fontFamily: "'Sora', sans-serif",
+              mb: subtitle ? 1 : 3,
+              textAlign: 'center',
+            }}
+          >
+            {title}
+          </Typography>
+
+          {subtitle && (
+            <Typography
+              variant="body2"
+              sx={{ color: 'text.secondary', mb: 3, textAlign: 'center' }}
+            >
+              {subtitle}
+            </Typography>
+          )}
+
+          {children}
+        </CardContent>
+      </Card>
+
+      {footer && (
+        <Box sx={{ mt: 2, textAlign: 'center', animation: 'fadeInUp 0.6s ease-out 0.1s both' }}>
+          {footer}
+        </Box>
+      )}
+    </Box>
+  );
+}

package/template/src/client/components/ProtectedRoute.tsx

@@ -0,0 +1,22 @@
+import { useSession } from '@/client/lib/auth-client';
+import { Navigate, useLocation } from 'react-router';
+import { CircularProgress, Box } from '@mui/material';
+
+export function ProtectedRoute({ children }: { children: React.ReactNode }) {
+  const { data: session, isPending } = useSession();
+  const location = useLocation();
+
+  if (isPending) {
+    return (
+      <Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', minHeight: '100vh' }}>
+        <CircularProgress sx={{ color: 'primary.main' }} />
+      </Box>
+    );
+  }
+
+  if (!session) {
+    return <Navigate to="/login" state={{ from: location.pathname }} replace />;
+  }
+
+  return <>{children}</>;
+}

package/template/src/client/components/ThemeToggle.tsx

@@ -0,0 +1,30 @@
+import { useColorScheme } from '@mui/material/styles';
+import { IconButton, Tooltip } from '@mui/material';
+
+export function ThemeToggle() {
+  const { mode, setMode } = useColorScheme();
+
+  if (!mode) return null;
+
+  const isDark = mode === 'dark';
+
+  return (
+    <Tooltip title={isDark ? 'Switch to light mode' : 'Switch to dark mode'}>
+      <IconButton
+        onClick={() => setMode(isDark ? 'light' : 'dark')}
+        sx={{ color: 'text.primary' }}
+      >
+        {isDark ? (
+          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+            <circle cx="12" cy="12" r="5" />
+            <path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42" />
+          </svg>
+        ) : (
+          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+            <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
+          </svg>
+        )}
+      </IconButton>
+    </Tooltip>
+  );
+}

package/template/src/client/lib/auth-client.ts

@@ -0,0 +1,17 @@
+import { createAuthClient } from "better-auth/react"
+import { adminClient } from "better-auth/client/plugins"
+
+export const authClient = createAuthClient({
+  plugins: [
+    adminClient(),
+  ],
+})
+
+export const {
+  useSession,
+  signIn,
+  signUp,
+  signOut,
+} = authClient
+
+export { authClient }