Frontend Assignment - Anil

[anilguggilam]

Solution for frontend assignment

Demo: https://harbor-jx59y6lj0-anilguggilam.vercel.app/

Hosted on Vercel.

Local setup

• clone my fork (master branch)
• install dependencies
• run yarn dev (should start localhost at 3000 port http://localhost:3000/)

Tech choices

• NextJS (with ReactJS)
  • Supports most rendering patterns out of box (CSR, SSR, SSG). Can also control this at page level.
  • Supports SEO (has SEO friendly components)
  • The newly added App router (based on folder structure) is a bliss. The layouts, pages and routes definitions are very helpful in separation of concerns.
  • Can deploy all the package (frontend + backend) in one go and on one server. Saves lot of time and effort here.
• Typescript
  • Strong typing and type inferences
  • Strong tooling and integrations with most other tools
  • Improved readability with type annotations.
  • Problems with typescript are
    • It requires compilation
    • Sometimes too complicated to handle all cases
    • False sense of security after development cycle.
• SCSS
  • Shared variables and mixins
  • Nested syntax for private scopes
• Jest
  • Allows for unite testing with help of TestingLibrary or React.

Note:

1. It is possible to integrate tooling for E2E testing too but not currently implemented.
2. Have not used any sort of library for higher level of state management (possible options are Context /Redux(Singleton store) /Mobx (reactive programming)).

Atomic design pattern

The idea is the structure components in the following format: atoms > molecules > organisms > templates > pages.

Adhering to the atomic design pattern in ReactJS offers a primary benefit centered around the upkeep and expansion of the codebase. The approach involves fragmenting the UI into smaller, self-contained elements, resulting in heightened comprehensibility, testability, and logical assessment of distinct application segments. Consequently, this simplifies the process of updating, altering, or rectifying these components, thereby minimizing the likelihood of introducing errors or disrupting existing functionalities. Furthermore, employing a design system fosters a uniform and modular framework for constructing the UI, fostering predictability and scalability within the codebase. This, in turn, facilitates the seamless incorporation of new features and future expansion of the application.

Assumptions during development

• Used navigation elements (Link component) in left submenu in sidebar with active state being decided with help of current path.
• The components currently cater to the presented design requirement and there is still more scope to break them down further or to add more functionality.
• Took advantage of NextJS App router (folder based) and respective layouts to break the whole page into multiple sections like Nav (inside App/layout), sidebar (inside dashboard/layout) and finally Testnets component as child of dashboard layout (the nested URI path looks like /dashboard/testnets).
• There are dummy components for members and project key pages to experience the secondary level navigation.
• Modified some data to accommodate all kinds of design scenarios.
• The data is hosted in a different location (JSONBin) as Routes and Client components cannot be hosted as a single entity without loosing the advantages of SSR while using App router. (More about this issue here). This is a current limitation of NextJS
• Converted SVGs to react components when ever possible to take advantage of browser capability.

PS: There is still scope for improvement and any feedback is appreciated.