react-recoil-klondike is an implementation of the classic Klondike solitaire game using React + Recoil.

It's a sufficiently complex but still self-contained example of a React application that uses Recoil for state management. See Architectural decisions for more details.

The game is available at https://react-recoil-klondike.netlify.app/.

In the project directory, you can run:

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

Some of the goals/conclusions I've had while working on this project:

Other than React and Recoil, the game uses only clsx for juggling CSS class names, and @material-design-icons/svg for the HUD's icons.

Other than the icons on the HUD's buttons, the game is implemented using only CSS and HTML. No images are used. See src/styles for more details.

Still, there are some visual goodies, including a backface pattern for the cards, nice fonts, subtle shadows and gradients, and a playful animation when the game is won.

The pattern is © Lea Verou.
Fonts are © Google Fonts.

HTML5 drag-and-drop (and transitively, react-dnd) was deemed both needlessly complex and performance-wise suboptimal for this use case. Instead, the game uses a custom drag-and-drop implementation based on pointer events and CSS transforms. See src/hooks/drag-and-drop.ts for more details.

For the sake of performance, the game avoids react re-renders during drag-and-drop operations. Details of the in-flight drag are communicated via custom events, data attributes and React refs.

Our custom DnD logic allows us to implement some nice features, such as the ability to drop a card onto a stack even if the pointer is not over the stack's bounding box. This allows for a more natural drag-and-drop experience.

While the game relies on the browser's layout engine to position the stacks using CSS grid, the cards are not rendered inside the stacks. Instead, they are positioned explicitly using a custom algorithm. See src/hooks/cards.ts for more details.

This is done to avoid detaching and re-attaching the cards to the DOM during drag-and-drop operations. This would cause the browser to re-render both stacks and cards, which would lead to janky animations.

The game supports undo/redo operations via Recoil's useRecoilTransactionObserver hook. See src/hooks/history.ts and src/util/history.ts for more details.

MIT