0xFable/packages/webapp/README.md

0xFable Web App

See the Makefile for the available command to build, check code standards, etc...

The frontend is tested as part of the end-to-end tests in the e2e package.

Dependencies

• tailwindcss — for styling, with peer dependencies autoprefixer and postcss
• daisyui — component library for tailwindcss
• jotai-devtools with peer dependency @emotion/react (styling for the UI devtool)

React Debugging

The why-did-you-render is installed via next.config.mjs and scripts/whyDidYouRender.js. I couldn't get its advertised features (detection of unnecessary re-renders) to work, but it enables tracking all renders of a component by writing something like this:

// @ts-ignore
MyComponent.whyDidYouRender = {
  logOnDifferentValues: true,
}

It can also be customized to learn about higher-level hooks.

For improving the dev/debug experience with Jotai, you can use:

• Jotai Devtools — enables debug React hooks that display an UI to track atom values.
• Jotai SWC Extensions — enable adding debug labels to atoms (show up in React devtools), and preserving atom values when using React refresh (hot reloading).