Conventions and reasons behind them

• Please ensure prettier are installed in your code editor. This will help you to follow the coding standards.
• Please never export default from any file. Always use named exports: https://stackoverflow.com/a/58103685
• Place feature-specific components, types, store, and API calls in the feature folder. Do not place them in the shared folders.
• File/folder names should be PascalCase if contains React component, otherwise camelCase.
• Lazy load routes: https://github.com/alan2207/bulletproof-react/blob/master/apps/react-vite/src/app/router.tsx
• Always use useQueryClient hook to access the query client: https://tkdodo.eu/blog/react-query-fa-qs#why-should-i-usequeryclient
• While creating forms via useForm hook, create validation schema using zod and infer types from it. This way we can omit one-time type definitions: colinhacks/zod#2391 (comment)
• Import files using @ alias: https://github.com/alan2207/bulletproof-react/blob/master/docs/project-standards.md#absolute-imports

Resources

These resources are used to create this project structure. They taught me a lot about the best practices and conventions. I highly recommend you to read them.

• Path To A Clean(er) React Architecture and other articles
• Blog of React Query's author
• Blog from coauthor of CRA and Redux
• Articles from epicreact.dev
• Bulletproof React

Project structure

/src/api

This folder hosts API calls which is shared across the application. While naming the files please follow the convention use[Action][Resource]Query.ts. These files should export a hook following this pattern: use[Action][Resource]Query.

[action] means it should start with verbs like get, create, update, delete, etc.

[resource] is data we perform action on. If we expect/pass single item, it should be singular. If we expect/pass multiple items, it should be plural: useGetUsersQuery.ts, useDeleteUserQuery.ts.

There are some exceptions like useLoginQuery.ts, useLogoutQuery.ts. As we know this actions are related to user, we omit user part.

/src/components

This folder hosts all the shared components across the application. Feature-specific components should not be placed here. While naming the files please follow the convention [ComponentName].tsx.

/src/store

This folder hosts all the store related files. Naming convention should be use[StoreName]Store.ts and should export a hook with the same name. For example, useUserStore.ts should export useUserStore hook.

/src/forms

This folder hosts all the forms related to the feature. Naming convention should be use[FormName]Form.ts. For example, useLoginForm.ts, useCreateQuestForm.ts, etc. Should export a hook with the same name: useLoginForm, useCreateQuestForm, etc.

/src/layouts

This folder hosts all the layouts related to the application. Layouts are the components that wrap the pages. Naming convention should be [LayoutName]Layout.tsx. For example, MainLayout.tsx, AuthLayout.tsx, etc.

/src/pages

This folder hosts all the pages related to the application. Naming convention should be [PageName]Page.tsx. For example, ErrorPage.tsx, LoadingPage.tsx, etc.

/src/types

This folder hosts all the types related to the application. Naming convention should be [resource-singular].ts. For example, user.ts, quest.ts, etc.

---

/src/features

Feature is a self-contained unit of code that has its own state, actions, mutations, and views. It is a folder that contains all the necessary files to implement a specific feature. Each feature should have its own folder and should be named in a way that describes the feature. They are like logical-blocks of the application. They never should share anything with outside. Feature's folder name should follow plural lowercased kabab-case convention: auth, quests, users, etc.

/src/features/[feature-name]/api

Same as /src/api, but this folder is specific to the feature. It should contain all the API calls related to the feature.

/src/features/[feature-name]/components

Same as /src/components, but this folder is specific to the feature. It should contain all the components related to the feature.]

/src/features/[feature-name]/forms

Same as src/forms, but this folder is specific to the feature. It should contain all the forms related to the feature.

/src/features/[feature-name]/store

Same as /src/store, but this folder is specific to the feature. It should contain all the store related to the feature.

/src/features/[feature-name]/types

Same as /src/types, but this folder is specific to the feature. It should contain all the types related to the feature.

/src/features/[feature-name]/layouts

Same as /src/layouts, but this folder is specific to the feature. It should contain all the layouts related to the feature.

/src/features/[feature-name]/pages

Same as /src/pages, but this folder is specific to the feature. It should contain all the pages related to the feature.

---