The application is developed from scratch (not using create-react-app tool that is deprecated by the React team).

For initial rendering content is generated on server side and then a client side script will be loaded to execute hydration and make web page interactive. This approach gives better initial load time and has better search engine optimization (SEO) compared to CSR.

The app can be easily changed to CSR via fetching advisor list from client side. To show loading state during asyncronous network reqests React provides a built-in React component Suspense.

• Sort advisors by number of reviews
• Filter advisors by status and language
• Nice look and feel
• Basic testing
• Use a node.js server to serve data to the client
• Provide basic documentation: how to run the app, what trade-offs were made and why
• Advanced tests: user interactions
• Write in typescript in strict mode
• Set up CI on Github Actions for PRs
• Use faker.js to generate test data

Here is how the app looks like:

Test coverage report:

The application requires Node v18.0.0, npm v9.6.1, Docker Desktop, MongoDB Compass.

Install it from GitHub using the following commands

• git clone [email protected]:allinne/advisor-list.git
• cd advisor-list
• npm i install all dependencies

• docker-compose up start Docker with MongoDB
• npm run dev:server launch the backend
• open MongoDB Compass - optional, to check wheather DB is filled or not
• npx tsnd src/dev/load-test-data.ts fill database with autogenerated data
• npm run dev:bundler launch the frontend - optional, for local development
• visit the app at http://0.0.0.0:8080

• npm run test unit and integration tests
• npm run cypress e2e tests

• npm run lint:js

• add Reset filtering and sorting button;
• add sorting by Advisor Name;
• use renderToPipeableStream instead of renderToString. Streaming method can stream content in chunks as it resolves on the server so that the user sees the page being progressively filled in before the client code loads.
• add infinity pagination using Intersection Observer API;
• split CSS to critical and non-critical and set up in the Webpack config style-loaderand css-loader.