The app simulates T9 keyboard functionality used mostly on phones with keyboard. The API is returning corresponding predictions given numeric input.
For example, given the input 23, the output is ad, ae, af, bd, be, bf, cd, ce, cf.
For more information about T9 follow these links:
├── api
├── constants
├── mocks
├── queries
├── types
└── utils
├── components
├── constants
├── pages
├── api
└── index.tsx
├── public
├── styles
├── types
└── utils
I used Next API routes as an API endpoints as a Node.js serverless function. For app like this I consider solution provided by Next.js.
There are 2 endpoints:
/predictions- returns list of all possible combinations given the numeric input/words-list- returns the real words given the numeric input (43556 -> 'hello')
List of real words is taken from https://github.com/sindresorhus/word-list. From this list the hash table is created for better access and smaller time complexity. The list is huge, so the generated file with hash has 5.3MB. Table is implemented in this format:
[
2, ['a...', b...', 'c..'],
3, ['d...', e...', 'f..'],
4, ['g...', h...', 'i..'],
]
So when user input query 23 I know that I has to access key 2 and find among these values instead of going thorugh the whole list of words.
As you can imagine displaying all possible combinations can cause a performance issues both on the backend and frontend side so I decide to return only first 50 results (MAX_WORD_LIST_COUNT).
I created a simple keyboard UI with IPhone frame to create a realistic usage.
User can check Use word list checkbox to get real words from API.
- All request is cached thanks to
react-queryso for given the same input there is only 1 request to API. - I implemented debounce for entering input with 500ms delay to not overload API
- As I mentioned earlier I am display max 50 results, cause I find out that the real words list is pretty huge and rendering thousans of elements was causing performance issues.
- Job running on
push/pull requestcontaining linters, unit tests and snapshots
yarn - install neccessary dependencies
yarn start - start app on the localhost
yarn test - run unit and snapshot tests