From 32b7e4f9a994795142ec2211cd2d450426a00ef0 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Thu, 5 Feb 2026 10:17:15 +0000 Subject: [PATCH 1/5] Initial plan From 1fde9c436e0671c6674c20a4b6d5e57ce7a94ab3 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Thu, 5 Feb 2026 10:20:56 +0000 Subject: [PATCH 2/5] Add comprehensive frontend documentation - Create detailed frontend.md with architecture, patterns, and guidelines - Update frontend README.md with quick start and feature overview - Update main README.md and architecture.md to reference frontend docs - Document component structure, state management, API integration - Include development workflow, testing, and troubleshooting guides Co-authored-by: webmaxru <1560278+webmaxru@users.noreply.github.com> --- README.md | 1 + docs/architecture.md | 5 + docs/frontend.md | 459 +++++++++++++++++++++++++++++++++++++++++++ frontend/README.md | 236 +++++++++++++++++----- 4 files changed, 648 insertions(+), 53 deletions(-) create mode 100644 docs/frontend.md diff --git a/README.md b/README.md index 44e38d3..5a75a86 100644 --- a/README.md +++ b/README.md @@ -103,6 +103,7 @@ To showcase extended capabilities: ## ๐Ÿ“š Documentation - [Detailed Architecture](./docs/architecture.md) +- [Frontend Documentation](./docs/frontend.md) - [SQLite Integration](./docs/sqlite-integration.md) - [Complete Demo Script](./docs/demo-script.md) diff --git a/docs/architecture.md b/docs/architecture.md index 39960ef..4097e41 100644 --- a/docs/architecture.md +++ b/docs/architecture.md @@ -19,6 +19,11 @@ The system is a modern supply chain management application built using TypeScrip - React 18+ with TypeScript - Vite build tool for fast development - Tailwind CSS for UI styling +- React Query for server state management +- React Router v7 for client-side routing +- Context API for global state (authentication, theme) + +See the dedicated frontend guide: `docs/frontend.md` ### DevOps Integration - Docker/Docker Compose for containerization diff --git a/docs/frontend.md b/docs/frontend.md new file mode 100644 index 0000000..37623d0 --- /dev/null +++ b/docs/frontend.md @@ -0,0 +1,459 @@ +# Frontend Architecture and Documentation + +## Overview + +The OctoCAT Supply Chain frontend is a modern React application built with TypeScript, featuring a responsive UI powered by Tailwind CSS and built with Vite for optimal development experience and performance. + +## Technology Stack + +- **React 18+** - Modern React with hooks and concurrent features +- **TypeScript** - Type-safe development with full type coverage +- **Vite** - Fast build tool with Hot Module Replacement (HMR) +- **Tailwind CSS** - Utility-first CSS framework for responsive design +- **React Router v7** - Client-side routing with data router patterns +- **React Query v3** - Server state management and data fetching +- **Axios** - HTTP client for API communication +- **React Slick** - Carousel component for product displays + +## Project Structure + +``` +frontend/ +โ”œโ”€โ”€ src/ +โ”‚ โ”œโ”€โ”€ api/ # API configuration and endpoints +โ”‚ โ”‚ โ””โ”€โ”€ config.ts # Base URL detection and API endpoints +โ”‚ โ”œโ”€โ”€ components/ # React components +โ”‚ โ”‚ โ”œโ”€โ”€ admin/ # Admin-specific components +โ”‚ โ”‚ โ”‚ โ””โ”€โ”€ AdminProducts.tsx +โ”‚ โ”‚ โ”œโ”€โ”€ entity/ # Entity-specific components +โ”‚ โ”‚ โ”‚ โ””โ”€โ”€ product/ # Product-related components +โ”‚ โ”‚ โ”‚ โ”œโ”€โ”€ Products.tsx +โ”‚ โ”‚ โ”‚ โ””โ”€โ”€ ProductForm.tsx +โ”‚ โ”‚ โ”œโ”€โ”€ About.tsx # About page component +โ”‚ โ”‚ โ”œโ”€โ”€ Footer.tsx # Site footer +โ”‚ โ”‚ โ”œโ”€โ”€ Login.tsx # Login page component +โ”‚ โ”‚ โ”œโ”€โ”€ Navigation.tsx # Main navigation bar +โ”‚ โ”‚ โ””โ”€โ”€ Welcome.tsx # Home/landing page +โ”‚ โ”œโ”€โ”€ context/ # React context providers +โ”‚ โ”‚ โ”œโ”€โ”€ AuthContext.tsx # Authentication state management +โ”‚ โ”‚ โ”œโ”€โ”€ ThemeContext.tsx # Theme (dark/light mode) management +โ”‚ โ”‚ โ”œโ”€โ”€ themeContextUtils.tsx # Theme context utilities +โ”‚ โ”‚ โ””โ”€โ”€ useTheme.tsx # Theme custom hook +โ”‚ โ”œโ”€โ”€ assets/ # Static assets (images, icons) +โ”‚ โ”œโ”€โ”€ App.tsx # Main application component +โ”‚ โ”œโ”€โ”€ main.tsx # Application entry point +โ”‚ โ”œโ”€โ”€ index.css # Global styles and Tailwind imports +โ”‚ โ””โ”€โ”€ vite-env.d.ts # Vite environment type definitions +โ”œโ”€โ”€ public/ # Static public assets +โ”œโ”€โ”€ index.html # HTML entry point +โ”œโ”€โ”€ vite.config.ts # Vite configuration +โ”œโ”€โ”€ tailwind.config.js # Tailwind CSS configuration +โ”œโ”€โ”€ tsconfig.json # TypeScript configuration +โ””โ”€โ”€ package.json # Dependencies and scripts + +``` + +## Key Features + +### 1. Responsive Design +- Mobile-first approach with Tailwind CSS +- Breakpoints for mobile (โ‰ค640px), tablet (~768px), and desktop (โ‰ฅ1024px) +- Adaptive layouts and components + +### 2. Dark Mode Support +- System-wide theme toggle +- Persistent theme preference via localStorage +- Smooth transitions between light and dark modes + +### 3. State Management +- **React Query** for server state (product data, API calls) +- **Context API** for global UI state (authentication, theme) +- Local component state for UI interactions + +### 4. Routing Structure + +``` +/ โ†’ Welcome page (home) +/about โ†’ About page +/products โ†’ Product catalog +/login โ†’ Login page +/admin/products โ†’ Admin product management (protected) +``` + +## Core Components + +### Navigation (`Navigation.tsx`) +- Responsive navigation bar with mobile hamburger menu +- Dynamic links based on authentication state +- Theme toggle button +- Highlights active route + +### Welcome (`Welcome.tsx`) +- Hero section with AI-generated banner +- Product carousel using React Slick +- Call-to-action buttons +- Responsive image display + +### Products (`Products.tsx`) +- Product catalog with search functionality +- Real-time filtering by name and description +- Product detail modal +- Quantity selection and add-to-cart (placeholder) +- React Query for data fetching with loading and error states + +### Login (`Login.tsx`) +- Email and password form +- Simple authentication flow (demo implementation) +- Admin access based on email domain (@github.com) + +### AdminProducts (`AdminProducts.tsx`) +- Administrative interface for product management +- Create, edit, and delete products +- Protected route requiring admin authentication + +## State Management + +### Authentication Context (`AuthContext.tsx`) + +Provides authentication state and methods throughout the application: + +```typescript +interface AuthContextType { + isLoggedIn: boolean; + isAdmin: boolean; + login: (email: string, password: string) => Promise; + logout: () => void; +} +``` + +**Usage:** +```typescript +const { isLoggedIn, isAdmin, login, logout } = useAuth(); +``` + +**Features:** +- Session state management +- Role-based access control (admin detection) +- Simple email/password authentication (demo) +- Admin access for @github.com domain emails + +### Theme Context (`ThemeContext.tsx`) + +Manages application-wide theme preferences: + +```typescript +interface ThemeContextType { + darkMode: boolean; + toggleTheme: () => void; +} +``` + +**Usage:** +```typescript +const { darkMode, toggleTheme } = useTheme(); +``` + +**Features:** +- Dark/light mode toggle +- Persistent preferences via localStorage +- CSS class management on document root +- Smooth color transitions + +## API Integration + +### Configuration (`api/config.ts`) + +Smart API URL detection with multiple strategies: + +1. **Runtime Configuration** - Checks `window.RUNTIME_CONFIG.API_URL` +2. **GitHub Codespaces Detection** - Auto-detects Codespace URLs and maps to API port +3. **Localhost Fallback** - Defaults to `http://localhost:3000` + +**Endpoints:** +```typescript +{ + products: '/api/products', + suppliers: '/api/suppliers', + orders: '/api/orders', + branches: '/api/branches', + headquarters: '/api/headquarters', + deliveries: '/api/deliveries', + orderDetails: '/api/order-details', + orderDetailDeliveries: '/api/order-detail-deliveries' +} +``` + +### Data Fetching Pattern + +Using React Query for optimal data management: + +```typescript +const { data, isLoading, error } = useQuery('queryKey', fetchFunction); +``` + +**Benefits:** +- Automatic caching and refetching +- Loading and error state management +- Background updates +- Request deduplication + +## Styling Approach + +### Tailwind CSS +- Utility-first CSS framework +- Responsive design with mobile-first breakpoints +- Custom color palette for brand consistency +- Dark mode support via class strategy + +### Style Guidelines +- Prefer Tailwind utilities over custom CSS +- Extract repeated patterns into reusable components +- Use semantic color names from Tailwind palette +- Maintain consistent spacing scale + +## Development Workflow + +### Local Development + +```bash +# Install dependencies +npm install + +# Start development server (port 5137) +npm run dev --workspace=frontend + +# From root directory +npm run dev +``` + +### Building for Production + +```bash +# Build TypeScript and bundle +npm run build --workspace=frontend + +# Preview production build +npm run preview --workspace=frontend +``` + +### Linting + +```bash +# Run ESLint +npm run lint --workspace=frontend +``` + +## Configuration Files + +### Vite (`vite.config.ts`) +- React plugin for JSX transformation +- Development server on port 5137 +- Host binding for containerization +- Environment variable injection for Codespaces + +### TypeScript (`tsconfig.json`) +- Strict type checking enabled +- Modern ES2020 target +- Path aliases for clean imports +- Separate configs for app and build tools + +### Tailwind (`tailwind.config.js`) +- Content paths for JIT compilation +- Custom theme extensions +- Dark mode class strategy +- Plugin configurations + +## Performance Considerations + +### Code Splitting +- Route-based lazy loading (where applicable) +- Dynamic imports for large dependencies +- Optimized bundle sizes + +### Optimization Tips +- Use `memo` for expensive re-renders on large lists +- Implement virtualization for lists > 200 items +- Minimize bundle size - avoid unnecessary dependencies +- Leverage React Query's caching to reduce API calls + +## Accessibility + +### Current Implementation +- Semantic HTML elements +- Keyboard navigation support +- Focus management for modals +- ARIA labels where needed + +### Recommendations +- Regular accessibility audits +- Test with screen readers +- Maintain proper heading hierarchy +- Ensure sufficient color contrast + +## Testing Strategy + +### Current Setup +- **Testing Library**: React Testing Library installed +- **Test Runner**: Vitest configured +- **DOM Environment**: jsdom for component testing + +### Testing Guidelines +- Unit tests for complex component logic +- Integration tests for user flows (form submission, navigation) +- Query hooks for data fetching logic +- Snapshot tests for stable presentational components (use sparingly) + +## Security Considerations + +### Current Implementation +- No direct HTML interpolation (prevents XSS) +- Type-safe API communication +- Environment-based configuration + +### Best Practices +- Never interpolate untrusted user input into HTML +- Validate and sanitize all user inputs +- Use HTTPS in production +- Implement proper CORS policies +- Keep dependencies updated + +## Docker Support + +The frontend includes Docker configuration for containerized deployment: + +### Dockerfile +- Multi-stage build for optimized image size +- Nginx for serving static files +- Environment-based runtime configuration + +### nginx.conf +- SPA routing fallback to index.html +- Proper MIME types +- Compression enabled + +## Environment Variables + +### Development +- `CODESPACE_NAME` - Auto-detected for GitHub Codespaces + +### Runtime +- `RUNTIME_CONFIG.API_URL` - Injected at runtime for Docker deployments + +## Common Patterns + +### Component Structure +```typescript +// 1. Imports +import { useState } from 'react'; +import { useTheme } from '../context/ThemeContext'; + +// 2. Type definitions +interface ComponentProps { + // props +} + +// 3. Component function +export default function Component({ props }: ComponentProps) { + // 4. Hooks + const { darkMode } = useTheme(); + const [state, setState] = useState(); + + // 5. Event handlers + const handleClick = () => { + // handler logic + }; + + // 6. Render + return ( +
+ {/* JSX */} +
+ ); +} +``` + +### API Call Pattern +```typescript +// Define interface +interface EntityType { + id: number; + name: string; +} + +// Create fetch function +const fetchEntities = async (): Promise => { + const { data } = await axios.get(`${api.baseURL}${api.endpoints.entities}`); + return data; +}; + +// Use in component +const { data, isLoading, error } = useQuery('entities', fetchEntities); +``` + +## Future Enhancements + +### Planned Features +- Shopping cart implementation +- Order history and tracking +- User profile management +- Product reviews and ratings +- Advanced search and filtering + +### Technical Improvements +- Implement E2E tests with Playwright +- Add comprehensive unit test coverage +- Optimize bundle size further +- Implement service worker for offline support +- Add performance monitoring + +## Troubleshooting + +### Common Issues + +**Port Already in Use** +```bash +# Kill process on port 5137 +lsof -ti:5137 | xargs kill -9 +``` + +**API Connection Issues** +- Check API is running on port 3000 +- Verify API_BASE_URL in browser console +- Check CORS configuration in API + +**Build Failures** +- Clear node_modules and reinstall: `rm -rf node_modules && npm install` +- Clear Vite cache: `rm -rf frontend/node_modules/.vite` + +**Type Errors** +- Ensure TypeScript version matches across monorepo +- Run type check: `npm run build --workspace=frontend` (runs `tsc -b`) + +## Resources + +### Documentation +- [React Documentation](https://react.dev/) +- [Vite Guide](https://vitejs.dev/guide/) +- [Tailwind CSS](https://tailwindcss.com/docs) +- [React Query](https://tanstack.com/query/v3/docs/react/overview) +- [React Router](https://reactrouter.com/en/main) + +### Internal Documentation +- [Architecture Overview](./architecture.md) +- [API Documentation](../api/README.md) +- [Demo Script](./demo-script.md) + +## Contributing + +When making frontend changes: +1. Follow existing code patterns and conventions +2. Maintain type safety (avoid `any`) +3. Write tests for new features +4. Update documentation for significant changes +5. Test responsive design at all breakpoints +6. Verify dark mode compatibility +7. Run linter before committing: `npm run lint --workspace=frontend` + +--- + +*This documentation reflects the current state of the frontend application. For code review guidelines specific to frontend changes, see `.github/instructions/frontend.instructions.md`.* diff --git a/frontend/README.md b/frontend/README.md index 40ede56..f0bf210 100644 --- a/frontend/README.md +++ b/frontend/README.md @@ -1,54 +1,184 @@ -# React + TypeScript + Vite - -This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. - -Currently, two official plugins are available: - -- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh -- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh - -## Expanding the ESLint configuration - -If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules: - -```js -export default tseslint.config({ - extends: [ - // Remove ...tseslint.configs.recommended and replace with this - ...tseslint.configs.recommendedTypeChecked, - // Alternatively, use this for stricter rules - ...tseslint.configs.strictTypeChecked, - // Optionally, add this for stylistic rules - ...tseslint.configs.stylisticTypeChecked, - ], - languageOptions: { - // other options... - parserOptions: { - project: ['./tsconfig.node.json', './tsconfig.app.json'], - tsconfigRootDir: import.meta.dirname, - }, - }, -}) -``` - -You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules: - -```js -// eslint.config.js -import reactX from 'eslint-plugin-react-x' -import reactDom from 'eslint-plugin-react-dom' - -export default tseslint.config({ - plugins: { - // Add the react-x and react-dom plugins - 'react-x': reactX, - 'react-dom': reactDom, - }, - rules: { - // other rules... - // Enable its recommended typescript rules - ...reactX.configs['recommended-typescript'].rules, - ...reactDom.configs.recommended.rules, - }, -}) +# OctoCAT Supply Chain - Frontend + +A modern React application for supply chain management, built with TypeScript, Vite, and Tailwind CSS. + +## ๐Ÿš€ Quick Start + +### Development + +```bash +# Install dependencies (from root) +npm install + +# Start development server +npm run dev --workspace=frontend + +# Or from frontend directory +cd frontend +npm run dev +``` + +The application will be available at `http://localhost:5137` + +### Building + +```bash +# Build for production +npm run build --workspace=frontend + +# Preview production build +npm run preview --workspace=frontend +``` + +### Linting + +```bash +# Run ESLint +npm run lint --workspace=frontend +``` + +## ๐Ÿ“ Project Structure + +``` +frontend/ +โ”œโ”€โ”€ src/ +โ”‚ โ”œโ”€โ”€ api/ # API configuration and endpoints +โ”‚ โ”œโ”€โ”€ components/ # React components +โ”‚ โ”‚ โ”œโ”€โ”€ admin/ # Admin-specific components +โ”‚ โ”‚ โ”œโ”€โ”€ entity/ # Entity components (products, etc.) +โ”‚ โ”‚ โ””โ”€โ”€ ... # Shared components +โ”‚ โ”œโ”€โ”€ context/ # React context providers (Auth, Theme) +โ”‚ โ”œโ”€โ”€ assets/ # Static assets +โ”‚ โ””โ”€โ”€ main.tsx # Application entry point +โ”œโ”€โ”€ public/ # Static public assets +โ”œโ”€โ”€ index.html # HTML entry point +โ””โ”€โ”€ vite.config.ts # Vite configuration +``` + +## ๐Ÿ› ๏ธ Technology Stack + +- **React 18+** - Modern React with hooks +- **TypeScript** - Type-safe development +- **Vite** - Fast build tool with HMR +- **Tailwind CSS** - Utility-first styling +- **React Router v7** - Client-side routing +- **React Query** - Server state management +- **Axios** - HTTP client + +## โœจ Key Features + +- ๐ŸŽจ **Dark Mode** - System-wide theme toggle with persistence +- ๐Ÿ“ฑ **Responsive Design** - Mobile-first approach with Tailwind +- ๐Ÿ” **Authentication** - Simple auth flow with role-based access +- ๐Ÿ›’ **Product Catalog** - Searchable product listings +- ๐Ÿš€ **Fast Development** - Vite HMR for instant feedback +- ๐Ÿณ **Docker Ready** - Containerized deployment support + +## ๐Ÿ—๏ธ Architecture + +### State Management +- **React Query** for server state and data fetching +- **Context API** for global UI state (auth, theme) +- Local component state for UI interactions + +### Routing +``` +/ โ†’ Home page (Welcome) +/about โ†’ About page +/products โ†’ Product catalog +/login โ†’ Login page +/admin/products โ†’ Admin product management +``` + +### API Integration +Smart API URL detection with support for: +- Runtime configuration +- GitHub Codespaces auto-detection +- Local development + +## ๐Ÿ“š Documentation + +For comprehensive documentation, see: + +**[Complete Frontend Documentation](../docs/frontend.md)** - Detailed architecture, patterns, and guidelines + +Topics covered: +- Detailed component documentation +- State management patterns +- API integration strategies +- Styling guidelines +- Performance optimization +- Testing strategies +- Security considerations +- Troubleshooting guide + +## ๐Ÿงช Testing + +The project uses: +- **Vitest** - Fast unit test runner +- **React Testing Library** - Component testing +- **jsdom** - DOM environment for tests + +```bash +# Run tests (when implemented) +npm test --workspace=frontend ``` + +## ๐Ÿณ Docker + +Build and run with Docker: + +```bash +# Build image +docker build -t octocat-frontend ./frontend + +# Run container +docker run -p 8080:80 octocat-frontend +``` + +## ๐Ÿค Contributing + +When contributing to the frontend: + +1. Follow TypeScript best practices (avoid `any`) +2. Use Tailwind utilities for styling +3. Write tests for new features +4. Maintain responsive design +5. Test dark mode compatibility +6. Run linter before committing + +See [Frontend Instructions](../.github/instructions/frontend.instructions.md) for code review guidelines. + +## ๐Ÿ”ง Common Tasks + +### Adding a New Page + +1. Create component in `src/components/` +2. Add route in `App.tsx` +3. Update navigation in `Navigation.tsx` +4. Add TypeScript types as needed + +### Adding API Endpoint + +1. Add endpoint to `src/api/config.ts` +2. Create fetch function with types +3. Use with React Query in component + +### Styling Components + +- Use Tailwind utilities first +- Check theme context for dark mode +- Maintain responsive breakpoints +- Follow existing component patterns + +## ๐Ÿ“– Resources + +- [React Documentation](https://react.dev/) +- [Vite Guide](https://vitejs.dev/guide/) +- [Tailwind CSS](https://tailwindcss.com/docs) +- [React Query](https://tanstack.com/query/v3/) +- [React Router](https://reactrouter.com/) + +--- + +*For backend API documentation, see [API README](../api/README.md)* From 629443f1749374d0fc4f5bb687e66c532bed3508 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Thu, 5 Feb 2026 10:22:00 +0000 Subject: [PATCH 3/5] Fix documentation links and references - Remove non-existent API README link - Update references to point to existing documentation - Link to API Swagger documentation instead Co-authored-by: webmaxru <1560278+webmaxru@users.noreply.github.com> --- docs/frontend.md | 2 +- frontend/README.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/frontend.md b/docs/frontend.md index 37623d0..7a9638c 100644 --- a/docs/frontend.md +++ b/docs/frontend.md @@ -440,7 +440,7 @@ lsof -ti:5137 | xargs kill -9 ### Internal Documentation - [Architecture Overview](./architecture.md) -- [API Documentation](../api/README.md) +- [SQLite Integration](./sqlite-integration.md) - [Demo Script](./demo-script.md) ## Contributing diff --git a/frontend/README.md b/frontend/README.md index f0bf210..697f162 100644 --- a/frontend/README.md +++ b/frontend/README.md @@ -181,4 +181,4 @@ See [Frontend Instructions](../.github/instructions/frontend.instructions.md) fo --- -*For backend API documentation, see [API README](../api/README.md)* +*For the API, see the API source code in the [api directory](../api/) and the [API Swagger documentation](../api/api-swagger.json)* From 1f0aacaaa393f479e0da4dad7ffccf9d0a2c4702 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Thu, 5 Feb 2026 10:22:57 +0000 Subject: [PATCH 4/5] Clarify React Query version in documentation - Add explicit version notes for React Query v3.39.3 - Clarify that v3 is intentionally used in the project - Help developers understand the version context Co-authored-by: webmaxru <1560278+webmaxru@users.noreply.github.com> --- docs/frontend.md | 4 ++-- frontend/README.md | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/frontend.md b/docs/frontend.md index 7a9638c..5a1b7ea 100644 --- a/docs/frontend.md +++ b/docs/frontend.md @@ -11,7 +11,7 @@ The OctoCAT Supply Chain frontend is a modern React application built with TypeS - **Vite** - Fast build tool with Hot Module Replacement (HMR) - **Tailwind CSS** - Utility-first CSS framework for responsive design - **React Router v7** - Client-side routing with data router patterns -- **React Query v3** - Server state management and data fetching +- **React Query v3** - Server state management and data fetching (note: v3 is used; consider upgrading to TanStack Query v4+ for new features) - **Axios** - HTTP client for API communication - **React Slick** - Carousel component for product displays @@ -435,7 +435,7 @@ lsof -ti:5137 | xargs kill -9 - [React Documentation](https://react.dev/) - [Vite Guide](https://vitejs.dev/guide/) - [Tailwind CSS](https://tailwindcss.com/docs) -- [React Query](https://tanstack.com/query/v3/docs/react/overview) +- [React Query v3](https://tanstack.com/query/v3/docs/react/overview) (Project uses v3.39.3) - [React Router](https://reactrouter.com/en/main) ### Internal Documentation diff --git a/frontend/README.md b/frontend/README.md index 697f162..c26224e 100644 --- a/frontend/README.md +++ b/frontend/README.md @@ -176,7 +176,7 @@ See [Frontend Instructions](../.github/instructions/frontend.instructions.md) fo - [React Documentation](https://react.dev/) - [Vite Guide](https://vitejs.dev/guide/) - [Tailwind CSS](https://tailwindcss.com/docs) -- [React Query](https://tanstack.com/query/v3/) +- [React Query v3](https://tanstack.com/query/v3/) (Project uses v3.39.3) - [React Router](https://reactrouter.com/) --- From 4386bf9adbeacad877957ab94177c90b9b478621 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Thu, 5 Feb 2026 10:23:46 +0000 Subject: [PATCH 5/5] Refine React Query version messaging - Remove confusing upgrade suggestion - Clarify v3.39.3 is adequate for demo purposes - Maintain consistency in version documentation Co-authored-by: webmaxru <1560278+webmaxru@users.noreply.github.com> --- docs/frontend.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/frontend.md b/docs/frontend.md index 5a1b7ea..3d8b5e9 100644 --- a/docs/frontend.md +++ b/docs/frontend.md @@ -11,7 +11,7 @@ The OctoCAT Supply Chain frontend is a modern React application built with TypeS - **Vite** - Fast build tool with Hot Module Replacement (HMR) - **Tailwind CSS** - Utility-first CSS framework for responsive design - **React Router v7** - Client-side routing with data router patterns -- **React Query v3** - Server state management and data fetching (note: v3 is used; consider upgrading to TanStack Query v4+ for new features) +- **React Query v3** - Server state management and data fetching (v3.39.3 - adequate for demo purposes) - **Axios** - HTTP client for API communication - **React Slick** - Carousel component for product displays