Hi,
Here are some highlights of this project:
1. Performance: using React.memo to avoid unnecessary renders, SSG pre-render pages.
2. Accessibility: semantic HTML tag, support tab and enter key's interaction.
3. Security: Synk website scan score is A+. HTTPS, 8 security headers including a basic CSP.
4. Connected components search algorithm: implemented with React.useReducer and a state machine.
5. Browser compatibility: tested on the latest Chrome, Firefox and Safari. The newest feature used is aspect-ratio. It is well supported across the latest major browsers. I added a fallback to display rectangle cells in older browsers. CSS padding tricks or JS can do the job if we need to display squares in older browsers.
6. SEO: meta, title.
7. Responsibility: Available on mobile and big screen.
8. Test: TS for static type check, Storybook for UI development and documentation, Jest unit test, React Testing Library integration test, Playwright e2e test.
9. Toolchain: Native ES Modules, NVM, Husky, PNPM. I wrote all lines of code and configuration in this repo, including the husky shell script.
10. Deployment: Deploy to Vercel. Automatically deploy when pushed to the production branch.
11. Code readability: the components folder structure follows the structure of the DOM tree, the pages folder structure follows the structure of the URL. Using enum to represent states of a square.
Thanks and all the best,
Nathan Wang
auvmacintosh1@gmail.com