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

Overview

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 ecosystem 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 follow, it often leads to messy, inconsistent, or over-complicated codebases.

This is an attempt to present the way of creating React applications using the best tools in the ecosystem 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

Comments
  • fix: admin cannot delete user comment

    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.

    opened by dpyzo0o 9
  • Shared/common locales location?

    Shared/common locales location?

    Let's suppose to use react-i18next to manage internationalization, where would you put locales files?

    Would you put everything in src/locales or instead give each feature its own locales (and maybe use src/locales for shared ones)?

    Many thanks in advance for your reply (your time).

    Cheers, Mauro

    opened by mauro-ni 8
  • Clean installation fails on

    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

    opened by craigmcc 7
  • @/ imports - consider alternatives?

    @/ 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.

    opened by romeerez 6
  • Enable discussions on this repository

    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? 👨‍💻

    opened by ryota-murakami 6
  • Is something else needed for absolute imports to wrok?

    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"
    }
    
    opened by NathanDowner 4
  • add github-action CI

    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! 😊

    opened by ryota-murakami 4
  • docs: add get start command

    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 :)

    opened by ryota-murakami 4
  • Reviewed grammatical errors in README.md

    Reviewed grammatical errors in README.md

    Hi, an excellent resource, I love it. I've tried to make the readme description a tad bit clear plus I've added the grammatical fixes from pull requests 81 & 84 as those were inactive by the user or stalled. Please review and if you see fit then merge it, please.

    Some insight on changes, i.e. 2nd paragraph

    This is an attempt to present a way of creating React applications using the best tools in the ecosystem with a good project structure that scales very well

    Instead of saying the best tools in the ecosystem I've rephrased it to say some of the best, the reason being "the best" can be subjective and reads out as the only and best of them all, hence changed to limit the bias meanwhile giving credit to other (existing/upcoming) tools indirectly.

    opened by ARehmanMahi 3
  • Update README.md

    Update README.md

    Hi, I really interested in this project. While I was reading the README.md document, I found some grammatical errors that might make the document unclear. I am glad if I can contribute to this project, thanks for your review of my pull request!

    opened by freddy1020 3
  • How can I implement bulletproof-react with MUI ?

    How can I implement bulletproof-react with MUI ?

    Hi, I'm a very newbie to React and I'd like to refer to this wonderful template.

    How can I implement this template with MUI ?

    I understand this question is a very basic and general question. So I'm wondering if this is an inappropriate issue. For instance, when I'd like to use MUI's TextField, should I change the code in the elements/Form/ codes ? And if so, do you have some examples ? Definitely I don't understand some important contents about React and so on. Sorry if this is a very off-topic question.

    opened by yyykkkyyy 3
  • Question: axios in React lifecycle

    Question: axios in React lifecycle

    I love your project and have been using it for a while to look for examples. I've just been wondering how the axios instance and interceptors work with React in the way they are implemented now.

    I suppose the instance is created once you reload the page and then it gets the token from the store. But what if there is no token at that time? What happens when the token changes during usage of the application? I implemented the axios instance according to bulletproof-react in one of my projects and have the issue that the axios instance is not refreshed after the user logs in (token change).

    How does the example work here? Or do we need to put the axios instance in a React hook which can change the values?

    Thanks in advance for some clarity 🙏

    opened by s1gr1d 0
  • Where would Sass mixins go?

    Where would Sass mixins go?

    I'm wondering. I have some Sass mixins I use throughout my app. What can I add to the structure of my src folder to make that happen?

    I'm looking at: https://github.com/alan2207/bulletproof-react/blob/master/docs/project-structure.md; really good stuff.

    Can I just make a folder for Sass mixins? Or maybe should I put it in one of the folders listed in the project structure guidelines, like utils?

    opened by Konglomneshued 1
  • Fix the

    Fix the "0308010c:digital envelope routines::unsupported"

    So, due to some problem with Node versions. We face some problems while running the application. I could make it work by using nvm to switch to version 16 instead of 18. I could add "craco --openssl-legacy-provider start" in package.json and it was working. But then Storybook wasn't working

    Maybe we can work something out and fix the errors for new node versions as well. I am not very sure. I am not a very experiecened developer.

    Refer: https://www.freecodecamp.org/news/error-error-0308010c-digital-envelope-routines-unsupported-node-error-solved/

    opened by ThePiyushAggarwal 0
  • Compiled with warnings due to TypeScript Errors

    Compiled with warnings due to TypeScript Errors

    I have cloned the repo and ran yarn install. After install completes and I run yarn start, I see "Compiled with warnings" message and a bunch of files with TypeScript Errors at the console.

    To solve the "x is not a valid JSX element" errors, I added those 2 "@types" lines to "resolutions" section at package.json.

    resolutions": { "babel-loader": "8.1.0", "@types/react": "17.0.2", "@types/react-dom": "17.0.2" }

    I also deleted node_modules folder and yarn.lock file, and rerun yarn install command. Now "x is not a valid JSX element" errors are gone.

    But still there are 3 files with TypeScript errors.: Form.tsx, Discussion.tsx, MainLayout.tsx I temporarily added // @ts-nocheck to the top of those files, after that finally the project opened on localhost.

    Node: v16.17.1

    opened by keremcanb 0
