πŸ›‘οΈ βš›οΈ A simple, scalable, and powerful architecture for building production ready React applications.

Last update: Jun 21, 2022

Bulletproof React πŸ›‘οΈ βš›οΈ

MIT License

A simple, scalable, and powerful architecture for building production ready React applications.

Introduction

React is a great tool for building frontend applications. It has a very diverse eco-system with hundreds of great libraries for literally anything you might need. However it can be overwhelming to be forced to make so many choices. It is also very flexible, you can write React applications in any way you like but that flexibility comes with a cost. Since there is no pre-defined architecture developers can to follow, it often leads to messy, uncosistent or over-complicated codebases.

This is an attempt to present the way of creating React applications using the best tools in the eco-system with a good project structure that scales very well. It is based on the experience of working with many different codebases, and this architecture turns out to be the most effective one.

The goal of this repo is to serve as a collection of good practices when developing React applications. It is supposed to showcase solving most of the real-world problems of an application in a practical way and help developers writing better applications.

Feel free to explore the codebase to get the most value out of the repo.

Disclaimer:

This is not supposed to be a template or a framework. It is an opinionated guide that shows how to do some things in a certain way. You are not forced to do everything exactly as it is shown here, decide what works best for you and your team and be consistent with your style.

Table Of Contents:

Contributing

Contributions are always welcome! If you have any ideas, suggestions, fixes, feel free to contribute. You can do that by going through the following steps:

  1. Clone this repo
  2. Create a branch: git checkout -b your-feature
  3. Make some changes
  4. Test your changes
  5. Push your branch and open a Pull Request

License

MIT

GitHub

