fs-starter 1.0.0

package/README.md

@@ -0,0 +1,318 @@
+# Frontend Starter
+
+```
+______               _                 _       _             _
+|  ___|             | |               | |     | |           | |
+| |_ _ __ ___  _ __ | |_ ___ _ __   __| |  ___| |_ __ _ _ __| |_ ___ _ __
+|  _| '__/ _ \| '_ \| __/ _ \ '_ \ / _` | / __| __/ _` | '__| __/ _ \ '__|
+| | | | | (_) | | | | ||  __/ | | | (_| | \__ \ || (_| | |  | ||  __/ |
+\_| |_|  \___/|_| |_|\__\___|_| |_|\__,_| |___/\__\__,_|_|   \__\___|_|
+```
+
+**Interactive CLI tool to scaffold modern React projects with Vite**
+
+Create production-ready React applications with your preferred stack in seconds, without the hassle of manual configuration.
+
+---
+
+## Features
+
+- **Interactive CLI** - Choose exactly what you need
+- **Vite** - Lightning fast HMR and build tool
+- **React 18** - Latest React with modern features
+- **TypeScript/JavaScript** - Your choice
+- **Tailwind CSS v4** - Utility-first CSS (optional)
+- **State Management** - Zustand (optional)
+- **Data Fetching** - TanStack Query/React Query (optional)
+- **React Router** - Client-side routing with error handling (optional)
+- **Form Handling** - Formik + Yup validation (optional)
+- **Error Boundaries** - React Router errorElement or react-error-boundary
+- **ESLint** - Code linting (optional)
+- **Prettier** - Code formatting (optional)
+- **Atomic Design** - Organized folder structure (optional)
+- **Path Aliases** - Clean imports with `@/` (always included)
+- **Git** - Initialize repository with first commit (optional)
+
+---
+
+## Installation
+
+```bash
+# Install globally
+npm install -g .
+
+# Or use directly with npx (once published)
+npx frontend-starter
+```
+
+---
+
+## Usage
+
+Simply run the command and follow the interactive prompts:
+
+```bash
+frontend-starter
+```
+
+### Interactive Questions
+
+1. **Project name** - Your app name (lowercase, hyphens allowed)
+2. **Package manager** - Choose between yarn, npm, or pnpm
+3. **Language** - TypeScript or JavaScript
+4. **Tailwind CSS v4** - Modern utility-first CSS framework
+5. **Zustand** - Lightweight state management
+6. **TanStack Query** - Powerful data fetching and caching
+7. **React Router** - Client-side routing (includes error handling)
+8. **Atomic Design** - Component folder structure
+9. **Git repository** - Initialize with first commit
+10. **ESLint** - Code linting
+11. **Prettier** - Code formatting
+12. **Formik + Yup** - Form handling with validation
+13. **Error Boundary** - Error catching (only if React Router not selected)
+
+---
+
+## Generated Project Structure
+
+### With Atomic Design:
+
+```
+my-app/
+├── src/
+│   ├── Atoms/           # Basic building blocks (buttons, inputs)
+│   ├── Molecules/       # Simple components (form fields, cards)
+│   ├── Organisms/       # Complex components (navbar, footer)
+│   ├── Pages/           # Page components
+│   ├── Stores/          # Zustand stores (if selected)
+│   ├── Utils/           # Utility functions and helpers
+│   ├── router.tsx       # Router configuration (if selected)
+│   ├── queryClient.ts   # TanStack Query config (if selected)
+│   ├── ErrorPage.tsx    # Error page (if React Router selected)
+│   ├── ErrorFallback.tsx # Error fallback (if Error Boundary selected)
+│   ├── App.tsx
+│   └── main.tsx
+├── eslint.config.js     # ESLint configuration
+├── .prettierrc          # Prettier configuration
+├── vite.config.ts       # Vite config with path aliases
+├── tsconfig.json        # TypeScript config with path aliases
+└── package.json
+```
+
+### Without Atomic Design:
+
+```
+my-app/
+├── src/
+│   ├── Pages/
+│   ├── Stores/
+│   ├── Utils/
+│   └── ...
+```
+
+---
+
+## Path Aliases
+
+All projects include path aliases configured automatically:
+
+```tsx
+// Instead of this:
+import Button from "../../../Atoms/Button";
+
+// You can do this:
+import Button from "@/Atoms/Button";
+```
+
+Configured in both `vite.config` and `tsconfig.json`/`jsconfig.json`.
+
+---
+
+## Error Handling
+
+### With React Router (Recommended)
+
+Uses React Router's built-in `errorElement` system:
+
+- Catches routing errors and component errors
+- `useRouteError()` hook for error details
+- No extra dependencies
+- Functional component with modern hooks
+
+### Without React Router
+
+Option to use `react-error-boundary`:
+
+- Wraps entire application
+- Catches errors anywhere in the component tree
+- Functional ErrorFallback component
+- Reset button to recover from errors
+
+---
+
+## TanStack Query Integration
+
+When selected, includes:
+
+- Pre-configured `QueryClient` with sensible defaults
+- React Query DevTools (automatically included)
+- Integrated with App component
+- Works seamlessly with React Router
+
+---
+
+## Form Handling with Formik + Yup
+
+When selected, includes:
+
+- Example form component in `src/Utils/ExampleForm`
+- Validation schema with Yup
+- Form state management with Formik
+- Error handling and messages
+- Ready to customize and extend
+
+---
+
+## Tailwind CSS v4
+
+When selected, configures:
+
+- Latest Tailwind CSS v4
+- Vite plugin integration
+- Minimal `index.css` setup
+- Ready to use utility classes
+
+---
+
+## Example Session
+
+```bash
+$ frontend-starter
+
+______               _                 _       _             _
+|  ___|             | |               | |     | |           | |
+| |_ _ __ ___  _ __ | |_ ___ _ __   __| |  ___| |_ __ _ _ __| |_ ___ _ __
+|  _| '__/ _ \| '_ \| __/ _ \ '_ \ / _` | / __| __/ _` | '__| __/ _ \ '__|
+| | | | | (_) | | | | ||  __/ | | | (_| | \__ \ || (_| | |  | ||  __/ |
+\_| |_|  \___/|_| |_|\__\___|_| |_|\__,_| |___/\__\__,_|_|   \__\___|_|
+
+? Project name: my-awesome-app
+? Choose package manager: yarn
+? Choose language: TypeScript
+? Install Tailwind CSS v4? Yes
+? Install Zustand? No
+? Install TanStack Query? Yes
+? Install React Router Dom? Yes
+? Use Atomic Design folder structure? Yes
+? Initialize Git repository? Yes
+? Install ESLint? Yes
+? Install Prettier? Yes
+? Install Formik + Yup for form handling? Yes
+
+✓ Base project created
+✓ Folders created: Atoms, Molecules, Organisms, Pages, Stores, Utils
+✓ Tailwind v4 configured
+✓ TanStack Query installed and configured
+✓ React Router configured with error handling
+✓ Formik + Yup installed with example form
+✓ ESLint configured
+✓ Prettier configured
+✓ Git repository initialized
+✓ README.md generated
+
+Project "my-awesome-app" successfully generated!
+
+To get started:
+  1. cd my-awesome-app
+  2. yarn install
+  3. yarn dev
+```
+
+---
+
+## Requirements
+
+- Node.js 16.x or higher
+- npm, yarn, or pnpm
+
+---
+
+## Tech Stack
+
+- **Vite** - Next Generation Frontend Tooling
+- **React 18** - A JavaScript library for building user interfaces
+- **TypeScript** - JavaScript with syntax for types (optional)
+- **Tailwind CSS v4** - Utility-first CSS framework (optional)
+- **React Router** - Declarative routing for React (optional)
+- **TanStack Query** - Powerful asynchronous state management (optional)
+- **Zustand** - Bear necessities for state management (optional)
+- **Formik** - Build forms in React (optional)
+- **Yup** - Schema validation (optional)
+- **ESLint** - Find and fix problems in JavaScript code (optional)
+- **Prettier** - Opinionated code formatter (optional)
+
+---
+
+## Contributing
+
+Contributions are welcome! Feel free to:
+
+- Report bugs
+- Suggest new features
+- Submit pull requests
+
+---
+
+## License
+
+MIT
+
+---
+
+## Credits
+
+Generated with love using frontend-starter
+
+---
+
+## Tips
+
+### Customize Templates
+
+All templates are located in the `templates/` folder. You can customize them to match your preferences:
+
+- Component boilerplates
+- Configuration files
+- Router setup
+- Error boundaries
+
+### Add More Features
+
+Want to add more options? Edit `index.js` and:
+
+1. Add your prompt question
+2. Create template files
+3. Add installation logic
+4. Update README generation
+
+### Path Aliases Examples
+
+```tsx
+// Components
+import Button from "@/Atoms/Button";
+import Card from "@/Molecules/Card";
+import Navbar from "@/Organisms/Navbar";
+
+// Pages
+import HomePage from "@/Pages/HomePage";
+
+// Utils
+import { formatDate } from "@/Utils/helpers";
+
+// Stores
+import { useStore } from "@/Stores/useStore";
+```
+
+---
+
+**Happy coding!**