├── .gitignore ├── test-project ├── src │ ├── App.css │ ├── index.css │ ├── main.jsx │ ├── App.jsx │ ├── assets │ │ └── react.svg │ └── Home │ │ └── Home.jsx ├── postcss.config.js ├── vite.config.js ├── tailwind.config.js ├── .gitignore ├── index.html ├── README.md ├── package.json ├── eslint.config.js └── public │ └── vite.svg ├── package.json ├── LICENSE ├── .github └── workflows │ └── publish.yml ├── SECURITY.md ├── README.md └── index.js /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .env 3 | dist 4 | .DS_Store 5 | -------------------------------------------------------------------------------- /test-project/src/App.css: -------------------------------------------------------------------------------- 1 | 2 | *::-webkit-scrollbar { 3 | display: none; 4 | } 5 | -------------------------------------------------------------------------------- /test-project/postcss.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /test-project/src/index.css: -------------------------------------------------------------------------------- 1 | 2 | @tailwind base; 3 | @tailwind components; 4 | @tailwind utilities; 5 | 6 | *::-webkit-scrollbar { 7 | display: none; 8 | } 9 | 10 | -------------------------------------------------------------------------------- /test-project/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vite.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /test-project/src/main.jsx: -------------------------------------------------------------------------------- 1 | 2 | import React from 'react'; 3 | import ReactDOM from 'react-dom/client'; 4 | import './index.css'; 5 | import App from './App'; 6 | 7 | ReactDOM.createRoot(document.getElementById('root')).render( 8 | 9 | 10 | 11 | ); 12 | -------------------------------------------------------------------------------- /test-project/tailwind.config.js: -------------------------------------------------------------------------------- 1 | 2 | /** @type {import('tailwindcss').Config} */ 3 | export default { 4 | content: [ 5 | "./index.html", 6 | "./src/**/*.{js,ts,jsx,tsx}", 7 | ], 8 | theme: { 9 | extend: {}, 10 | }, 11 | plugins: [], 12 | } 13 | -------------------------------------------------------------------------------- /test-project/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /test-project/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /test-project/src/App.jsx: -------------------------------------------------------------------------------- 1 | 2 | import "./App.css"; 3 | import { BrowserRouter, Routes, Route } from "react-router-dom"; 4 | import Home from "./Home/Home"; 5 | 6 | function App() { 7 | return ( 8 |
9 | 10 | 11 | } /> 12 | 13 | 14 |
15 | ); 16 | } 17 | 18 | export default App; 19 | -------------------------------------------------------------------------------- /test-project/README.md: -------------------------------------------------------------------------------- 1 | # React + Vite 2 | 3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. 4 | 5 | Currently, two official plugins are available: 6 | 7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh 8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh 9 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-vite-js-starter", 3 | "version": "1.0.13", 4 | "description": "A CLI tool to create a React project with Vite and Tailwind CSS", 5 | "main": "index.js", 6 | "bin": { 7 | "react-vite-js-starter": "./index.js" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/anasyakubu/react-vite-js-starter.git" 12 | }, 13 | "dependencies": {}, 14 | "devDependencies": {}, 15 | "scripts": {}, 16 | "author": "Anas Yakubu", 17 | "license": "MIT", 18 | "bugs": { 19 | "url": "https://github.com/anasyakubu/react-vite-js-starter/issues" 20 | }, 21 | "homepage": "https://github.com/anasyakubu/react-vite-js-starter#readme" 22 | } 23 | -------------------------------------------------------------------------------- /test-project/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "test-project", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "lint": "eslint .", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "axios": "^1.7.8", 14 | "lucide-react": "^0.462.0", 15 | "react": "^18.3.1", 16 | "react-dom": "^18.3.1", 17 | "react-icons": "^5.3.0", 18 | "react-router-dom": "^7.0.1", 19 | "sass": "^1.81.0" 20 | }, 21 | "devDependencies": { 22 | "@eslint/js": "^9.15.0", 23 | "@types/react": "^18.3.12", 24 | "@types/react-dom": "^18.3.1", 25 | "@vitejs/plugin-react": "^4.3.4", 26 | "autoprefixer": "^10.4.20", 27 | "eslint": "^9.15.0", 28 | "eslint-plugin-react": "^7.37.2", 29 | "eslint-plugin-react-hooks": "^5.0.0", 30 | "eslint-plugin-react-refresh": "^0.4.14", 31 | "globals": "^15.12.0", 32 | "postcss": "^8.4.49", 33 | "tailwindcss": "^3.4.15", 34 | "vite": "^6.0.1" 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2024 Anas Yakubu 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /test-project/eslint.config.js: -------------------------------------------------------------------------------- 1 | import js from '@eslint/js' 2 | import globals from 'globals' 3 | import react from 'eslint-plugin-react' 4 | import reactHooks from 'eslint-plugin-react-hooks' 5 | import reactRefresh from 'eslint-plugin-react-refresh' 6 | 7 | export default [ 8 | { ignores: ['dist'] }, 9 | { 10 | files: ['**/*.{js,jsx}'], 11 | languageOptions: { 12 | ecmaVersion: 2020, 13 | globals: globals.browser, 14 | parserOptions: { 15 | ecmaVersion: 'latest', 16 | ecmaFeatures: { jsx: true }, 17 | sourceType: 'module', 18 | }, 19 | }, 20 | settings: { react: { version: '18.3' } }, 21 | plugins: { 22 | react, 23 | 'react-hooks': reactHooks, 24 | 'react-refresh': reactRefresh, 25 | }, 26 | rules: { 27 | ...js.configs.recommended.rules, 28 | ...react.configs.recommended.rules, 29 | ...react.configs['jsx-runtime'].rules, 30 | ...reactHooks.configs.recommended.rules, 31 | 'react/jsx-no-target-blank': 'off', 32 | 'react-refresh/only-export-components': [ 33 | 'warn', 34 | { allowConstantExport: true }, 35 | ], 36 | }, 37 | }, 38 | ] 39 | -------------------------------------------------------------------------------- /test-project/public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.github/workflows/publish.yml: -------------------------------------------------------------------------------- 1 | name: Publish to npm 2 | 3 | on: 4 | push: 5 | branches: 6 | - main 7 | 8 | jobs: 9 | publish: 10 | runs-on: ubuntu-latest 11 | 12 | steps: 13 | # Step 1: Check out repository 14 | - name: Check out repository 15 | uses: actions/checkout@v3 16 | 17 | # Step 2: Set up Node.js environment 18 | - name: Set up Node.js 19 | uses: actions/setup-node@v3 20 | with: 21 | node-version: "lts/*" 22 | cache: "npm" 23 | registry-url: "https://registry.npmjs.org/" 24 | 25 | # Step 3: Install dependencies 26 | - name: Install dependencies 27 | run: npm install 28 | 29 | # Step 4: Configure Git 30 | - name: Configure Git 31 | run: | 32 | git config --global user.name "github-actions[bot]" 33 | git config --global user.email "github-actions[bot]@users.noreply.github.com" 34 | 35 | # Step 5: Bump version, commit, and push 36 | - name: Bump version, commit, and push 37 | env: 38 | NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }} 39 | GITHUB_TOKEN: ${{ secrets.PAT_TOKEN }} 40 | run: | 41 | npm version patch -m "Bump version to %s [skip ci]" 42 | git remote set-url origin https://x-access-token:${{ secrets.PAT_TOKEN }}@github.com/${{ github.repository }}.git 43 | git push --follow-tags 44 | 45 | # Step 6: Publish to npm 46 | - name: Publish to npm 47 | env: 48 | NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }} 49 | run: npm publish --access public 50 | -------------------------------------------------------------------------------- /SECURITY.md: -------------------------------------------------------------------------------- 1 | # Security Policy 2 | 3 | ## Supported Versions 4 | 5 | The following versions of our project are currently supported with security updates. If you are using an unsupported version, please upgrade to a supported version to ensure you receive the latest security updates. 6 | 7 | | Version | Supported | 8 | | ------- | ------------------ | 9 | | 5.1.x | :white_check_mark: | 10 | | 5.0.x | :x: | 11 | | 4.0.x | :white_check_mark: | 12 | | < 4.0 | :x: | 13 | 14 | ## Reporting a Vulnerability 15 | 16 | We take security issues seriously. If you discover a vulnerability, please follow the instructions below to report it. 17 | 18 | ### How to Report 19 | 20 | - **Email**: Send an email to [yakubuanas04@gmail.com](mailto:yakubuanas04@gmail.com) with details of the vulnerability. Include as much information as possible to help us understand and address the issue quickly. 21 | - **GitHub Issues**: Do not report security vulnerabilities through public GitHub issues. Instead, use the email provided above. 22 | 23 | ### What to Include 24 | 25 | When reporting a vulnerability, please provide the following details: 26 | - A description of the vulnerability. 27 | - Steps to reproduce the issue. 28 | - The potential impact of the vulnerability. 29 | - Any suggested mitigation or fixes. 30 | 31 | ### Response Time 32 | 33 | - We aim to acknowledge receipt of vulnerability reports within **24 hours**. 34 | - We will provide an initial assessment and ask for any additional information if needed within **72 hours**. 35 | - You can expect regular updates on the status of the vulnerability, typically every **5-7 days**. 36 | 37 | ### Resolution 38 | 39 | - If the vulnerability is confirmed, we will work on a fix and aim to release a patch as soon as possible. 40 | - Once the vulnerability is resolved, we will notify the reporter and thank them for their contribution. 41 | - If the vulnerability is declined, we will provide an explanation as to why it was not accepted. 42 | 43 | ### Confidentiality 44 | 45 | - We will handle your report with strict confidentiality and will not disclose any details of the vulnerability until it has been fully addressed and a patch has been released. 46 | - We will not share your personal information without your permission, unless required by law. 47 | 48 | Thank you for helping us keep our project secure. 49 | -------------------------------------------------------------------------------- /test-project/src/assets/react.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## **React Vite Starter with Tailwind CSS, Axios, React Icons, and Sass** 2 | 3 | Welcome to the React Vite Starter project! This project is built with modern tools to quickly start a React app with Vite, Tailwind CSS, and essential libraries like Axios and React Icons. 4 | 5 | --- 6 | 7 | ## **Usage** 8 | 9 | ```bash 10 | npx react-vite-js-starter 11 | ``` 12 | 13 | ```bash 14 | mkdir my-new-project 15 | cd my-new-project 16 | npx react-vite-js-starter 17 | 18 | ``` 19 | 20 | ### **Table of Contents** 21 | 22 | - [Features](#features) 23 | - [Prerequisites](#prerequisites) 24 | - [Installation](#installation) 25 | - [Project Structure](#project-structure) 26 | - [Available Scripts](#available-scripts) 27 | - [Customization](#customization) 28 | - [Contributing](#contributing) 29 | 30 | --- 31 | 32 | ## **Features** 33 | 34 | - ⚡ **Vite** - Fast and optimized React development experience. 35 | - 🎨 **Tailwind CSS** - Utility-first CSS framework for rapid UI development. 36 | - 🔗 **React Router** - Simple and declarative routing. 37 | - 🔗 **Axios** - Promise-based HTTP client. 38 | - 🎉 **React Icons** - Thousands of popular icons as components. 39 | - 🎨 **Sass** - Powerful CSS preprocessor. 40 | 41 | --- 42 | 43 | ## **Prerequisites** 44 | 45 | Make sure you have the following installed: 46 | 47 | - [Node.js](https://nodejs.org/) (v16 or higher) 48 | - [npm](https://www.npmjs.com/) or [yarn](https://yarnpkg.com/) 49 | 50 | --- 51 | 52 | ## **Installation** 53 | 54 | Follow these steps to set up and run the project on your local machine. 55 | 56 | ### 1. Clone the repository 57 | 58 | ```bash 59 | git clone https://github.com/anasyakubu/react-vite-js-starter.git 60 | cd react-vite-js-starter 61 | ``` 62 | 63 | ### 2. Install dependencies 64 | 65 | This command will install all required dependencies, including React, Tailwind CSS, Axios, React Icons, and Sass. 66 | 67 | ```bash 68 | npm install 69 | ``` 70 | 71 | ### 3. Start the development server 72 | 73 | Run the following command to start the development server: 74 | 75 | ```bash 76 | npm run dev 77 | ``` 78 | 79 | Open [http://localhost:5173](http://localhost:5173) to view the app in the browser. 80 | 81 | --- 82 | 83 | ## **Project Structure** 84 | 85 | ``` 86 | ├── public/ # Static files 87 | ├── src/ # Source files 88 | │ ├── home/ # Home component 89 | │ │ └── Home.jsx # Main Home page component 90 | │ ├── App.jsx # Main application component 91 | │ ├── main.jsx # Application entry point 92 | │ ├── index.css # Tailwind CSS imports 93 | │ └── App.css # Additional CSS (optional) 94 | ├── tailwind.config.js # Tailwind CSS configuration 95 | ├── postcss.config.js # PostCSS configuration 96 | ├── package.json # Project metadata and dependencies 97 | └── README.md # Project documentation 98 | ``` 99 | 100 | --- 101 | 102 | ## **Available Scripts** 103 | 104 | | Script | Description | 105 | | ----------------- | --------------------------------- | 106 | | `npm install` | Installs all dependencies | 107 | | `npm run dev` | Starts the development server | 108 | | `npm run build` | Builds the project for production | 109 | | `npm run preview` | Previews the production build | 110 | 111 | --- 112 | 113 | ## **Customization** 114 | 115 | You can customize the project as per your requirements. 116 | 117 | ### 1. **Updating the Home Page** 118 | 119 | To modify the home page: 120 | 121 | - Edit the file `src/home/Home.jsx`. 122 | 123 | ### 2. **Adding New Routes** 124 | 125 | To add new pages and routes: 126 | 127 | 1. Create a new component in the `src/pages` folder (e.g., `About.jsx`). 128 | 2. Update `App.jsx` to include the new route: 129 | 130 | ```jsx 131 | 132 | } /> 133 | } /> 134 | 135 | ``` 136 | 137 | ### 3. **Tailwind CSS Customization** 138 | 139 | You can extend the Tailwind CSS theme by editing the `tailwind.config.js` file: 140 | 141 | ```javascript 142 | module.exports = { 143 | theme: { 144 | extend: { 145 | colors: { 146 | primary: "#1E40AF", 147 | }, 148 | }, 149 | }, 150 | }; 151 | ``` 152 | 153 | --- 154 | 155 | ## **Contributing** 156 | 157 | Contributions are welcome! 158 | To contribute: 159 | 160 | 1. Fork the repository. 161 | 2. Create a new branch for your feature or bug fix. 162 | 3. Commit your changes. 163 | 4. Submit a pull request. 164 | 165 | --- 166 | 167 | ## **License** 168 | 169 | This project is licensed under the [MIT License](LICENSE). 170 | 171 | --- 172 | 173 | ## **Contact** 174 | 175 | - **Author:** Anas Yakubu 176 | - **GitHub:** [https://github.com/anasyakubu](https://github.com/anasyakubu) 177 | - **Portfolio:** [https://anasyakubu.vercel.app](https://anasyakubu.vercel.app) 178 | 179 | --- 180 | -------------------------------------------------------------------------------- /test-project/src/Home/Home.jsx: -------------------------------------------------------------------------------- 1 | 2 | import React from "react"; 3 | import { SiVite } from "react-icons/si"; 4 | import { RiTailwindCssFill } from "react-icons/ri"; 5 | import { IoLogoSass } from "react-icons/io5"; 6 | import { FaReact, FaGithub, FaNpm } from "react-icons/fa"; 7 | import { SiAxios, SiPrettier } from "react-icons/si"; 8 | 9 | import { Star } from "lucide-react"; 10 | 11 | function Home() { 12 | return ( 13 |
14 |
15 | {/* Navigation */} 16 | 43 | 44 | {/* Hero Content */} 45 |
46 |