https://github.com/alan2207/bulletproof-react
Comments
  • 1. fix: admin cannot delete user comment

    https://github.com/alan2207/bulletproof-react/blob/6f7d873bf6200b8fe6cceea7ceec5cede7856a25/src/test/server/handlers/comments.ts#L58-L60 This causes a bug that an admin account cannot delete the comment made by a user account. It can be safely removed because the commentId is enough to delete the comment.

    Reviewed by dpyzo0o at 2021-07-26 12:38
  • 2. Clean installation fails on "yarn install" errors

    Following the instructions in https://github.com/alan2207/bulletproof-react/blob/master/docs/application-overview.md I got the following errors in the console log (Mac OSX):

    yarn install v1.22.10
    [1/4] πŸ”  Resolving packages...
    warning Resolution field "[email protected]" is incompatible with requested version "[email protected]^8.2.2"
    warning Resolution field "[email protected]" is incompatible with requested version "[email protected]^8.2.2"
    warning Resolution field "[email protected]" is incompatible with requested version "[email protected]^8.2.2"
    [2/4] 🚚  Fetching packages...
    error An unexpected error occurred: "/Users/craigmcc/Library/Caches/Yarn/v6/npm-upper-case-1.1.3-f6b4501c2ec4cdd26ba78be7222961de77621598-integrity/node_modules/upper-case/.yarn-metadata.json: Unexpected end of JSON input".
    info If you think this is a bug, please open a bug report with the information provided in "/Users/craigmcc/Git.Examples/bulletproof-react/yarn-error.log".
    info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.
    

    The referenced yarn-error.log file is attached below: yarn-error.log

    Reviewed by craigmcc at 2021-08-02 22:59
  • 3. @/ imports - consider alternatives?

    Thank you for this amazing source of practices, I've been sharing it with lot of people!

    @/ imports confuses me, could you please add alternatives to the doc? I'm not sure if and why this is a best way.

    Another option is to set baseUrl: 'src' to tsconfig and now instead of '@/components/X' we import from 'components/X'. I don't think there are meaningful and maintained 'components', 'hooks', 'lib', 'assets' packages on npm.

    Another option is to use relative paths, editors are smart nowadays, they write imports automatically, they update imports automatically when moving files. At least VSCode and JetBrains editors a capable. Most of people are using VSCode, so this shouldn't be a problem.

    Reviewed by romeerez at 2022-01-09 22:31
  • 4. Enable discussions on this repository

    I've really empathize these README section.

    The goal of this repo is to serve as a collection of good practices when developing React applications. It is supposed to showcase solving most of the real-world problems of an application in a practical way and help developers writing better applications.

    I have a project create-react-app-typescript-todo-example-2021 on similar mind,(It's not high quality though πŸ˜…)

    And @markerikson also planed close concept website React Community Tools and Practices Cheatsheet .

    I like those project even though this topic contained a lot of subjective things.
    I hope to we got space for exchange information about practice that doesn't matter each developer's preference/style/opinion.

    Actually I don't know ideal roadmap to the goal even though this repository showing Github trend page these days, So if Github Discussions available visitors may create some topics or answer some questions or surveys, and the communication of information exchange may flourish.

    Do you have a plan about setup Discussions on here? πŸ‘¨β€πŸ’»

    Reviewed by ryota-murakami at 2021-07-25 18:01
  • 5. Is something else needed for absolute imports to wrok?

    First off thanks for this repo! It's been an incredible resource so far. I'm building a project based on its guidelines at the moment and I'm having an issue setting up the absolute imports as you described in the absolute imports section. When I run the project I get the following below error in the terminal, as well as for any other file that imports something using the @/something syntax. VS code correctly suggests imports using the syntax after updating the tsconfig.json and adding tsconfig.paths.json but I just want to make sure there wasn't any other config that I needed to add to get it working.

    The error

    ERROR in ./src/features/auth/components/SignInPage.tsx 10:0-41
    Module not found: Error: Can't resolve '@/components/Button' in '/Users/nathan/projects/react/merchant-portal/src/features/auth/components'
    

    In SignInPage.tsx I've imported the Button component using

    import Button from '@/components/Button';
    

    and the Button component is the default export from the file found at ./src/components/Button.tsx.

    tsconfig.paths.json

    {
      "compilerOptions": {
        "baseUrl": ".",
        "paths": {
          "@/*": ["./src/*"]
        }
      }
    }
    

    tsconfig.json

    {
      "compilerOptions": {
        "target": "es5",
        "lib": ["dom", "dom.iterable", "esnext"],
        "allowJs": true,
        "skipLibCheck": true,
        "esModuleInterop": true,
        "allowSyntheticDefaultImports": true,
        "strict": true,
        "forceConsistentCasingInFileNames": true,
        "noFallthroughCasesInSwitch": true,
        "module": "esnext",
        "moduleResolution": "node",
        "resolveJsonModule": true,
        "isolatedModules": true,
        "noEmit": true,
        "jsx": "react-jsx"
      },
      "include": ["src"],
      "exclude": ["node_modules"],
      "extends": "./tsconfig.paths.json"
    }
    
    Reviewed by NathanDowner at 2022-01-22 22:49
  • 6. add github-action CI

    Added CI task file on Github Actions.
    This project predefined certainly code quality checks, tests, e2e tests script that definitely protect regression from various Pull Request.

    This is trigger after merge, so you couldn't legit review before merge.
    Please feel free to modify for improving workflow whatever!

    Thank you! 😊

    Reviewed by ryota-murakami at 2021-08-06 18:15
  • 7. docs: add get start command

    I really like this project because I've learn a lot practical things from the codebase, I would say thank you so much!

    In this PR, I added getting start command. degit is simple tool for clone github repo without .git/ directory.
    That use to provide Vite community templete these day,
    I don't know you'll prefer it though :)

    Reviewed by ryota-murakami at 2021-07-24 11:20
  • 8. fix: the`initMocks` function always starts

    The value of .env.* files variables always string value.

    • ref: https://github.com/motdotla/dotenv/blob/master/README.md#what-rules-does-the-parsing-engine-follow
    Reviewed by caocuong2404 at 2022-05-16 04:53
  • 9. Backend for this repo

    Hi thanks for this repository. Is there a back-end for this. Like I wanted to run the application locally, but cannot proceed beyond login/signup for obvious reason.

    Not sure if I missed any documentation on how to achieve this.

    Reviewed by subhamsaha-manu at 2022-02-27 20:51
  • 10. Where should tests be located?

    Looking at the project structure

    I quickly glanced and saw there was a test directory but it seems to be only for

    +-- test              # test utilities and mock server
    

    When navigating to the test folder in this repo I see its mainly support files.

    Looking around I can see some directories have a __tests__ directory within the components/XXX directory. Whilst some do not


    Is having a __tests__ directory the recommended approach then?

    Currently we're split between using two different approaches for where to store our tests:

    1. projectRoot/tests
    2. Place the corresponding *.test.tsx file for next to the component in src

    The problem with 1. is that depending on how large the codebase is, it can be hard to find the corresponding test. The problem with 2. is that it quickly clutters any directory as the number of files quickly doubles since each component now has a test file.

    Reviewed by ColinCee at 2021-12-07 10:39
  • 11. chore: switch react-helmet to react-helmet-async

    About this PR

    Uninstall react-helmet and install react-helmet-async.

    Why?

    react-helmet is not maintained actively.

    react-helmet has last commit at over 1 year ago.

    https://github.com/nfl/react-helmet

    react-helmet sometimes causes React warning

    See following issue. https://github.com/nfl/react-helmet/issues/548

    And it had not resolved.

    react-helmet-async solves the problem and is actively maintained.

    Please check following package.

    https://www.npmjs.com/package/react-helmet-async

    I use this at production service, then it works correctly.

    Changes

    react-helmet-async has almostly same interfaces and I had changed the library easily.

    And I add HelmetProvider to app.tsx.

    Reviewed by TeXmeijin at 2021-11-07 15:23
  • 12. Form.tsx typings

    I know this question is Typescript-specific, but I can't find articles about it.

    Why do you do this in the Form.tsx? TFormValues extends Record<string, unknown> = Record<string, unknown>

    Is it really different from this? TFormValues extends Record<string, unknown>

    Reviewed by kopestik at 2022-06-14 23:32
  • 13. Shared/Common api location ?

    Hello. Quick question: Where would you put shared react-query wrappers? Say one were to have a modal dialog that is used by multiple features (and therefore lives in /components) and that is responsible for loading something from a server endpoint... Cheers

    Reviewed by ChambreNoire at 2022-05-11 15:05
  • 14. Access control at route/action level?

    Hi, thanks for this nice project structure!

    I find access control is also an everyday topic in a react app, could you give some suggestions on integrating access control (at route and action level) in this structure?

    Reviewed by SevenOutman at 2022-03-22 05:53
  • 15. Correct place for `User` type?

    Hi, I've been struggling with this confusion for some time. Here's what features I'm having in my application that is relevant to the User concept.

    The auth feature

    One option is to bind User type with the auth feature because without the authentication/identity logic in the application, it makes no sense of a User concept.

    The admin feature

    The admin feature has a user management module which may need a User type that is slightly different from the User of the auth feature. The key difference is that User in admin feature represents "others" or "the User resource", while User in auth feature represents "the current user itself". They may have slightly different properties or they can also be completely different in shape. The solution is not difficult so far. I can simply have two separate User types in those two features and perhaps name one of them AuthUser for distinction (like what happens in this demo repo).

    The team feature

    Here comes the problem. Now I have this third scenario of a User type where non-admin users need to query other users in the system. They query who's out there and invite them as member of their teams. Now I don't think it make sense to use AuthUser type here because this query is apparently for "the User resources", but I also don't think it make sense to import the User from admin feature because this team member function is not topologically dependent on the admin feature. I mean, I could even drop all admin features without breaking other parts of the application as a non-admin user, right?

    So here's 2 options for this problem.

    Option 1 Make a third User type that separates from AuthUser and User in admin feature. (Doesn't sound so good)

    Option 2 Move the User from admin feature to somewhere a base User should be placed, and import it into the admin feature where its needed. AuthUser may also inherit from this base User type if compatible. (Makes more sense to me)

    Either way I need to find a right place for this base User type. I'm now considering putting it in the src/types folder, or in the misc feature. Hope to hear your thoughts and suggestions.

    Reviewed by SevenOutman at 2022-03-16 04:04
  • 16. The difference between components/Elements and components/*.

    Hi, thanks for the nice architecture design! I would like to ask you a question regarding the titleπŸ€”

    I would like to know the difference between a component placed in components/* and a component placed in components/Elements/*.

    Specifically Head and Layout are global, so I understand that they are placed outside of Elements, but I feel uncomfortable that Form and Notifications are also placed there. I would like to know what criteria are used to place them there.

    Reviewed by mamaredo at 2022-03-01 05:06
A high-performance framework with fine-grained observable-based reactivity for building rich applications

A high-performance framework with fine-grained observable-based reactivity for building rich applications

Jun 17, 2022
React + TypeScript app built using clean architecture principles.

React + TypeScript app built using clean architecture principles.

Jun 26, 2022
A realistic approach to implement clean architecture on react codebases
A realistic approach to implement clean architecture on react codebases

A realistic approach to implement clean architecture on react codebases

Jun 18, 2022
On layered architecture
On layered architecture

On layered architecture

Jun 16, 2022
web3-react🧰 A simple, maximally extensible, dependency minimized framework for building modern Ethereum dApps

?? A simple, maximally extensible, dependency minimized framework for building modern Ethereum dApps

Jun 24, 2022
🧰 A simple, maximally extensible, dependency minimized framework for building modern Ethereum dApps

?? A simple, maximally extensible, dependency minimized framework for building modern Ethereum dApps

Jun 23, 2022
A simple, maximally extensible, dependency minimized framework for building modern Ethereum dApps

A simple, maximally extensible, dependency minimized framework for building modern Ethereum dApps

Nov 1, 2021
🌟 DataFormsJS 🌟 A minimal JavaScript Framework, standalone React and Web Components, and JSX Compiler for rapid development of high quality websites and single page applications.
🌟 DataFormsJS 🌟 A minimal JavaScript Framework, standalone React and Web Components, and JSX Compiler for rapid development of high quality websites and single page applications.

?? DataFormsJS ?? A minimal JavaScript Framework, standalone React and Web Components, and JSX Compiler for rapid development of high quality websites and single page applications.

Jun 13, 2022
Create beautfiful custom applications using 100ms' React SDK.
Create beautfiful custom applications using 100ms' React SDK.

Create beautfiful custom applications using 100ms' React SDK.

Jun 17, 2022
πŸ—Ί Universal router for web applications.

Expressive router for nodejs and the browser. Rill brings cascading middleware to the browser and enables a familiar routing solution for web applicat

May 30, 2022
A declarative, efficient, and flexible JavaScript library for building user interfaces.

React Β· React is a JavaScript library for building user interfaces. Declarative: React makes it painless to create interactive UIs. Design simple view

Jun 20, 2022
A data-driven, functional, and reactive framework for building Modern Web Apps in JavaScript.
A data-driven, functional, and reactive framework for building Modern Web Apps in JavaScript.

A data-driven, functional, and reactive framework for building Modern Web Apps in JavaScript. It leverages React, inspired by re-frame.

Mar 2, 2022
Hydrogen is a React-based framework for building dynamic, Shopify-powered custom storefronts.
Hydrogen is a React-based framework for building dynamic, Shopify-powered custom storefronts.

Hydrogen is a React-based framework for building dynamic, Shopify-powered custom storefronts.

Jun 19, 2022
A web framework for building virtual reality experiences (VR Web)
A web framework for building virtual reality experiences (VR Web)

Virtual Reality Made Simple: A-Frame handles the 3D and WebVR boilerplate required to get running across platforms including mobile, desktop, Vive, and Rift

Mar 18, 2022
Create a SPA project using Mithril JS framework and design layout by JSX syntax and use Typescript and Vite for build system.
Create a SPA project using Mithril JS framework and design layout by JSX syntax and use Typescript and Vite for build system.

Mithril TS(Type script) JSX Create a SPA project using Mithril JS framework and design layout by JSX syntax and use Typescript and Vite for build syst

Feb 22, 2022
Use React in Vue3 and Vue3 in React, And as perfect as possible
Use React in Vue3 and Vue3 in React, And as perfect as possible

Veaury (pronounced /ˈvjuːri/, inspired by 'beauty') is a tool library. It is built on the Vue and React framework. It's use cases include using both Vue and React in one app, migrating from React to Vue or from Vue to React

Jun 20, 2022
Build blazing fast, modern apps and websites with React

Gatsby v2 βš›οΈ ?? ?? Fast in every way that matters Gatsby is a free and open source framework based on React that helps developers build blazing fast w

Jun 19, 2022
The Full-stack Framework for React and other in Deno.

The Full-stack Framework for React and other in Deno.

Jun 17, 2022