Update README.md with comprehensive learning structure and enhanced documentation

.github/copilot-instructions.md

@@ -0,0 +1,80 @@
+# GitHub Copilot Learning Repository - Code Instructions
+
+## 🎯 General Guidelines
+
+- **Always use TypeScript** for new JavaScript/React code with strict mode enabled
+- **Prefer functional programming patterns** over imperative approaches
+- **Include comprehensive error handling** for all async operations
+- **Add JSDoc comments** for all public APIs and complex functions
+- **Follow semantic naming conventions** for variables, functions, and files
+
+## 📁 File Organization
+
+- **Use kebab-case** for file and folder names (e.g., `user-profile.tsx`)
+- **Group related files** in dedicated folders with index files for exports
+- **Separate concerns** with clear boundaries between components, services, and utilities
+- **Place tests** adjacent to source files with `.test.ts` or `.spec.ts` extensions
+
+## ⚛️ React Development Standards
+
+- **Use functional components** with React hooks instead of class components
+- **Implement proper prop validation** with TypeScript interfaces
+- **Extract custom hooks** for reusable stateful logic
+- **Use React.memo** for performance optimization when appropriate
+- **Implement proper error boundaries** for component error handling
+
+## 🔧 Code Quality
+
+- **Follow SOLID principles** in component and service design
+- **Use composition over inheritance** patterns
+- **Implement proper separation of concerns** between UI and business logic
+- **Add comprehensive unit tests** with minimum 80% coverage
+- **Use meaningful variable names** that clearly express intent
+
+## 🚨 Security Practices
+
+- **Validate all user inputs** on both client and server sides
+- **Sanitize data** before displaying in UI components
+- **Use environment variables** for sensitive configuration
+- **Implement proper authentication checks** for protected routes
+- **Follow OWASP security guidelines** for web applications
+
+## 📚 Documentation Standards
+
+- **Include README files** for all major features and modules
+- **Document API endpoints** with clear request/response examples
+- **Add inline comments** for complex business logic
+- **Create user guides** for new features and tools
+- **Maintain up-to-date setup instructions** for development environment
+
+## 🧪 Testing Requirements
+
+- **Write tests first** for critical business logic (TDD approach)
+- **Test user interactions** with React Testing Library
+- **Mock external dependencies** in unit tests
+- **Include accessibility tests** for UI components
+- **Create integration tests** for complete user workflows
+
+## 🎨 Styling Guidelines
+
+- **Use CSS Modules** or styled-components for component styling
+- **Follow BEM methodology** for CSS class naming when using regular CSS
+- **Implement responsive design** patterns for mobile compatibility
+- **Use design tokens** for consistent spacing, colors, and typography
+- **Ensure WCAG 2.1 AA compliance** for accessibility standards
+
+## 🔄 State Management
+
+- **Use React Context** for application-wide state management
+- **Implement proper state normalization** for complex data structures
+- **Use reducers** for complex state update logic
+- **Cache API responses** appropriately to reduce network requests
+- **Handle loading and error states** consistently across the application
+
+## 📦 Dependencies
+
+- **Prefer established libraries** with active maintenance and community support
+- **Keep dependencies updated** and audit for security vulnerabilities
+- **Use exact version pinning** for critical dependencies
+- **Document reasons** for major dependency choices
+- **Minimize bundle size** by avoiding unnecessary dependencies 

.github/instructions/commit-messages.md

