Instructions

[yanawaro]

Please take a glance of these materials as they are required for doing this test project

1. TurboRepo
2. TailwindCss

Instructions

1. Create a runnable next.js app with Turborepo. It should result in a monorepo structure.

2. Inside your TurboRepo project create a page and rewrite the Table components from this collection into it. Just focus on building the Table components only (red border) area. The styles should look the same by rewriting Antd to Tailwindcss. Including responsiveness. You could see the src for the collection here

4. Measure the Web Vitals performance with Chrome Lighthouse.

Scoring

1. React components breakdown

2. Typescript codestyle

3. Similarity of the design antd vs. tailwindcss

4. Web Vitals performance

[yanawaro]

Review

Score 7.5/10

Overview: Very well structured codebase. Seen effort in crafting code as a outcome. Take time learning TurboRepo and TailwindCss in a good manner. Great documentation that completes the work. Also seen in efficient in English.

1. React components breakdown:

Putting everything in to Page.tsx and not dividing components with the table for structuring. Wanted to see a good use of separation of concerns that could enable each component to query and handle data on it's own. Or to enable faster fetching patterns support by next,js.

https://github.com/thanawatpinya/jitta-wealth-testing/blob/c0478e577d329f2823ecdd9ddd9379632d7efbc6/apps/web/app/page.tsx#L34-L140

Mixing UI configuration with data. In real cases, APIs will provide formatting but if it also provides UI configurations that make the APIs not generic to serve across clients. The client should find a way to manage configurations better.

https://github.com/thanawatpinya/jitta-wealth-testing/blob/c0478e577d329f2823ecdd9ddd9379632d7efbc6/apps/web/app/constants/mock-data.ts#L119-L146

2. Typescript codestyle:

Following the lint from next.js and have no errors is enough for this point. Has some use of generators that's a good use.

3. Similarity of the design antd vs. tailwindcss

Very good has shown here. The design looks almost the same with zero custom Tailwind configuration. Responsiveness works just out of the box. Good sense of dividing the page layout to display closest as the original page.

Using background for displaying 'content' image breaks in logical sense. Also using image tags as much as possible could lead to better optimization with Next.js images.

4. Web Vitals performance:

Very good if considered as an desktop admin UI. Could optimize some more if in mobile usage.

Desktop

Mobile

[thanawatpinya]

Thank you for your test and feedback to me, I will improve code styling with tailwindcss, next.js, and typescript. Including the consider improved web performance better.