Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/midoahmed/react-typescript-boilerplate

🚀 Modern react web app boilerplate for enterprise-grade projects, highly scalable, best developer experience and a focus on performance and best practices (React.js, Typescript, Mock API, Hooks, SASS, Bootstrap, Jest, Storybook, Conventional Commits)
https://github.com/midoahmed/react-typescript-boilerplate

7-1pattern bootstrap commitizen commitlint flux hooks husky i18n json-server lint-staged react react-router sass storybook tslint typescript

Last synced: 8 days ago
JSON representation

🚀 Modern react web app boilerplate for enterprise-grade projects, highly scalable, best developer experience and a focus on performance and best practices (React.js, Typescript, Mock API, Hooks, SASS, Bootstrap, Jest, Storybook, Conventional Commits)

Awesome Lists containing this project

README 

        


  Logo




# 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](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](https://facebook.github.io/create-react-app/docs/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](https://facebook.github.io/create-react-app/docs/deployment) for more information.



- NB: This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).



## Learn More



You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).



To learn React, check out the [React documentation](https://reactjs.org/).