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.
-
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.