Pairs is a simple picture matching game that I've designed and built to play with my young children. Primarily an offline-first progressive web app designed to be played on a tablet, Pairs can be played on any device using the latest version of a modern browser (no, not you, Internet Explorer).
On this project, I used Redux and Three.js for the first time, continued experimenting with CSS3 Grid and further evaluated Preact.
- Preact
- Redux
- Service Workers, using Workbox
- CSS3 Grid
- CSS custom properties
- Sass with PostCSS
- Three.js
- Web Speech API
- HTML5 audio
- Lodash
- Webpack 3
- Node
- Yarn
- HTTP/2 CDN delivery
- Full offline support via Service Workers
- Inlined critical path CSS using Critical
- PageSpeed Insights score of 97/100 on mobile and 100/100 on desktop
- 100/100 Progressive Web App score on Lighthouse
yarn
Install dev dependencies
yarn serve
Serve Pairs on localhost webpack-dev-server with BrowserSync and Hot Module Reloading
yarn build
Build Pairs files for deployment
jest
Run tests
Pairs is built using a collection of third-party resources:
- https://fonts.google.com/specimen/Gloria+Hallelujah – Web font
- https://www.pexels.com/ – Royalty-free animal images
- https://freesound.org/ – Royalty-free sound effects