Owner
Alan Alickovic
Alan Alickovic
A well-structured production-ready frontend boilerplate for React and Next.js

superplate-core-plugins This is the source repository for superplate's core plugins. Plugins UI Frameworks Tailwind CSS React Bootstrap Chakra UI Ant

Pankod 40 Dec 14, 2022
🚀 Create highly scalable and universal React microservices/applications within seconds.

Creating scalable, universal and well tested JavaScript application for enterprise companies with many teams and products is a hard task. We at Immowe

Immowelt Group 148 Dec 14, 2022
React Native Typescript Template with scalable design and cutting edge technologies like CodePush, Sentry and other libraries pre-configured to save your time.

A React Native Template/Boilerplate containing the best practices and scalable design with cutting edge technologies like CodePush/Sentry and all other neccessary libraries pre-configured and basic helper functions and components to help you save your time and make your App super fast.

KASHAN HAIDER 23 Dec 1, 2022
:fire: A highly scalable, offline-first foundation with the best developer experience and a focus on performance and best practices.

Start your next react project in seconds A highly scalable, offline-first foundation with the best DX and a focus on performance and best practices Cr

react-boilerplate 28.9k Jan 9, 2023
A highly scalable boilerplate with pre added web3 and different wallets

NFT-Dapp-Boilerplate Start your next dapp / defi project in seconds A highly scalable boilerplate with pre added web3 and different wallets with a foc

Green Lettel 6 May 21, 2022
Highly Scalable Awesome React Starter Kit for an enterprise application with a very easy maintainable codebase. :fire:

React Enterprise Starter Kit ?? Highly Scalable, performant and amazing react boilerplate for react developers to get started and improve web building

Anand gupta 71 Dec 9, 2022
boilerplate for scalable React/Express apps with TS

?? Welcome ?? This here is an architecture that you can follow to build scalable full-stack apps that uses React in the front end and Express in the b

Abobker Elaghel 1 Dec 10, 2021
A Foundation for Scalable Cross-Platform Apps

Electron React Boilerplate uses Electron, React, React Router, Webpack and React Fast Refresh. Install If you have installation or compilation issues

Electron React Boilerplate 20.7k Jan 7, 2023
Redux immutable architecture boilerplate with Webpack and React

A simple Boilerplate including the best concepts and libraries of React and Redux plus some useful UI components (Toaster, Modals, Responsive Side Men

Pierre Beard 65 Jul 14, 2019
A frontend Framework for building B2B applications running in the browser on top of REST/GraphQL APIs, using ES6, React and Material Design

react-admin A frontend Framework for building data-driven applications running in the browser on top of REST/GraphQL APIs, using ES6, React and Materi

marmelab 21.3k Jan 6, 2023
A universal boilerplate for building web applications w/ TypeScript, React, Redux, Server Side Rendering and more.

Vortigern Vortigern is our opinionated boilerplate for crafting universal web applications by using modern technologies like TypeScript, React and Red

Barbar Startup Factory 642 Dec 13, 2022
Boilerplate for building applications with a React frontend and a C++ gRPC backend

Boilerplate for building applications with a React frontend and a C++ gRPC backend. How To Run Backend Install Bazel Bazel is for building the backend

null 3 Oct 16, 2022
React template app with clean architecture approach (light version for small projects)

React app with clean architecture approach (light version for small projects) app App directory contains the State Management (in models folder) and C

Viktoriya 1 Feb 7, 2022
Boilerplate for react universal (isomorphic) application based on flux architecture (redux implementation)

Redux universal boilerplate Boilerplate for react universal application building on flux architecture based on redux implementation. Boilerplate based

Sergey 73 Mar 30, 2022
dApp Starter Kit is flexible production grade Web3 boilerplate with Next.js, React, Material Design and Typescript

dApp Starter Kit is flexible production grade Web3 boilerplate with Next.js 12, React.js, Material-UI, Typescript and web3-react (beta).

ETH Salt Lake 8 Nov 1, 2022
Web3 Starter Kit is flexible production grade Web3 boilerplate with Next.js 12, React.js, Material-UI, Typescript and web3modal

Web3 Starter Kit is flexible production grade Web3 boilerplate with Next.js 12, React.js, Material-UI, Typescript and web3modal

ETH Salt Lake 8 Nov 1, 2022
The Complete Electron, React Template for Robust Multi-Platform Apps in Production

Welcome to React Electron Template ?? React Electron Template is help you to build multi-platform desktop apps easier. Don't worry about the configura

Ajay 6 Dec 10, 2022
Starter template for Vite with React (TypeScript). Supports Tailwind with CSS-Modules. Jest and @react/testing-library configured and ready to go. Also ESLint, Prettier, Husky, Commit-lint and Atomic Design for components.

Mocking up web app with Vital(speed) Live Demo Features ⚡️ React 17 ?? TypeScript, of course ?? Jest - unitary testing made easy ?? Tailwind with JIT

Josep Vidal 141 Dec 29, 2022
A ready to customize project to make a nice webapp using Node.js (Express.js) for the backend and React with Typescript and Redux for the frontend.

A ready to customize project to make a nice webapp using Node.js (Express.js) for the backend and React with Typescript and Redux for the frontend.

Elia Lazzari 3 Mar 16, 2022