I'm a Full stack developer with 3 years experience who loves turning ideas into reality and crafting responsive, accessi

Somu Eega • Peerlist

<h3>About the Project</h3>This case study details the development of a Compliance Reporting Platform, focusing on the challenges and solutions related to rendering architecture and execution architecture. The primary goal was to create customer-facing compliance reports that visually matched the product's branding and were paginated, with preview capabilities. The backend was primarily built using Go.

<h3>Key Features and Decisions</h3><ul><li>Frontend Rendering: The decision was made to build the report within the existing Next.js frontend to leverage its design system, including typography, color tokens, tables, badges, and spacing conventions. This avoided duplicating presentation logic and ensured consistency with the product's visual language.</li><li>SSR for Rendering: Server-Side Rendering (SSR) was employed using a special route and a short-lived token. This allowed a headless browser (Chromium) to receive substantially rendered HTML, optimizing the print pipeline process.</li><li>Report Variants: The platform supported five distinct report projections (DEFAULT, OWNER_WISE, INDIVIDUAL_OWNER_WISE, CLOUD_WISE, INDIVIDUAL_CLOUD_WISE), all sharing a common document shell and data structure but adapting the presentation of sections based on the selected type.</li><li>Dual Render Modes: The same HTML structure was styled differently for browser previews (scrollable, anchor navigation) and for printing to PDF. This was achieved using CSS, including @media print and paged-media CSS properties, to control layout, page breaks, headers, and footers.</li><li>Asynchronous Generation: Report generation was designed as an asynchronous job, allowing users to configure reports and return to the product while the job processed. This provided a non-blocking user experience.</li></ul>

<h3>Outcome and Learnings</h3>While the document architecture successfully addressed the presentation and maintainability requirements, the deployment model faced challenges with resource management under heavy load. The chromedp/Chromium process significantly increased memory pressure, leading to rollbacks of automated PDF generation. The key takeaway is the distinction between rendering architecture and execution architecture, emphasizing the need for explicit capacity management for resource-intensive workloads like browser rendering.

<h3>Future Improvements</h3>Recommendations for future iterations include:<ul><li>Scoping rendering credentials with least-privilege tokens.</li><li>Creating a single, unified document tree for all report elements.</li><li>Bounding the renderer in dedicated workers with strict concurrency and resource controls.</li><li>Benchmarking alternative renderers like Typst before committing to a rewrite.</li></ul>

Compliance Reporting Platform

<h3>Eega Somasekhara Reddy (Somu) · Frontend Engineer</h3>This is the portfolio of Eega Somasekhara Reddy, also known as Somu. Somu is a frontend engineer specializing in React, Next.js, and TypeScript. The portfolio highlights expertise in design systems and web performance.Key areas of focus include:<ul><li>Architecture &amp; Scalability: Demonstrating an understanding of building robust and scalable web applications.</li><li>Technical Skills: Proficient in frontend technologies such as React, Next.js, and TypeScript.</li><li>Design Systems: Experience in creating and maintaining consistent design systems.</li><li>Web Performance: Commitment to optimizing website speed and efficiency.</li></ul>The portfolio showcases work, experience, about information, photography, and a playground section. It emphasizes a clean, performant, and well-architected approach to frontend development.

Portfolio

Website: https://thematbook.com/ • Built a scalable e-commerce app using React and TypeScript for product showcasing, estimation, and order tracking. Optimized performance with efficient components and design patterns • Developed intuitive user interfaces that seamlessly showcase the company’s diverse range of products. • Leveraged AWS S3 buckets for file storage and CloudFront CDN to optimize image loading and caching. • Employed OAuth for secure authentication, Redux for efficient state management, and implemented comprehensive error handling with TypeScript for enhanced code readability, maintainability, and a seamless user experience.