awesome-claude-code-sub-agents

### Architecture Overview
For a real-time analytics dashboard using React 18, Node.js, and PostgreSQL, I recommend a microservices architecture with the following components:

1. **Frontend Service**: React 18 with TypeScript, using Vite for bundling and Zustand for state management. Implement a modular component structure with atomic design principles.
2. **API Gateway**: Node.js with Express.js, handling authentication (JWT), rate limiting, and request routing. Use Helmet for security headers and Winston for structured logging.
3. **Analytics Service**: Python-based FastAPI microservice for data processing, using Pandas for transformations and NumPy for numerical operations. Deploy with Docker and Kubernetes for scalability.
4. **Database Layer**: PostgreSQL 15 with TimescaleDB extension for time-series data. Implement read replicas for analytics queries and connection pooling with PgBouncer.
5. **Message Broker**: Redis Streams for real-time event processing between services.

### Decision Framework: React vs Vue for Frontend
When choosing between React and Vue for this project, evaluate based on:

| Criteria               | React                          | Vue                            | Recommendation          |
|------------------------|--------------------------------|--------------------------------|-------------------------|
| Learning Curve         | Steeper (JSX, hooks)           | Gentler (template syntax)      | Vue for junior team     |
| Performance            | Virtual DOM, slightly faster   | Virtual DOM, comparable        | Tie                     |
| Ecosystem              | Larger (Next.js, Redux)        | Smaller but cohesive           | React for mature stack  |
| State Management       | Requires external libraries    | Built-in Composition API       | Vue for simpler state   |
| Team Familiarity       | 60% React, 40% Vue             | 30% React, 70% Vue             | Vue for team alignment  |

**Recommendation**: Choose Vue.js with the Composition API for this project due to the team's existing Vue expertise and the need for faster initial development. Implement Nuxt.js for server-side rendering and static site generation capabilities.

### Implementation Best Practices
1. **Frontend**:
   - Use Vite for development and production builds
   - Implement lazy loading for routes and components
   - Set up ESLint with Airbnb config and Prettier for consistent formatting
   - Configure Jest with React Testing Library for unit tests
   - Implement Storybook for component documentation

2. **Backend**:
   - Use TypeScript for type safety across the Node.js services
   - Implement request validation with Zod or Joi
   - Set up Docker multi-stage builds for production images
   - Configure CI/CD pipeline with GitHub Actions
   - Implement distributed tracing with OpenTelemetry

3. **Database**:
   - Use Prisma ORM for type-safe database access
   - Implement connection pooling with PgBouncer
   - Set up database migrations with Prisma Migrate
   - Configure automated backups with WAL-E

### Risk Mitigation
1. **Performance Bottlenecks**:
   - Implement caching with Redis for frequent queries
   - Use database indexing for time-series data
   - Set up query performance monitoring with pgBadger

2. **Scalability Issues**:
   - Design services to be stateless where possible
   - Implement horizontal scaling with Kubernetes HPA
   - Use message queues for decoupling services

3. **Security Concerns**:
   - Implement rate limiting with Redis
   - Use environment variables for secrets (never hardcode)
   - Set up regular dependency scanning with Snyk
   - Configure CSP headers with Helmet

4. **Team Knowledge Gaps**:
   - Schedule architecture review sessions
   - Create internal documentation with Notion
   - Implement pair programming for complex features
   - Set up a shared Slack channel for architecture questions