https://github.com/aryanprince/vite-starter
🚀 Minimal Vite starter template with preconfigured tools and configs
https://github.com/aryanprince/vite-starter
react-router starter tailwind template vite
Last synced: 2 months ago
JSON representation
🚀 Minimal Vite starter template with preconfigured tools and configs
- Host: GitHub
- URL: https://github.com/aryanprince/vite-starter
- Owner: aryanprince
- Created: 2024-02-22T22:27:10.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-02-23T01:20:38.000Z (over 2 years ago)
- Last Synced: 2025-01-23T10:23:20.580Z (over 1 year ago)
- Topics: react-router, starter, tailwind, template, vite
- Language: TypeScript
- Homepage:
- Size: 246 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Vite Starter Template
Sets up a very minimal Vite project with all my favorite tools and configurations.
## 🤔 How to Use?
Click the `Use this template` button to create a new repository with the same directory structure and files.
## ✨ Features
- ✅ Vite w/ React
- ✅ TypeScript (with custom import path alias)
- ✅ React Router (for routing and navigation)
- ✅ Tailwind CSS
- ✅ Tailwind Prettier Plugin (for auto sorting class names)
- ✅ ESLint + Prettier (for code formatting and linting)
## 🚀 Getting Started
_Prerequisites: You will need [Node.js (LTS recommended)](https://nodejs.org/en/) installed on your machine._
1. Clone the template
```bash
git clone https://github.com/aryanprince/vite-starter.git
```
2. Install dependencies (using your favourite package manager)
```bash
npm install
# or
yarn install
# or
pnpm install
# or
bun install
```
3. Start dev server
```bash
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
```
4. Open your browser and navigate to `http://localhost:5173`
5. Start building your app!
## 🚀 Next Steps
- Install your favourite components library (like [shadcn-ui](https://ui.shadcn.com/), [Radix Themes](https://www.radix-ui.com/), or [React Aria](https://react-spectrum.adobe.com/react-aria/))
- [React Query](https://tanstack.com/query/v3/) is the best way to handle data fetching
- Use [React Hook Form](https://react-hook-form.com/) for creating custom forms
- Setup your favourite state management library (like [Zustand](https://github.com/pmndrs/zustand) or [Jotai](https://jotai.org/))
## 📦 Project Structure
```bash
├── public
├── src
│ ├── pages (all of your pages/routes)
│ │ ├── about.tsx (about page)
│ │ └── home.tsx (home page)
│ ├── styles
│ │ └── index.css
│ ├── main.tsx (entry point)
```
## 📝 Todo
- [ ] Create a CLI configurator to select which features to include (like create-t3-app)