alan2207 / bulletproof-react Goto Github PK

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.

Discussed in #39

// teams/components/MyComponent.ts
import type { User } from '@/features/users';

// users/index.ts
export * from './types';
export * from './components';

// users/component/MyComponent.ts
import type { Team } from '@/features/teams';

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.

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

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!

After cloning and installing dependencies with yarn, I face this error . Is there any way to fix it?

npm version: 8.5.0
node version: v16.14.2

'Helmet' cannot be used as a JSX component.
  Its instance type 'Helmet' is not a valid JSX element.
    The types returned by 'render()' are incompatible between these types.
      Type 'React.ReactNode' is not assignable to type 'import("/Users/sayinmehmet47/Desktop/projeler\u2705/bulletproof-react/node_modules/@testing-library/react-hooks/node_modules/@types/react/index").ReactNode'.
        Type '{}' is not assignable to type 'ReactNode'.  TS2786

     8 | export const Head = ({ title = '', description = '' }: HeadProps = {}) => {
     9 |   return (
  > 10 |     <Helmet
       |      ^
    11 |       title={title ? `${title} | Bulletproof React` : undefined}
    12 |       defaultTitle="Bulletproof React"
    13 |     >

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?

Could you please explain what to put under routes folder?
Do I have to put the mapping Component <=> Url or the components using react-router?

Many thanks in advance for your help.

Mauro

I find the lint rule @typescript-eslint/no-floating-promises very valuable and allowing to catch bugs early, I would find it useful to add it to the default eslint conf, wdyt?

Thanks for the great resources : )　　
I am designing an application based on this document, but I have a question.

What I want to ask you

project-structure.md

A feature folder could also contain other features (if used only within the parent feature) or be kept separated, it's a matter of preference.

• For the definition of the bolded part

Specifics

Although it is defined to be used only within the parent feature, 　　
features/comments is referenced in features/discussions, lib/authorization.tsx.　　

Also, features/users is referenced in features/comments, lib/authorization.tsx, and route/protected.tsx.　　
Aren't features that are imported as new features supposed to be used only by the parent feature that imported them? I wondered.　　

However, when I took a closer look at the source code, I found that the part I was wondering about had one thing in common.　　
It was that I had imported the Typescript types used in the functional folder.　　

Based on the above, I would like to ask you three questions.

• Can I import the types defined in TypeScript, since they are not features themselves?
• features/comment is used in features/discussions, but
  Can a feature other than features/discussions use features/comment?
• featureA <- featureB
  featureC <- featureA
  Is this kind of dependency possible?　　
  I can't provide a specific situation where this is needed, but I would like to know if features can be used as grandchildren in features.

Windows Env:
npm: 8.4.1
node: 17.5.0

Steps to reproduce:

1. npm install
2. npm start

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?

The notification popups are not triggering their transition, they just instantly appears and disappears.

Do you have any idea what might be the issue?
Tried on macOS Monterey and Windows 10
Chrome and Safari

I managed to do a workaround like this (not the prettiest, but it works)

Notification.tsx

 const [show, setShow] = React.useState(false);

  React.useEffect(() => {
    setTimeout(() => {
      setShow(true);
    }, 50);
  }, []);

      <Transition
          show={show}
          /*...*/
        >
...

<button                
onClick={() => {
      setShow(false);
      setTimeout(() => {
        onDismiss(id);
      }, 100);
    }}}

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'

import Button from '@/components/Button';

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

{
  "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"
}

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!

I'm getting the following error on the table component.

ERROR in src/components/Elements/Table/Table.tsx:57:25 TS2322: Type 'Element | Entry[keyof Entry]' is not assignable to type 'ReactNode'. Type 'Entry[keyof Entry]' is not assignable to type 'ReactNode'. Type 'Entry[string] | Entry[number] | Entry[symbol]' is not assignable to type 'ReactNode'. Type 'Entry[string]' is not assignable to type 'ReactNode'. Type 'Entry[string]' is not assignable to type 'ReactPortal'. Type 'Entry[keyof Entry]' is not assignable to type 'ReactPortal'. Type 'Entry[string] | Entry[number] | Entry[symbol]' is not assignable to type 'ReactPortal'. Type 'Entry[string]' is not assignable to type 'ReactPortal'.

I presume there is a problem with the TableColumn type definition.

