🛡️ ⚛️ 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

Issues
  • 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
  • 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
  • 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
  • remove redundant await keyword

    remove redundant await keyword

    null

    opened by phongluudn1997 3
  • Suggestion: merge tsconfig.paths.json into tsconfig.json

    Suggestion: merge tsconfig.paths.json into tsconfig.json

    Hey, I'm happy to open a PR to do this quick chore.

    I'm not sure why https://github.com/alan2207/bulletproof-react/blob/master/tsconfig.paths.json is a separate file.

    To me, it's less clear if anything. And the mandatory clutter (config files) we have is plenty already, right?

    I'd never expect to find the paths hanging out in a separate file, though I'd surely notice it.

    Feel free to close the issue if you don't approve! Have a good one!

    opened by DoctorDerek 2
  • user has type

    user has type "any" in sanitizeUser

    https://github.com/alan2207/bulletproof-react/blob/6f7d873bf6200b8fe6cceea7ceec5cede7856a25/src/test/server/utils.ts#L25

    Hey, I don't understand the typing going on here well enough to fix this, but it doesn't help reliability here.

    Isn't anything with any type an ESLint error anyway? I usually set it as such.

    opened by DoctorDerek 2
  • Fix error boundary link

    Fix error boundary link

    null

    opened by Daniel-Kolev 2
  • Ejecting the webpack

    Ejecting the webpack

    Hello,

    are you guys planning to eject webpack? Now this boilerplate webpack is depend on react-scripts.

    Thanks.

    opened by krishnaUIDev 2
  • Fix some typos

    Fix some typos

    null

    opened by Daniel-Kolev 2
  • Can You provide same sturcuture for JS  ?

    Can You provide same sturcuture for JS ?

    It seems to be a bit difficult to understand this structure, can you provide or suggest any simple structure for a kick start a new project.

    Or Can you publish the same structure for JS instead of TS ?

    Is it necessary to put Api call inside the page (feature) folder or can we make some global service folder where we create API call?

    opened by marxyes 1
  • getValues in react-hook-form

    getValues in react-hook-form

    Hi, How would you add a getValues watcher in this stack?

    The problem is I have a form, with two SelectFields but I only can insert the options of the second SelectField as soon as I know what option is in the first SelectField.

    Basically I have two selects where the second one depends on the first one. 😄 Thanks!

    opened by Manubi 1
  • Nextjs version

    Nextjs version

    It will be awesome if we have bulletproof-nextjs what do you think 😆

    opened by duythien0912 3
  • a lot of packages used are deprecated

    a lot of packages used are deprecated

    image

    i cloned the repo and ran npm i. it appears the project has alot of deprecated/old dependencies. I am using node 14.

    opened by ahmednawaz10p 3
  • chore: create .gitattributes file specifying LF line endings due to ESLint

    chore: create .gitattributes file specifying LF line endings due to ESLint "error on line ending CRLF" behavior from rule "prettier/prettier: ["error"]"

    tl;dr This forces LF endings (instead of auto / CRLF line endings) resolving "every line is an ESLint error" behavior on Windows that results from the ESLint rule "prettier/prettier: ['error']"

    Otherwise, I'll just quote myself from @tailwind-nextjs-starter-blog#19

    There once was a man from Nantucket,
    who developed on a Macintosh bucket.
    He set up his ESLint to flag Prettier errors,
    And Windows developers got CR* terrors.
    The man was no fan, so he hatched up a plan:
    He would ask Git to enforce LF** characters.
    So now developers rejoice, because of his choice:
    They can keep their Windows kit, not chuck it.
    

    *Carriage Return, **Line Feed

    Original poetry! Boom 💥

    eslintrc.js

      ...
      extends: [
        'plugin:prettier/recommended',
      ],
      rules: {
        'prettier/prettier': 'error',
      }
    }
    

    See further discussion + screenshots in tailwindlabs/tailwindcss#3760

    opened by DoctorDerek 1
  • Create prettier.config.js instead of .prettierrc

    Create prettier.config.js instead of .prettierrc

    Rationale

    1️⃣ I find it a waste of everyone's time to expect people to memorize the Prettier defaults. 2️⃣ If you want to use Airbnb's line length default (printWidth: 100), that's fine, but let's note that choice in a comment.

    Code changes

    ✅ chore: rename .prettierrc to prettier.config.js and add comments with Prettier defaults to indicate that a non-default value is being used for only printWidth ✅ chore: remove explicit "usePrettierrc: true" from .eslintrc.js (as this is the default setting, so just ["error"] is fine)

    Testing

    ✅ manually tested with npm run lint ✅ manually tested using VS Code extensions (Prettier, ESLint)

    Note

    1️⃣ There is a line ending bug on Windows associated with erroring on ESLint; I'll submit a .gitattributes file to fix this in a separate PR. 2️⃣ I'm not 100% sure that eslint --fix . has the same behavior of prettier --write . because Prettier explicitly has different rules for line length that ESLint does. I always use Prettier then ESLint for linting, personally. That would need to be another PR.

    opened by DoctorDerek 1
  • npm install requires --force due to peer depencies

    npm install requires --force due to peer depencies

    Hey, I cloned master and went to npm install...

    But I got this message because of react-scripts and @reach/router peer dependencies:

    C:\dev\bulletproof-react (master -> origin)
    λ npm install
    npm ERR! code ERESOLVE
    npm ERR! ERESOLVE unable to resolve dependency tree
    npm ERR!
    npm ERR! Found: [email protected]
    npm ERR! node_modules/react
    npm ERR!   [email protected]"^17.0.2" from the root project
    npm ERR!   peer [email protected]">= 16" from [email protected]
    npm ERR!   node_modules/react-scripts
    npm ERR!     [email protected]"4.0.3" from the root project
    npm ERR!     peer [email protected]"^4.0.0" from @craco/[email protected]
    npm ERR!     node_modules/@craco/craco
    npm ERR!       @craco/[email protected]"^6.1.2" from the root project
    npm ERR!     1 more (@storybook/preset-create-react-app)
    npm ERR!   36 more (@headlessui/react, @heroicons/react, react-hook-form, ...)
    npm ERR!
    npm ERR! Could not resolve dependency:
    npm ERR! peer [email protected]"15.x || 16.x || 16.4.0-alpha.0911da3" from @reach/[email protected]
    npm ERR! node_modules/@storybook/api/node_modules/@reach/router
    npm ERR!   @reach/[email protected]"^1.3.4" from @storybook/[email protected]
    npm ERR!   node_modules/@storybook/api
    npm ERR!     @storybook/[email protected]"6.3.2" from @storybook/[email protected]
    npm ERR!     node_modules/@storybook/addon-actions
    npm ERR!       dev @storybook/[email protected]"^6.3.2" from the root project
    npm ERR!       1 more (@storybook/addon-essentials)
    npm ERR!     10 more (@storybook/addon-essentials, @storybook/addons, ...)
    npm ERR!
    npm ERR! Fix the upstream dependency conflict, or retry
    npm ERR! this command with --force, or --legacy-peer-deps
    npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
    

    Maybe there are newer versions of those dependencies?

    IDK why it's taken some packages a long time to add the line "|| ^17" to their package.json files, because this is still a common problem despite no breaking changes in React 17.

    opened by DoctorDerek 2
  • 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 5