47 | Launch your react app 48 |
49 | in seconds, not minutes 50 |

51 | 52 |

53 | The react vite.js Startup Boilerplate for busy developers, 54 |
55 | with{" "} 56 | 57 | all you need 58 | {" "} 59 | to build and launch your app soon. 60 |

61 | 62 | 74 | 75 | {/* Social Proof */} 76 |
77 |
78 | {[1, 2, 3, 4, 5].map((_, i) => ( 79 |
83 | logo 88 |
89 | ))} 90 |
91 |
92 | 93 | Loved by 160,070 developers 94 | 95 |
96 | {[1, 2, 3, 4, 5].map((_, i) => ( 97 | 101 | ))} 102 |
103 |
104 |
105 | 106 | {/* Feature Diagram */} 107 |
108 |
109 | {[ 110 | { 111 | title: "Vitejs", 112 | icon: , 113 | }, 114 | { title: "React", icon: }, 115 | { 116 | title: "Tailwindcss", 117 | icon: , 118 | }, 119 | { title: "Sass", icon: }, 120 | { title: "Axios", icon: }, 121 | 122 | { 123 | title: "Prettier", 124 | icon: , 125 | }, 126 | ].map((feature, i) => ( 127 |
131 | {feature.icon} 132 | 133 | {feature.title} 134 | 135 |
136 | ))} 137 |
138 |
139 |
140 |
141 |
142 |
143 | designed & built with love 💛 by{" "} 144 | 145 | 150 | {" "} 151 | 152 | logo 157 | 158 | Anas Yakubu 159 | 160 | 161 |
162 |
163 |
164 |
165 |
166 |
167 | ); 168 | } 169 | 170 | export default Home; 171 | 172 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | 3 | const { execSync } = require("child_process"); 4 | const fs = require("fs"); 5 | 6 | // Function to run shell commands 7 | function runCommand(command) { 8 | try { 9 | execSync(command, { stdio: "inherit" }); 10 | } catch (error) { 11 | console.error(`Failed to execute ${command}`); 12 | process.exit(1); 13 | } 14 | } 15 | 16 | // Function to create Tailwind config 17 | function createTailwindConfig() { 18 | const configContent = ` 19 | /** @type {import('tailwindcss').Config} */ 20 | export default { 21 | content: [ 22 | "./index.html", 23 | "./src/**/*.{js,ts,jsx,tsx}", 24 | ], 25 | theme: { 26 | extend: {}, 27 | }, 28 | plugins: [], 29 | } 30 | `; 31 | 32 | fs.writeFileSync("tailwind.config.js", configContent); 33 | } 34 | 35 | // Function to update Tailwind imports in index.css 36 | function updateCSS() { 37 | const cssContent = ` 38 | @tailwind base; 39 | @tailwind components; 40 | @tailwind utilities; 41 | 42 | *::-webkit-scrollbar { 43 | display: none; 44 | } 45 | 46 | `; 47 | 48 | fs.writeFileSync("./src/index.css", cssContent); 49 | } 50 | 51 | // Function to update app.css 52 | function updateAppCSS() { 53 | const AppCssContent = ` 54 | *::-webkit-scrollbar { 55 | display: none; 56 | } 57 | `; 58 | 59 | fs.writeFileSync("./src/App.css", AppCssContent); 60 | } 61 | 62 | // Function to create Home component 63 | function createHomeComponent() { 64 | const folderPath = "./src/Home"; 65 | const filePath = `${folderPath}/Home.jsx`; 66 | 67 | if (!fs.existsSync(folderPath)) { 68 | fs.mkdirSync(folderPath); 69 | } 70 | 71 | const homeComponentContent = ` 72 | import React from "react"; 73 | import { SiVite } from "react-icons/si"; 74 | import { RiTailwindCssFill } from "react-icons/ri"; 75 | import { IoLogoSass } from "react-icons/io5"; 76 | import { FaReact, FaGithub, FaNpm } from "react-icons/fa"; 77 | import { SiAxios, SiPrettier } from "react-icons/si"; 78 | 79 | import { Star } from "lucide-react"; 80 | 81 | function Home() { 82 | return ( 83 |
84 |
85 | {/* Navigation */} 86 | 113 | 114 | {/* Hero Content */} 115 |
116 |

