Alternate frontend for Wordnet. Built with NextJS and node-wordnet as backend. Has colorways insipired by Firefox made possible by radix-ui/colors. Deployed on vercel here.

• Built with NextJS.

• NextJS API Routes to build a Wordnet API using node-wordnet.

• radix-ui/colors for theme colors.

• radix-ui/primitives for UI components - radix-ui/react-radio-group, @radix-ui/react-switch, @radix-ui/react-tooltip.

• Client side data fetching with SWR.

• Design on Figma.

• Using a modified useLocalStroage with reducer from How to use Context, useReducer and LocalStorage in Next JS. Published as gist.

• When to useLayoutEffect Instead of useEffect (example).

• white-space on MDN.

• color-scheme on MDN.

• Data URLs on MDN.

• encodeURIComponent() on MDN.

• SVG, Favicons, and All the Fun Things We Can Do With Them on CSS-Tricks.

• Wordnet Documentation.

• Debounce in JavaScript — Improve Your Application’s Performance.

• Difference between automatic sizing of flex-items and grid-item sizing.

• matchMedia removeListener doesn't work? on StackOverflow.

• Make React useEffect hook not run on initial render on StackOverflow.

• How to detect touch device in 2019? on StackOverflow.

• Internal API fetch with getServerSideProps? (Next.js) on StackOverflow.

• Perform debounce in React.js on StackOverflow.

• Dynamic svg favicon? on StackOverflow.

• Progressive Web App "does not work offline" error on StackOverflow.

• My notes on Wordnet and node-wordnet on Notion.

• I started off with styled-components for styling as I wanted dynamic colors but as of now swc does not work with styled-components. So I had to switch to built in styled-jsx.

• Its nice to have something like styled-jsx built in into NextJS but you can have only one style jsx block per component. So it really forces you to write components. Not to mention styled-js is buggy af sometimes breaks on even adding comments.

• Don't need something like styled-components for dynamic styles. Could use CSS variables for the same effect with CSS Modules.

• Solution for dynamic svg favicon was in front of me the whole time - Data URLs.

Princeton University "About WordNet." WordNet. Princeton University. 2010.