type TableColumn<Entry> = { title: string; field: keyof Entry; Cell?({ entry }: { entry: Entry }): React.ReactElement; };

I'm only just learning TS and haven't been able to figure out what the Cell type definition is doing. An explanation on this would be greatly appreciated!

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!   react@"^17.0.2" from the root project
npm ERR!   peer react@">= 16" from [email protected]
npm ERR!   node_modules/react-scripts
npm ERR!     react-scripts@"4.0.3" from the root project
npm ERR!     peer react-scripts@"^4.0.0" from @craco/[email protected]
npm ERR!     node_modules/@craco/craco
npm ERR!       @craco/craco@"^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 react@"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/router@"^1.3.4" from @storybook/[email protected]
npm ERR!   node_modules/@storybook/api
npm ERR!     @storybook/api@"6.3.2" from @storybook/[email protected]
npm ERR!     node_modules/@storybook/addon-actions
npm ERR!       dev @storybook/addon-actions@"^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.

I see there is a generators/components but there is no read me or any mention of it . Do you need to add that?

In React there are many ways to handle state.
I personally use redux (via redux toolkit), context and also state at component level (useState).

What do you think about specializing the stores directory creating as many subfolders as necessary (eg. redux, contexts, recoil, jotai, ...)?

Many thanks in advance.

Mauro

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.

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.

I have seen the src/lib directory in many projects but I have no idea why we should use it.

For example, in this project, you put the authorization.tsx file in this directory, it could be in the utils or hooks or even components directory. (I haven't read this project completely and maybe I'm wrong but you get the point.)

Can someone explain to me exactly what files should be placed in it? sometimes even functions and hooks are placed in this directory, when we should do this?

What do you think about organizing graphql api as follows and importing everything from api folder?

api
|
+-- fragments              # one file per fragment (default export) + index.js to export everything (named export)
|
+-- mutations              # one file per mutation (default export) + index.js to export everything (named export)
|
+-- queries              # one file per query (default export) + index.js to export everything (named export)
|
+-- subscriptions              # one file per subscription (default export) + index.js to export everything (named export)
|
+-- index.js              # entry point for the api, exports everything except fragments

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.

Does anyone have an idea how to correctly type the src/client/components/Form/Form.tsx

export const Form = <
  TFormValues extends Record<string, any> = Record<string, any>,
  Schema extends ZodType<any, any, any> = ZodType<any, any, any>