117 | Launch your react app 118 |
119 | in seconds, not minutes 120 |

121 | 122 |

123 | The react vite.js Startup Boilerplate for busy developers, 124 |
125 | with{" "} 126 | 127 | all you need 128 | {" "} 129 | to build and launch your app soon. 130 |

131 | 132 | 144 | 145 | {/* Social Proof */} 146 |
147 |
148 | {[1, 2, 3, 4, 5].map((_, i) => ( 149 |
153 | logo 158 |
159 | ))} 160 |
161 |
162 | 163 | Loved by 160,070 developers 164 | 165 |
166 | {[1, 2, 3, 4, 5].map((_, i) => ( 167 | 171 | ))} 172 |
173 |
174 |
175 | 176 | {/* Feature Diagram */} 177 |
178 |
179 | {[ 180 | { 181 | title: "Vitejs", 182 | icon: , 183 | }, 184 | { title: "React", icon: }, 185 | { 186 | title: "Tailwindcss", 187 | icon: , 188 | }, 189 | { title: "Sass", icon: }, 190 | { title: "Axios", icon: }, 191 | 192 | { 193 | title: "Prettier", 194 | icon: , 195 | }, 196 | ].map((feature, i) => ( 197 |
201 | {feature.icon} 202 | 203 | {feature.title} 204 | 205 |
206 | ))} 207 |
208 |
209 |
210 |
211 |
212 |
213 | designed & built with love 💛 by{" "} 214 | 215 | 220 | {" "} 221 | 222 | logo 227 | 228 | Anas Yakubu 229 | 230 | 231 |
232 |
233 |
234 |
235 |
236 |
237 | ); 238 | } 239 | 240 | export default Home; 241 | 242 | `; 243 | 244 | fs.writeFileSync(filePath, homeComponentContent); 245 | } 246 | 247 | // Function to create App.jsx 248 | function createAppJSX() { 249 | const appContent = ` 250 | import "./App.css"; 251 | import { BrowserRouter, Routes, Route } from "react-router-dom"; 252 | import Home from "./Home/Home"; 253 | 254 | function App() { 255 | return ( 256 |
257 | 258 | 259 | } /> 260 | 261 | 262 |
263 | ); 264 | } 265 | 266 | export default App; 267 | `; 268 | 269 | fs.writeFileSync("./src/App.jsx", appContent); 270 | } 271 | 272 | // Function to update main.jsx to render App component 273 | function updateMainJSX() { 274 | const mainJSXContent = ` 275 | import React from 'react'; 276 | import ReactDOM from 'react-dom/client'; 277 | import './index.css'; 278 | import App from './App'; 279 | 280 | ReactDOM.createRoot(document.getElementById('root')).render( 281 | 282 | 283 | 284 | ); 285 | `; 286 | 287 | fs.writeFileSync("./src/main.jsx", mainJSXContent); 288 | } 289 | 290 | // Main function 291 | function init() { 292 | console.log( 293 | "Creating a new Vite project with React, Tailwind CSS, Axios, React Icons, and Sass..." 294 | ); 295 | 296 | // Step 1: Initialize a new Vite project with React template 297 | runCommand("npm create vite@latest . -- --template react"); 298 | 299 | // Step 2: Install core dependencies 300 | console.log("Installing core dependencies 🚀🚀..."); 301 | runCommand("npm install"); 302 | 303 | // Step 3: Install Tailwind CSS and its dependencies 304 | console.log("Installing Tailwind CSS 🎨🎨..."); 305 | runCommand("npm install -D tailwindcss@3 postcss autoprefixer"); 306 | 307 | // Step 4: Initialize Tailwind CSS configuration 308 | console.log("Initializing Tailwind CSS 🎨🎨..."); 309 | runCommand("npx tailwindcss init -p"); 310 | 311 | // Step 5: Update Tailwind configuration and CSS imports 312 | createTailwindConfig(); 313 | updateCSS(); 314 | updateAppCSS(); 315 | 316 | // Step 6: Install additional packages (Axios, React Icons, Sass, react-router-dom) 317 | console.log( 318 | "Installing additional packages: Axios, React Icons, Sass, react-router-dom, etc. 🚀🚀" 319 | ); 320 | runCommand( 321 | "npm install axios react-icons lucide-react sass react-router-dom" 322 | ); 323 | 324 | // Step 7: Create Home component and App.jsx, then update main.jsx 325 | createHomeComponent(); 326 | createAppJSX(); 327 | updateMainJSX(); 328 | 329 | console.log("\n✅ Project setup complete! 🚀"); 330 | console.log("To start the development server, run:"); 331 | console.log("npm run dev"); 332 | } 333 | 334 | // Run the initialization script 335 | init(); 336 | --------------------------------------------------------------------------------