Architectural Requirements
Project overview
Hisa/Chaka is a stock trading service whose customer-facing web application is looking to be rebuilt.
Hisa/Chaka currently has a small team of 1 frontend engineer, but the team is expected to increase in size. It’s clear that the current customer-facing web app used for the MVP will not scale to the needs of a larger team.
The goal of this document is to design the architecture of Hisa/Chaka’s customer-facing web application. This includes gathering requirements, designing an architecture that meets those requirements, and then implementation.
Container Diagram
Architectural Requirements
This is a living document with the architectural requirements of HisaChaka’s new customer-facing web application.
Business Goals
| Stakeholder | Goal | Context |
|---|---|---|
| Eke (CEO) | Increase number of customers by 100% in one year.Release app in 6 months | Company needs to attract new customers with new app. |
| Ridwan (CTO) | Deliver new product on time as promised. | The rebuilt product should be shipped on time without compromising quality. |
| Anthony (Engineering manager) | Improve team velocity , Ship code to production confidently without fear of breaking features | This should help engineers collaborate better , make PRs and releases without breaking already built features |
| Zoro (Customer) | Trade stocks on app without any issues | Zoro wants to be able to trade , earn and get rich while also experiencing a seamless user experience. |
Constraints
| Constraint | Context | Limitations |
|---|---|---|
| [Technical] Must be deployed on Cloudflare | Free, edge deployment, other tools that may come in handy. | Limited by Cloudflare’s free tier; we maxed out number of people who has cloudflare access , this may affect other engineers when we grow more as they may need to reach out to people with Cloudflare access. |
| [Technical] Should be client side rendered. | Easier to build and maintain, better client experience , easier code deployments , auth is not stressful. | may not be SEO friendly |
| [Technical] Must be responsive and fully functional on mobile devices | No brainer. | … |
| [Technical] Should be built using react | The frontend engineers are more adept with react ,it has an easy learning curve , large community support backed by F and a larger talent pool. | … |
| [Technical] Must use React Query for data fetching and state management | React Query will handle data sync, caching, server (and probably client) state for a more efficient and performant frontend. | Needs integration into the codebase and familiarity with React Query’s API. |
| [Technical] Should use MUI and Tailwind CSS to build the design system | MUI will provide a consistent UI component library, while Tailwind CSS will offer classes for layout and customization. | Engineers who are not really familiar with the APIs may have to spend some time studing the docs . |
Quality Attributes
| Attribute | Scenario | Priority |
|---|---|---|
| Performance | App should load as fast as possible. | High |
| Scalability | The codebase should be modularized to allow an increasing number of frontend engineers to work in parallel. | High |
| Accessibility | The app should comply with WCAG 2.2 accessibility standards. | Low |
| Performance | No lag should be experienced by user. | High |
| Deployability | Code changes should be deployed to production within 10 minutes of starting a release. | High |
| Testable | The codebase must have end-to-end tests to ensure feature correctness and prevent regressions. | Low |
Functional Requirements
Other Influencers
- Currently, the frontend team is a single team of 1 engineer, but this may change in the future.
- Every frontend engineer on the team has experience working with React and Next.js, and are also comfortable working with Vue.js.
- Not everyone may have experience working with react query.
- Not everyone may have experience working with MUI library.
- End to end test should be done using tools like Cypress or Playwright to test user workflows. issue is not everyone on the team is adept at writing tests
ADR : Using React for Hisa/Chaka Customer Web Application
Status
Context
As we prepare to begin development of Hisa/Chaka new customer web application, one key decision that we need to make is which UI framework we’re going to use and what infrastructure we need to deploy it.
The objective is to create a robust, scalable, and performant web application that can meet our customers’ needs efficiently.
Decision
Decisions… Decisions… .
Positive Consequences
😃😃😃
Negative Consequences
🙁🙁🙁