create-fs-cli 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,67 @@
+# FullStack CLI
+
+A CLI tool to scaffold full-stack applications with interactive terminal UI.
+
+## Installation
+
+```bash
+npm install -g fullstack-cli
+```
+
+## Usage
+
+```bash
+# Run the CLI
+fullstack
+
+# Or with a project name
+fullstack create my-app
+```
+
+## Features
+
+- 🎨 **Interactive prompts** - Choose your stack step by step
+- ⚡ **Multiple frontends** - Next.js, React + Vite, SvelteKit
+- 🔧 **Multiple backends** - Express, Fastify, FastAPI, or Next.js API Routes
+- 🗄️ **Database ready** - PostgreSQL, MongoDB, MySQL, Supabase
+- 📊 **Backend status indicator** - Visual connection status in your frontend
+
+## Stack Options
+
+### Frontend
+- **Next.js** - React framework with SSR/SSG
+- **React + Vite** - Fast React development
+- **SvelteKit** - Svelte framework
+
+### Backend
+- **Next.js API Routes** - Integrated with Next.js frontend
+- **Express** - Minimalist Node.js framework
+- **Fastify** - Fast Node.js framework
+- **FastAPI** - Modern Python framework
+
+### Database
+- **PostgreSQL** - Relational database
+- **MongoDB** - Document database
+- **MySQL** - Relational database
+- **Supabase** - PostgreSQL with extras
+- **None** - No database setup
+
+## Generated Structure
+
+```
+my-project/
+├── frontend/          # Your chosen frontend framework
+│   └── components/
+│       └── BackendStatus  # Connection status indicator
+├── backend/           # Your chosen backend (if not Next.js API)
+│   ├── config/
+│   │   └── db.js      # Database configuration
+│   ├── routes/
+│   └── .env           # Environment variables
+├── .gitignore
+└── README.md
+```
+
+## License
+
+MIT

package/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "create-fs-cli",
+  "version": "1.0.0",
+  "description": "CLI tool to scaffold full-stack applications with interactive prompts",
+  "main": "src/index.js",
+  "bin": {
+    "create-fs-cli": "./src/index.js"
+  },
+  "type": "module",
+  "scripts": {
+    "start": "node src/index.js",
+    "link": "npm link"
+  },
+  "keywords": [
+    "cli",
+    "fullstack",
+    "scaffold",
+    "generator",
+    "nextjs",
+    "react",
+    "vite",
+    "svelte",
+    "express",
+    "fastify",
+    "fastapi",
+    "boilerplate"
+  ],
+  "author": "HemanthRaj0C",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/HemanthRaj0C/fullstack-cli.git"
+  },
+  "bugs": {
+    "url": "https://github.com/HemanthRaj0C/fullstack-cli/issues"
+  },
+  "homepage": "https://github.com/HemanthRaj0C/fullstack-cli#readme",
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "dependencies": {
+    "boxen": "^7.1.1",
+    "chalk": "^5.3.0",
+    "commander": "^11.1.0",
+    "execa": "^8.0.1",
+    "figlet": "^1.7.0",
+    "fs-extra": "^11.2.0",
+    "inquirer": "^9.2.12",
+    "ora": "^8.0.1"
+  }
+}

package/src/commands/create.js