@@ -0,0 +1,88 @@
+---
+applyTo:
+  - commitMessageGeneration
+---
+
+# Commit Message Instructions
+
+## Format Structure
+
+Use the **Conventional Commits** format for all commit messages:
+
+```
+<type>[optional scope]: <description>
+
+[optional body]
+
+[optional footer(s)]
+```
+
+## Commit Types
+
+- **feat**: A new feature for the user
+- **fix**: A bug fix for the user
+- **docs**: Documentation changes only
+- **style**: Code style changes (formatting, missing semi-colons, etc.)
+- **refactor**: Code changes that neither fix bugs nor add features
+- **perf**: Performance improvements
+- **test**: Adding or updating tests
+- **chore**: Maintenance tasks, dependency updates
+- **ci**: Changes to CI/CD configuration
+- **build**: Changes to build system or external dependencies
+
+## Scope Guidelines
+
+Use descriptive scopes to indicate the area of change:
+- **components**: React component changes
+- **api**: Backend API changes
+- **auth**: Authentication/authorization
+- **ui**: User interface updates
+- **docs**: Documentation updates
+- **config**: Configuration changes
+
+## Description Rules
+
+- **Use imperative mood** ("add feature" not "added feature")
+- **Limit to 50 characters** for the subject line
+- **Start with lowercase** unless it's a proper noun
+- **No period** at the end of the subject line
+- **Be specific and descriptive** about what changed
+
+## Body Guidelines
+
+- **Wrap at 72 characters** per line
+- **Explain what and why** not how
+- **Include motivation** for the change
+- **Reference related issues** using #issue-number
+- **Separate paragraphs** with blank lines
+
+## Footer Usage
+
+- **Breaking changes**: Start with "BREAKING CHANGE: "
+- **Issue references**: "Closes #123", "Fixes #456"
+- **Co-authored by**: For pair programming
+
+## Examples
+
+```
+feat(auth): add OAuth2 login integration
+
+Implement Google OAuth2 authentication to allow users to login
+using their Google accounts. This provides a more secure and
+convenient authentication method.
+
+- Add OAuth2 configuration
+- Implement callback handling
+- Update user model to store OAuth tokens
+
+Closes #142
+```
+
+```
+fix(components): resolve memory leak in UserProfile component
+
+The UserProfile component was not properly cleaning up event
+listeners in useEffect, causing memory leaks on route changes.
+
+BREAKING CHANGE: UserProfile now requires cleanup prop
+``` 

.github/instructions/react-development.md

@@ -0,0 +1,83 @@
+---
+applyTo:
+  - codeGeneration
+  - testGeneration
+  - reviewSelection
+filePatterns:
+  - "**/*.tsx"
+  - "**/*.ts"
+  - "**/*.jsx"
+  - "**/*.js"
+keywords:
+  - react
+  - component
+  - hook
+  - jsx
+  - tsx
+---
+
+# React Development Instructions
+
+## Component Architecture
+
+- **Always use functional components** with hooks instead of class components
+- **Create custom hooks** for reusable stateful logic across components
+- **Use React.memo** for components that receive the same props frequently
+- **Implement proper prop drilling solutions** with Context API or state management
+- **Keep components small and focused** on a single responsibility
+
+## TypeScript Integration
+
+- **Define explicit interfaces** for all component props
+- **Use generic types** for reusable components where appropriate
+- **Avoid using `any` type** - prefer `unknown` or proper type definitions
+- **Create union types** for component variants and states
+- **Use type guards** for runtime type checking when needed
+
+## State Management
+
+- **Use useState** for simple local component state
+- **Use useReducer** for complex state logic with multiple sub-values
+- **Implement Context API** for application-wide state that multiple components need
+- **Consider external state management** (Redux, Zustand) for complex applications
+- **Keep state as close to where it's used** as possible
+
+## Performance Optimization
+
+- **Use useMemo** for expensive calculations that depend on specific props/state
+- **Use useCallback** for functions passed as props to prevent unnecessary re-renders
+- **Implement code splitting** with React.lazy and Suspense for large components
+- **Optimize re-renders** by avoiding object/array creation in render methods
+- **Profile performance** using React DevTools Profiler
+
+## Error Handling
+
+- **Implement Error Boundaries** for graceful error handling in component trees
+- **Use try-catch blocks** in async functions and event handlers
+- **Provide fallback UI** for error states and loading states
+- **Log errors appropriately** without exposing sensitive information
+- **Handle network errors** gracefully with retry mechanisms
+
+## Testing Standards
+
+- **Test component behavior** rather than implementation details
+- **Use React Testing Library** for component testing
+- **Mock external dependencies** and API calls
+- **Test accessibility** with jest-axe
+- **Maintain test coverage** above 80% for critical components
+
+## Styling Guidelines
+
+- **Use CSS Modules** for component-scoped styling
+- **Follow BEM methodology** when using regular CSS
+- **Implement design tokens** for consistent spacing, colors, and typography
+- **Ensure responsive design** with mobile-first approach
+- **Test across different devices** and browsers
+
+## Hook Best Practices
+
+- **Place hooks at the top level** of function components
+- **Use dependency arrays correctly** in useEffect to avoid infinite loops
+- **Clean up side effects** in useEffect return functions
+- **Create custom hooks** for complex logic that uses multiple built-in hooks
+- **Follow hook naming convention** with "use" prefix for custom hooks