Frontend Architecture Pattern
Status: Implemented
Assignee:
Problem
PermaplanT needs to be designed with a documented, consistent and maintainable architecture pattern.
Constraints
The architecture pattern should be
- easy to understand and follow
- be easy to test
- be easy to scale
- be suitable for a large, highly-interactive application
- promote code reuse
- be well-documented and widely used in the React community
Considered Alternatives
Decision
Bulletproof React will be used as frontend architecture and guideline for PermaplanT. Choices or derivations of this guidelines will be documented in our architecture.
Rationale
Bulletproof React is a set of best practices and conventions that promote code reuse and make it easy to reason about the structure of the application. It's simple, easy to understand, and easy to test. This makes it a good choice for a large, complex application like PermaplanT. Additionally, it is well-documented and widely used in the React community, which means that there is a lot of resources and support available for it.
Architecture Benefits in Practice
Moreover, this structure provides several benefits:
- Scalability: New features can be added without affecting existing code
- Maintainability: Related code is co-located, making it easier to understand and modify
- Testability: Each feature can be tested in isolation
- Reusability: Shared components and hooks prevent code duplication
- Team Collaboration: Developers can work on different features independently
Implications
- Developers must follow the established folder structure when adding new features
- Shared components should be designed for reusability across multiple features
- Reused business or technical logic should be extracted into custom hooks or utilities
- Feature-specific code should remain within feature boundaries
Related Decisions
Notes
- "bulletproof react" architecture pattern is developed by the team at Level Up Tutorials. It is not an official pattern by React.