Document and Quality Management System

About the Project

Document and Quality Management System (DQMS) is a comprehensive enterprise platform developed for businesses to securely manage their corporate document workflows, quality standards, retention periods, and external sources digitally. Thanks to its multi-layered structure, it gathers the modules required by different departments into a single centralized panel.

The Problem

Since the application featured a multi-module enterprise architecture, attempting to render all components and sub-pages independently and individually caused severe performance bottlenecks, unnecessary re-render cycles, and high memory consumption on the client side.

What I Did

• Categorized all scattered sub-modules under logical main module wrappers to optimize the architecture.
• Built a centralized parent component (DocumentParent) on the React side to ensure route-based and controlled loading of sub-module pages.
• Designed high-performance, query-optimized data retrieval services tailored to these main modules using ASP.NET Core 8.0 and Dapper on the backend.

Technical Notes

An example structure implementing a centralized parent component (DocumentParent) optimized for route changes (location.pathname) without performance degradation:

const DocumentParent = () => {
    const [currentStep, setCurrentStep] = useState(1);
    const location = useLocation();

    const steps = [
        { id: 1, path: "/dokuman/listesi", component: <DocumentList/> },
        { id: 2, path: "/dokuman/arsiv-suresi", component: <ArchiveDuration/> },
        { id: 3, path: "/dokuman/dis-kaynakli", component: <ExternalDocuments/> },
        { id: 4, path: "/dokuman/olustur", component: <CreateDocuments/> },
        { id: 5, path: "/dokuman/prosedur", component: <ProcedurDoc/> },
        { id: 6, path: "/dokuman/dokumanlarim", component: <MyDocuments/> },
    ];

    useEffect(() => {
        const matchedStep = steps.find((step) => step.path === location.pathname);
        setCurrentStep(matchedStep ? matchedStep.id : 1);
    }, [location.pathname]);

    const renderCurrentStepComponent = () => {
        const matchedStep = steps.find((step) => step.id === currentStep);
        return matchedStep ? matchedStep.component : <div>Page not found!</div>;
    };

    return (
        <div className="document-parent">
            <Sidebar/>
            <div className="content-container" data-aos="fade-up">
                <div className="step-content">{renderCurrentStepComponent()}</div>
            </div>
        </div>
    );
};

export default DocumentParent;
Result
Client-side performance losses were resolved through modular categorization and an optimized, route-based rendering strategy. Page transitions became significantly faster, delivering a much smoother and more stable user experience for enterprise operators.