This is a boilerplate for personal projects. The technologies used are:
- Vite with React + TypeScript
- Vitest + React Testing Library
- Axios
- React Router
- TanStack Query
- Husky + Commitlint
- PNPM
src/
├── components/
│ ├── Container/
│ │ ├── Container.tsx
│ │ └── style.css
│ └── index.ts
├── pages/
│ ├── Home/
│ │ ├── Components/
│ │ │ ├── TodoList.tsx
│ │ │ └── TodoList.test.tsx
│ │ ├── Home.tsx
│ │ ├── Home.test.tsx
│ │ └── style.css
│ └── index.ts
├── providers/
│ ├── Providers.tsx
│ ├── ReactRouter.tsx
│ └── ...
├── services/
│ ├── clients/
│ │ └── todo-client.ts
│ ├── mutations/
│ │ └── useCreateTodos.tsx
│ └── queries/
│ └── useTodos.tsx
├── test/
│ └── setup.ts
├── contexts/
│ └── AuthContext.tsx
└── hooks/
└── useAuth.tsx
components
: all components used throughout the entire app- every component will have a test file and a style file
pages
: all the pages that are used in the app- every page will have a test file, a style file, and a component folder with exclusive components for that page
providers
: all providers imported in a single provider fileservices
: everything related to API callsclients
: folder with instances of Axios for each API clientmutations
: react query mutationsqueries
: react query queries
test
: files and mocks for setting up tests.contexts
: all contexts for the React app.hooks
: every globally used hook.