How I built an interactive book with React, MDX, React Spring, Vite | "Domik Limited"

"Domik Ltd" is a short illustrated adventure story that has sounds, animations, and mini-games. The whole project including writing, editing and illustrations took nearly 3 months of wor. There are 6 chapters in total, but only 3 available in the beginning, and the rest have to be unlocked with a secret code that you can find in the text.

Read the story → https://domik.ltd/

If you like what I'm doing, you can support me in many ways, for example:
- Star the GitHub repo: https://github.com/molefrog/domik.ltd
- Subscribe to my channel
- Become my sponsor on GitHub
Thanks!

Resources:
Illustrations and character design by https://www.instagram.com/yulia_mrachnenko/
`useEvent` hook RFC https://github.com/reactjs/rfcs/blob/useevent/text/0000-useevent.md
The miniature router library that I maintain and use in this project https://github.com/molefrog/wouter
React hook for playing sound FX https://www.joshwcomeau.com/react/announcing-use-sound-react-hook/


00:00 - What this project is about?
05:32 - Working on the illustrations
07:55 - Folder structure, dependencies
08:56 - Tiny React routing library
10:36 - CSS-in-JS with Emotion
11:37 - Supporting multiple languages (I18n)
13:13 - Persisting current locale in the URL
16:31 - Loading chapters using dynamic import()
17:32 - Syncing page scroll and current router location together
23:17 - How `useSyncState` hook works
24:04 - Preloading images and sounds
26:40 - Implementing the chapter unlock screen, playing sounds
32:14 - `useCallback` vs `useEvent`
33:03 - Imperative effects with `useImperativeHandle` and ref forwarding
36:30 - Storing book content in MDX files
39:50 - Building a sequence of secret codes to unlock chapters
40:50 - Outro. Support the project!

Тэги:

#web_development #reactjs #css #vite #react_animations #illustrated #side-project #javascript #typescript

Скачать видео