Migrate to more modern toolset (Vite, Vitest, Playwright) + Upgrade dependencies + More Improvements

.env.example

@@ -1,5 +1,2 @@
-REACT_APP_API_URL=https://api.bulletproofapp.com
-REACT_APP_API_MOCKING=true
-TSC_COMPILE_ON_ERROR=true
-ESLINT_NO_DEV_ERRORS=true
-CHOKIDAR_USEPOLLING=true
+VITE_APP_API_URL=https://api.bulletproofapp.com
+VITE_APP_ENABLE_API_MOCKING=true

.eslintrc.js → .eslintrc.cjs

@@ -5,7 +5,7 @@ module.exports = {
     es6: true,
   },
   parserOptions: { ecmaVersion: 8, sourceType: 'module' },
-  ignorePatterns: ['node_modules/*'],
+  ignorePatterns: ['node_modules/*', 'public/mockServiceWorker.js', 'generators/*'],
   extends: ['eslint:recommended'],
   overrides: [
     {
@@ -34,6 +34,8 @@ module.exports = {
         'plugin:prettier/recommended',
         'plugin:testing-library/react',
         'plugin:jest-dom/recommended',
+        'plugin:tailwindcss/recommended',
+        'plugin:vitest/legacy-recommended',
       ],
       rules: {
         'no-restricted-imports': [
@@ -42,9 +44,9 @@ module.exports = {
             patterns: ['@/features/*/*'],
           },
         ],
+        'import/no-cycle': 'error',
         'linebreak-style': ['error', 'unix'],
         'react/prop-types': 'off',
-
         'import/order': [
           'error',
           {
@@ -56,18 +58,13 @@ module.exports = {
         'import/default': 'off',
         'import/no-named-as-default-member': 'off',
         'import/no-named-as-default': 'off',
-
         'react/react-in-jsx-scope': 'off',
-
         'jsx-a11y/anchor-is-valid': 'off',
-
         '@typescript-eslint/no-unused-vars': ['error'],
-
         '@typescript-eslint/explicit-function-return-type': ['off'],
         '@typescript-eslint/explicit-module-boundary-types': ['off'],
         '@typescript-eslint/no-empty-function': ['off'],
         '@typescript-eslint/no-explicit-any': ['off'],
-
         'prettier/prettier': ['error', {}, { usePrettierrc: true }],
       },
     },

.github/workflows/ci.yml

@@ -1,35 +1,54 @@
 name: CI
 on:
   push:
-    branches:
-      - master
+    branches: ['*']
+    paths-ignore:
+      - 'README.md'
+      - 'docs/**'
   pull_request:
-    branches:
-      - master
+    branches: [master]
+    paths-ignore:
+      - 'README.md'
+      - 'docs/**'
 jobs:
   all-cli-check:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2-beta
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
         with:
-          node-version: '14.16'
-      - run: mv .env.example .env
-      - run: yarn install
-      - run: yarn build
-      - run: yarn test:jest
-      - run: yarn lint
-      - run: yarn check-format
-      - run: yarn check-types
-  cypress-run:
+          node-version: lts/*
+      - name: Set environment variables
+        run: mv .env.example .env
+      - name: Install dependencies
+        run: yarn install
+      - name: Build application
+        run: yarn build
+      - name: Run tests
+        run: yarn test
+      - name: Run linter
+        run: yarn lint
+      - name: Check types
+        run: yarn check-types
+  e2e:
+    timeout-minutes: 60
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2-beta
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
         with:
-          node-version: '14.16'
-      - run: mv .env.example .env
-      - uses: cypress-io/github-action@v2
+          node-version: lts/*
+      - name: Set environment variables
+        run: mv .env.example .env
+      - name: Install dependencies
+        run: npm install -g yarn && yarn
+      - name: Install Playwright Browsers
+        run: yarn playwright install --with-deps
+      - name: Run Playwright tests
+        run: yarn playwright test
+      - uses: actions/upload-artifact@v4
+        if: always()
         with:
-          build: yarn build
-          start: yarn serve
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30

.gitignore

@@ -7,11 +7,20 @@
 
 # testing
 /coverage
-/cypress/videos
-/cypress/screenshots
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/
+/e2e/.auth/
+
+# storybook
+migration-storybook.log
+storybook.log
+storybook-static
+
 
 # production
-/build
+/dist
 
 # misc
 .DS_Store
@@ -24,3 +33,4 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+

.husky/pre-commit

@@ -1,4 +1 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
-
-yarn validate
+yarn lint-staged

.prettierignore

@@ -0,0 +1 @@
+*.hbs

.prettierrc

@@ -1,7 +1,7 @@
 {
   "singleQuote": true,
-  "trailingComma": "es5",
-  "printWidth": 100,
+  "trailingComma": "all",
+  "printWidth": 80,
   "tabWidth": 2,
   "useTabs": false
-}
+}

.storybook/main.ts

@@ -0,0 +1,23 @@
+module.exports = {
+  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+
+  addons: [
+    '@storybook/addon-actions',
+    '@storybook/addon-links',
+    '@storybook/node-logger',
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
+    '@storybook/addon-docs',
+    '@storybook/addon-a11y',
+  ],
+  framework: {
+    name: '@storybook/react-vite',
+    options: {},
+  },
+  docs: {
+    autodocs: 'tag',
+  },
+  typescript: {
+    reactDocgen: 'react-docgen-typescript',
+  },
+};

.storybook/preview.js → .storybook/preview.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { AppProvider } from '../src/providers/app';
+import { BrowserRouter as Router } from 'react-router-dom';
 import '../src/index.css';
 
 export const parameters = {
@@ -8,8 +8,8 @@ export const parameters = {
 
 export const decorators = [
   (Story) => (
-    <AppProvider>
+    <Router>
       <Story />
-    </AppProvider>
+    </Router>
   ),
 ];

.vscode/settings.json

@@ -1,6 +1,6 @@
 {
   "editor.formatOnSave": true,
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true
+    "source.fixAll.eslint": "explicit"
   }
 }

LICENCE → LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2021 Alan Alickovic
+Copyright (c) 2024 Alan Alickovic
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
@@ -18,4 +18,4 @@ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+SOFTWARE.

README.md

@@ -1,6 +1,6 @@
 # Bulletproof React 🛡️ ⚛️
 
-[![MIT License](https://img.shields.io/github/license/alan2207/bulletproof-react)](https://github.com/alan2207/bulletproof-react/blob/master/LICENCE)
+[![MIT License](https://img.shields.io/github/license/alan2207/bulletproof-react)](https://github.com/alan2207/bulletproof-react/blob/master/LICENSE)
 [![CI](https://github.com/alan2207/bulletproof-react/actions/workflows/ci.yml/badge.svg)](https://github.com/alan2207/bulletproof-react/actions/workflows/ci.yml)
 
 A simple, scalable, and powerful architecture for building production ready React applications.
@@ -9,21 +9,36 @@ A simple, scalable, and powerful architecture for building production ready Reac
 
 React is an excellent tool for building front-end applications. It has a diverse ecosystem with hundreds of great libraries for literally anything you might need. However, being forced to make so many choices can be overwhelming. 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 that developers can follow, it often leads to a messy, inconsistent, and over-complicated codebase.
 
-This repo attempts to present a way of creating React applications using some of the best tools in the ecosystem with a good project structure that scales very well. Based on my vast experience working with different codebases, this architecture turns out to be the most effective.
+This repo attempts to present a way of creating React applications using some of the best tools in the ecosystem with a good project structure that scales very well. Based on my experience working with a lot of different codebases, this architecture turns out to be the most effective.
 
 The goal here is to serve as a collection of resources and best 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 write better applications.
 
-Feel free to explore the codebase to get the most value out of the repo.
+Feel free to explore the sample app codebase to get the most value out of the repo.
+
+## What makes a React application "bulletproof"?
+
+This repo doesn't aim to be a silver bullet for all React applications as there are many different use cases, but it tries to provide a solid foundation for building applications based on the following principles:
+
+- Easy to get started with
+- Simple to understand and maintain
+- Uses the right tools for the job
+- Clean boundaries between different parts of the application
+- Everyone on the team is on the same page when it comes to how things are done
+- Security
+- Performance
+- Scalability in terms of codebase and team size
+- Issues detectable as early as possible
 
 #### Disclaimer:
 
 This is not supposed to be a template, boilerplate 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 stay consistent with your style.
 
+To get most out of it, do not get limited by the technologies used in this sample app, but rather focus on the principles and the concepts that are being presented here. The tools and libraries used here are just a suggestion, you can always replace them with something that fits your needs better Sometimes, your project might require a slightly different approach, and that's totally fine.
+
 ## Table Of Contents:
 
 - [💻 Application Overview](docs/application-overview.md)
-- [⚙️ Project Configuration](docs/project-configuration.md)
-- [👁️ Style Guide](docs/style-guide.md)
+- [⚙️ Project Standards](docs/project-standards.md)
 - [🗄️ Project Structure](docs/project-structure.md)
 - [🧱 Components And Styling](docs/components-and-styling.md)
 - [📡 API Layer](docs/api-layer.md)
@@ -47,4 +62,4 @@ Contributions are always welcome! If you have any ideas, suggestions, fixes, fee
 
 ## License
 
-[MIT](https://choosealicense.com/licenses/mit/)
+[MIT](/LICENSE)

__mocks__/vitest-env.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="vite/client" />
+/// <reference types="vitest/globals" />