Frontend Fundamentals 16: System Design Intensive

Previous post in the series has been rather cluttered and maybe I should dedicate a single post to all things related to this topic.

1. Design JIRA Sprint Board

Requirements

• create, edit, delete tasks
• update task progress
• view dashboard

Architecture

• VIEW: Editor + Dashboard
• CONTROLLER: Cache + Business Logic

Data Model / Interface

1. Edit task UI (form for filling description etc, button for updating task progress)

• input: { description?: string; daysRequired?: number; ... }
• output: { status?: "SUCCESS" | "FAIL" | "PENDING" }

1. Dashboard Summary

• input: filters = { user: string; startDate: string; endDate: string }
• output: columns = { daysRequired: number; title: string ; ... }

Optimisation

Error Handling / UIUX

1. Cache for offline view.
2. Hooks to display offline banner if user internet is disconnected.
3. Since it's not urgent like a stocks trading app, update on refresh page is good enough.
4. To handle concurrent updates (rare but possible), Keep a history log of updates (i.e each request needs to be sent with the timestamp), or do a check with BE data to see if user's previousData and nextData is correct, if somehow the previousData is outdated because someone else already changed it, throw user a popup error to say it has been modified and needs change.

Accessibility

1. No need for mobile-view since we won't expect people to update their tasks on their phone... coding tasks done on PC so it should be easier to update on PC. This simplifies code maintainability, since no need for media-queries. Perhaps if screen size detected is in the range of tablets to phones, then show a blank page saying it isn't supported.
2. Filter support. Different stakeholders need to see different data, and having this to allow them to see only relevant columns is important.

Security

1. Validate user credentials on login, and send them via each request. This is so that outsiders cannot access the data privy to the company using this dashboard.

🚨 Review (source):

1. Consider images
2. What network protocol is best?

Consider studying from FrontendLead: https://frontendlead.com/