@@ -0,0 +1,251 @@
+import inquirer from 'inquirer';
+import chalk from 'chalk';
+import ora from 'ora';
+import path from 'path';
+import fs from 'fs-extra';
+import { execa } from 'execa';
+import { generateFrontend } from '../generators/frontend.js';
+import { generateBackend } from '../generators/backend.js';
+import { showSuccessMessage } from '../utils/messages.js';
+
+export async function createProject(projectName) {
+  try {
+    // Build prompts - skip project name if provided via CLI
+    const prompts = [];
+    
+    if (!projectName) {
+      prompts.push({
+        type: 'input',
+        name: 'projectName',
+        message: 'Project name:',
+        default: 'my-fullstack-app',
+        validate: (input) => {
+          if (!/^[a-zA-Z0-9_-]+$/.test(input)) {
+            return 'Project name can only contain letters, numbers, dashes, and underscores (no spaces)';
+          }
+          return true;
+        }
+      });
+    }
+    
+    prompts.push(
+      {
+        type: 'list',
+        name: 'frontend',
+        message: 'Choose frontend framework:',
+        choices: [
+          { name: 'Next.js', value: 'nextjs' },
+          { name: 'React + Vite', value: 'react-vite' },
+          { name: 'Svelte', value: 'svelte' }
+        ]
+      },
+      {
+        type: 'list',
+        name: 'backend',
+        message: 'Choose backend framework:',
+        choices: [
+          { name: 'Next.js API Routes (integrated)', value: 'nextjs-api' },
+          { name: 'Express', value: 'express' },
+          { name: 'Fastify', value: 'fastify' },
+          { name: 'FastAPI (Python)', value: 'fastapi' }
+        ]
+      },
+      {
+        type: 'list',
+        name: 'database',
+        message: 'Choose database:',
+        choices: [
+          { name: 'PostgreSQL', value: 'postgres' },
+          { name: 'MongoDB', value: 'mongodb' },
+          { name: 'MySQL', value: 'mysql' },
+          { name: 'Supabase', value: 'supabase' },
+          { name: 'None', value: 'none' }
+        ]
+      }
+    );
+
+    // Step 1: Gather all information
+    const answers = await inquirer.prompt(prompts);
+    
+    // Use CLI argument if provided, otherwise use prompted value
+    if (projectName) {
+      answers.projectName = projectName;
+    }
+
+    // Validate backend/database combination
+    if (answers.backend === 'fastapi' && answers.database === 'mysql') {
+      console.log(chalk.yellow('\n⚠️  FastAPI template does not support MySQL. Defaulting to PostgreSQL.\n'));
+      answers.database = 'postgres';
+    }
+
+    // Create project directory
+    const projectPath = path.join(process.cwd(), answers.projectName);
+    
+    if (await fs.pathExists(projectPath)) {
+      const { overwrite } = await inquirer.prompt([
+        {
+          type: 'confirm',
+          name: 'overwrite',
+          message: `Directory ${answers.projectName} already exists. Overwrite?`,
+          default: false
+        }
+      ]);
+      
+      if (!overwrite) {
+        console.log(chalk.red('Aborted.'));
+        process.exit(1);
+      }
+      await fs.remove(projectPath);
+    }
+
+    await fs.ensureDir(projectPath);
+    console.log(chalk.green(`\n📁 Created project directory: ${answers.projectName}\n`));
+
+    // Step 2: Generate frontend
+    await generateFrontend(answers, projectPath);
+
+    // Step 3: Generate backend (if not using Next.js API routes)
+    if (answers.backend !== 'nextjs-api') {
+      await generateBackend(answers, projectPath);
+    }
+
+    // Step 4: Clean up and prepare project
+    await cleanupProject(projectPath);
+
+    // Step 5: Create root files
+    await createRootFiles(answers, projectPath);
+
+    // Step 6: Initialize fresh git repository
+    await initializeGit(projectPath);
+
+    // Step 7: Show success message
+    showSuccessMessage(answers);
+
+  } catch (error) {
+    console.error(chalk.red('\n❌ Error:'), error.message);
+    process.exit(1);
+  }
+}
+
+async function createRootFiles(answers, projectPath) {
+  // Create root .gitignore
+  const gitignore = `# Dependencies
+node_modules/
+venv/
+.venv/
+
+# Environment
+.env
+.env.local
+.env.*.local
+
+# Build
+.next/
+dist/
+build/
+__pycache__/
+
+# IDE
+.vscode/
+.idea/
+*.swp
+*.swo
+
+# OS
+.DS_Store
+Thumbs.db
+`;
+
+  await fs.writeFile(path.join(projectPath, '.gitignore'), gitignore);
+
+  // Create root README
+  const readme = `# ${answers.projectName}
+
+Full-stack application generated with FullStack CLI.
+
+## Stack
+- **Frontend**: ${answers.frontend === 'nextjs' ? 'Next.js' : answers.frontend === 'react-vite' ? 'React + Vite' : 'Svelte'}
+- **Backend**: ${answers.backend === 'nextjs-api' ? 'Next.js API Routes' : answers.backend === 'express' ? 'Express' : answers.backend === 'fastify' ? 'Fastify' : 'FastAPI'}
+- **Database**: ${answers.database === 'none' ? 'None' : answers.database.charAt(0).toUpperCase() + answers.database.slice(1)}
+
+## Getting Started
+
+### Install Dependencies
+
+\`\`\`bash
+# Frontend
+cd frontend
+npm install
+
+${answers.backend !== 'nextjs-api' ? `# Backend
+cd ../backend
+${answers.backend === 'fastapi' ? 'pip install -r requirements.txt' : 'npm install'}` : ''}
+\`\`\`
+
+### Configure Environment
+
+${answers.backend !== 'nextjs-api' ? `1. Edit \`backend/.env\` with your database credentials` : ''}
+
+### Start Development
+
+\`\`\`bash
+${answers.backend !== 'nextjs-api' ? `# Terminal 1 - Backend
+cd backend
+${answers.backend === 'fastapi' ? 'uvicorn main:app --reload --port 5000' : 'npm run dev'}
+
+# Terminal 2 - Frontend` : '# Frontend'}
+cd frontend
+npm run dev
+\`\`\`
+
+### URLs
+- Frontend: http://localhost:3000
+${answers.backend !== 'nextjs-api' ? '- Backend: http://localhost:5000' : ''}
+${answers.backend !== 'nextjs-api' ? '- Health Check: http://localhost:5000/api/health' : ''}
+
+## Backend Status Indicator
+
+The frontend includes a visual indicator in the top-right corner showing backend connection status:
+- 🔄 **Checking** - Connecting to backend
+- ✅ **Connected** - Backend is running
+- ❌ **Disconnected** - Backend is not reachable
+`;
+
+  await fs.writeFile(path.join(projectPath, 'README.md'), readme);
+}
+
+async function cleanupProject(projectPath) {
+  const spinner = ora('Cleaning up...').start();
+  
+  try {
+    // Remove .git from frontend (created by create-next-app, create-vite, etc.)
+    const frontendGit = path.join(projectPath, 'frontend', '.git');
+    if (await fs.pathExists(frontendGit)) {
+      await fs.remove(frontendGit);
+    }
+    
+    // Remove .git from backend (already done in backend.js, but just in case)
+    const backendGit = path.join(projectPath, 'backend', '.git');
+    if (await fs.pathExists(backendGit)) {
+      await fs.remove(backendGit);
+    }
+    
+    spinner.succeed('Project cleaned up!');
+  } catch (error) {
+    spinner.warn('Cleanup warning: ' + error.message);
+  }
+}
+
+async function initializeGit(projectPath) {
+  const spinner = ora('Initializing git repository...').start();
+  
+  try {
+    await execa('git', ['init'], { cwd: projectPath });
+    await execa('git', ['add', '.'], { cwd: projectPath });
+    await execa('git', ['commit', '-m', 'Initial commit from FullStack CLI'], { cwd: projectPath });
+    
+    spinner.succeed('Git repository initialized!');
+  } catch (error) {
+    spinner.warn('Git init skipped: ' + error.message);
+  }
+}

