Welcome to Super Spelling Bee! To see the live version of the app, go to superspellingbee.com.
This is an enhanced version of the New York Times' Spelling Bee game, combining the functionality of the game itself with NYT’s Spelling Bee Buddy hint page and Spelling Bee archive/info sites like SBSolver, plus additional custom functionality.
The purpose of this project is to create a version of Spelling Bee with live-updating hints and powerful configuration options.
It was built with Postgres and Ruby on Rails on the back end and React + Redux on the front end.
The puzzle has all the expected functionality of existing spelling bee games, including scoring and ranking, a found words list, highlighted pangrams and perfect pangrams, and controls that can be used by either keyboard or touch/click.
Each puzzle has a Hints section with different hint panels that (optionally) update as new words are found. Each hint panel has detailed configuration options to customize how the hints are presented. The different hint panel types are as follows:
- Letter Hints: Lists the different starting (or ending) letter combinations for words in the puzzle. The data shown for each letter combination can be further customized to show the number of total, found, and/or remaining words for each letter combination, optionally divided by word length.
- Search Hints: Similar to letter hints, but allows you to search for a specific letter combination among puzzle words.
- Obscurity Hints: Shows how "obscure" each word in the puzzle is, measured by how often the word shows up in the combined text of all books in Google Books. Obscurity data is pulled from the Datamuse API.
- Definition Hints: Shows definition hints for each word. Currently, definition hints use the literal dictionary definitions, although the functionality for generating hint definitions using OpenAI's API is nearly complete. See issue #113.
Status information includes data about the user's progress on the current puzzle, like the number of found words in the puzzle, the current score, and the current rank. Status data tracked includes:
- Found and total words
- Found and total points
- Completion percentage of the puzzle
- Rank information
- Current rank name, point threshold, and percentage threshold
- Next rank name, point threshold, and percentage threshold
- Points until the next rank
Allows users to reveal specific answers for the puzzle instead of guessing them. Spoiled words are tracked separately from found words and don't contribute to the user's score or rank.
Shows sortable word lists for the puzzle, including:
- Known Words: Shows words that have been correctly guessed by the user ("found words") and words the user has spoiled. Also highlights pangrams and perfect pangrams.
- Wrong Guesses: Tracks guesses the user has made that were incorrect. Allows you to check if you've already made a particular guess if you're not sure.
- Excluded Words: Each puzzle's answers do not include every dictionary word that uses only the puzzle's letters. The excluded words list shows the dictionary words that were not included in the puzzle's answers.
- Answers: Lists the puzzle answers. Answers that aren't yet known to the user are not shown in their entirety, with only their first letter and length being shown by default. Unknown answers can be clicked on to spoil them.
Each puzzle can be attempted more than once, with the status, word lists, hints, etc. being reset and tracked separately for each attempt.
New puzzles are added automatically when they're released, and all past puzzles are available.
- Framework: Ruby on Rails in API mode
- Database: PostgreSQL
- Testing: RSpec, along with WebMock and VCR.
- Documentation: YARD
- Deployment: Capistrano
The front end is a single page application (SPA) using React, written in TypeScript. Other prominent front end technologies include:
- Vite: Build tool
- Redux (Toolkit): State management
- RTK Query: Data fetching/caching
- React Router: Routing
- Dexie: IndexedDB API
- Vitest: Testing
- JSDoc: Documentation
- SASS: Styling
- Radix UI Primitives: Headless UI component library