React Starter Template

This is a React + TypeScript starter template built with Vite. We provide everything you'll need to get started building React Apps.

Live Demo

Changelog

🎯 Goals

Get started in seconds

This starter allows you to focus on development rather than learn and configure build tools. We've prepared the fantastic below for you.

• Vite Next Generation Frontend Tooling
• ReactJS with TypeScript Always update to the latest version

Testing

• Jest Test runner
• Testing Library Test UI from a users perspective (for React and Cypress)
• Cypress

Format and lint

• ESLint Enforce code standards & Prettier Code formatting
• Browserslist Supported browsers
• Commitizen
• Commitlint
• Lint Staged 🚫💩 slip into your code base!

Workflow

• Github action for pull request checks
• Pull Request template Consistent and helpful colabouration.

Library

• React Router Single Page App (SPA) navigation
• TailwindCSS Integrated
• Headless ui & heroicons

Example pages

• Home page as landing page
• Sign In, Sign Up pages,
• Dashboard page

Recent best practices

This repository provide an up to date example of React application following all recent best practices in various areas

💻 Getting started

Create project

Clone the latest version

git clone https://github.com/truonghungit/react-starter-template.git my-app
cd my-app

Previous versions are also available for download.

You can also click on Use this template on GitHub

Install dependencies.

yarn install

Start

Start your application in local development server with hot reload at http://localhost:3000.

yarn start

🤖 Testing

Unit tests

Execute all unit tests

yarn test:unit

Execute all unit tests and collect coverage

yarn test:unit:coverage

End to end testing

Run e2e tests

yarn test:e2e

😎 Make It Your Own

When using this starter project to build your own application you might consider some of the following steps:

• rename project in package.json name property and set appropriate version (eg 0.0.1 or 1.0.0)
• delete pre-existing CHANGELOG.md (you will generate your own with future releases of your features)
• update the README.md content with your context
• edit the title and Open Graph metadata properties in index.html
• replace logo in /public/images folder
• update github workflow if you need in .github/workflows

🌲 Branching

We use Trunk Based Development to accommodate short-lived branches and a "trunk" (our master branch) as a source of truth.

• Feature: feature/*

  Example: feature/JIRA-123-my-new-feature

• Bug: bugfix/*

  Example: bugfix/JIRA-123-fix-an-issue

• Release: release/*

  Example: release/JIRA-123-brand-new-product

🏆 Making Commits

We format our commit messages using Commitizen. This provides the project a consistent, easy structure that allows for automation opportunities.

• It is important that you use Commitizen when making commits

• In your terminal run yarn commit when making a commit to enter the interactive GUI.

💾 Pull Requests

This project has a template that sets the pull request structure that we expect from contributors.

• It is important to give as much context to get the best review from your peers.

  (write the pull request that you would love to encounter yourself)

• You do not have to fill out each section if it is not applicable.

🗜️ Merging

We always Squash our Pull Requests. This makes a cherry-pick from master to a release/* branch when addressing a Bug Fix easy.

Make sure to ALWAYS rebase (not merge) master into your local branch when developing. We strive for a flat Git commit history when possible.

🧰 Recommended VS Code extensions

• ESLint
• Prettier
• Gitlens
• Tailwind CSS
• VS Code Jest

📝 License

Copyright © 2022 truonghungit. This source code is licensed under the MIT license found in the LICENSE file.

^{Made with ♥ by truonghungit.}