Online game where user bakes biscuits.
- Game walkthrough: https://www.loom.com/share/dada09e7eecc4ee0a462036c0fa270f1
- Storybook walkthrough: https://www.loom.com/share/3169823d135f4f1494421ccdaa3aed96
git clone [email protected]:IvanDimanov/biscuit-machine.git
cd biscuit-machine
yarn
yarn start
Running unit tests:
yarn test
Generate unit test coverage:
yarn test-coverage
Then you can open ./src/coverage/index.html.
Running E2E tests:
yarn test-e2e
Access Storybook components here.
- Create React App - scaffolding - https://reactjs.org
- Zustand - global state management - https://zustand.surge.sh/
- Joi - schema validation used for ENV VARs - https://www.npmjs.com/package/joi
- Storybook - interactive components - https://storybook.js.org
- TailwindCSS - for all that common CSS rules - https://tailwindcss.com
Here we describe what you can find and where.
/src
/App
-- Root folder where we add Internationalization, check ENV VARs,
-- implement Suspense fallback and base CSS rules
/components
-- All UI blocks that can be reused in multiple machine parts
-- It is generally desirable to keep balance between reusable components and "props dripping"
/globalState
-- Every piece of shared data has its own hook
-- Every hook exposes selectors for data and action manipulation
/Machine
-- Main instants where all game machine parts are combined and synched
/stories
-- Storybook placeholder hosting main project info
/utils
-- Common set of handy functions that manage random numbers, rescaling, etc.
During the development of this game a number of public images, color schemes, sounds, and animations were used. Here`s a list of their domains.
- https://www.vectorstock.com/royalty-free-vector
- https://gamedeveloperstudio.itch.io/conveyor-belt
- https://www.flaticon.com/search?word=oven
- https://game-icons.net
- https://pngimg.com
- https://codepen.io/jkantner/pen/PoPvoGK
- https://codepen.io/lukasoe/pen/BpMNjw
- https://codepen.io/vineethtrv/pen/xbyvmZ
- https://codepen.io/ivandimanov/pen/rNyeGMq?editors=1100
- https://codepen.io/ivandimanov/pen/wvJKQrV?editors=1100
- https://codepen.io/steylish/pen/YLxggB
- https://codepen.io/ivandimanov/pen/eYvZPMb?editors=1100
- https://codepen.io/Vany/pen/aHgqv
- https://askteammate.com/npm/react-thermometer-chart/
- https://zamarrowski.github.io/react-thermometer-component/