|
| 1 | +# GitHub Copilot Instructions |
| 2 | + |
| 3 | +You are working on a **React Starter Boilerplate** project - a modern, production-ready React application foundation built by The Software House. |
| 4 | + |
| 5 | +## Project Overview |
| 6 | + |
| 7 | +This is a carefully crafted React starter template featuring: |
| 8 | +- **Vite** for fast development and building |
| 9 | +- **TypeScript** for type safety |
| 10 | +- **TanStack Router** for type-safe routing |
| 11 | +- **TanStack Query** with custom abstraction layer |
| 12 | +- **React Intl** for internationalization |
| 13 | +- **Vitest** for unit testing |
| 14 | +- **Playwright** for E2E testing |
| 15 | +- **Plop** for code generation |
| 16 | +- **MSW** for API mocking |
| 17 | + |
| 18 | +## Key Architecture Principles |
| 19 | + |
| 20 | +1. **Type Safety First**: All code should be fully typed with TypeScript |
| 21 | +2. **Custom Abstractions**: Use project-specific abstractions (especially for API calls) |
| 22 | +3. **Code Generation**: Prefer using Plop generators for creating new components/features |
| 23 | +4. **Testing**: Write tests for all new functionality |
| 24 | +5. **Documentation**: Keep docs updated when adding new patterns |
| 25 | + |
| 26 | +## Specialized Instructions |
| 27 | + |
| 28 | +For detailed guidance on specific areas, refer to these specialized instruction files: |
| 29 | + |
| 30 | +- **[API Development](instructions/api.instructions.md)** - API patterns, React Query usage, data fetching |
| 31 | +- **[Frontend Development](instructions/frontend.instructions.md)** - Component patterns, hooks, UI development |
| 32 | +- **[State Management](instructions/state.instructions.md)** - Context patterns, global state management |
| 33 | +- **[E2E Testing](instructions/e2e.instructions.md)** - End-to-end testing patterns and best practices |
| 34 | + |
| 35 | +## Quick Reference |
| 36 | + |
| 37 | +### Project Structure |
| 38 | +``` |
| 39 | +src/ |
| 40 | +├── api/ # API layer with custom abstractions |
| 41 | +├── routes/ # TanStack Router pages and components |
| 42 | +├── hooks/ # Custom hooks (flat structure) |
| 43 | +├── ui/ # Reusable UI components (flat structure) |
| 44 | +├── context/ # Global contexts with controllers |
| 45 | +├── utils/ # Utility functions |
| 46 | +├── types/ # Global type definitions |
| 47 | +└── i18n/ # Internationalization setup |
| 48 | +``` |
| 49 | + |
| 50 | +### Common Commands |
| 51 | +- Generate components: `npm run plop` |
| 52 | +- Run tests: `npm test` |
| 53 | +- Run E2E: `npm run e2e:open` |
| 54 | +- Start dev server: `npm start` |
| 55 | + |
| 56 | +## General Guidelines |
| 57 | + |
| 58 | +1. **Always use existing patterns** - Check `/docs/` for project-specific patterns |
| 59 | +2. **Generate don't write** - Use Plop generators when available |
| 60 | +3. **Follow naming conventions** - camelCase for files, PascalCase for components |
| 61 | +4. **Import from correct locations** - Use project's custom hooks, not library directly |
| 62 | +5. **Write tests** - Every new component/hook should have tests |
0 commit comments