Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/luovtyrell/takeone-movie-recommender

Lights, camera, and match!
https://github.com/luovtyrell/takeone-movie-recommender

axios-react css3 daisiyui javascript jsx prettier prop-types react react-router-dom tailwindcss tmdb-api

Last synced: 7 days ago
JSON representation

Lights, camera, and match!

Awesome Lists containing this project

README

        

# React + Vite + PropTypes + React Router + Tailwind CSS Starter Template

React Badge PropTypes Badge Vite Badge React Router Badge Tailwind CSS Badge

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)

---

[![Lucía Ordoñez Vilanova](https://avatars.githubusercontent.com/u/153511070?v=4&s=100 "Lucía Ordoñez Vilanova's GitHub Avatar")](https://github.com/Luovtyrell)

Made by Lucía Ordoñez Vilanova

Gmail LinkedIn Telegram Discord