react typescript boilerplate 🚀🚀🚀

Is an opinionated web app boilerplate including web development tools and workflow of react ecosystem, industry-standard tools, best practices and a scalable base template. A solid starting point for enterprise-grade projects

This work made with love to setup this architecture and dev environment for new react.js projects.

Benefits

• Quickstart a project in seconds and focus on features, not on frameworks or tools

• Industrial-grade tools, ready for usage in a continuous integration environment and DevOps

• Scalable architecture with base app template including example components, services and tests

Features

• Typescript

  • Typescript is the key to scalability, easy-to-debug code and create maintainable large applications and codebases with a highly productive development experience.

• Predictable state management (Flux)

  • Unidirectional data flow allows for change logging and time travel debugging.

• Mock API

  • Start development immediatly even if the real APIs haven't been created yet (Independence, backup-plan, Ultra-fast, Test slowness, Aids testing).

• Next generation CSS/SASS

  • SASS Stylesheets using The 7-1 architecture pattern from Sass Guidelines
  • Inline Styling

• Best Practices

  • Solid workflow to make your code healthy

• Test setup (Jest Testing framework for React applications)

  • Automatically guarantee code quality and non-breaking changes.

• Code quality (linting) for Typescript.

  • Tslint + Eslint + prettier = ❤️

• Commit conventions : validate commit conventions automatically (commitlint + husky + commitizen)

  • Automatically check and enforce your commit conventions
  • Commitlint integration with Travis CI (Continous Integration)
  • Commit message wizard (tools available that help (new joiners or external contributors) with crafting compliant commit messages.) : commitizen + git-cz
  • Autofix issues before commit with lint-staged

• Storybook

  • Developing Components and see all their states in isolation from your app.

In progress Features

• i18n internationalization

  • Easily add and support multiple languages.

• Quick scaffolding

  • Create components, containers, routes...

• TypeScript source code Documentation

  • Use a documentation generator for TypeScript projects such as or other alternative - https://typedoc.org/

• Environment Configuration

  • development, staging and production environment configurations

Getting Started

• yarn start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

• yarn test

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.

• yarn build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

See the section about deployment for more information.

• NB: This project was bootstrapped with Create React App.

Learn More

You can learn more in the Create React App documentation.

To learn React, check out the React documentation.