Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/tcdtist/public-vite-react-tailwind-starter
Modern React starter template with Vite, React Router v6, Tailwind CSS, ESLint, and Prettier. Fast development, optimized build, clean structure.
https://github.com/tcdtist/public-vite-react-tailwind-starter
eslint husky prettier react react-helmet-async react-router-dom-v6 stylelint tailwindcss vite
Last synced: about 1 month ago
JSON representation
Modern React starter template with Vite, React Router v6, Tailwind CSS, ESLint, and Prettier. Fast development, optimized build, clean structure.
- Host: GitHub
- URL: https://github.com/tcdtist/public-vite-react-tailwind-starter
- Owner: tcdtist
- License: mit
- Created: 2024-08-10T09:44:09.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2024-08-10T09:44:12.000Z (3 months ago)
- Last Synced: 2024-09-30T16:41:02.496Z (about 2 months ago)
- Topics: eslint, husky, prettier, react, react-helmet-async, react-router-dom-v6, stylelint, tailwindcss, vite
- Language: JavaScript
- Homepage:
- Size: 95.7 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Vite React Tailwind Starter
## Overview
This Vite React Tailwind Starter is a modern, lightweight template for building React applications. It combines the speed of Vite, the power of React, the flexibility of React Router DOM v6, and the utility-first approach of Tailwind CSS. This template is designed to jumpstart your React projects with a well-structured, maintainable, and scalable foundation.
## Table of Contents
- [Features](#features)
- [Technologies Used](#technologies-used)
- [Project Structure](#project-structure)
- [Getting Started](#getting-started)
- [Usage](#usage)
- [Customization](#customization)
- [Contributing](#contributing)
- [License](#license)
## Features
- **Fast Development**: Leverages Vite for near-instant server start and rapid hot module replacement (HMR).
- **Modern React**: Set up with the latest React features and best practices.
- **Flexible Routing**: Implements React Router DOM v6 for declarative routing.
- **Responsive Design**: Utilizes Tailwind CSS for rapid UI development and responsive layouts.
- **Code Quality**: Integrated ESLint and Prettier for consistent code style and quality.
- **Optimized Production Build**: Configured for efficient bundling and optimized performance.
## Technologies Used
- **React**: A JavaScript library for building user interfaces.
- **Vite**: A next-generation frontend tooling.
- **React Router DOM v6**: Declarative routing for React applications.
- **Tailwind CSS**: A utility-first CSS framework for rapid UI development.
- **ESLint**: A tool for identifying and fixing problems in JavaScript code.
- **Prettier**: An opinionated code formatter.
## Project Structure
```
vite-react-tailwind-starter/
├── public/
├── src/
│ ├── assets/
│ ├── components/
│ │ ├── common/
│ │ └── layout/
│ ├── configs/
│ ├── constants/
│ ├── containers/
│ ├── contexts/
│ ├── hooks/
│ ├── layouts/
│ ├── pages/
│ ├── redux/
│ ├── services/
│ ├── styles/
│ ├── utils/
│ ├── App.jsx
│ └── main.jsx
│ └── RouterTree.js
├── .editorconfig
├── .env.example
├── .eslintignore
├── .eslintrc.cjs
├── .gitignore
├── .prettierignore
├── .stylelintrc
├── index.html
├── jsconfig.json
├── LICENSE
├── package.json
├── postcss.config.js
├── prettier.config.js
├── README.md
├── tailwind.config.js
├── vite.config.js
└── yarn.lock
```
## Getting Started
To get started with this template, follow these steps:
1. **Clone the repository**:
```bash
git clone https://github.com/tcdtist/public-vite-react-tailwind-starter.git
cd public-vite-react-tailwind-starter
```
2. **Install dependencies**:
```bash
yarn install
```
3. **Start the development server**:
```bash
yarn dev
```
4. **Open your browser** and navigate to `http://localhost:8000` to view the application.
## Usage
You can start building your application by:
- Adding new components in the `src/components` directory.
- Creating new pages in the `src/pages` directory.
- Defining routes in the `src/RouterTree` directory.
- Adding custom hooks in the `src/hooks` directory.
- Styling your components using Tailwind CSS classes.
## Customization
- **Tailwind CSS**: Customize the `tailwind.config.js` file to adjust the design system.
- **ESLint**: Modify `.eslintrc.cjs` to change linting rules.
- **Prettier**: Adjust `prettier.config.js` for code formatting preferences.
- **Vite**: Configure `vite.config.js` for build optimizations and plugins.
## Contributing
Contributions are welcome! If you'd like to contribute, please follow these steps:
1. Fork the repository.
2. Create a new branch for your feature or bug fix.
3. Make your changes and commit them.
4. Push your branch to your forked repository.
5. Create a pull request with a description of your changes.
## License
This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details.
---