--- title: "#frontendarchitecture articles | Hashnode" description: "Explore 28 articles tagged #frontendarchitecture on Hashnode. Tutorials, guides, and how-tos from the community." url: "https://hashnode.com/tag/frontendarchitecture" --- Tag # #frontendarchitecture 28 posts · 0 followers [ThankGod Chibugwum Obobo](https://hashnode.com/@actocodes) · [Oct 26](https://hashnode.com/posts/from-prop-drilling-to-mcp/6adf3d8ef566171c9750e058) ### [From Prop Drilling to MCP: How the Model Context Protocol Is Changing Frontend Data Architecture](https://actocodes.hashnode.dev/from-prop-drilling-to-mcp?utm_source=hashnode&utm_medium=feed) Every React developer has felt the pain of prop drilling, a piece of data needed deep in the component tree gets threaded through five layers of components that don't care about it, just so the one th 8 min read · [actocodes.hashnode.dev](https://actocodes.hashnode.dev/from-prop-drilling-to-mcp?utm_source=hashnode&utm_medium=feed) [Suprabhat Kumar](https://hashnode.com/@suprabhat02) · [Oct 15](https://hashnode.com/posts/how-to-build-scalable-react-ui-without-overengineering/6ad09db4c1b3600694e1581c) ### [How to Build Scalable React UI Without Overengineering](https://suprabhatkumar.hashnode.dev/how-to-build-scalable-react-ui-without-overengineering?utm_source=hashnode&utm_medium=feed) Semantic HTML, behavior-led components, accessible states and performance budgets that keep React interfaces maintainable as they grow. 7 min read · [suprabhatkumar.hashnode.dev](https://suprabhatkumar.hashnode.dev/how-to-build-scalable-react-ui-without-overengineering?utm_source=hashnode&utm_medium=feed) [Amibuck](https://hashnode.com/@amibuckblog) · [Jun 7](https://hashnode.com/posts/seo-in-2026-why-technical-excellence-now-beats-keyword-stuffing/6a258a790d543e9c5d249855) ### [SEO in 2026: Why Technical Excellence Now Beats Keyword Stuffing](https://amibuck.hashnode.dev/seo-in-2026-why-technical-excellence-now-beats-keyword-stuffing?utm_source=hashnode&utm_medium=feed) Build robust search visibility. Map semantic indexing mechanics to RUM telemetry pipelines using schema.org and custom YAML manifests. 8 min read · [amibuck.hashnode.dev](https://amibuck.hashnode.dev/seo-in-2026-why-technical-excellence-now-beats-keyword-stuffing?utm_source=hashnode&utm_medium=feed) [Karpaga vinayagam Thangavelu](https://hashnode.com/@vinayagamlabs) · [May 26](https://hashnode.com/posts/designing-resilient-frontend-systems-for-failure-conditions/6a15b97bda253d50d4c38d0c) ### [Designing Resilient Frontend Systems for Failure Conditions](https://vinayagamlabs.hashnode.dev/designing-resilient-frontend-systems-for-failure-conditions?utm_source=hashnode&utm_medium=feed) Learn how modern frontend systems handle offline mode, retries, optimistic UI rollbacks, graceful degradation, error boundaries, and network resilience at scale. 8 min read · [vinayagamlabs.hashnode.dev](https://vinayagamlabs.hashnode.dev/designing-resilient-frontend-systems-for-failure-conditions?utm_source=hashnode&utm_medium=feed) [Shubham Kumar Singh](https://hashnode.com/@shubhamsinghbundela) · [May 20](https://hashnode.com/posts/building-a-shelflife-household-inventory-tracker-frontend/6a0de7a28b03460221978c5f) ### [Building a ShelfLife Household Inventory Tracker — Frontend](https://shubhamsinghbundela.hashnode.dev/building-a-shelflife-household-inventory-tracker-frontend?utm_source=hashnode&utm_medium=feed) Learn how I built the frontend architecture for ShelfLife — a collaborative household inventory tracker 66 min read · [shubhamsinghbundela.hashnode.dev](https://shubhamsinghbundela.hashnode.dev/building-a-shelflife-household-inventory-tracker-frontend?utm_source=hashnode&utm_medium=feed) [Nguyễn Việt Tùng](https://hashnode.com/@nvtung) · [Apr 19](https://hashnode.com/posts/brownfield-migration-the-strangler-fig-approach-to-bff-adoption/69e45f85ee84f66e94119a68) ### [Brownfield Migration: The Strangler Fig Approach to BFF Adoption](https://devpath-traveler.nguyenviettung.id.vn/brownfield-migration-the-strangler-fig-approach-to-bff-adoption?utm_source=hashnode&utm_medium=feed) Incrementally introducing a BFF in front of an existing monolith or REST API without a big-bang rewrite. 20 min read · [devpath-traveler.nguyenviettung.id.vn](https://devpath-traveler.nguyenviettung.id.vn/brownfield-migration-the-strangler-fig-approach-to-bff-adoption?utm_source=hashnode&utm_medium=feed) [Karpaga vinayagam Thangavelu](https://hashnode.com/@vinayagamlabs) · [Apr 17](https://hashnode.com/posts/designing-scalable-frontend-architecture/69e279f8fd22b8ad62634e54) ### [Designing Scalable Frontend Architecture: Beyond Components & Hooks](https://vinayagamlabs.hashnode.dev/designing-scalable-frontend-architecture?utm_source=hashnode&utm_medium=feed) Why most React apps fail at scale—and how to design frontend systems that actually survive growth 9 min read · [vinayagamlabs.hashnode.dev](https://vinayagamlabs.hashnode.dev/designing-scalable-frontend-architecture?utm_source=hashnode&utm_medium=feed) [Nguyễn Việt Tùng](https://hashnode.com/@nvtung) · [Apr 12](https://hashnode.com/posts/the-vue-3-api-layer-of-bff-composables-error-boundaries-type-safety/69db1c44aadf1107e28b9570) ### [The Vue 3 API Layer of BFF: Composables, Error Boundaries & Type Safety](https://devpath-traveler.nguyenviettung.id.vn/the-vue-3-api-layer-of-bff-composables-error-boundaries-type-safety?utm_source=hashnode&utm_medium=feed) Building a clean, typed client-BFF contract in Vue 3. useApi composables, error handling strategies, and OpenAPI codegen. 18 min read · [devpath-traveler.nguyenviettung.id.vn](https://devpath-traveler.nguyenviettung.id.vn/the-vue-3-api-layer-of-bff-composables-error-boundaries-type-safety?utm_source=hashnode&utm_medium=feed) [Nguyễn Việt Tùng](https://hashnode.com/@nvtung) · [Apr 11](https://hashnode.com/posts/bff-vs-api-gateway-vs-graphql-picking-the-right-abstraction/69da09dbc8e5007ddb7a2003) ### [BFF vs API Gateway vs GraphQL: Picking the Right Abstraction](https://devpath-traveler.nguyenviettung.id.vn/bff-vs-api-gateway-vs-graphql-picking-the-right-abstraction?utm_source=hashnode&utm_medium=feed) Comparative analysis with real trade-offs. Where each pattern wins, where it falls over, and how they can coexist. 14 min read · [devpath-traveler.nguyenviettung.id.vn](https://devpath-traveler.nguyenviettung.id.vn/bff-vs-api-gateway-vs-graphql-picking-the-right-abstraction?utm_source=hashnode&utm_medium=feed) [1](https://hashnode.com/posts/bff-vs-api-gateway-vs-graphql-picking-the-right-abstraction/69da09dbc8e5007ddb7a2003) [Leela Krishna Mohan](https://hashnode.com/@krishnaleela) · [Apr 10](https://hashnode.com/posts/micro-frontend-architecture-part-2-implementation-guide-and-production-patterns/69d92ca2e85536c6adeb0e28) ### [Micro Frontend Architecture Part 2: Implementation Guide and Production Patterns](https://krishna-devlog.hashnode.dev/micro-frontend-architecture-part-2-implementation-guide-and-production-patterns?utm_source=hashnode&utm_medium=feed) Complete implementation guide for Micro Frontends with Module Federation. Production-ready code examples for state management, routing, performance. 15 min read · [krishna-devlog.hashnode.dev](https://krishna-devlog.hashnode.dev/micro-frontend-architecture-part-2-implementation-guide-and-production-patterns?utm_source=hashnode&utm_medium=feed)