>({
  onSubmit,
  children,
  className,
  options,
  id,
  schema,
}: FormProps<TFormValues, Schema>) => {
  const methods = useForm<TFormValues>({
    ...options,
    resolver: schema && zodResolver(schema),
  });

Hello,

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

Thanks.

I am getting this error for all instances when useQuery is used.

TypeScript error in C:/Users/abcdef/vscodeProjects/bulletproof/src/features/comments/api/getComments.ts(22,10):
No overload matches this call.
  Overload 1 of 3, '(options: UseQueryOptions<Comment[], unknown, Comment[], string[]>): UseQueryResult<Comment[], unknown>', gave the following error.
    Argument of type '{ queryKey: string[]; queryFn: () => Promise<Comment[]>; enabled?: boolean | undefined; staleTime?: number | undefined; refetchInterval?: number | false | ((data: Comment[] | undefined, query: Query<...>) => number | false) | undefined; ... 29 more ...; meta?: QueryMeta | undefined; }' is not assignable to parameter of type 'UseQueryOptions<Comment[], unknown, Comment[], string[]>'.
      Types of property 'refetchInterval' are incompatible.
        Type 'number | false | ((data: Comment[] | undefined, query: Query<Comment[], unknown, Comment[], QueryKey>) => number | false) | undefined' is not assignable to type 'number | false | ((data: Comment[] | undefined, query: Query<Comment[], unknown, Comment[], string[]>) => number | false) | undefined'.
          Type '(data: Comment[] | undefined, query: Query<Comment[], unknown, Comment[], QueryKey>) => number | false' is not assignable to type 'number | false | ((data: Comment[] | undefined, query: Query<Comment[], unknown, Comment[], string[]>) => number | false) | undefined'.
            Type '(data: Comment[] | undefined, query: Query<Comment[], unknown, Comment[], QueryKey>) => number | false' is not assignable to type '(data: Comment[] | undefined, query: Query<Comment[], unknown, Comment[], string[]>) => number | false'.
              Types of parameters 'query' and 'query' are incompatible.
                Type 'Query<Comment[], unknown, Comment[], string[]>' is not assignable to type 'Query<Comment[], unknown, Comment[], QueryKey>'.
                  The types of 'options.queryFn' are incompatible between these types.
                    Type 'QueryFunction<Comment[], string[]> | undefined' is not assignable to type 'QueryFunction<Comment[], QueryKey> | undefined'.
                      Type 'QueryFunction<Comment[], string[]>' is not assignable to type 'QueryFunction<Comment[], QueryKey>'.
                        Type 'QueryKey' is not assignable to type 'string[]'.
                          Type 'string' is not assignable to type 'string[]'.
  Overload 2 of 3, '(queryKey: QueryKey, options?: Omit<UseQueryOptions<unknown, unknown, unknown, QueryKey>, "queryKey"> | undefined): UseQueryResult<unknown, unknown>', gave the following error.
    Argument of type '{ queryKey: string[]; queryFn: () => Promise<Comment[]>; enabled?: boolean | undefined; staleTime?: number | undefined; refetchInterval?: number | false | ((data: Comment[] | undefined, query: Query<...>) => number | false) | undefined; ... 29 more ...; meta?: QueryMeta | undefined; }' is not assignable to parameter of type 'QueryKey'.
      Object literal may only specify known properties, and 'queryKey' does not exist in type 'readonly unknown[]'.  TS2769

    20 | 
    21 | export const useComments = ({ discussionId, config }: UseCommentsOptions) => {
  > 22 |   return useQuery({
       |          ^
    23 |     ...config,
    24 |     queryKey: ['comments', discussionId],
    25 |     queryFn: () => getComments({ discussionId }),

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

Hi, this is a good overview of the real project, but sometimes I can't understand much about TypeScript declare in some files, for example in the https://github.com/alan2207/bulletproof-react/blob/master/src/components/Form/Form.tsx:

type FormProps<TFormValues, Schema> = {
  className?: string;
  onSubmit: SubmitHandler<TFormValues>;
  children: (methods: UseFormReturn<TFormValues>) => React.ReactNode;
  options?: UseFormProps<TFormValues>;
  id?: string;
  schema?: Schema;
};

export const Form = <
  TFormValues extends Record<string, unknown> = Record<string, unknown>,
  Schema extends ZodType<unknown, ZodTypeDef, unknown> = ZodType<unknown, ZodTypeDef, unknown>
>({
  onSubmit,
  children,
  className,
  options,
  id,
  schema,
}: FormProps<TFormValues, Schema>) => {
  const methods = useForm<TFormValues>({ ...options, resolver: schema && zodResolver(schema) });
  return (
    <form>

<
 TFormValues extends Record<string, unknown> = Record<string, unknown>,
 Schema extends ZodType<unknown, ZodTypeDef, unknown> = ZodType<unknown, ZodTypeDef, unknown>
>

NOTE: I'm still learning Typescript, and weeks after posting this, I learned that the type after = sign is the default type.

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>

In the Button component there's this line:

const variants = {
  primary: 'bg-blue-600 text-white hover:bg-gray-50:text-blue-600',
  inverse: 'bg-white text-blue-600 hover:bg-blue-600:text-white',
  danger: 'bg-red-600 text-white hover:bg-red-50:text-red-600',
};

    const variants = {
      primary: 'bg-blue-600 text-white hover:bg-gray-50 hover:text-blue-600',
      inverse: 'bg-white text-blue-600 hover:bg-blue-600 hover:text-white',
      danger: 'bg-red-600 text-white hover:bg-red-50 hover:text-red-600',
    };

      queryClient.setQueryData(
        'users',
        previousUsers?.filter((discussion) => discussion.id !== deletedUser.userId)
      );

    rest.patch<TeamBody>(`${API_URL}/team/:teamId`, (req, res, ctx) => {

   <tr
       key={entry?.id || entryIndex}
       className={entryIndex % 2 === 0 ? 'bg-white' : 'bg-gray-100'}
   >

  <tr
      key={entry?.id || entryIndex}
      className='odd:bg-white even:bg-gray-100'
  >

lib/auth.tsx
import { loginWithEmailAndPassword, ... } from '@/features/auth';

features/auth/components/LoginForm.tsx
import { useAuth } from '@/lib/auth';

Wouldn't this Dependency cycle?

Hi,
I Was looking through the code and trying to implement some of the ideas, but I see that every Route is wrapped in a Routes component e.g:

import { Route, Routes } from 'react-router-dom';

import { Discussion } from './Discussion';
import { Discussions } from './Discussions';

export const DiscussionsRoutes = () => {
  return (
    <Routes>
      <Route path="" element={<Discussions />} />
      <Route path=":discussionId" element={<Discussion />} />
    </Routes>
  );
};

PromiseValue used in 'src/lib/react-query.ts' from 'type-fest' library was removed as its deprecated in favor of Awaited keyword in typescript 4.5. Pls upgrade typescript version to the latest.

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

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 "babel-loader@^8.2.2"
warning Resolution field "[email protected]" is incompatible with requested version "babel-loader@^8.2.2"
warning Resolution field "[email protected]" is incompatible with requested version "babel-loader@^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.

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

As you can see here, this project use additional types for react query.

I honestly find it hard to understand what they are doing.

It would be great if someone could add some explanations

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.

Steps to reproduce

Standard clone repo, install, and then run storybook yarn run storybook.

Error

Crashes due to missing ../src/context in .storybook/preview.js (AppProvider import).
AppProvider was moved during updates to project src/ structure.

Fix

File: .storybook/preview.js
Line: 2
Changes:
import { AppProvider } from '../src/providers/app';

Documentation needs similar loving attention.
File: docs/error-handling.md
Line: 13
Changes:
[Error Boundary Example Code](../src/providers/app.tsx)

Hi,
I have a question about the ESLint rule proposed in Project Structure, which is the following:

{
    rules: {
        'no-restricted-imports': [
            'error',
            {
                patterns: ['@/features/*/*'],
            },
        ],

    // ...rest of the configuration
}

src/features/awesome-feature
|
+-- api
|
+-- components/complex/structure/that/want/to/access/api/Example.jsx
|
...

import { query } from "@/features/awesome-feature/api/queries";

import { query } from "../../../../../../../api/queries";

Hi ! I'm learning from this wonderful repository.

I would like to ask that can I use react-hook-form's setValue etc.

In this repo's Form structure, how to use setValue etc from other components.

I think that this repo's form structure offers really reusable error handling and labeling.
On the other hand, I don't find appropriate way to set values dynamically on this form structure.
I envision a form that automatically populates the next form with values based on the input values.

For instance, I tried the code like below:

<Form<UserValues typeof schema>
  ...
 >
    {({ formState, control, setValue, watch }) => (
       ....
    )}
</Form>

import { Controller, UseFormRegisterReturn } from 'react-hook-form';
import TextField from '@mui/material/TextField';

import { FieldWrapper, FieldWrapperPassThroughProps } from './FieldWrapper';

type InputFieldProps = FieldWrapperPassThroughProps & {
  type?: 'text' | 'email' | 'password';
  onChange?: any;
  defaultValue?: string;
  control: any;
  setValue?: any;
  name: string;
};

export const InputField = (props: InputFieldProps) => {
  const { type = 'text', label, onChange, defaultValue, control, setValue, name, error } = props;

  return (
      <FieldWrapper label={label} error={error}>
        <Controller
          name={name}
          control={control}
          defaultValue={defaultValue}
          render={({ field, fieldState, formState }) => {
            return (
              <TextField
                label={label}
                type={type}
                value={field.value}
                ref={field.ref}
                onChange={onChange}
              />
            );
          }}
        />
      </FieldWrapper>
    );
  };

In the file docs/performance.md there is a link for "Code Splitting Example Code", which currently redirects to src/routes/index.tsx, but there are no code splitting examples. I think it should redirect to src/routes/protected.tsx

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.

This project provided a good inspiration for my project architecture, but I'm wondering how to structure when using styled-component ?

Thanks if anyone could help me.

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

React query has changed to Tanstack\react-query v4 and brings lots of new APIs and improvements. Old code referring react-query needs to be updated to new API.

Hi,
what do you thing about handle Application Bootstrap and Layout as a feature?

When starting an application it is often necessary to extract data from the server and consequently show a loading page. Then when the client get the data the landing page (with its layout) is rendered to the user.

Any suggestion regarding the name of this feature?
This feature could also include things such error pages that you put in misc feature.

What do you think?

Many thanks in advance,
Mauro