React + TypeScript Starter Template

React starter template with TypeScript and TailwindCSS to kickstart your frontend project.

What's inside?

This starter template includes:

• React - Library for building user interfaces
• TypeScript - Your safety net when writing JavaScript
• TailwindCSS - Utility first CSS
• pnpm - Fast and efficient package manager
• Vite - Blazingly fast frontend build tool
• React Router - Client side routing solution for React
• ESLint & Prettier - Find & fix problems in the codebase and format code automatically on save
• Lucide React - Beautiful and consistent open-source icons for React
• Husky - Git hooks tool
  • Commit Lint - Force devs to follow conventional commit message
  • Lint Staged - Format & lint your code before committing, block commit if issues are detected
• Github Actions - Check, test, and build your code automatically on push and PR
• Dependabot - Create pull-request to update your dependencies
• Jest & React Testing Library - Unit test your components

Getting Started

1. Clone repo:

   Tips: You can use degit to clone this repo without running git clone. Learn more

   npx degit hanstanawi/react-ts-starter-template your-app-name

   or simply use this template on GitHub when creating new repository.

2. Install dependencies:

   Make sure you have pnpm installed. Learn more about installing pnpm.

   pnpm install
   

3. Run the development server

   pnpm dev

4. Open http://localhost:5137 with your browser to see the result.

   You can start editing the page by modifying App.tsx. The page auto-updates as you edit the file.

Testing

This starter template has Jest and Testing Library setup to run component tests. Tests are automatically executed on every pull request and push by GitHub Actions CI workflow.

You can run unit tests manually on your machine:

• Run all unit tests

  pnpm test

• Run test in watch mode

  pnpm test:watch

• Unit test coverage

  pnpm test:cov

Environment Variables

Vite offers a different approach of defining and using .env variables compared to Webpack. It exposes env variables on the special import.meta.env object Learn more about Vite environment variables here

• Defining your environment variables

  VITE_SOME_KEY=123
  

• Using environment variables in code

  import.meta.env.VITE_SOME_KEY;

• Accessing the mode the app is running in

  import.meta.env.MODE;

Other starter template kits

This repository contains separate branches of other starter template kits

• Storybook

  Integrate Storybook with this starter template. Checkout with-storybook branch to view.

  Clone repo using degit

  npx degit hanstanawi/react-ts-starter-template#with-storybook
  

• React Query

  Integrate React Query with this starter template. Checkout with-react-query branch to view.

  Clone repo using degit

  npx degit hanstanawi/react-ts-starter-template#with-react-query
  

Learn More

To learn more about React and TypeScript, take a look at the following resources:

• Learn React - learn about React fundamentals and APIs.
• Learn TypeScript - an interactive course to learn TypeScript
• Learn TailwindCSS - learn about TailwindCSS and its documentation
• Learn React with TypeScript - learn about integrating React with TypeScript
• Learn Testing Library - learn about Testing Library core queries
• React Testing Library tips - tips from Kent C. Dodds about Testing Library