## Context A high-scale document management system built with React 19 and .NET 10, featuring Feature-Sliced Design and SharePoint integration. #### My Role SharePoint Online Engineer #### Dates July 2025 - June 2026 #### Tech Stack - **Frontend**: React 19, TypeScript 5.9, Vite 7, TanStack Query 5.9, TanStack Router, Material UI 7, Tailwind CSS. - **Backend**: .NET 10.0, ASP.NET Core Web API, PnP.Core, System.Text.Json, Swashbuckle. - **Infrastructure**: SharePoint Online, Azure Active Directory. ## System Overview DocsHub is an enterprise-grade document management system designed to **streamline search, upload, and organization of complex project documentation**. Built on a modern **Client-Server architecture**, it leverages a **React 19** Single Page Application (SPA) frontend and a **.NET 10** Facade Web API backend to provide a seamless user experience. The system integrates deeply with **SharePoint** and external **Business Contexts APIs**, serving as a unified interface for disparate data sources. ![[DocsHub - Engineering Scalable Document Intelligence.png]] The solution addresses critical business needs for scalable document handling by implementing a **Feature-Sliced Design** on the frontend for modularity and a **Layered Architecture** with **Facade Patterns** on the backend. This ensures robust separation of concerns, maintainability, and high performance. Security is enforced via **Azure Active Directory** (MSAL + Microsoft Identity Web), ensuring strict access control across sensitive investor and CLC context groups. > [!SUCCESS] Key Achievements > - **Modular Frontend Architecture**: Implemented **Feature-Sliced Design** to decouple business domains (Documents, Contexts, Users), significantly improving codebase scalability and team velocity. > - **Unified API Facade**: Designed a **.NET 10 Facade Web API** that aggregates multiple external data sources (SharePoint, Business Contexts), reducing client-side complexity and network round-trips. > - **Complex Upload Strategy**: Engineered a flexible upload system using the **Strategy Pattern** to dynamically handle different validation and processing rules for `Compliance` and `Investors` context groups. > - **Optimized State Management**: Deployed **TanStack Query** for efficient server-state caching and synchronization, combined with React Context and URL-based state for a responsive UI. > - **Secure Integration**: Implemented end-to-end authentication flows using **Azure AD**, securing both the SPA (MSAL React) and the API (JWT Bearer Auth). ## Architecture The **DocsHub “Enterprise-Grade Document Intelligence”** architecture as a **scalable, mission-critical solution** built in clear layers: - **Client layer:** a modern **React 19** single-page app with a modular, feature-based UI design. - **Security:** **Azure Active Directory + JWT** authentication for a zero-trust approach. - **Server layer:** a high-efficiency **.NET 10** backend acting as a **SharePoint facade/API gateway**, simplifying complex integrations. - **External integrations:** connects and orchestrates **SharePoint and other business APIs** through a unified interface. ![[DocsHub - Scable Architecture.png]]