Folder Structrue

root

Folder Structure under the root.

__mocks__
This is for basic configuration of jest in vite.

.husky
This is for husky configuration.

.storybook
This is for storybook configuration.

.vscode
This is for ESLint auto-fix configuration.

.eslintrc.json
This is for ESLint configuration.

.prettierrc
This is for prettier configuration.

jest.config.cjs
This is for jest configuration.

jest.setup.ts
This is for jest & MSW configuration.

tsconfig.json
This is for typescript configuration.
Absoulte path configuration is added.

vite.config.ts
This is for vite configuration.
Absoulte path configuration is added.

src

Folder Structure under the src.

src/components
You can add components in this folder.

src/hooks
You can add custom react hooks in this folder.

src/mocks
This is for MSW configuration.
You can add Mock APIs in handlers.ts

src/pages
You can add each page in this folder.
After adding any page, modify routes in the App.tsx for routing.

src/store
This is for state management.
In this project, recoil is set by default.

src/stories
This is default storybook assets after installing storybook.

src/utils
You can add util functions to this folder.

src/env.ts
In vite react, jest conflicts with import.meta syntax.
To solve this, you can add .env variables in this file.

src/index.css
This includes reset.css.