ongeuk/pairs

Offline-first PWA picture matching educational game for children

Pairs - Picture matching educational game for children

Play Pairs in your browser

Introduction

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.

Core technologies used

• 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

Features

• 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

Development dependencies

• Node
• Yarn
• rimraf

Workflow

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

Credits

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

pairs's Issues

How to run on my apache server?

Hi,

I'm trying to run it on my apache web server, is this possible? Can you help me please?

Thank you in advance.

Regards!