I had a list of new libraries I wanted to use for a while now, which were fun to experiment with in this challenge! I took the liberty to write some of my findings / conclusions down, so it explains some things from the codebase.
Tested on node v14.9.0, npm 6.14.7 and yarn 1.22.5
With npm
npm i && npm run run:install && npm start
With yarn (faster)
yarn && yarn run:install && yarn start
Date | Time |
---|---|
22 oct | 3h 57m |
24 oct | 2h 18m |
25 oct | 3h 59m |
Total | 10h 14m |
If you're a beginner to React (and it's ecosystem) I can not unrecommend redux enough, since it adds this complexity, jargon and layers on top of something as simple as "Update a global object, and re-render the components that depend on that data"
. See the state
sections for more info on how wonderful state-management in React can really be :).
There's also a backend, under lootshop-backend
, but this is just a quick-and-dirty backend written with NestJS and TS. I just used it for random data and actually using over-the-wire network requests via react-query
- Styling
- I used styled-components for styling, but
when having to override something via a
style(s)
prop is really inconvenient and thus I recommend either using another CSS-in-JS library like linaria combined with polished. With those libs it's a lot easier to mix styles, while keeping the pros of CSS-in-JS. mergeStyles is a good read for why CSS-in-JS is nice (coming from css/scss).
- I used styled-components for styling, but
when having to override something via a
- Data fetching / state management
- This one I was very excited with, this challenge uses a hybrid of react-query and zustand, which really doesn't work that well when using derived values (like with a total and when calculating restrictions). I recommend using zustand for both client- and server state management, this way you don't have to communicate in-between fetched entities from react-query and to zustand. Another good alternative for zustand is MST (mobx-state-tree), but that has a higher learning curve.
Be careful not to get javascript fatigue while reading this :).
-
Good sources:
-
Animations:
-
Util wrappers around web APIs & good hooks:
- https://github.com/jaredpalmer/the-platform
- https://github.com/alewin/useWorker
- https://github.com/GoogleChromeLabs/react-adaptive-hooks
- https://www.npmjs.com/package/use-clippy
- https://www.npmjs.com/package/react-window-communication-hook
- (not too useful tbh, but still can be good) https://www.npmjs.com/package/@rehooks/local-storage
- https://www.npmjs.com/package/@rehooks/online-status
- https://blog.bitsrc.io/11-useful-custom-react-hooks-for-your-next-app-c66307cf0f0c
- https://bundlephobia.com/
-
Form:
-
Documentation:
-
Code splitting:
-
DX tooling:
-
State:
-
Network fetching / server state:
-
Styling:
-
Testing:
-
Structure:
- SIMPLE architecture if possible
-
Linting / formatting:
-
Optimization:
-
Routing: