Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/hungds99/react-typescript-boilerplate
Minimal setup to get React working in Vite with HMR and some ESLint rules.
https://github.com/hungds99/react-typescript-boilerplate
boilerplate react shadcn-ui tailwind-css typescript vite
Last synced: 14 days ago
JSON representation
Minimal setup to get React working in Vite with HMR and some ESLint rules.
- Host: GitHub
- URL: https://github.com/hungds99/react-typescript-boilerplate
- Owner: hungds99
- Created: 2024-10-20T01:40:59.000Z (26 days ago)
- Default Branch: main
- Last Pushed: 2024-10-21T10:34:25.000Z (24 days ago)
- Last Synced: 2024-10-23T01:07:01.970Z (23 days ago)
- Topics: boilerplate, react, shadcn-ui, tailwind-css, typescript, vite
- Language: TypeScript
- Homepage: https://react-typescript-boilerplate-kohl.vercel.app
- Size: 217 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React + TypeScript + Vite + Tailwind CSS Boilerplate
A minimal and efficient boilerplate for building modern web applications with **React**, **TypeScript**, **Vite**, **Tailwind CSS**, and **shadcn/ui**. This setup provides a fast and scalable development environment with a focus on styling and UI components.
## Key Features
- ⚡ **Vite**: Super-fast development server and build tool.
- 🛠 **TypeScript**: Strict type-checking for better code management.
- 🎨 **Tailwind CSS**: Utility-first CSS framework for rapid UI development.
- 🧩 **shadcn/ui**: Pre-built, customizable, and accessible UI components.
- 💅 **ESLint & Prettier**: Enforces consistent code quality and formatting.
- 🚀 **Optimized production build**: Ready for deployment.
## Tech Stack
- **React**: Component-based UI library for building user interfaces.
- **TypeScript**: Type-safe JavaScript for scalable, maintainable code.
- **Tailwind CSS**: Utility-first CSS framework for styling.
- **Vite**: Fast development server and build tool.
- **shadcn/ui**: Component library for quickly building modern UIs.
## How to Get Started
Follow these instructions to get the project up and running locally.
### 1. Clone the repository
```bash
git clone https://github.com/hungds99/react-typescript-boilerplate.git
```
### 2. Navigate into the project directory
```bash
cd react-typescript-boilerplate
```
### 3. Install dependencies
Make sure **Node.js** is installed. Then, install the required dependencies:
Using **npm**:
```bash
npm install
```
### 4. Start the development server
Run the development server and start building your app:
Using **npm**:
```bash
npm run dev
```
This will start the server at [http://localhost:5173](http://localhost:5173). Open this URL in your browser to see the running app.
### 5. Build for production (optional)
When you're ready to build your app for production:
Using **npm**:
```bash
npm run build
```
The production build will be generated in the `dist` folder.
### 6. Preview the production build
To preview the production build locally:
Using **npm**:
```bash
npm run preview
```
This will serve the build at [http://localhost:4173](http://localhost:4173).
## Deployment
### Deploying to Vercel
You can easily deploy this project using [Vercel](https://vercel.com/):
1. Push your code to GitHub.
2. Go to [Vercel](https://vercel.com/), connect your GitHub account, and import your repository.
3. Follow the steps to deploy. Vercel will automatically build and deploy the app for you.
Alternatively, you can deploy the `dist` folder to any static hosting service like [Netlify](https://www.netlify.com/) or [GitHub Pages](https://pages.github.com/).
## Contributing
Contributions are welcome! If you'd like to contribute, feel free to fork the repository and submit a pull request.