Instruction file imported from mkjj/order-processing-platform (.github/instructions/react-vite-structure.instructions.md). Copyright stays with the author.

React And Vite Structure

• Organize frontend code by responsibility. Introduce a directory only when it has a concrete owner or contains more than one related file.
• Keep Vite's index.html at the frontend project root. Use public/ only for files served directly without imports.
• Place imported images, icons, and fonts in src/assets/.
• Place reusable presentation components in src/components/, with common/, layout/, and ui/ subdirectories when they add clarity.
• Place route-level components in src/pages/<PageName>/ and route definitions in src/routes/.
• Place custom React hooks in src/hooks/, API and external integration code in src/services/, and Context providers in src/context/.
• Use src/store/ only for actual shared application state; do not create it preemptively.
• Put pure reusable helpers in src/utils/, fixed values and route constants in src/constants/, and global/shared CSS in src/styles/.
• Keep App.tsx focused on application composition and main.tsx focused on startup and provider mounting.
• Use .ts for non-React modules and .tsx for modules that render JSX.
• For the current small application, keep the existing compact src/ layout until a file belongs clearly to one of these responsibilities. Avoid empty placeholder directories or premature abstractions.

• Create a .gitignore file at the frontend project root with at least the following content:

node_modules
dist