Modular React MobX Typescript Boilerplate

A modular boilerplate suitable for large and complex applications built with latest stack React, Typescript, MobX, Webpack, Storybook, Styled Components, Cypress and followed industry standard practices like ✔️Clean Code, 🧪TDD

Table of Contents

1. Introduction

2. Quick Start

3. Tech Stack

4. Folder Structure

5. Best Practices

   5.1 Clean Code

   5.2 Test-driven Development

6. Contributing

Please note that this boilerplate is production-ready and not meant for beginners! If you're just starting out with react or redux, please refer to https://github.com/petehunt/react-howto instead. If you want a solid, battle-tested base to build your next product upon and have some experience with react, this is the perfect start for you.

Introduction

Most of the react developers might have spent more than 6+ hours of time to create a development-ready repo to start the development. Thanks to react community 🙏 for creating a bunch of awesome starter-kits.

I've worked on 15+ complex and feature-rich projects developed with React and React Native. For all of the projects, below things are must to achieve all -abilities.

• Test cases environment
• Linting (eslint)
• Code formatter (prettier)
• Hooks (Ex: Pre-commit hook)
• Internationalization (I18n)
• Storybook
• Build environments and npm scripts

If your project has many modules, then I suggest you to follow the folder structure followed in this repo.

Quick start

1. Make sure that you have Node.js >=12.6.0 and npm >=5.6.0 or yarn >=1.17.3
2. Clone this repo using git clone https://github.com/0xc0d3r/modular-react-typescript-boilerplate.git <YOUR_PROJECT_NAME>
3. Move to the appropriate directory: cd <YOUR_PROJECT_NAME>.
   
4. Run yarn setup in order to install dependencies and clean the git repo.
   At this point you can run yarn start to see the output at http://localhost:3000.
5. Follow this guide to build the application in various environments (Ex: alpha, production, etc.)

Now you're ready to rumble!

Tech stack

This boilerplate is built with modern frontend tools. There are community opinionated tools like Typescript and MobX. Trust me, these two adds a lot of value to the development in terms of less type errors/bugs, less boilerplate with MobX and leveraging Object oriented principles.

• React
• Typescript
• MobX
• Webpack
• Styled Components
• Jest, react-testing-library

Below tools/libraries provide best developer experience in a team

• husky
• yarnhook
• lint-staged
• madge

Do you use Redux?

I want to add support for Redux as well as most of the developers use it. You can create a pull-request if you want to contribute.

Folder Structure

COMMON
    components
    constants
    fixtures
    i18n
    images
    navigation
    routes
    services
    stores
    styleGuide
    themes
    utils


MODULE1
    components
    constants
    fixtures
    routes
    services
    stores
    themes
    utils

MODULE2
    components
    constants
    fixtures
    routes
    services
    stores
    themes
    utils

Best Practices

Developers are often tempted to consider their work complete when the application operates as expected. And We often forget to refactor the code as per clean code guidelines, not following the suitable design patterns, not writing the test cases, etc.

If we do not follow the best practices, your code will become messy and developers resist to modify or add new features. Below are some of the practices I follow while developing

• 7 architectural attributes of a reliable react component
• Clean code by Robert C Martin
• Test-driven Development (TDD) by Kent Beck
• Clean architecture by Robert C Martin

Clean Code

(above image used from https://github.com/ryanmcdermott/clean-code-javascript)

Programming is the art of telling another human what one wants the computer to do. Donald Knuth

Clean code is about recognizing that your audience isn't just a computer, it's real-live humans! Let's keep this in our mind and develop quality software.

Thanks to ryanmcdermott for creating clean-code-javascript.

Test-driven Development

The Test Driven Development (TDD) is a software engineering practice that requires unit tests to be written before the code they are supposed to validate.

(above image used from https://hackernoon.com/introduction-to-test-driven-development-tdd-61a13bc92d92)

Check the implementation of the Todo App following TDD and I committed for each state. You can see Red, Green, and Refactor commits.

Contributing

Anyone and everyone is welcome to contribute to this project. The best way to start is by checking our open issues, submit a new issue or feature request, participate in discussions, upvote or downvote the issues you like or dislike, send pull requests.