React-Starter-Project — Vite Starter Template

SHA-256: d1059025d58ac73344c5b4b05a5c7760e194fe1388829d3fc4c0829bd06966bb

2026-10-03T18:54:16.181Z

<div style={{display:"flex"; justfiy-content:"center"; width: "100vw"}}>
  <img src="https://github.com/FelixFern/React-Starter-Project/assets/28957554/8119e7d8-1394-4ccd-babf-5a8afc0dc577" alt="react" width="100"/>
</div>

# ⚛ Felix's React Starter Project - Vite + React + Typescript with SWC

This template provides a minimal setup to get React working in Vite to build your app with ease, this template provides you with how I usually structure my React project directories and preconfigured Prettier to give you good DX when developing a frontend application. This project also includes [Shadcn UI](https://ui.shadcn.com/) and [Tailwind CSS](https://tailwindcss.com/) to help you build your UI as quickly as possible.

<div style={{display: "flex"; column-gap: "1rem", justify-content: "center", margin-top: "1rem"}}>
  <img width="500" alt="image" src="https://github.com/FelixFern/React-Starter-Project/assets/28957554/ffc1a46a-cbcd-4083-81a1-a69ced8758d9">
  <img width="500" alt="image" src="https://github.com/FelixFern/React-Starter-Project/assets/28957554/ac4876e5-0b9f-4190-af42-7573924c104a">
</div>

## Pre-requisite

- Node.js v18.16 and up with package manager (npm, yarn, or pnpm)
- Biome.js VSC Extension (for VS Code User)

## Dependencies Used

- React v18.2.0 with Typescript
- Axios (for Data Fetching)
- Tanstack Router (for Routing): https://tanstack.com/router/latest
- Tanstack Query (for Server Side State): https://tanstack.com/router/latest
- Tailwind CSS (CSS Alternative): https://tailwindcss.com/
- Shadcn (Component Library): https://ui.shadcn.com/

## How to use

1. Click the "Use this template" button and select "Create a new repository", after that you can change the name of the project as you like

<img width="1547" alt="Screenshot 2024-02-07 at 20 35 32" src="https://github.com/FelixFern/React-Starter-Project/assets/28957554/0547b4e5-be4b-46bf-824b-4a89dc276b76"/>

or, you can directly clone this repository using this command,

```
git clone https://github.com/FelixFern/React-Starter-Project
```

2. Then, install all the needed dependencies using your desired package manager,

```
pnpm install
```

3. After that, you can start using this template and edit as you like! and to start the project use

```
pnpm run dev
```

## 🟩 Features / Examples Included

1. Fetching Data Example ✅
2. Data Pagination Example ✅
3. Routing ✅
4. Tanstack Router Params Usage ✅
5. Custom Hooks ✅
6. Biome.js for Linter ✅
7. CI for Linter with Github Actions ✅
8. Pre-commit Hooks

## 🟧 Next Improvement

1. JWT Auth Session Hooks
2. Data Table Example
3. Form Example
4. Tanstack Path Params Usage

If you have any inputs or suggestions, add them as an [Issues](https://github.com/FelixFern/React-Starter-Project/issues) and we'll discuss them!

## 🗒️ Credits

[Pokemon APIs](https://pokeapi.co/) by Paul Hallet (used for data fetching example)

## 🙎‍♂️ Maintained by

- @Felix Fernando | [Github](https://github.com/FelixFern) | [LinkedIn](https://www.linkedin.com/in/felix-fern/)