Project structure

Easy to understand and maintainable app structure.

App architecture

The app is designed to be scalable, testable and maintainable so that it meets the requirements of a real-world application. One of the key concepts of Oreact is dividing a large app into small pieces of JSX components. A component can be a Page, Layout, Store or Theme etc. It's all well decoupled, so it's easy to understand, reuse and maintain.

Folder structure

Oreact creates an application with a special folder structure. It groups application logic by pages. Each page contains its own components, stores, routing and layout config etc.

├── .deploy
│   ├── orup.js
│   └── server-key.pem
├── build
├── public
│   ├── assets
│   ├── favicon.ico
│   ├── manifest.json
│   └── robots.txt
├── src
│   ├── @common
│   │   └── config.js
│   ├── app
│   │   ├── layouts
│   │   │   ├── myLayout
│   │   │   │   ├── Layout.js
│   │   │   │   └── config.js
│   │   │   └── index.js
│   │   ├── pages
│   │   │   ├── myPage
│   │   │   │   ├── Component.js
│   │   │   │   ├── store.js
│   │   │   │   └── config.js
│   │   │   └── index.js
│   │   ├── stores
│   │   │   ├── myStore.js
│   │   │   └── index.js
│   │   ├── themes
│   │   │   ├── myTheme.js
│   │   │   └── index.js
│   │   ├── styles
│   │   │   └── index.css
│   │   ├── graphql
│   │   │   ├── fragments
│   │   │   │   └── **/*.graphql
│   │   │   ├── mutations
│   │   │   │   └── **/*.graphql
│   │   │   └── queries
│   │   │       └── **/*.graphql
│   │   ├── HTML.js
│   │   └── config.js
│   ├── server
│   │   ├── graphql
│   │   │   ├── middlewares
│   │   │   ├── resolvers
│   │   │   │   ├── mutations
│   │   │   │   ├── queries
│   │   │   │   ├── subscriptions
│   │   │   │   └── index.js
│   │   │   └── schema.js
│   │   ├── models
│   │   │   ├── myModel.js
│   │   │   └── index.js
│   │   └── config.js
│   ├── client.js
│   ├── index.js
│   ├── runtimeConfig.js
│   └── server.js
├── package.json
├── razzle.config.js
├── tailwind.base.css
├── tailwind.js
├── .babelrc
├── .gitignore
└── README.md