https://github.com/anasyakubu/react-vite-ts-starter
React Vite Starter with Tailwind CSS, Axios, React Icons, and Sass. This project is built with modern tools to quickly bootstrap a React app with Vite typescript, Tailwind CSS, and essential libraries like Axios and React Icons.
https://github.com/anasyakubu/react-vite-ts-starter
axios javascript nodejs npm-package prettier scss tailwindcss typescript
Last synced: 8 months ago
JSON representation
React Vite Starter with Tailwind CSS, Axios, React Icons, and Sass. This project is built with modern tools to quickly bootstrap a React app with Vite typescript, Tailwind CSS, and essential libraries like Axios and React Icons.
- Host: GitHub
- URL: https://github.com/anasyakubu/react-vite-ts-starter
- Owner: anasyakubu
- License: mit
- Created: 2024-12-01T16:32:39.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-12-01T16:54:04.000Z (over 1 year ago)
- Last Synced: 2024-12-30T20:35:54.753Z (over 1 year ago)
- Topics: axios, javascript, nodejs, npm-package, prettier, scss, tailwindcss, typescript
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/react-vite-ts-starter
- Size: 54.7 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Security: SECURITY.md
Awesome Lists containing this project
README
## **React Vite Starter with Tailwind CSS, Axios, React Icons, and Sass**
Welcome to the React Vite Starter project! This project is built with modern tools to quickly start a React app with Vite, Tailwind CSS, and essential libraries like Axios and React Icons.
---
## **Usage**
```bash
npx react-vite-ts-starter
```
```bash
mkdir my-new-project
cd my-new-project
npx react-vite-ts-starter
```
### **Table of Contents**
- [Features](#features)
- [Prerequisites](#prerequisites)
- [Installation](#installation)
- [Project Structure](#project-structure)
- [Available Scripts](#available-scripts)
- [Customization](#customization)
- [Contributing](#contributing)
---
## **Features**
- ⚡ **Vite** - Fast and optimized React development experience.
- 🎨 **Tailwind CSS** - Utility-first CSS framework for rapid UI development.
- 🔗 **React Router** - Simple and declarative routing.
- 🔗 **Axios** - Promise-based HTTP client.
- 🎉 **React Icons** - Thousands of popular icons as components.
- 🎨 **Sass** - Powerful CSS preprocessor.
---
## **Prerequisites**
Make sure you have the following installed:
- [Node.js](https://nodejs.org/) (v16 or higher)
- [npm](https://www.npmjs.com/) or [yarn](https://yarnpkg.com/)
---
## **Installation**
Follow these steps to set up and run the project on your local machine.
### 1. Clone the repository
```bash
git clone https://github.com/anasyakubu/react-vite-ts-starter.git
cd react-vite-js-starter
```
### 2. Install dependencies
This command will install all required dependencies, including React, Tailwind CSS, Axios, React Icons, and Sass.
```bash
npm install
```
### 3. Start the development server
Run the following command to start the development server:
```bash
npm run dev
```
Open [http://localhost:5173](http://localhost:5173) to view the app in the browser.
---
## **Project Structure**
```
├── public/ # Static files
├── src/ # Source files
│ ├── home/ # Home component
│ │ └── Home.tsx # Main Home page component
│ ├── App.tsx # Main application component
│ ├── main.tsx # Application entry point
│ ├── index.css # Tailwind CSS imports
│ └── App.css # Additional CSS (optional)
├── tailwind.config.ts # Tailwind CSS configuration
├── postcss.config.ts # PostCSS configuration
├── package.json # Project metadata and dependencies
└── README.md # Project documentation
```
---
## **Available Scripts**
| Script | Description |
| ----------------- | --------------------------------- |
| `npm install` | Installs all dependencies |
| `npm run dev` | Starts the development server |
| `npm run build` | Builds the project for production |
| `npm run preview` | Previews the production build |
---
## **Customization**
You can customize the project as per your requirements.
### 1. **Updating the Home Page**
To modify the home page:
- Edit the file `src/home/Home.jsx`.
### 2. **Adding New Routes**
To add new pages and routes:
1. Create a new component in the `src/pages` folder (e.g., `About.tsx`).
2. Update `App.tsx` to include the new route:
```jsx
} />
} />
```
### 3. **Tailwind CSS Customization**
You can extend the Tailwind CSS theme by editing the `tailwind.config.ts` file:
```javascript
module.exports = {
theme: {
extend: {
colors: {
primary: "#1E40AF",
},
},
},
};
```
---
## **Contributing**
Contributions are welcome!
To contribute:
1. Fork the repository.
2. Create a new branch for your feature or bug fix.
3. Commit your changes.
4. Submit a pull request.
---
## **License**
This project is licensed under the [MIT License](LICENSE).
---
## **Contact**
- **Author:** Anas Yakubu
- **GitHub:** [https://github.com/anasyakubu](https://github.com/anasyakubu)
- **Portfolio:** [https://anasyakubu.vercel.app](https://anasyakubu.vercel.app)
---