At Shareup, we love to play Wordle. We have a channel in our company Discord dedicated to sharing our Wordle scores each day.
Although we love Wordle, we wish there was a way to look back at our previous games to see how well we did and compare them with others.
Your challenge will be to work on an existing PWA intended to list and display previous Wordle scores in an attractive and interesting way. The design should be inspired by Wordle’s native way of showing a person’s score without revealing the actual word or the guesses a person made. Wordle does this by creating something that looks like this:
Wordle 281 4/6
⬛⬛⬛⬛🟨
🟨⬛🟨⬛⬛
⬛⬛⬛🟨⬛
🟩🟩🟩🟩🟩
The above score was for the word “nymph”. The guesses were “train”, “ponds”, “blume”, and “nymph”.
The app needs to:
- Be written in TypeScript and use Preact, which is already setup for you here in this repo. 💪
- Periodically poll for the latest Wordle scores from the scores API. The API is described in more detail below.
- Notify the UI after updates in the worker: this feature is already started, but the UI doesn’t react yet.
- (If you have time) display the scores in the UI in a more pleasant way.
Please include a SOLUTION.md in which you explain the design you came up with and the next improvements you'd make if you had time.
We’ve put together a basic PWA using wmr and preact-iso that is currently rendering hard-coded test scores, includes a vanilla service worker for caching and offline support, and can be pre-built for fast hydration. See the tech stack links all the way at the bottom of this README for more info.
You can search for TODO to find some starting places for the above goals.
See the API.md file for details about the API.
# make sure either brew or node is installed, then
$ bin/installStart a local http server on port 8080:
$ bin/start$ bin/buildOne can test the built files using npx wmr serve which will only serve files out of dist, it won’t compile files from source.
$ bin/fmt
$ bin/lint- All the code is written in TypeScript and CSS modules
- We use dprint for code style formatting
- wmr is our dev server and bundler
- wmr’s types file is very useful to reference from time-to-time
- Preact and preact-iso renders HTML both server-side and client-side, provides routing in both cases, and hydrates the interactive parts client-side
- We are biased and only use functional components + hooks
- idb is the fantastic library we are using to promisify IndexedDB access
- CSS custom properties are in here
- A vanilla service worker handles the caching and offline access
- And Modules in Workers, which means the app doesn’t work in Firefox right now. We are open to bundling the worker as an IIFE sometime in the future, but not right now.