Owner
Alan Alickovic
Alan Alickovic
winwiz1 107 Sep 19, 2021
React/Redux stack (not a boilerplate kit)

Reactuate Reactuate is an opinionated stack for building React/Redux-based frontend applications with a focus on DDD (Domain-Driven Design). The ratio

null 491 Jun 21, 2021
Step-by-step guide to setting up and launching a TypeScript/React web app querying Ethereum blockchain data in standard querying language (GraphQL)

Your first Web3 dApp: React app reading real Ethereum blockchain database Step-by-step guide to setting up and launching a TypeScript/React web app qu

null 23 Sep 7, 2021
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 53 Sep 14, 2021
: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 27.9k Sep 22, 2021
🐦 Modern JavaScript Development Ecosystem

Roc Build JavaScript projects easily using modern libraries. Quickly create products powered by libraries like Koa, React and Redux ready for deployme

Roc 430 Sep 1, 2021
NG-ZORRO admin panel front-end framework (surge mirror https://ng-alain-doc.surge.sh)

NG-ALAIN Out-of-box UI solution for enterprise applications, Let developers focus on business. English | 简体中文 Quickstart Getting Started Links Documen

null 4.2k Sep 15, 2021
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 17.9k Sep 23, 2021
Free Open Source High Quality Dashboard based on Bootstrap 4 & React 16

Airframe React High Quality Dashboard / Admin / Analytics template that works great on any smartphone, tablet or desktop. Available as Open Source as

null 3.6k Sep 19, 2021
React Hooks + MobX Boilerplate Project

React + MobX Boilerplate ^_^ Plug And Play(clone and code) The most updated React + MobX(2021) Boilerplate With the latest Tech Stack Demo Why you sho

Georgy Glezer 14 Aug 28, 2021
GlueStick is a command line interface for quickly developing universal web applications using React and Redux.

Deprecation Notice GlueStick is now archived. It was one of the first React-in-a-box projects and helped TrueCar quickly migrate to React. With the Re

TrueCar Inc 361 Sep 8, 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 18.3k Sep 25, 2021
Create React App - Set up a modern web app by running one command.

Create React App - Set up a modern web app by running one command.

Facebook 90.3k Sep 20, 2021
Set up a modern web app by running one command.

Create React App Create React apps with no build configuration. Creating an App – How to create a new app. User Guide – How to develop apps bootstrapp

Facebook 90.4k Sep 23, 2021
快速创建 React + Vite 应用, 并且你可以定制你的应用.

Create React App 快速创建 React + Vite 应用, 并且你可以定制你的应用.

ykfe 80 Sep 8, 2021
A starter boilerplate for a universal webapp using express, react, redux, webpack, and react-transform

React Redux Universal Hot Example About This is a starter boilerplate app I've put together using the following technologies: Isomorphic Universal ren

Erik Rasmussen 12.1k Sep 20, 2021
Rockpack is a simple solution for creating React Application with Server Side Rendering, bundling, linting, testing within 5 minutes

This is beta. Official release coming soon Rockpack is a simple solution for creating React Application with Server Side Rendering, bundling, linting,

Sergey 265 Sep 18, 2021
A simple boilerplate that helps you make your react application with Server Side Rendering & Localization support.

Phoenix React applications boilerplate A simple boilerplate that helps you make your react application with Server Side Rendering support. Getting sta

null 128 Aug 22, 2021
:point_up::running: Modern Relay Starter Kit - Integrated with Relay, GraphQL, Express, ES6/ES7, JSX, Webpack, Babel, Material Design Lite, and PostCSS

Relay Fullstack is a Relay scaffolding application that aims to help you get up and running a project without worrying about integrating tools. It com

Varayut Lerdkanlayanawat 986 Aug 31, 2021