Harbor Frontend Take Home Assignment

[mohitakahalo]

Take home frontend assignment solution

App demo: https://frontend-take-home-mohit.vercel.app/dashboard

The app is deployed using Vercel. Feel free to play around with it. In order to run the app locally on your machine, just clone the git repo and run yarn dev in the git repo root, your app will start running on http://localhost:3000

Tech Stack Choice:

This application is built on NextJS + Typescript stack. There are multiple reasons for choosing this stack:

1. NextJS allows us to host the entire application on one server. We don’t need to host 2 different servers separately for our backend api server (NodeJS) and frontend web server (ReactJS).
2. We can achieve any rendering pattern - SSR / CSR / SSG for our app pages. We can customise how we want to render each and every single page of our application as per our needs.
3. Due to the SSR, we can move most of our Data fetching and JS logic to the backend server, thereby allowing less JS resources to be downloaded over the network.
4. Due to the above point, this results in faster initial load time, faster page rendering and other page load metrics (TTI, FCP, CSL) which eventually leads to better user experience and SEO discoverability.
5. NextJS has lots of built in support for SEO optimizations for Images, Fonts, Content, Meta-Tags etc.

Component Architecture:

This app is structured using the atomic component architecture as shown below:

The philosophy of the atomic architecture is that your app (pages in case of NextJS) is divided into sub components called organisms (big stateful components with data), which are built on top of multiple molecules (smaller building blocks with some logic integrated) which can further comprise of multiple atoms (the smallest level dumb components).

This architecture allows us to build highly composable and loosely coupled UI components. For example : <ButtonWithIcon/> is a loosely couple molecule component which is made up of <Button/> atom and is reused almost in all the cases with support for left icon, button text, and right icon for the same component.

Have used SCSS modules for writing CSS, which enables us to separate out the CSS conflicts by applying private scope on the component classes.

Testing:

1. Unit Tests- I have integrated Jest with React Testing Library for unit test cases
2. e2e Tests - I have integrated Cypress for e2e test cases
   For now I have added couple of basic sample test cases for both in the interest of time and scope for this assignment. We can build further on top of these integrations for a full fledged testing suite.

• Run unit tests using Jest and React Testing Library:
  yarn test
• Run e2e tests using cypress:
  npm run cypress

Notes:

• Use of redux / context / state management library is not required in this case, since the data is served from the backend and is not required to maintain the context inside the UI for any state manupulations.
• API data is modified with some values changed to make the UI look consistent.
• We can further do some more code refactoring to make our components much smaller and readable.

Feedback is much appreciated !

[priyeshvpotdar]

@mohitakahalo : Couple of questions on the submitted work

1. E2E tests are written only for checking the text and not for sorting / filtering? Is this because of time constraint or otherwise?
2. Sorting feature doesn't work properly on the firefox. I am using Linux OS Firefox 110.0.1 (64-bit) . If reproducible at your end, can you fix this bug?