package/src/generators/backend.js

@@ -0,0 +1,84 @@
+import { execa } from 'execa';
+import chalk from 'chalk';
+import ora from 'ora';
+import path from 'path';
+import fs from 'fs-extra';
+
+// GitHub template repositories
+const TEMPLATES = {
+  express: 'https://github.com/HemanthRaj0C/express-template',
+  fastify: 'https://github.com/HemanthRaj0C/fastify-template',
+  fastapi: 'https://github.com/HemanthRaj0C/fastapi-template'
+};
+
+// Database to branch mapping
+const DATABASE_BRANCHES = {
+  postgres: 'postgres',
+  mongodb: 'mongodb',
+  mysql: 'mysql',
+  supabase: 'postgres', // Supabase uses PostgreSQL
+  none: 'main'
+};
+
+export async function generateBackend(answers, projectPath) {
+  const { backend, database } = answers;
+  
+  const spinner = ora('Setting up backend...').start();
+
+  try {
+    const templateUrl = TEMPLATES[backend];
+    const branch = DATABASE_BRANCHES[database];
+    const backendPath = path.join(projectPath, 'backend');
+    const isPython = backend === 'fastapi';
+
+    // Clone the template
+    spinner.text = `Cloning ${backend} template (${branch} branch)...`;
+    
+    await execa('git', [
+      'clone',
+      '-b', branch,
+      '--single-branch',
+      '--depth', '1',
+      templateUrl,
+      'backend'
+    ], { cwd: projectPath });
+
+    // Remove .git directory to make it user's own project
+    await fs.remove(path.join(backendPath, '.git'));
+
+    // Copy .env.example to .env
+    const envExample = path.join(backendPath, '.env.example');
+    const envFile = path.join(backendPath, '.env');
+    
+    if (await fs.pathExists(envExample)) {
+      await fs.copy(envExample, envFile);
+    }
+
+    // If using Supabase, add a comment to .env
+    if (database === 'supabase' && await fs.pathExists(envFile)) {
+      let envContent = await fs.readFile(envFile, 'utf-8');
+      envContent = `# Using Supabase - Update DATABASE_URL with your Supabase connection string\n` + envContent;
+      await fs.writeFile(envFile, envContent);
+    }
+
+    // Install dependencies
+    spinner.text = 'Installing backend dependencies...';
+    
+    if (isPython) {
+      // For Python, just show message (user needs venv)
+      spinner.succeed(`Backend (${backend}) ready!`);
+      console.log(chalk.yellow('  ⚠️  Run: cd backend && pip install -r requirements.txt\n'));
+    } else {
+      // For Node.js backends, auto-install
+      await execa('npm', ['install'], { cwd: backendPath });
+      spinner.succeed(`Backend (${backend}) ready! Dependencies installed.`);
+    }
+    
+    console.log(chalk.gray(`  Template: ${templateUrl}`));
+    console.log(chalk.gray(`  Branch: ${branch}\n`));
+
+  } catch (error) {
+    spinner.fail('Backend setup failed');
+    throw new Error(`Failed to setup backend: ${error.message}`);
+  }
+}

package/src/generators/backendStatus.js

