DevGuard is a proactive security and monitoring toolkit for development teams. It catches vulnerabilities, enforces code standards, and guards your codebase before issues ever reach production.
- Problem Statement
- Project Goals
- Technical Architecture
- Features
- Tech Stack
- Installation & Setup
- Screenshots
- Challenges Faced
- What I Learned
- Future Improvements
- Author
Development teams — especially small to mid-size engineering teams at startups — often have no real-time visibility into their development environment’s security posture.
Most security tools focus on production environments, leaving the development lifecycle unguarded. Security misconfigurations, exposed secrets, and dependency vulnerabilities are frequently introduced during development and only discovered after deployment — when the damage is already done.
DevGuard exists to shift security left — integrating security monitoring and automated enforcement directly into the development workflow. Instead of reacting to incidents, teams using DevGuard are proactively alerted and blocked from shipping vulnerable code.
- ✅ Provide real-time security monitoring for development environments
- ✅ Enforce code quality and security standards through automated CI checks
- ✅ Reduce the time between vulnerability introduction and detection
- ✅ Offer a developer-friendly dashboard for visibility into security posture
- ✅ Build a publishable JavaScript SDK for easy integration into any project
- ✅ Demonstrate production-grade monorepo architecture patterns
DevGuard is built as a TurboRepo monorepo, enabling shared configurations, coordinated builds, and clear separation of concerns across multiple apps and packages.
DevGuard/
├── apps/
│ ├── backend/ # NestJS API — REST endpoints, security scanning logic, event system
│ ├── dashboard/ # React developer dashboard — real-time security visibility
│ └── docs/ # Next.js documentation site
├── packages/
│ ├── sdk-js/ # JavaScript SDK (NPM-publishable) for external integrations
│ ├── ui/ # Shared React component library
│ └── types/ # Shared TypeScript types across all apps
├── .github/
│ └── workflows/ # GitHub Actions CI/CD pipelines
├── turbo.json # TurboRepo pipeline configuration
└── package.json # Root workspace configuration
- React component-based UI for visualizing security scan results
- Shared UI component library via
packages/uifor design consistency - Consumes DevGuard API via the
sdk-jspackage
- NestJS modular architecture with dedicated security scanning modules
- Event-driven design for asynchronous vulnerability detection
- RESTful API endpoints consumed by the dashboard and SDK
packages/types: Shared TypeScript interfaces/types ensuring type safety across frontend and backendpackages/sdk-js: Client SDK abstracting API calls for external developer integrations
- GitHub Actions pipeline runs on every push to
mainanddevbranches - Automated: dependency install → lint → build → type check
- CodeRabbit AI code review integrated for automated PR feedback
- Automated vulnerability detection in development environments
- Dependency audit checks integrated into CI pipeline
- Pre-commit hooks (via Husky) to block vulnerable code before it’s committed
- Real-time visibility into security scan results
- Visual summary of codebase health and security posture
- Responsive design for use across desktop and laptop screens
- GitHub Actions pipeline enforces: linting, builds, and type safety on every PR
- Branch protection via automated status checks — failing checks block merges
- AI-assisted PR review via CodeRabbit for automated code quality feedback
- Developer-facing SDK for integrating DevGuard checks into any JavaScript/TypeScript project
- Clean, documented API surface
- Shared TypeScript types for full IDE autocompletion support
- ESLint + Prettier enforced across the entire monorepo
- Shared TypeScript configuration via
packages/tsconfig - TurboRepo caching for fast, incremental builds
| Layer | Technology |
|---|---|
| Language | TypeScript (70.5%), JavaScript (29.5%) |
| Backend Framework | NestJS |
| Frontend Framework | React |
| Documentation | Next.js |
| Monorepo Tool | TurboRepo |
| CI/CD | GitHub Actions |
| Code Review | CodeRabbit (AI) |
| Linting | ESLint + Prettier |
| Git Hooks | Husky |
| Containerization | Docker |
| Package Manager | npm (Workspaces) |
Make sure you have the following installed:
git clone https://github.com/Mbiydzenyuy3/DevGuard.git
cd DevGuardThis installs dependencies for all apps and packages in the monorepo:
npm installnpm run devThis starts all apps simultaneously using TurboRepo:
- Backend API →
http://localhost:3000 - React Dashboard →
http://localhost:5173 - Docs Site →
http://localhost:3001
npm run buildnpm run lintdocker build -t devguard .
docker run -p 3000:3000 devguard📌 Screenshots will be added as the dashboard UI is completed. In the meantime, explore the repository structure and the CI pipeline in the Actions tab.
Sharing React components between the dashboard app and the packages/ui library in a TurboRepo setup required careful configuration of TypeScript path aliases and module resolution. Initially, the dashboard couldn’t resolve the shared component imports. The fix required explicitly declaring exports in the UI package’s package.json and updating the root tsconfig.json to include paths mappings for workspace packages.
Modeling the security scanning logic as an event-driven system in NestJS was more complex than a standard request-response API. Vulnerability scans needed to run asynchronously without blocking the HTTP response. This required implementing NestJS EventEmitter patterns and designing a dedicated scanning module that listens for trigger events and emits results to a results queue — decoupling scan initiation from result delivery.
During early development, running npm run build would randomly fail because TurboRepo tried to build packages/types and apps/backend in parallel, even though the backend depended on the types package. The fix was correctly defining dependsOn relationships in turbo.json, ensuring types were always built before the apps that consumed them. This taught me how critical explicit dependency declarations are in monorepo tooling.
Building a TurboRepo monorepo from scratch taught me how shared packages, caching pipelines, and workspace-aware builds work at the architectural level. Understanding module resolution across workspaces and TypeScript project references was a significant step up in complexity from single-project apps.
Integrating CodeRabbit for AI-assisted code review showed me how automated feedback loops can catch issues (naming conventions, missing error handling, inconsistent typing) that would otherwise only be caught in human code review. It changed how I think about code quality automation.
Shared types are the contract of a distributed system. Centralizing all TypeScript interfaces in packages/types eliminated entire categories of runtime bugs caused by frontend and backend having drifted type definitions. I now treat shared types as a first-class architectural concern, not an afterthought.
| Priority | Improvement |
|---|---|
| 🔴 High | Add authentication (JWT) to protect the dashboard and API endpoints |
| 🔴 High | Integrate OWASP dependency check into the CI pipeline |
| 🟡 Medium | Build real-time WebSocket notifications for scan result delivery |
| 🟡 Medium | Publish the sdk-js package to NPM with full documentation |
| 🟡 Medium | Add role-based access control (RBAC) for team environments |
| 🟢 Low | Add dark/light theme toggle to the React dashboard |
| 🟢 Low | Write unit and integration tests with Jest for all backend modules |
| 🟢 Low | Add Kubernetes deployment manifests for production-grade scaling |
Leila Mbiydzenyuy
Full-Stack Engineer | TypeScript · NestJS · React | Building scalable products for startups & remote teams
If this project helped you or you find it interesting, please consider giving it a ⭐ — it means a lot!