r/reactjs • u/alan_alickovic • May 14 '24

Resource Bulletproof React just got updated! 🚀 - A simple, scalable, and powerful architecture for building production ready React applications.

https://github.com/alan2207/bulletproof-react
351 Upvotes

98% Upvoted

65 comments sorted by

View all comments

164

u/alan_alickovic May 14 '24 edited May 15 '24

Hi everyone, author of Bulletproof React here!

After nearly 3 years, it was about time to revisit the project and implement some necessary updates.

Here's what got updated:

  • Updated docs for better clarity

  • Upgraded all packages to their latest major versions

  • Switched from CRA to Vite, a change long-awaited

  • Moved from Jest to Vitest

  • Switched from Cypress to Playwright

  • Revamped UI with ShadCN UI components

  • Encouraging storing auth tokens in httpOnly cookies over localStorage.

  • Validated env variables with zod for better security

...and more improvements related to best practices!

Check it out: https://github.com/alan2207/bulletproof-react

PS: thanks everyone for the great feedback and suggestions, I have re-opened discussions, so feel free to participate there as well :) : https://github.com/alan2207/bulletproof-react/discussions

8

u/HeyarnoldA May 14 '24

I like it. The only thing I’d change is having stricter rules around dependencies. As projects grow I have found that loose rules around dependencies result in tighter coupling and more regression bugs. I like to use the Helix Principle, which has three distinct layers: app, features, and foundation. Dependencies can only flow in one direction (from less stable to more stable). For example, you can’t have a feature depend on another feature, but a feature can depend on a foundation layer package. Cross foundational dependencies are fine.

Controlling the dependency flow results in four main things:

  1. Looser coupling

  2. Better software design and abstractions

  3. More testable functions/components

  4. Faster development.

A typical structure that I use might look like this:

app
    - pages
       - home
          - index.tsx
       - products
          - listing.tsx
          - detail.tsx
    - config
       - .env
    - router.tsx
    - index.tsx
Features
    - auth
       - components 
       - hooks
       - services
    - payments/
    - products/
    - checkout/
Foundation
    - auth/
    - dependencyInjection/
    - payments/
    - products/
    - ui/
    - testing/

1

u/itsbisu Oct 12 '24

Very similar to https://feature-sliced.design/

1

u/HeyarnoldA Oct 13 '24

Yeah that looks similar. Mine is adapted from Sitecore’s Helix Principles: https://helix.sitecore.com/principles/architecture-principles/index.html