Created to use as a starter/skeleton project for reactjs projects. Aim is to be simple and scalable.
- Feature/Modular based approach (recommended for scalability)
- Dictionary index files in sub-folders
- First level
components,hooks,typesandservicesare for common functions - Module level
components,hooks,typesandservicesare for module specific - Module and Component folders/files use PascalCase names
- Other folders/files use camelCase names
- Both human and editor/IDE should be able to find files easily
- Avoid too much nesting
- Feel free to reorganize or change structure totally if you want
/src
/atoms (for Jotai atoms)
/components (for shared components)
/common
/header (use semantic names)
/template
/config (for any config eg: axios instance)
/hooks (for shared hooks)
/modules
/ModuleA
/pages
index.ts
/ModuleB
/components (sub-components for the module)
services.ts (services for the module)
hooks.ts (hooks for the module)
index.ts
types.ts (types for the module)
/services (for shared services)
/api (for shared APIs)
/types (for shared types)
/utils (helper functions, shared functions etc)
App.tsx (routes inside)
index.tsx
- create-react-app v5.0.0
- tailwind v3.0.13
- daisyui v1.22.2
- typescript v4.4.2
- react-icons v4.3.1
- react-router v6
- react-query v3.34.8
- jotai v1.5.2
- axios v0.24.0
- Add requirements to README
In the project directory, you can run:
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.
The page will reload if you make edits.
You will also see any lint errors in the console.
Launches the test runner in the interactive watch mode.
Builds the app for production to the build folder.