Vite React Typescript Tailwind Starter

This template has been configured with all of the tools required to create a React Application using TypeScript and TailwindCSS with Vite.

Technologies

Note

This project uses pnpm as the package manager.

Setup

Important

The postinstall script will run automatically after the installation is complete, with a menu to add the features you want to use and configure the project (warning: the config folder will be removed after the postinstall)

1. git clone https://github.com/LOsioChico/vite-react-ts-tailwind-template.git
2. Modify the package.json file to use your project name, description, etc.
3. Run pnpm install to install all of the project's dependencies
4. Build the project for production: pnpm build
5. Run the local development server: pnpm dev

Dev Loop

• dev - run the local development server
• build - build the project files for distribution
• preview - locally preview the production build
• lint - run the linter
• format - run the code formatter
• postinstall - this run automatically by pnpm after install, no need to run manually

Dev Loop with optional features

 Vitest

• test - run the tests with Vitest
• test:ui - run the tests with Vitest UI and Coverage

Features

• 📦 Pnpm - Fast, disk space efficient package manager
• ⚛️ React - A JavaScript library for building user interfaces
• ⚡️ Vite - Super fast build tool
• 🎨 Tailwind CSS v3 - Utility-first CSS framework
• 🚨 ESLint - Find and fix code issues
• 🖌️ Prettier - Code formatter
• 🚀 React Router - Client-side routing

Additional Features

• 📦 Zustand - Effortless state management for React
• 🧪 Vitest - Next Generation Testing Framework
• 🖼️ React Icons - Include popular icons in your React projects easily
• 🎬 Framer Motion - A production-ready motion library for React
• 🗃️ Supabase - The open source Firebase alternative
• 🔄 React Query - Performant and powerful data synchronization for React

Recommended IDE Setup

• 🔧 VSCode - Code editor
• 🎨 Tailwind CSS IntelliSense - Tailwind CSS IntelliSense
• 🎀 Pretty TypeScript Errors - Make TypeScript errors prettier and human-readable in VSCode.
• 🚨 ESLint - Integrates ESLint JavaScript into VS Code
• 🖌️ Prettier - Code formatter
• 🚦 Error Lens - Improve highlighting of errors, warnings and other language diagnostics
• 👨‍💻 Github Copilot - AI pair programmer

TODO

[✅] - Completed
[⚒️] - In Progress
[🔜] - Planned

• [✅] Add .gitkeep files to empty directories to keep them in the repo
• [✅] Add React Router for client-side routing
• [✅] Add script to remove .gitkeep files
• [✅] Add script to add new features like Vitest, Zustand, React Icons, etc.
• [✅] Add Zustand for state management
• [✅] Add config/features.json file to add features to the project
• [✅] Add config/config.json file to configure the project postinstall script
• [✅] Add @clack/prompts for interactive CLI, to add features to the project and configure the project postinstall script
• [✅] Add Vitest for testing
• [✅] Add React Icons for icons
• [✅] Add Framer Motion for animations
• [✅] Add Supabase for backend
• [✅] Add React Query for data fetching
• [🔜] Add an CLI gif animation to the README (Example of how to initialize the project)
• [🔜] Add folder structure to the README with variations of additional features

Contributing

Feel free to open an issue or create a PR if you'd like to contribute 🙌

License

The project is available as open source under the terms of the MIT License ©.