https://github.com/jeffersonribeiro/react-materialui-scaffolding

📦 React Single Page Application with MaterialUI starter-kit. Folder structure based on Alexis Mangin's medium post "How to better organize your React applications?"
https://github.com/jeffersonribeiro/react-materialui-scaffolding

materialui react scaffold

Last synced: 6 months ago
JSON representation

📦 React Single Page Application with MaterialUI starter-kit. Folder structure based on Alexis Mangin's medium post "How to better organize your React applications?"

• Host: GitHub
• URL: https://github.com/jeffersonribeiro/react-materialui-scaffolding
• Owner: jeffersonRibeiro
• Created: 2018-05-16T01:21:56.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2018-09-14T00:24:12.000Z (about 7 years ago)
• Last Synced: 2025-03-25T03:33:59.233Z (6 months ago)
• Topics: materialui, react, scaffold
• Language: JavaScript
• Homepage:
• Size: 155 KB
• Stars: 9
• Watchers: 2
• Forks: 4
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
## ⚛ React Single Page Application with MaterialUI starter-kit.



  

  


  React SPA with MaterialUI scaffolding



``` bash

npm install

npm start

``````

### Using:

- [MaterialUI](https://github.com/mui-org/material-ui)

- Alexis Mangin's [medium post](https://medium.com/@alexmngn/how-to-better-organize-your-react-applications-2fd3ea1920f1) as a guide to     better structure scalable React projects folder grouped by features or routes.

```

/src

  /components 

    /Button 

    /Notifications

      /components

        /ButtonDismiss  

          /images

          /locales

          /specs 

          /index.js

          /styles.scss

      /index.js

      /styles.scss

  /scenes

    /Home 

      /components 

        /ButtonLike

      /services

        /processData

      /index.js

      /styles.scss

    /Sign 

      /components 

        /FormField

      /scenes

        /Login

        /Register 

          /locales

          /specs

          /index.js

          /styles.scss

  /services

    /api

    /geolocation

    /session

      /actions.js

      /index.js

      /reducer.js

    /users

      /actions.js

      /api.js

      /reducer.js

  index.js 

  store.js

  ```

> "Each component, scene or service (a feature) has everything it needs to work on its own, such as its own styles, images,                translations,   set of actions as well as unit or integration tests. You can see a feature like an independent piece of code you will    use in your app   (a bit like node modules)." - Alexis Mangin

### Features

- Basic admin structure with Async Routes configured

- SASS

### Todo

- [ ] State management











A little project by Jefferson Ribeiro