Skip to content

truonghungit/react-starter-template

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

42 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

drawing React Starter Template

Pull Request Checks Quality Gate Status react typescript stars license code style: prettier

React stater template

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

🎯 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.

Testing

Format and lint

Workflow

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

image

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

πŸ“ License

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


Made with β™₯ by truonghungit.