[Feature] Updated README.md

Author: Jay-flow

README.md

@@ -1,2 +1,53 @@
 # flow-react-cli
 
+![npm](https://img.shields.io/npm/v/flow-react-cli)
+![NPM](https://img.shields.io/npm/l/flow-react-cli)
+![npm](https://img.shields.io/npm/dt/flow-react-cli)
+
+![logo](./design/logo.jpg)
+
+This CLI program is a package that creates the boilerplate and components needed to develop React.
+Using flow-react-cli, you can increase the productivity of React.
+
+The two main features of this CLI program are as follows:
+
+1. Create a React or Next.js project that has completed the installation and setup of the Typescip, Eslint, Pretty, and CSS libraries (styled-components or Tailwind CSS).
+2. When you create a functional component page, you can create a page where the boilerplate was created.
+
+# 📢 Notes
+
+> This program was inspired by [dooboo-cli](https://github.com/dooboolab/dooboo-cli) and created by referring to the code in the dooboo-cli.
+>
+> The difference between flow-react-cli and dooboo-cli is shown below.
+>
+> 1.  When you create a project, you can automatically update and use the most recent update of the packages that have dependencies.the name.
+> 2.  When you create a React project, you can install the CSS library together.
+> 3.  You can create any project when you create a component. This means that you can create components, even if they are not projects created using that package.
+> 4.  When creating a project or component, there is no restriction on
+
+> flow-react-cli updates packages for dependencies using the [npm-check-updates]() package when you create or update a project.
+
+# Installation
+
+`npm install -g flow-react-cli`
+or `yarn global add flow-react-cli`
+
+# Usage
+
+```
+Usage: flow [command]
+
+Options:
+  -V, --version               output the version number
+  -h, --help                  display help for command
+
+Commands:
+  init                        Initialize the React or Next.js project, including the Boilerplate.
+  update                      Use the npm-check-updates package to update the package in the project.
+  page <fileName> <filePath>  Generate page(screen) component.
+  help [command]              display help for command
+```
+
+# Preview
+
+![interface](./design/interface.png)

bin/init.ts

@@ -18,7 +18,6 @@ enum TYPE_OF_STYLE {
   STYLED_COMPONENTS = "styled-components"
 }
 
-
 const selectShellStyle = {
   pointer: " ▸ ",
   pointerColor: "yellow",
@@ -78,7 +77,12 @@ async function isWantStyle() {
   ])
 }
 
-function createApp(selectApp: number, nameOfApp: string, defaultNodePackageName: string, style: string) {
+function createApp(
+  selectApp: number,
+  nameOfApp: string,
+  defaultNodePackageName: string,
+  style: string
+) {
   const gitDownSpinner = ora("Creating app: " + nameOfApp + "...\n")
   gitDownSpinner.start()
   const gitURL = getGitURL(selectApp, style)
@@ -93,7 +97,12 @@ function createApp(selectApp: number, nameOfApp: string, defaultNodePackageName:
   })
 }
 
-function flowUp(selectApp:number, nameOfApp: string, defaultNodePackageName: string, style: string) {
+function flowUp(
+  selectApp: number,
+  nameOfApp: string,
+  defaultNodePackageName: string,
+  style: string
+) {
   const projectCleanupSpinner = ora("Project Cleanup...\n")
   projectCleanupSpinner.start()
 
@@ -114,7 +123,7 @@ function flowUp(selectApp:number, nameOfApp: string, defaultNodePackageName: str
   }, 2000)
 }
 
-function reinstallAutotprefixcer(selectApp:number, style: string) {
+function reinstallAutotprefixcer(selectApp: number, style: string) {
   if (style == TYPE_OF_STYLE.TAILWIND && selectApp == TYPE_OF_APP.REACT) {
     const tailwindSpinner = ora("autotprefixcer setting for tailwindcss...\n").start()
     shell.exec("npm install autoprefixer@^9.8.6")
@@ -193,7 +202,7 @@ const init = () => {
   program
     .version(pkg.version)
     .command("init")
-    .description("Initialize boilerplate for React.")
+    .description("Initialize the React or Next.js project, including the Boilerplate.")
     .action(() => {
       shell.echo(chalk.yellow("Select which boilerplate you want to generate from flow-react-cli."))
 

bin/main.ts

@@ -17,17 +17,19 @@ const printWelcomeMessage = () => {
   shell.echo(chalk.cyanBright(welcome))
 }
 
-
 const checkPkgUpdate = () => {
   const notifier = updateNotifier({
     pkg,
     updateCheckInterval: 1000 * 60 * 60 * 24 // 1 day
   })
-  notifier.notify({isGlobal: true})
+  notifier.notify({ isGlobal: true })
 }
 
 printWelcomeMessage()
 checkPkgUpdate()
+
+program.name("flow").usage("[command]")
+
 init()
 update()
 page()

bin/update.ts

@@ -5,7 +5,7 @@ import ora from "ora"
 const update = () => {
   program
     .command("update")
-    .description("Update packages.")
+    .description("Use the npm-check-updates package to update the package in the project.")
     .action(() => {
       const updateCheckSpinner = ora("Check package updates...\n").start()
       try {