When I finished building my keyboard splitty boi, which you can read more about here, I found the jump from a standard staggered QWERTY layout to a split, ortholinear Colemak-DHm layout to be quite significant. On the first day I was typing at a whopping 8 words per minute and using online typing tests as a way to practice and get familiar with this new layout.

After about a week I was up to around 25 wpm and it was clear that I still wasn’t very comfortable typing yet. I obviously just needed to keep practicing but typing out random words had become so incredibly dull that I started working on this project. Typey boi allows you to practice typing by typing out your favourite book, a much nicer alternative to typing out ‘feel be govern few down group new face all’ over and over. After loading an ebook from a file, your input is tracked and any errors you make are shown along the way. Your WPM and typing accuracy are also tracked to allow you to gauge your improvement over time.

Technology

Typey boi is built using a similar stack to another project of mine newtab. There are however a few differences:

  • Both projects use the react redux combination however typey boi uses all functional components and uses hooks to manage local state, while newtab uses the older class based components. The newer combination of functional components and hooks allowed for more readable code, removed the need for higher order components whose only purpose was to combine states of its children and removes the need to endlessly pass props down through the component tree.
  • While newtab coupled a sass .scss with each component, typey boi uses styled-components written in a ./styles.ts within each folder. This contains the styles for the components in that folder and is imported as such import * as S from './styles'. Then, for example, within a CurrentParagraph component you would render the styled div as <S.CurrentParagraph>.
  • On a similar note, typey boi stored it’s style constants in a theme object which is then passed as props to all styled components by using a <ThemeProvider>. This coupled with the above point allows for my favourite styling development experience so far.
  • Typey boi uses parcel as its bundler instead of webpack. Parcel has a much lower barrier to entry requiring far less configuration and manages some incredibly fast rebuild times thanks to its caching.

Overall I really enjoyed using this stack and if you’re looking to build a similar project, feel free to grab the boilerplate from an early commit

Built with:

  • Typescript
  • React
  • Redux
  • Styled-components
  • Parcel
  • Electron

Style-checking:

  • Prettier
  • Eslint
  • Stylelint

Possible Improvements

Typey boi fulfils the role I wanted it to fill in allowing me to practice typing without being bored out of my mind. Though there are a few improvements which could be made to improve the overall user experience.

Short Term

  • At the moment the statistics and load text buttons are displayed at the bottom of the window at all times. It would be nice to improve the typing experience by hiding these by default and displaying them on a button press or hover.
  • The last 5 logged statistics are currently shown in a table, graphing WPM against the session date, with session duration and accuracy displayed when hovering a node would be ideal.
  • Adding more robust error and loading states to the file reader hook would be a good idea, though not super necessary as even large text files are loaded in less than a second.

Long Term

  • It would be nice to be able to load an ebook directly from an epub or mobi to avoid the extra conversion step.
  • The ability to scroll through the book and select a starting location would be useful if the user is also reading the book outside of the use of typey boi.