React + MobX Boilerplate

Simple, I really got tired of setting up a structure for every react project I make, which lead into the birth of this little boilerplate code, here's what's included in it:

• TypeScript
• Sass (global styles and module styles)
• MobX + MobX State Tree 🥰
• Apisauce

This template takes heavily from Ignite CLI's boilerplate for React Native in terms of used tech and file structure

ibrahimelaradi / react-template

Template for developing react app with structure inspired by Ignite CLI's react native boilerplate

A react template heavily inspired by Ignite CLI's boilerplate for React Native, it uses a couple of generators with simple template customization.

Used Tech

• TypeScript 🥰
• Mobx State Tree for state management
• ApiSauce as an api client
• React Router V6 for routing ↖↗

Project Structure

src
├───apis
│   ├───base          // The base API that can be extended to implement clients
│   └───pokemon       // Example of extending the base API
├───assets            // Project assets
├───components        // Components folder
│   └───pokemon-card  // Example, generated by "yarn g component pokemon-card"
├───models            // Mobx models folder
│   ├───extensions    // Extensions to be used in mobx models
│   ├───pokemon       // Example, generated by "yarn g model pokemon"
│   └───root-store    // The root of the mobx store
├───pages             // Pages folder
│   └───pokemon-list  // Example, generated by "yarn g page pokemon-list"
├───router            // Router definition folder
├───styles            // Global styles
├───ui                // UI components folder
└───utils

…

View on GitHub

I'm currently working on a full example usage that will explain some of the concepts used in this project, until then, feel free to check out the repo on Github, any suggestions/contributions are very welcome!