{"id":25162936,"url":"https://github.com/themgoncalves/react-adventure","last_synced_at":"2025-08-30T09:38:14.444Z","repository":{"id":49953579,"uuid":"103127798","full_name":"themgoncalves/react-adventure","owner":"themgoncalves","description":"⛰ React high-ending architecture \u0026 patterns ready for use. Made for big and small projects. PWA Ready.","archived":false,"fork":false,"pushed_at":"2021-06-08T00:45:44.000Z","size":6973,"stargazers_count":69,"open_issues_count":1,"forks_count":8,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-04-30T15:10:41.770Z","etag":null,"topics":["asynchronous-component","cypress","decorators","e2e-tests","enzyme","jest","progressive-web-app","pwa","react-router-v4","reactjs","redux","redux-saga","styled-components"],"latest_commit_sha":null,"homepage":"https://themgoncalves.github.io/react-adventure/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/themgoncalves.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":".github/CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-09-11T11:31:08.000Z","updated_at":"2024-12-10T04:10:04.000Z","dependencies_parsed_at":"2022-08-29T01:30:14.203Z","dependency_job_id":null,"html_url":"https://github.com/themgoncalves/react-adventure","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/themgoncalves/react-adventure","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/themgoncalves%2Freact-adventure","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/themgoncalves%2Freact-adventure/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/themgoncalves%2Freact-adventure/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/themgoncalves%2Freact-adventure/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/themgoncalves","download_url":"https://codeload.github.com/themgoncalves/react-adventure/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/themgoncalves%2Freact-adventure/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":272833295,"owners_count":25000870,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-30T02:00:09.474Z","response_time":77,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["asynchronous-component","cypress","decorators","e2e-tests","enzyme","jest","progressive-web-app","pwa","react-router-v4","reactjs","redux","redux-saga","styled-components"],"created_at":"2025-02-09T03:30:55.160Z","updated_at":"2025-08-30T09:38:14.422Z","avatar_url":"https://github.com/themgoncalves.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ⛰ React Adventure\n\u003e **React high-ending architecture \u0026 patterns** ready for use. Made for big and small projects. _PWA Ready_.\n\n[![Known Vulnerabilities][vulnerabilities-image]][vulnerabilities-url]\n[![GitHub issues][issues-image]][issues-url]\n[![GitHub stars][stars-image]][stars-url]\n[![GitHub forks][forks-image]][forks-url]\n[![Awesome][awesome-image]][awesome-url]\n[![GitHub All Releases][releases-image]][releases-url]\n\n\u003cbr /\u003e\n\u003cbr /\u003e\n\u003cdiv align=\"center\"\u003e\u003cimg src=\"./static/images/themgoncalves.png\" alt=\"themgoncalves logo\" /\u003e\u003c/div\u003e\n\u003cbr /\u003e\n\u003cbr /\u003e\n\n## Description\n\nWe all know the struggle about _Frontend patterns_, specially when it comes to big projects, it become a mess over the time.\n\nFor this reason we created the `React Adventure` in order to provide a **workable, maintainable and scalable environment overtime**,\nbuilt based on [React Adventure Pattern Proposal](https://github.com/themgoncalves/react-adventure-pattern-proposal),\nproviding a high-ending modular architecture with screen centric development for building SPAs with clean separation of concerns, high cohesion and maintainability.\n\n![](./static/images/screens-shots/main.png)\n\n## Features\n\n| Feature        | Experimental or Beta  | For Development | For Production\n| ------------- |:-------------:|:-------------:|:-------------:|\n| [Progressive Web Application Ready](https://developers.google.com/web/progressive-web-apps/)     | ✖ | ✖ | ✔ |\n| [ES7 Decorators](https://github.com/tc39/proposal-decorators)     | ✔ | ✔ | ✖ |\n| [Asynchronous Components Loading](https://github.com/jamiebuilds/react-loadable)     | ✖ | ✔ | ✔ |\n| [Code Splitting \u0026 Chunks](https://webpack.js.org/configuration/optimization/)     | ✖ | ✔ | ✔ |\n| [Custom chunks name for async requests](https://webpack.js.org/guides/code-splitting/)     | ✖ | ✔ | ✔ |\n| [`prefetch` \u0026 `preload` ready](https://medium.com/webpack/link-rel-prefetch-preload-in-webpack-51a52358f84c)     | ✖ | ✔ | ✔ |\n| [Decentralized Router Configuration](https://github.com/ReactTraining/react-router/tree/master/packages/react-router-config)     | ✔ | ✔ | ✔ |\n| [Router State Synchronized with Redux](https://github.com/ReactTraining/react-router/tree/master/packages/react-router-redux)     | ✔ | ✔ | ✔ |\n| [Document Head Manager (SEO)](https://github.com/nfl/react-helmet)     | ✖ | ✔ | ✔ |\n| [Hashed files in Production build (e.g. `[name].[hash].bundle.js`)](https://webpack.js.org/configuration/output/#output-filename)     | ✖ | ✔ | ✖ |\n| [Hoist JSX el. as value types in the highest scope](https://babeljs.io/docs/plugins/transform-react-constant-elements/)     | ✖ | ✔ | ✖ |\n| [Subresource Integrity)](https://www.w3.org/TR/SRI/)      | ✖ | ✖ | ✔ |\n| [SVG as React Component](https://github.com/smooth-code/svgr)     | ✖ | ✔ | ✖ |\n| [Remove PropTypes from Production build](https://github.com/oliviertassinari/babel-plugin-transform-react-remove-prop-types)     | ✖ | ✖ | ✔ |\n| [Typechecking With PropTypes](https://reactjs.org/docs/typechecking-with-proptypes.html)     | ✖ | ✔ | ✖ |\n| [Output fiiles Treemap](https://github.com/webpack-contrib/webpack-bundle-analyzer)     |  ✖ | ✔ | ✖ |\n| [Assets compression served them with Content-Encoding](url)     | ✖ | ✖ | ✔ |\n| [Style Guide Centralized \u0026 Globally available](https://www.styled-components.com/docs/advanced)     | ✖ | ✔ | ✔ |\n| [Component Style Guide (React Styleguidist)](https://github.com/styleguidist/react-styleguidist)     | ✖ | ✔ | ✔ |\n| [HTML output minified](url)     | ✖ | ✔ | ✔ |\n| [E2E Tests](https://www.cypress.io/)     | ✔ | ✔ | ✖ |\n| [Snapshot testing](https://facebook.github.io/jest/docs/en/snapshot-testing.html)     | ✖ | ✔ | ✖ |\n| [Code testing](https://facebook.github.io/jest/docs/en/snapshot-testing.html)     | ✖ | ✔ | ✖ |\n| [Webpack 4 with Custom Configs (Dev \u0026 Prod.)](https://webpack.js.org/)     |  ✖ | ✔ | ✖ |\n  [Redux with Custom Configs (Dev \u0026 Prod.)](https://redux.js.org/)     |  ✖ | ✔ | ✔ |\n| [Redux Saga](https://github.com/redux-saga/redux-saga)     |  ✖ | ✔ | ✔ |\n| [ES6 ready](http://es6-features.org/)     | ✖ | ✔ | ✖ |\n| [ES7 ready](https://medium.freecodecamp.org/ecmascript-2016-es7-features-86903c5cab70)     | ✖ | ✔ | ✖ |\n| [ES8 ready](https://hackernoon.com/es8-was-released-and-here-are-its-main-new-features-ee9c394adf66)     | ✖ | ✔ | ✖ |\n| [React 16+](https://github.com/facebook/react/)     | ✖ | ✔ | ✔ |\n| [styled-components](https://github.com/styled-components/styled-components)     | ✖ | ✔ | ✔ |\n| [super-query](https://github.com/themgoncalves/super-query)     | ✖ | ✔ | ✔ |\n| [Webpack Aliases transformation](https://github.com/sebinsua/babel-plugin-webpack-aliases)     | ✖ | ✔ | ✔ |\n| [Loads environment vars from a `.env` file](https://github.com/motdotla/dotenv)     | ✖ | ✔ | ✖ |\n| [Airbnb JavaScript Style Guide](https://github.com/airbnb/javascript)     | ✖ | ✔ | ✖ |\n| [Git Hooks (Prevent bad `git commit`, `git push`, or whatever you want)](https://github.com/typicode/husky)     | ✖ | ✔ | ✖ |\n| [Image Compression](https://github.com/tcoopman/image-webpack-loader)     | ✖ | ✔ | ✔ |\n| [Real time update](https://github.com/gaearon/react-hot-loader)     | ✖ | ✔ | ✖ |\n\n\u003cbr /\u003e\n\n## React Adventure Pattern\n\n### Motivation\n\nWe all have or will work with outdated/monolith project, hard to code, maintain and to implement new stacks of technology.\n\nUsually in those projects, we face **huge JavaScripts files**, sometimes with **over than 1MB**! This is a **huge issue**, especially for mobile uses.\n\nAccording to [Sam Saccone from Google](https://www.youtube.com/watch?v=RWLzUnESylc), this file would take to be read by the browser on Samsung Galaxy S7 ~850 ms and Nexus 5 in **~1700 ms**!\n\nBesides that, we would have *scalability penalty* for such environment, costing more server power ~~and money!~~ to deliver the same expected behavior.\n\nIn other words, this would be an unsustainable environment we would be facing, with our resources being drained each time more, and by resources, I mean both **financial** and **human**.\n\nBecause of such actual possibility, we build **React Adventure**.\n\n\u003e _The ultimate measure of a man is not where he stands in moments of comfort and convenience, but where he stands at times of challenge and controversy._\n\u003e ###### _Martin Luther King Jr._\n\n\u003cbr /\u003e\n\n### Goal\n\nAs Engineers, we're constantly looking for new ways to *improve* and *add new features* to our code **without have to refactor** it.\n\nBy this reason, we came up with this approach, which give us the ability to:\n\nParaphrasing Steve Krug:\n\u003e _\"Making every component, function or screen self-evident is like having good lighting in a store: **it just makes everything seem better**.\"_\n\nSo we defined as a goal:\n\n* Make every `component, function or screen self-evident`.\n* To create a `readable` code.\n* To `safely delete` legacy/unused code without effort or break the application.\n* To `easily create or update` different part of the application, in the shortest possible time.\n* Be able to `implement new techs with minimum refactory effort`.\n\n### Structure Pattern\n\nThe bellow structure is the result of a several patterns studies and implementations over the time.\n\n```sh\nreact-adventure\n├── configuration                         # Configuration folder\n│   ├── jest\n│   │   ├── __mocks__\n│   │   │   ├── file.js                   # file mock\n│   │   │   ├── react.js                  # react mock\n│   │   │   └── react-router-dom.js       # react-router-dom mock (BrowserRouter)\n│   │   ├── helpers\n│   │   │   └── theme.js                  # theme (_vars.scss) parsed into object\n│   │   ├── setup.env.js                  # jest env setup\n│   │   ├── setup.framework.js            # test framework jest setup\n│   │   └── setup.styled-components.js    # styled-component custom render functions\n│   ├── application\n│   │   └── settings.js                   # Application settings file\n├── cypress                               # cypress E2E directory\n│   ├── styleguidist\n│   │   ├── styles                        # CSS styles to be loaded into the style guide\n│   │   ├── wrappers\n│   │   │   └──styled-components          # Wrappers for Styled-Components\n│   │   │      └── ThemeWrapper.js        # Insert styled-components' theme into styleguidist env.\n│   │   └── settings.js                     # Styleguidist config\n│   ├── webpack\n│   │   ├── config.dev.js                 # Webpack development config\n│   │   ├── config.production.js          # Webpack production config\n│   │   └── rules.js                      # Webpack rules\n├── cypress                               # cypress E2E directory\n├── node_modules\n├── scripts                               # custom scripts (.sh)\n│   └── server-check.sh                   # check if dev server is online\n├── source                                # source folder\n│   ├── app                               # app source\n│   │   ├── components                    # react components (dumb components) for universal use\n│   │   │   └── v1                        # component's version\n│   │   │      ├── button                 # button component\n│   │   │      ├── input                  # input component\n│   │   │      └── loading                # loading screen component\n│   │   │          ├── index.jsx\n│   │   │          └── styles.js\n│   │   ├── enhancers                     # class/function/method/property enhancers\n│   │   │   ├── animate                   # @animate ⟶ screen entrance animation\n│   │   │   │   └── index.jsx\n│   │   │   ├── auth                      # @auth ⟶ require authentication for given component\n│   │   │   │   └── index.jsx\n│   │   │   └── bindme                    # @bindme ⟶ automatically bind function to the main scope (replaces this.fooBar.bind(this))\n│   │   │       └── index.js\n│   │   │   ├── loadable                  # custom react-loadable wrapper\n│   │   │   │   └── index.js\n│   │   ├── screens                       # screen components\n│   │   │   ├── errors                    # base screen name\n│   │   │   │   └── not-found             # screen name\n│   │   │   │       ├── route.js          # route configurations\n│   │   │   │       ├── screen.jsx        # React Screen Component\n│   │   │   │       └── styles.js         # component's styles\n│   │   │   ├── home                      # screen component\n│   │   │   │   ├── route.js              # route configurations\n│   │   │   │   ├── screen.jsx            # React Screen Component\n│   │   │   │   └── styles.js             # component's styles\n│   │   │   ├── restricted\n│   │   │   │   ├── route.js\n│   │   │   │   ├── screen.jsx\n│   │   │   │   └── styles.js\n│   │   │   └── root\n│   │   │       ├── route.js              # main app. route ⟶ import all used route into a main route\n│   │   │       └── screen.jsx            # Root Component ⟶ application setup\n│   │   ├── state                         # application data state\n│   │   │   ├── actions                       # Redux Actions\n│   │   │   │   ├── index.js                  # main actions\n│   │   │   │   └── types.js                  # actions types\n│   │   │   ├──reducers                   # Redux Reducer\n│   │   │   │   ├── auth.js               # authentication reducer\n│   │   │   │   └── index.js              # root reducer ⟶ combine all reducers\n│   │   │   ├── sagas                     # sagas (redux-saga middleware)\n│   │   │   │   ├── auth.js               # authentication saga\n│   │   │   │   └── index.jsx             # root saga ⟶ export all sagas\n│   │   │   ├── store\n│   │   │   │   ├── index.js\n│   │   │   │   ├── store.config.dev.js   # redux-store config for development\n│   │   │   │   └── store.config.prod.js  # redux-store config for production\n│   │   ├── styles                        # styles folder\n│   │   │   ├── _vars.scss                # style-guide settings\n│   │   │   ├── base.scss                 # global styles, e.g. body, html, etc.\n│   │   │   ├── reset.scss                # css reset/reboot, imported from bootstrap\n│   │   │   └── responsive-grid.scss      # bootstrap layout system import\n│   │   ├── utils                         # global code snippets\n│   │   │   └── index.js                  # application services\n│   ├── application.jsx                   # index application file - main imports \u0026 setup\n│   └── index.hbs                         # base application html\n├── static\n│   ├── images\n│   └── robots.txt\n```\n\nNote that in the `components` folder, there's a folder called `v1`, which is to represent the current components versions.\n\n## Asynchronous Component Preview\n\nOne of the `React Adventure` _features_ is the component loading by demand (asynchronous loading)., which give us the power of really small JavaScript files, splitted into chunks.\n\nTake a peek on the _network_ tab and see the files being loaded by demand.\n\n![](./static/images/screens-shots/app-network-demo.gif)\n\n## Installation\n\nSince we have experience some issues with NPM along the time, we strongly recomment the use of [YARN Package Manage](https://yarnpkg.com/en/);\n#### Familiar with Git?\n\nClone this repository with the following commands:\n```sh\n\u003e git clone https://github.com/themgoncalves/react-adventure.git\n\u003e cd react-adventure\n```\n\u003cbr /\u003e\n\n#### Install the Dependencies\n\n```sh\nyarn install\n```\n\n\u003cbr /\u003e\n\n#### Run the Application\n\n```sh\nyarn start\n```\n\n*Or With Webpack Dashboard*\n\n```sh\nyarn start:dev\n```\n\n\u003cbr /\u003e\n\n#### Linting the code\n\n```sh\nyarn lint\n```\n\n\u003cbr /\u003e\n\n#### Run the Tests Suites\n\n**Jest**\n\n```sh\nyarn test\n```\nOr with `watch` options:\n\n```sh\nyarn test:watch\n```\n\n\u003cbr /\u003e\n\n**E2E**\n\n```sh\nyarn test:e2e\n```\n\n\u003cbr /\u003e\n\n## Commands available\n\n| Command | Description |\n|---------| ----------- |\n| `build` | build the application for production |\n| `start` | start the application |\n| `start:dev` | start the application with Webpack Dashboard |\n| `start:silence` | start the application with less output messages |\n| `lint` | lint the application's code |\n| `lint:fix` | lint the application's code \u0026 fix |\n| `cypress` | start e2e tests with cypress |\n| `cypress:open` | open cypress |\n| `cypress:record` | start e2e tests with cypress in the record mode |\n| `cypress:chrome` | start e2e tests with cypress in the chrome mode |\n| `cypress:headed` | start e2e tests with cypress in the headed mode |\n| `styleguide` | start styleguidist server |\n| `styleguide:build` | build styleguidist |\n| `test` | start jest tests |\n| `test:watch` | start jest tests \u0026 watch files for modifications |\n| `test:coverage` | check the % of tests coverage |\n| `test:e2e` | check the server status \u0026 start e2e tests |\n| `test:e2e:open` | check the server status \u0026 open cypress |\n| `test:e2e:record` | check the server status \u0026 start e2e tests in the `record` mode |\n| `test:e2e:chrome` | check the server status \u0026 start e2e tests in the `chrome` mode |\n| `test:e2e:headed` | check the server status \u0026 start e2e tests in the `headed` mode |\n\n\u003cbr /\u003e\n\n## Settings available\n\n\u003e To access the _application settings_ go to `configurations/application/settings.js`\n\n\n| Property | Description | Default Value |\n|---------| ----------- | ----------- |\n| `version` | Application version | _current application version_ |\n| `pwa` | Progressive Web Application | |\n| `pwa.enabled` | Enable or Disable. Production Only | `true` |\n| `pwa.serviceWorkerName` | Service Worker File Name | `service-worker.js` |\n| `pwa.assetsManifest` | Assets Manifest File | |\n| `pwa.assetsManifest.enabled` | Enable or Disable. Production Only| `false` |\n| `pwa.assetsManifest.fileName` | Assets manifest file name | `assets-manifest.json` |\n\n\u003cbr /\u003e\n\n## Meta\n\n### Author\n**Marcos Gonçalves** – [LinkedIn](http://linkedin.com/in/themgoncalves/) – [Website](http://themgoncalves.com)\n\n### License\nDistributed under the MIT license. [Click here](/.github/LICENSE) for more information.\n\n[https://github.com/themgoncalves/react-adventure](https://github.com/themgoncalves/react-adventure)\n\n## Contributing\n\n1. Fork it (\u003chttps://github.com/themgoncalves/react-adventure/fork\u003e)\n2. Create your feature branch (`git checkout -b feature/fooBar`)\n3. Commit your changes (`git commit -am ':sparkles: Add some fooBar'`)\n4. Push to the branch (`git push origin feature/fooBar`)\n5. Create a new Pull Request\n\n\n\n\u003c!-- Markdown link \u0026 img dfn's --\u003e\n\n[vulnerabilities-image]: https://snyk.io/test/github/themgoncalves/react-adventure/badge.svg\n[vulnerabilities-url]: https://snyk.io/test/github/themgoncalves/react-adventure\n[issues-image]: https://img.shields.io/github/issues/themgoncalves/react-adventure.svg\n[issues-url]: https://github.com/themgoncalves/react-adventure/issues\n[stars-image]: https://img.shields.io/github/stars/themgoncalves/react-adventure.svg\n[stars-url]: https://github.com/themgoncalves/react-adventure/stargazers\n[forks-image]: https://img.shields.io/github/forks/themgoncalves/react-adventure.svg\n[forks-url]: https://github.com/themgoncalves/react-adventure/network\n[awesome-image]: https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg\n[releases-image]: https://img.shields.io/github/downloads/atom/atom/total.svg\n[releases-url]: https://github.com/themgoncalves/react-adventure\n[awesome-url]: https://github.com/themgoncalves/react-adventure\n[wiki]: https://github.com/yourname/yourproject/wiki\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthemgoncalves%2Freact-adventure","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthemgoncalves%2Freact-adventure","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthemgoncalves%2Freact-adventure/lists"}