create-skateboard-app 1.0.1 → 1.0.3

package/.claude/settings.local.json

@@ -0,0 +1,11 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(git add:*)",
+      "Bash(git commit:*)",
+      "Bash(git push:*)"
+    ],
+    "deny": [],
+    "ask": []
+  }
+}

package/CHANGELOG.md

@@ -1,12 +1,19 @@
 
+1.0.3
+
+  Add database selection
+  Auto-install dependencies
+  Include Stripe setup
+  Fix config formatting
+
+1.0.2
+
+  Clarify prompt labels
+
 1.0.1
-Improve template download speed and simplify setup flow
-Remove unreliable degit method, use git clone as primary
-Add curl+tar as faster fallback method
-Fix skateboard-master folder duplication issue
-Simplify setup by removing backend URL, pages, and company name prompts
-Change npm run dev to npm run start in instructions
-Clarify that users need to manually cd into project directory
-Bump version to 1.0.1
+
+  Improve download speed
+  Simplify setup flow
+  Fix folder duplication
 
 1.0.0

package/bin/cli.js

@@ -187,7 +187,7 @@ async function collectProjectConfig(projectName) {
   log(`\n${colors.bold}Let's configure your Skateboard app!${colors.reset}\n`);
 
   // App name
-  const appName = await ask('App name', projectName.split('-').map(word => 
+  const appName = await ask('App display name', projectName.split('-').map(word => 
     word.charAt(0).toUpperCase() + word.slice(1)
   ).join(' '));
 
@@ -222,6 +222,23 @@ async function collectProjectConfig(projectName) {
   
   const selectedIcon = await askChoice('Choose an app icon:', iconChoices);
 
+  // Database selection
+  const databaseChoices = [
+    { label: '🗃️  SQLite (default)', value: 'sqlite', connectionString: `./databases/${appName.replace(/\s+/g, '')}.db` },
+    { label: '🐘 PostgreSQL', value: 'postgresql', connectionString: 'postgresql://user:password@localhost:5432/dbname' },
+    { label: '🍃 MongoDB', value: 'mongodb', connectionString: 'mongodb://localhost:27017/dbname' }
+  ];
+  
+  const selectedDatabase = await askChoice('Choose your database:', databaseChoices, 0);
+
+  // Get connection string for non-SQLite databases
+  let connectionString = '';
+  if (selectedDatabase.value === 'postgresql') {
+    connectionString = await ask('PostgreSQL connection string (optional)', '');
+  } else if (selectedDatabase.value === 'mongodb') {
+    connectionString = await ask('MongoDB connection string (optional)', '');
+  }
+
   // Default values for removed questions
   const backendURL = 'https://api.example.com';
   const devBackendURL = 'http://localhost:8000';
@@ -232,7 +249,7 @@ async function collectProjectConfig(projectName) {
   ];
 
   // Installation preferences
-  const installDeps = await askYesNo('Install dependencies automatically?', true);
+  const installDeps = true; // Always install dependencies
   const initGit = await askYesNo('Initialize git repository?', true);
 
   return {
@@ -241,6 +258,8 @@ async function collectProjectConfig(projectName) {
     tagline,
     appColor: selectedColor.value,
     appIcon: selectedIcon.value,
+    database: selectedDatabase,
+    connectionString,
     backendURL,
     devBackendURL,
     pages,
@@ -294,7 +313,7 @@ async function main() {
   // If no project name provided, ask for it
   if (!projectName) {
     log(`\n${colors.bold}🛹 Welcome to Skateboard App Creator!${colors.reset}\n`);
-    projectName = await ask('What is the name of your project?', 'my-skateboard-app');
+    projectName = await ask('Project directory name', 'my-skateboard-app');
   }
 
   // Validate project name
@@ -344,7 +363,51 @@ async function main() {
       success('App configuration updated');
     }
 
-    // Step 5: Update app color in styles.css
+    // Step 5: Configure database settings
+    info('Configuring database...');
+    const backendConfigPath = join(projectName, 'backend', 'config.json');
+    if (existsSync(backendConfigPath)) {
+      const backendConfig = JSON.parse(readFileSync(backendConfigPath, 'utf8'));
+      // Handle both array and single object formats defensively
+      const configArray = Array.isArray(backendConfig) ? backendConfig : [backendConfig];
+      
+      configArray.forEach(configObj => {
+        configObj.dbType = config.database.value;
+        if (config.database.value === 'sqlite') {
+          configObj.connectionString = config.database.connectionString;
+        } else if (config.database.value === 'postgresql') {
+          // Always use environment variable placeholder in config.json
+          configObj.connectionString = '${POSTGRES_URL}';
+        } else if (config.database.value === 'mongodb') {
+          // Always use environment variable placeholder in config.json  
+          configObj.connectionString = '${MONGODB_URL}';
+        }
+      });
+      
+      // Write back the original format (array or single object)
+      const finalConfig = Array.isArray(backendConfig) ? configArray : configArray[0];
+      writeFileSync(backendConfigPath, JSON.stringify(finalConfig, null, 2));
+      success(`Database configured: ${config.database.value}`);
+    }
+
+    // Create .env file if connection string provided
+    if (config.connectionString && (config.database.value === 'postgresql' || config.database.value === 'mongodb')) {
+      info('Creating .env file...');
+      const backendDir = join(projectName, 'backend');
+      const envPath = join(backendDir, '.env');
+      
+      // Ensure backend directory exists
+      if (!existsSync(backendDir)) {
+        mkdirSync(backendDir, { recursive: true });
+      }
+      
+      const envVar = config.database.value === 'postgresql' ? 'POSTGRES_URL' : 'MONGODB_URL';
+      const envContent = `${envVar}=${config.connectionString}\n`;
+      writeFileSync(envPath, envContent);
+      success('.env file created with database connection');
+    }
+
+    // Step 6: Update app color in styles.css
     info('Setting app color...');
     const stylesPath = join(projectName, 'src', 'assets', 'styles.css');
     if (existsSync(stylesPath)) {
@@ -358,14 +421,12 @@ async function main() {
       success(`App color set to ${config.appColor}`);
     }
 
-    // Step 6: Install dependencies (if requested)
-    if (config.installDeps) {
-      info('Installing dependencies...');
-      execSync(`cd ${projectName} && npm install`, { stdio: 'inherit' });
-      success('Dependencies installed');
-    }
+    // Step 7: Install dependencies
+    info('Installing dependencies...');
+    execSync(`cd ${projectName} && npm install`, { stdio: 'inherit' });
+    success('Dependencies installed');
 
-    // Step 7: Initialize git (if requested)
+    // Step 8: Initialize git (if requested)
     if (config.initGit) {
       info('Initializing git repository...');
       execSync(`cd ${projectName} && git init`, { stdio: 'pipe' });
@@ -380,12 +441,28 @@ async function main() {
     log(`  💬 Tagline: ${config.tagline}`);
     log(`  🎨 Color: ${config.appColor}`);
     log(`  🎯 Icon: ${config.appIcon}`);
+    log(`  🗃️  Database: ${config.database.value}`);
+    
+    // Database-specific instructions (only if connection string not provided)
+    if (config.database.value === 'postgresql' && !config.connectionString) {
+      log(`\n${colors.yellow}📝 PostgreSQL Setup:${colors.reset}`);
+      log(`  Update the ${colors.cyan}backend/.env${colors.reset} file with:`);
+      log(`  ${colors.green}POSTGRES_URL=postgresql://username:password@localhost:5432/dbname${colors.reset}`);
+    } else if (config.database.value === 'mongodb' && !config.connectionString) {
+      log(`\n${colors.yellow}📝 MongoDB Setup:${colors.reset}`);
+      log(`  Update the ${colors.cyan}backend/.env${colors.reset} file with:`);
+      log(`  ${colors.green}MONGODB_URL=mongodb://localhost:27017/dbname${colors.reset}`);
+    }
+
+    // Stripe setup instructions
+    log(`\n${colors.yellow}💳 Stripe Setup:${colors.reset}`);
+    log(`  Update the ${colors.cyan}backend/.env${colors.reset} file with:`);
+    log(`  ${colors.green}STRIPE_KEY=sk_test_your_stripe_secret_key_here${colors.reset}`);
+    log(`  ${colors.green}STRIPE_ENDPOINT_SECRET=whsec_your_webhook_endpoint_secret_here${colors.reset}`);
+    log(`  Get your keys from: ${colors.blue}https://dashboard.stripe.com/apikeys${colors.reset}`);
     
     log(`\n${colors.bold}Get started with:${colors.reset}`, 'yellow');
     log(`\n  ${colors.cyan}cd ${projectName}${colors.reset}`);
-    if (!config.installDeps) {
-      log(`  ${colors.cyan}npm install${colors.reset}`);
-    }
     log(`  ${colors.cyan}npm run start${colors.reset}`);
     log(`\n${colors.yellow}Happy coding! 🛹${colors.reset}\n`);
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-skateboard-app",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "description": "Create a new Skateboard app with React, TailwindCSS, and more",
   "main": "index.js",
   "type": "module",