Awesome

<h1 align="center">♨️ React Nostalgia Boilerplate</h1> <div align="center"> <p> A React boilerplate with opinionated setup to help you quickly kickstart your applications. </p> <img src="https://img.shields.io/github/license/boilertown/react-nostalgia-boilerplate?style=flat-square" alt="MIT license" > </div>

Introduction

react-nostalgia-boilerplate is the first production-ready boilerplate from Boilertown creations.

The goal of this boilerplate is to maximize your effectiveness by present you:

🚀 A good application structure which is simple, scalable and easy to maintain.
🔥 Give you best and hot tools in the ecosystem to manage the workflows.
⚡️ Easy to customize your workflows. You will have all the granular control over all the operations.
🧑‍💻 Improve your Developer eXperience (DX). You can just focus on coding and press Save button.

This setup is opinionated as it is based on my experience of working with difference React projects. It works very well to me and my team and I hope I can make you feel the same.

The Setup

React v18
React Router v6
TypeScript
UI development with Storybook
Unit test with Testing-library
E2E testing with Playwright
Linting with Eslint and code formatting with Prettier
Develop and build production with Babel and Webpack

Get Started

Use Boilertown CLI.

# npm
npm create boilertown@latest -- -b react-nostalgia-boilerplate

# yarn
yarn create boilertown -b react-nostalgia-boilerplate

# pnpm
pnpm create boilertown -b react-nostalgia-boilerplate

# bun
bun create boilertown/react-nostalgia-boilerplate [project-name]

Click the green "Use this template" button to generate a new repository with the same structure and files.
<img src="https://docs.github.com/assets/cb-36544/images/help/repository/use-this-template-button.png" alt="Use this template button" width="500">
Ref: Github Docs

Development

Run the app in development environment:
```
pnpm dev
```
Run components unit tests with jest:
```
pnpm test
```
Run e2e tests with playwright:
```
pnpm test:e2e
```
Build the app in production mode:
```
pnpm build
```
Run the app in production mode. It uses static files from build folder.
```
pnpm serve
```

GitHub Actions

This boilerplate uses GitHub Actions to perform unit test on Pull Request. You can see the details at pr-test.yml.

Contributing

react-nostalgia-boilerplate ❤️ your contributions. If you have any ideas, suggestions, fixes, feel free to contribute.