Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/luovtyrell/react-vite-proptypes-react-router-tailwind-starter
A starter template for React projects with Vite, PropTypes, React Router, and Tailwind CSS for a fast and customizable setup.
https://github.com/luovtyrell/react-vite-proptypes-react-router-tailwind-starter
prop-types react react-router tailwindcss vite
Last synced: about 1 month ago
JSON representation
A starter template for React projects with Vite, PropTypes, React Router, and Tailwind CSS for a fast and customizable setup.
- Host: GitHub
- URL: https://github.com/luovtyrell/react-vite-proptypes-react-router-tailwind-starter
- Owner: Luovtyrell
- Created: 2024-08-22T11:45:02.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2024-09-13T13:16:40.000Z (3 months ago)
- Last Synced: 2024-09-14T03:58:45.169Z (3 months ago)
- Topics: prop-types, react, react-router, tailwindcss, vite
- Language: JavaScript
- Homepage:
- Size: 48.8 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React + Vite + PropTypes + React Router + Tailwind CSS Starter Template
This is a starter template for React projects using Vite as the bundler, PropTypes for prop validation, React Router for routing, and Tailwind CSS for styling. It provides a basic and functional setup that you can use to kickstart your React project and save time.
## Table of Contents
1. [Template Structure](#template-structure)
2. [Installation](#installation)
3. [Additional Configuration](#additional-configuration)
4. [Additional Resources](#additional-resources)
## Template Structure
- **`src/components`**: Contains application components.
- `Counter.jsx`: Example component for counting.
- `Greeting.jsx`: Example greeting component that uses PropTypes for prop validation.
- **`src/pages`**: Contains application pages.
- `Home.jsx`: Home page that displays the greeting and includes a button to navigate to the CounterPage.
- `CounterPage.jsx`: Page displaying the counter and including a button to navigate back to the Home page.
- **`src/routes/AppRoutes.jsx`**: Route configuration for the application.
- **`src/styles/index.css`**: Contains Tailwind CSS imports and a commented base layer if needed.
## Installation
To start using this template, follow these steps:
1. **Clone the repository:**
```bash
git clone https://github.com/Luovtyrell/React-Vite-PropTypes-React-Router-Tailwind-Starter.git
```
2. **Navigate to the project directory:**
```bash
cd React-Vite-PropTypes-React-Router-Tailwind-Starter
```
3. **Install the dependencies:**
```bash
npm install
```
4. **Start the development server:**
```bash
npm run dev
```
This will start the development server, and you can view the application at `http://localhost:3000` (or the configured port).
## Additional Configuration
- **Tailwind CSS**:
- Customize Tailwind settings such as adding custom colors in `tailwind.config.js`.
- **You can add additional plugins like [DaisyUI](https://daisyui.com/docs/install/).**
- You can install DaisyUI using npm:
```bash
npm i -D daisyui@latest
```
Then, add DaisyUI to your `tailwind.config.js` file:
```js
// tailwind.config.js
module.exports = {
content: ["./src/**/*.{js,jsx,ts,tsx}"],
theme: {
extend: {},
},
plugins: [require("daisyui")],
};
```
## Additional Resources
- [React Documentation](https://reactjs.org/docs/getting-started.html)
- [Vite Documentation](https://vitejs.dev/guide/)
- [Tailwind CSS Documentation](https://tailwindcss.com/docs)
- [PropTypes Guide](https://www.npmjs.com/package/prop-types)
- [React Router Guide](https://reactrouter.com/web/guides/quick-start)
---
[](https://github.com/Luovtyrell)
