BuilderVue AI

BuilderVue AI is an AI-powered document intelligence and project management platform for the construction and building industry. I built the entire client-side application, the interfaces that sit on top of the platform’s APIs and AI capabilities.

As the frontend developer, my scope was the whole client application: authentication, role-based navigation, the document and project modules, the real-time AI chat, and every shared UI pattern that ties them together. I did not work on the backend services or the AI models themselves. My focus was designing and building polished, reliable interfaces that consume them.

What I Built

• Full authentication flow. Login, signup, email verification, account activation, and forgot/reset password, with JWT handling through HTTP interceptors and token refresh logic.
• Role-based routing and access control. Route guards for site admin, company admin, and standard user, so navigation and features adapt to the signed-in role.
• Project management module. Project listing, add/edit dialogs, and UI wired to the platform’s REST API through typed Angular services.
• Document management module. A document list with server-driven filtering, upload/add and edit flows, advanced filter dialogs, and models for document source, visibility, and language.
• AI chat interface. A conversational UI for querying documents, with streaming, real-time message updates over SignalR and markdown rendering of AI responses.
• AI agents page. Configuring and interacting with different assistant types.
• Company and people management. Company profiles, team member administration, invitations, and company detail dialogs.
• Subscriptions and billing UI. Plan selection, a pricing page, and payment profile management.
• Admin dashboard. Platform-level administration surfaces.
• Marketing surfaces. Landing page, about, pricing, contact-us, and a carousel.
• Shared UI layer. Reusable confirmation and success dialogs, a global loading-indicator service, centralized error and notification handling, and a base HTTP service pattern that every feature service extends.

Tech Stack

• Framework. Angular 21 with TypeScript and RxJS, using a standalone/module hybrid architecture.
• UI &amp. Styling. Angular Material and Bootstrap 5, with SCSS for custom theming.
• Real-time. SignalR and Socket.IO clients for live updates.
• Libraries. ngx-translate for internationalization, ngx-toastr for notifications, ngx-pagination, ng-select, and marked for markdown rendering.
• Tooling. Vitest for unit testing, with multi-environment build configs for dev, QA, and production.

Frontend Engineering Highlights

• Component architecture and reusability. A standalone/module hybrid where shared dialogs, tables, and filter components compose across every feature module instead of being rebuilt per screen.
• Service layer design. A base HTTP service pattern that all feature services extend, keeping API access typed, consistent, and easy to reason about.
• Reactive state with RxJS. Data, real-time updates, and UI state modelled as streams for predictable, composable behavior.
• Real-time UI. SignalR and Socket.IO clients pushing live updates into the interface, from streaming chat messages to notifications.
• Responsive design. Angular Material, Bootstrap 5, and SCSS theming delivering a consistent experience across marketing pages and the application itself.
• Polished UX on top of AI. Streaming responses, markdown rendering, toasts, and global loading states that make the AI features feel fast and trustworthy.

My Role

Frontend developer. I built the entire client-side application, the full authentication and access-control layer, every feature module, the real-time AI chat, and the shared component and service architecture underneath them. The backend services and the AI models were owned by others. My job was to turn those capabilities into a clean, responsive, production-ready interface.