Merge pull request #23 from JC-Coder/dev

Dev

.gitignore

@@ -1,6 +1,9 @@
 node_modules/
+<<<<<<< HEAD
+=======
 .idea/
 .DS_Store
+>>>>>>> master
 dist
 .env
 .idea

README.md

@@ -44,7 +44,7 @@ That's it! StartEase simplifies project setup so you can focus on your developme
 The following project templates are available:
 
 - **Frontend**:
-    - [ ] React App
+    - [x] React App (Javascript / TypeScript)
     - [ ] Vue.js App
     - [ ] Angular App
     - [ ] HTML/CSS/JavaScript Template
@@ -180,6 +180,8 @@ When you're ready to submit your changes:
 
 We'll review your pull request as soon as possible.
 
+Note: Pull requests are to be made against the dev branch.
+
 ## License
 
 By contributing to StartEase, you agree that your contributions will be licensed under the [MIT License](LICENSE.md).

cli.js

@@ -1,90 +1,91 @@
 #!/usr/bin/env node
 
-import figlet from 'figlet';
-import { program } from 'commander';
-import chalk from 'chalk';
-import useGradient from './src/utils/useGradient.js';
-import { createBackendProject } from './src/utils/create-backend-project.js';
+import figlet from "figlet"
+import { program } from "commander"
+import chalk from "chalk"
+import useGradient from "./src/utils/useGradient.js"
+import { createBackendProject } from "./src/utils/create-backend-project.js"
 import {
   promptBackendFramework,
   promptDatabase,
   promptFrontendFramework,
+  promptFrontendLanguage,
   promptInitDatabase,
   promptOrm,
   promptProjectName,
-  promptProjectStack
-} from './src/utils/prompts.js';
+  promptProjectStack,
+} from "./src/utils/prompts.js"
+import { createFrontendProject } from "./src/utils/create-frontend-project.js"
 
+const toolName = "StartEase"
+const jsBackendStacks = ["expressjs", "nestjs"]
 
-const toolName = "StartEase";
-const jsBackendStacks = ["expressjs", "nestjs"];
-
-
-program.version('1.0.0').description('StartEase CLI');
+program.version("1.0.0").description("StartEase CLI")
 
 program
-  .description('Scaffold a new project with StartEase')
+  .description("Scaffold a new project with StartEase")
   .action(async () => {
-    await startProject();
-  });
+    await startProject()
+  })
 
-program.parse(process.argv);
+program.parse(process.argv)
 
 async function startProject() {
-
-    let framework;
-    let projectName;
-    let projectStack;
-    let initDB;
-    let database;
-    let orm;
-
-    const initialMsg = `Simplify Project Setup with the. ${chalk.green(
-        toolName
-    )} CLI Tool.`;
-
-    // render cli title
-    renderTitle();
-    console.log(chalk.white(initialMsg));
-
-    projectName = await promptProjectName();
-    projectStack = await promptProjectStack();
-
-    /**
-     * start prompts
-     */
-    if (projectStack === 'frontend') {
-        console.log(`Ops, 🚀 Frontend support is coming soon! 🎉`);
-    } else if (projectStack === 'backend') {
-        framework = await promptBackendFramework();
-
-        initDB = await promptInitDatabase();
-
-        if (initDB) {
-            database = await promptDatabase(framework);
-
-            if (jsBackendStacks.includes(framework)) {
-                orm = await promptOrm(database);
-            }
-        }
-
-        await createBackendProject(projectName, framework, database, orm);
-      }
+  let framework
+  let projectName
+  let projectStack
+  let initDB
+  let database
+  let orm
+  let language
+
+  const initialMsg = `Simplify Project Setup with the. ${chalk.green(
+    toolName
+  )} CLI Tool.`
+
+  // render cli title
+  renderTitle()
+  console.log(chalk.white(initialMsg))
+
+  projectName = await promptProjectName()
+  projectStack = await promptProjectStack()
+
+  /**
+   * start prompts
+   */
+  if (projectStack === "frontend") {
+    framework = await promptFrontendFramework()
+    language = await promptFrontendLanguage()
+
+    await createFrontendProject(projectName, framework, language)
+  } else if (projectStack === "backend") {
+    framework = await promptBackendFramework()
+
+    initDB = await promptInitDatabase()
+
+    if (initDB) {
+      database = await promptDatabase()
+
+      orm = await promptOrm(database)
+    }
+
+    await createBackendProject(projectName, framework, database, orm)
+  }
 }
 
 /**
  * Render cli title
  */
 function renderTitle() {
   const figletConfig = {
-    font: 'Big',
-    horizontalLayout: 'default',
-    verticalLayout: 'default',
+    font: "Big",
+    horizontalLayout: "default",
+    verticalLayout: "default",
     width: 80,
-    whitespaceBreak: true
-  };
+    whitespaceBreak: true,
+  }
 
   useGradient({
-    title: figlet.textSync('StartEase', figletConfig)
-  });
+    title: figlet.textSync("StartEase", figletConfig),
+  })
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "startease-cli",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "StartEase is a versatile command-line tool designed to simplify and accelerate project setup. It empowers developers to quickly scaffold projects, select from various templates, and integrate with different databases, allowing for a smooth and efficient project kickstart.",
   "main": "./cli.js",
   "type": "module",

src/utils/create-frontend-project.js

@@ -0,0 +1,66 @@
+import { copyFile, getTemplateDir } from "./filemanager.js"
+import path from "path"
+import ora from "ora"
+
+/**
+ * loader
+ */
+let stages = [{ message: "Creating Project ...", duration: 2000 }]
+
+async function startSpinner() {
+  for (const stage of stages) {
+    const spinner = ora(stage.message).start()
+    await new Promise((resolve) => setTimeout(resolve, stage.duration))
+    spinner.succeed(stage.message.replace("...", " completed."))
+  }
+
+  stages = [{ message: "Creating Project ...", duration: 2000 }]
+}
+
+/**
+ * function to create frontend projects
+ * @param {string} framework
+ * @param {string} projectName
+ * @param {string} language - {typescript, javascript}
+ */
+
+export async function createFrontendProject(projectName, framework, language) {
+  try {
+    const destinationPath = path.join(
+      process.cwd(),
+      projectName ?? `project-starter-${framework}-template`
+    )
+
+    if (framework === "reactjs") {
+      //   copy files based on the language chosen
+      switch (language) {
+        case "javascript":
+          copyFile(
+            getTemplateDir(`frontend/reactjs/react-javascript-temp`),
+            destinationPath
+          )
+          break
+        case "typescript":
+          copyFile(
+            getTemplateDir(`frontend/reactjs/react-typescript-temp`),
+            destinationPath
+          )
+
+        default:
+          break
+      }
+
+      // success message
+      stages.push({
+        message: `Frontend - ReactJS project with ${
+          language.charAt(0).toUpperCase() + language.slice(1)
+        } created successfully! : ${destinationPath}`,
+        duration: 1000,
+      })
+
+      await startSpinner()
+    }
+  } catch (e) {
+    console.log(`Error Creating Frontend Project: ${e}`)
+  }
+}