@@ -0,0 +1,549 @@
+import path from 'path';
+import fs from 'fs-extra';
+import chalk from 'chalk';
+import ora from 'ora';
+
+export async function injectBackendStatus(frontendPath, framework, isTypeScript, isIntegrated) {
+  const spinner = ora('Adding BackendStatus component...').start();
+
+  try {
+    switch (framework) {
+      case 'nextjs':
+        await injectNextJS(frontendPath, isTypeScript, isIntegrated);
+        break;
+      case 'react-vite':
+        await injectReactVite(frontendPath, isTypeScript);
+        break;
+      case 'svelte':
+        await injectSvelte(frontendPath, isTypeScript);
+        break;
+    }
+    spinner.succeed('BackendStatus component added!');
+  } catch (error) {
+    spinner.warn(`Could not auto-inject BackendStatus: ${error.message}`);
+    console.log(chalk.yellow('  You can manually add the BackendStatus component later.\n'));
+  }
+}
+
+// ============== NEXT.JS ==============
+async function injectNextJS(frontendPath, isTypeScript, isIntegrated) {
+  const ext = isTypeScript ? 'tsx' : 'jsx';
+  
+  // Determine if using App Router or Pages Router
+  const appDir = path.join(frontendPath, 'app');
+  const srcAppDir = path.join(frontendPath, 'src', 'app');
+  
+  let targetDir;
+  if (await fs.pathExists(appDir)) {
+    targetDir = appDir;
+  } else if (await fs.pathExists(srcAppDir)) {
+    targetDir = srcAppDir;
+  } else {
+    throw new Error('Could not find app directory');
+  }
+
+  // Create components directory
+  const componentsDir = path.join(targetDir, 'components');
+  await fs.ensureDir(componentsDir);
+
+  // Backend URL - use relative path for integrated, absolute for separate
+  const backendUrl = isIntegrated ? '/api/health' : 'http://localhost:5000/api/health';
+
+  // Create BackendStatus component
+  const componentCode = getNextJSBackendStatusCode(isTypeScript, backendUrl);
+  await fs.writeFile(
+    path.join(componentsDir, `BackendStatus.${ext}`),
+    componentCode
+  );
+
+  // Try to modify page file
+  const pageFile = await findFile(targetDir, `page.${ext}`);
+  if (pageFile) {
+    await modifyNextJSPage(pageFile, isTypeScript);
+  }
+}
+
+function getNextJSBackendStatusCode(isTypeScript, backendUrl) {
+  if (isTypeScript) {
+    return `'use client'
+import { useEffect, useState } from 'react'
+
+type Status = 'checking' | 'connected' | 'disconnected'
+
+export default function BackendStatus() {
+  const [status, setStatus] = useState<Status>('checking')
+  
+  useEffect(() => {
+    const checkBackend = async () => {
+      try {
+        const res = await fetch('${backendUrl}')
+        setStatus(res.ok ? 'connected' : 'disconnected')
+      } catch {
+        setStatus('disconnected')
+      }
+    }
+    
+    checkBackend()
+    const interval = setInterval(checkBackend, 5000)
+    return () => clearInterval(interval)
+  }, [])
+  
+  const statusConfig = {
+    checking: { dot: '#fbbf24', text: 'Checking...' },
+    connected: { dot: '#22c55e', text: 'Connected' },
+    disconnected: { dot: '#ef4444', text: 'Disconnected' }
+  }
+  
+  const { dot, text } = statusConfig[status]
+  
+  return (
+    <div style={{
+      position: 'fixed',
+      top: '1rem',
+      right: '1rem',
+      backgroundColor: 'rgba(0, 0, 0, 0.8)',
+      backdropFilter: 'blur(8px)',
+      border: '1px solid rgba(255, 255, 255, 0.1)',
+      color: 'rgba(255, 255, 255, 0.9)',
+      padding: '0.5rem 0.875rem',
+      borderRadius: '9999px',
+      display: 'flex',
+      alignItems: 'center',
+      gap: '0.5rem',
+      zIndex: 50,
+      fontFamily: 'system-ui, -apple-system, sans-serif',
+      fontSize: '0.8125rem',
+      fontWeight: 500,
+      letterSpacing: '-0.01em',
+      transition: 'all 0.2s ease'
+    }}>
+      <span style={{
+        width: '8px',
+        height: '8px',
+        borderRadius: '50%',
+        backgroundColor: dot,
+        boxShadow: \`0 0 8px \${dot}\`
+      }} />
+      <span>Backend: {text}</span>
+    </div>
+  )
+}
+`;
+  }
+
+  return `'use client'
+import { useEffect, useState } from 'react'
+
+export default function BackendStatus() {
+  const [status, setStatus] = useState('checking')
+  
+  useEffect(() => {
+    const checkBackend = async () => {
+      try {
+        const res = await fetch('${backendUrl}')
+        setStatus(res.ok ? 'connected' : 'disconnected')
+      } catch {
+        setStatus('disconnected')
+      }
+    }
+    
+    checkBackend()
+    const interval = setInterval(checkBackend, 5000)
+    return () => clearInterval(interval)
+  }, [])
+  
+  const statusConfig = {
+    checking: { dot: '#fbbf24', text: 'Checking...' },
+    connected: { dot: '#22c55e', text: 'Connected' },
+    disconnected: { dot: '#ef4444', text: 'Disconnected' }
+  }
+  
+  const { dot, text } = statusConfig[status]
+  
+  return (
+    <div style={{
+      position: 'fixed',
+      top: '1rem',
+      right: '1rem',
+      backgroundColor: 'rgba(0, 0, 0, 0.8)',
+      backdropFilter: 'blur(8px)',
+      border: '1px solid rgba(255, 255, 255, 0.1)',
+      color: 'rgba(255, 255, 255, 0.9)',
+      padding: '0.5rem 0.875rem',
+      borderRadius: '9999px',
+      display: 'flex',
+      alignItems: 'center',
+      gap: '0.5rem',
+      zIndex: 50,
+      fontFamily: 'system-ui, -apple-system, sans-serif',
+      fontSize: '0.8125rem',
+      fontWeight: 500,
+      letterSpacing: '-0.01em',
+      transition: 'all 0.2s ease'
+    }}>
+      <span style={{
+        width: '8px',
+        height: '8px',
+        borderRadius: '50%',
+        backgroundColor: dot,
+        boxShadow: \`0 0 8px \${dot}\`
+      }} />
+      <span>Backend: {text}</span>
+    </div>
+  )
+}
+`;
+}
+
+async function modifyNextJSPage(pageFile, isTypeScript) {
+  let content = await fs.readFile(pageFile, 'utf-8');
+  
+  // Skip if already has BackendStatus
+  if (content.includes('BackendStatus')) {
+    return;
+  }
+
+  // Add import at the top (after 'use client' if present, or at the very top)
+  const importStatement = `import BackendStatus from './components/BackendStatus'\n`;
+  
+  if (content.includes("'use client'") || content.includes('"use client"')) {
+    content = content.replace(
+      /(['"]use client['"][\s\n]*)/,
+      `$1${importStatement}`
+    );
+  } else {
+    content = importStatement + content;
+  }
+
+  // Try to add component after first opening tag in return
+  // Look for patterns like: return ( <main or return ( <div
+  const returnPattern = /(return\s*\(\s*<[a-zA-Z][^>]*>)/;
+  if (returnPattern.test(content)) {
+    content = content.replace(
+      returnPattern,
+      `$1\n      <BackendStatus />`
+    );
+  }
+
+  await fs.writeFile(pageFile, content);
+}
+
+// ============== REACT + VITE ==============
+async function injectReactVite(frontendPath, isTypeScript) {
+  const ext = isTypeScript ? 'tsx' : 'jsx';
+  
+  // Create components directory
+  const componentsDir = path.join(frontendPath, 'src', 'components');
+  await fs.ensureDir(componentsDir);
+
+  // Create BackendStatus component
+  const componentCode = getReactBackendStatusCode(isTypeScript);
+  await fs.writeFile(
+    path.join(componentsDir, `BackendStatus.${ext}`),
+    componentCode
+  );
+
+  // Try to modify App file
+  const srcDir = path.join(frontendPath, 'src');
+  const appFile = await findFile(srcDir, `App.${ext}`);
+  if (appFile) {
+    await modifyReactApp(appFile);
+  }
+}
+
+function getReactBackendStatusCode(isTypeScript) {
+  if (isTypeScript) {
+    return `import { useEffect, useState } from 'react'
+
+type Status = 'checking' | 'connected' | 'disconnected'
+
+export default function BackendStatus() {
+  const [status, setStatus] = useState<Status>('checking')
+  
+  useEffect(() => {
+    const checkBackend = async () => {
+      try {
+        const res = await fetch('http://localhost:5000/api/health')
+        setStatus(res.ok ? 'connected' : 'disconnected')
+      } catch {
+        setStatus('disconnected')
+      }
+    }
+    
+    checkBackend()
+    const interval = setInterval(checkBackend, 5000)
+    return () => clearInterval(interval)
+  }, [])
+  
+  const statusConfig = {
+    checking: { dot: '#fbbf24', text: 'Checking...' },
+    connected: { dot: '#22c55e', text: 'Connected' },
+    disconnected: { dot: '#ef4444', text: 'Disconnected' }
+  }
+  
+  const { dot, text } = statusConfig[status]
+  
+  return (
+    <div style={{
+      position: 'fixed',
+      top: '1rem',
+      right: '1rem',
+      backgroundColor: 'rgba(0, 0, 0, 0.8)',
+      backdropFilter: 'blur(8px)',
+      border: '1px solid rgba(255, 255, 255, 0.1)',
+      color: 'rgba(255, 255, 255, 0.9)',
+      padding: '0.5rem 0.875rem',
+      borderRadius: '9999px',
+      display: 'flex',
+      alignItems: 'center',
+      gap: '0.5rem',
+      zIndex: 50,
+      fontFamily: 'system-ui, -apple-system, sans-serif',
+      fontSize: '0.8125rem',
+      fontWeight: 500
+    }}>
+      <span style={{
+        width: '8px',
+        height: '8px',
+        borderRadius: '50%',
+        backgroundColor: dot,
+        boxShadow: \`0 0 8px \${dot}\`
+      }} />
+      <span>Backend: {text}</span>
+    </div>
+  )
+}
+`;
+  }
+
+  return `import { useEffect, useState } from 'react'
+
+export default function BackendStatus() {
+  const [status, setStatus] = useState('checking')
+  
+  useEffect(() => {
+    const checkBackend = async () => {
+      try {
+        const res = await fetch('http://localhost:5000/api/health')
+        setStatus(res.ok ? 'connected' : 'disconnected')
+      } catch {
+        setStatus('disconnected')
+      }
+    }
+    
+    checkBackend()
+    const interval = setInterval(checkBackend, 5000)
+    return () => clearInterval(interval)
+  }, [])
+  
+  const statusConfig = {
+    checking: { dot: '#fbbf24', text: 'Checking...' },
+    connected: { dot: '#22c55e', text: 'Connected' },
+    disconnected: { dot: '#ef4444', text: 'Disconnected' }
+  }
+  
+  const { dot, text } = statusConfig[status]
+  
+  return (
+    <div style={{
+      position: 'fixed',
+      top: '1rem',
+      right: '1rem',
+      backgroundColor: 'rgba(0, 0, 0, 0.8)',
+      backdropFilter: 'blur(8px)',
+      border: '1px solid rgba(255, 255, 255, 0.1)',
+      color: 'rgba(255, 255, 255, 0.9)',
+      padding: '0.5rem 0.875rem',
+      borderRadius: '9999px',
+      display: 'flex',
+      alignItems: 'center',
+      gap: '0.5rem',
+      zIndex: 50,
+      fontFamily: 'system-ui, -apple-system, sans-serif',
+      fontSize: '0.8125rem',
+      fontWeight: 500
+    }}>
+      <span style={{
+        width: '8px',
+        height: '8px',
+        borderRadius: '50%',
+        backgroundColor: dot,
+        boxShadow: \`0 0 8px \${dot}\`
+      }} />
+      <span>Backend: {text}</span>
+    </div>
+  )
+}
+`;
+}
+
+async function modifyReactApp(appFile) {
+  let content = await fs.readFile(appFile, 'utf-8');
+  
+  if (content.includes('BackendStatus')) {
+    return;
+  }
+
+  // Add import
+  const importStatement = `import BackendStatus from './components/BackendStatus'\n`;
+  
+  // Find the last import and add after it
+  const importRegex = /^import .+ from .+$/gm;
+  let lastImportIndex = 0;
+  let match;
+  while ((match = importRegex.exec(content)) !== null) {
+    lastImportIndex = match.index + match[0].length;
+  }
+  
+  if (lastImportIndex > 0) {
+    content = content.slice(0, lastImportIndex) + '\n' + importStatement + content.slice(lastImportIndex);
+  } else {
+    content = importStatement + content;
+  }
+
+  // Add component after first tag in return
+  const returnPattern = /(return\s*\(\s*<[a-zA-Z][^>]*>)/;
+  if (returnPattern.test(content)) {
+    content = content.replace(
+      returnPattern,
+      `$1\n      <BackendStatus />`
+    );
+  }
+
+  await fs.writeFile(appFile, content);
+}
+
+// ============== SVELTE ==============
+async function injectSvelte(frontendPath, isTypeScript) {
+  const ext = isTypeScript ? 'ts' : 'js';
+  
+  // Create lib/components directory
+  const componentsDir = path.join(frontendPath, 'src', 'lib', 'components');
+  await fs.ensureDir(componentsDir);
+
+  // Create BackendStatus component
+  const componentCode = getSvelteBackendStatusCode();
+  await fs.writeFile(
+    path.join(componentsDir, 'BackendStatus.svelte'),
+    componentCode
+  );
+
+  // Try to modify +page.svelte
+  const routesDir = path.join(frontendPath, 'src', 'routes');
+  const pageFile = path.join(routesDir, '+page.svelte');
+  
+  if (await fs.pathExists(pageFile)) {
+    await modifySveltePage(pageFile);
+  }
+}
+
+function getSvelteBackendStatusCode() {
+  return `<script>
+  import { onMount, onDestroy } from 'svelte';
+  
+  let status = 'checking';
+  let interval;
+  
+  const statusConfig = {
+    checking: { text: 'Checking', color: '#eab308' },
+    connected: { text: 'Connected', color: '#22c55e' },
+    disconnected: { text: 'Disconnected', color: '#ef4444' }
+  };
+  
+  async function checkBackend() {
+    try {
+      const res = await fetch('http://localhost:5000/api/health');
+      status = res.ok ? 'connected' : 'disconnected';
+    } catch {
+      status = 'disconnected';
+    }
+  }
+  
+  onMount(() => {
+    checkBackend();
+    interval = setInterval(checkBackend, 5000);
+  });
+  
+  onDestroy(() => {
+    if (interval) clearInterval(interval);
+  });
+  
+  $: config = statusConfig[status];
+</script>
+
+<div class="backend-status">
+  <span class="dot" style="background-color: {config.color}; box-shadow: 0 0 8px {config.color};"></span>
+  <span class="text">Backend: {config.text}</span>
+</div>
+
+<style>
+  .backend-status {
+    position: fixed;
+    top: 1rem;
+    right: 1rem;
+    background: rgba(0, 0, 0, 0.8);
+    backdrop-filter: blur(8px);
+    -webkit-backdrop-filter: blur(8px);
+    color: rgba(255, 255, 255, 0.9);
+    padding: 0.5rem 0.875rem;
+    border-radius: 9999px;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.3);
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    z-index: 50;
+    font-family: system-ui, -apple-system, sans-serif;
+    font-size: 0.75rem;
+  }
+  
+  .dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+  }
+  
+  .text {
+    font-weight: 500;
+  }
+</style>
+`;
+}
+
+async function modifySveltePage(pageFile) {
+  let content = await fs.readFile(pageFile, 'utf-8');
+  
+  if (content.includes('BackendStatus')) {
+    return;
+  }
+
+  // Check if there's a script tag
+  if (content.includes('<script')) {
+    // Add import inside existing script
+    content = content.replace(
+      /<script([^>]*)>/,
+      `<script$1>\n  import BackendStatus from '$lib/components/BackendStatus.svelte';`
+    );
+  } else {
+    // Add script tag at the top
+    content = `<script>\n  import BackendStatus from '$lib/components/BackendStatus.svelte';\n</script>\n\n` + content;
+  }
+
+  // Add component at the end
+  content = content + '\n\n<BackendStatus />\n';
+
+  await fs.writeFile(pageFile, content);
+}
+
+// ============== HELPERS ==============
+async function findFile(dir, filename) {
+  try {
+    const files = await fs.readdir(dir);
+    if (files.includes(filename)) {
+      return path.join(dir, filename);
+    }
+    return null;
+  } catch {
+    return null;
+  }
+}

package/src/generators/frontend.js

@@ -0,0 +1,99 @@
+import { execa } from 'execa';
+import chalk from 'chalk';
+import ora from 'ora';
+import path from 'path';
+import fs from 'fs-extra';
+import { injectBackendStatus } from './backendStatus.js';
+
+export async function generateFrontend(answers, projectPath) {
+  const { frontend } = answers;
+
+  console.log(chalk.cyan('\n🎨 Setting up frontend...\n'));
+
+  switch (frontend) {
+    case 'nextjs':
+      await generateNextJS(answers, projectPath);
+      break;
+    case 'react-vite':
+      await generateReactVite(answers, projectPath);
+      break;
+    case 'svelte':
+      await generateSvelte(answers, projectPath);
+      break;
+  }
+}
+
+async function generateNextJS(answers, projectPath) {
+  console.log(chalk.yellow('📦 Running create-next-app (follow the prompts)...\n'));
+  
+  try {
+    // Run Next.js CLI interactively
+    await execa('npx', ['create-next-app@latest', 'frontend'], {
+      cwd: projectPath,
+      stdio: 'inherit'
+    });
+
+    console.log(chalk.green('\n✅ Next.js project created!\n'));
+
+    // Detect if TypeScript was chosen
+    const frontendPath = path.join(projectPath, 'frontend');
+    const packageJson = await fs.readJSON(path.join(frontendPath, 'package.json'));
+    const isTypeScript = !!packageJson.devDependencies?.typescript;
+
+    // Inject BackendStatus component
+    await injectBackendStatus(frontendPath, 'nextjs', isTypeScript, answers.backend === 'nextjs-api');
+
+  } catch (error) {
+    throw new Error(`Next.js setup failed: ${error.message}`);
+  }
+}
+
+async function generateReactVite(answers, projectPath) {
+  console.log(chalk.yellow('📦 Running create-vite (follow the prompts)...\n'));
+  
+  try {
+    // Run Vite CLI interactively
+    await execa('npm', ['create', 'vite@latest', 'frontend'], {
+      cwd: projectPath,
+      stdio: 'inherit'
+    });
+
+    console.log(chalk.green('\n✅ React + Vite project created!\n'));
+
+    // Detect if TypeScript was chosen
+    const frontendPath = path.join(projectPath, 'frontend');
+    const files = await fs.readdir(frontendPath);
+    const isTypeScript = files.some(f => f.endsWith('.ts') || f.endsWith('.tsx'));
+
+    // Inject BackendStatus component
+    await injectBackendStatus(frontendPath, 'react-vite', isTypeScript, false);
+
+  } catch (error) {
+    throw new Error(`Vite setup failed: ${error.message}`);
+  }
+}
+
+async function generateSvelte(answers, projectPath) {
+  console.log(chalk.yellow('📦 Running create-svelte (follow the prompts)...\n'));
+  
+  try {
+    // Run SvelteKit CLI interactively
+    await execa('npm', ['create', 'svelte@latest', 'frontend'], {
+      cwd: projectPath,
+      stdio: 'inherit'
+    });
+
+    console.log(chalk.green('\n✅ SvelteKit project created!\n'));
+
+    // Detect if TypeScript was chosen
+    const frontendPath = path.join(projectPath, 'frontend');
+    const files = await fs.readdir(frontendPath);
+    const isTypeScript = files.includes('tsconfig.json');
+
+    // Inject BackendStatus component
+    await injectBackendStatus(frontendPath, 'svelte', isTypeScript, false);
+
+  } catch (error) {
+    throw new Error(`SvelteKit setup failed: ${error.message}`);
+  }
+}

package/src/index.js

@@ -0,0 +1,34 @@
+#!/usr/bin/env node
+
+import { Command } from 'commander';
+import chalk from 'chalk';
+import figlet from 'figlet';
+import { createProject } from './commands/create.js';
+
+const program = new Command();
+
+// Display banner
+console.log(
+  chalk.cyan(
+    figlet.textSync('FSCLI', { font: 'ANSI Shadow' })
+  )
+);
+console.log(chalk.gray('  Full-Stack CLI - Scaffold applications with ease\n'));
+
+program
+  .name('create-fs-cli')
+  .description('CLI to scaffold full-stack applications')
+  .version('1.0.0');
+
+program
+  .command('create')
+  .description('Create a new full-stack project')
+  .argument('[project-name]', 'Name of the project')
+  .action(createProject);
+
+// Default to create command if no command specified
+if (process.argv.length === 2) {
+  createProject();
+} else {
+  program.parse();
+}

package/src/utils/messages.js

@@ -0,0 +1,77 @@
+import boxen from 'boxen';
+import chalk from 'chalk';
+
+export function showSuccessMessage(answers) {
+  const { projectName, frontend, backend, database } = answers;
+  
+  const frontendName = frontend === 'nextjs' ? 'Next.js' : 
+                       frontend === 'react-vite' ? 'React + Vite' : 'SvelteKit';
+  
+  const backendName = backend === 'nextjs-api' ? 'Next.js API Routes' :
+                      backend === 'express' ? 'Express' :
+                      backend === 'fastify' ? 'Fastify' : 'FastAPI';
+  
+  const dbName = database === 'none' ? 'None' : 
+                 database.charAt(0).toUpperCase() + database.slice(1);
+
+  const hasBackend = backend !== 'nextjs-api';
+  const isPython = backend === 'fastapi';
+
+  let message = chalk.green.bold('✅ Project created successfully!') + '\n\n';
+  
+  message += chalk.white('📦 Stack:\n');
+  message += chalk.gray(`   Frontend: ${frontendName}\n`);
+  message += chalk.gray(`   Backend:  ${backendName}\n`);
+  message += chalk.gray(`   Database: ${dbName}\n\n`);
+
+  if (hasBackend && database !== 'none') {
+    message += chalk.yellow('⚙️  Configure database:\n');
+    message += chalk.white(`   Edit ${chalk.cyan('backend/.env')} with your credentials\n\n`);
+  }
+
+  message += chalk.yellow('📦 Install dependencies:\n');
+  message += chalk.white(`   cd ${projectName}\n`);
+  message += chalk.white(`   cd frontend && npm install\n`);
+  
+  if (hasBackend) {
+    if (isPython) {
+      message += chalk.white(`   cd ../backend && pip install -r requirements.txt\n\n`);
+    } else {
+      message += chalk.white(`   cd ../backend && npm install\n\n`);
+    }
+  } else {
+    message += '\n';
+  }
+
+  message += chalk.yellow('🚀 Start development:\n');
+  
+  if (hasBackend) {
+    message += chalk.gray('   # Terminal 1 - Backend:\n');
+    message += chalk.white(`   cd backend && ${isPython ? 'uvicorn main:app --reload --port 5000' : 'npm run dev'}\n\n`);
+    message += chalk.gray('   # Terminal 2 - Frontend:\n');
+  }
+  
+  message += chalk.white(`   cd frontend && npm run dev\n\n`);
+
+  message += chalk.cyan('🌐 URLs:\n');
+  message += chalk.white('   Frontend: http://localhost:3000\n');
+  
+  if (hasBackend) {
+    message += chalk.white('   Backend:  http://localhost:5000\n');
+    message += chalk.white('   Health:   http://localhost:5000/api/health\n\n');
+  } else {
+    message += '\n';
+  }
+
+  message += chalk.magenta('👁️  Backend Status Indicator:\n');
+  message += chalk.gray('   Look for the status badge in the top-right corner!');
+
+  console.log(
+    boxen(message, {
+      padding: 1,
+      margin: 1,
+      borderStyle: 'round',
+      borderColor: 'cyan'
+    })
+  );
+}