Tag: grunt

Vocabulary Builder – Desktop Educational Software

Posted on by Robert Starsi

Vocabulary Builder (VB) is a desktop educational software for Microsoft Windows and Mac OS X. It’s build using web technologies—powered by the awesome nw.js platform. I was responsible for the whole project from start to finish, from the initial brainstorming and design of the functionality with the client, to the choice of technologies, design of the user interface and programming implementation of the functionality.

VB runs on OS X and Windows, utilizing the same codebase, which is a Backbone.js backed client side application running within the browser (nw.js). I’ve build a custom ORM layer for the build in sqlite database (also in CoffeeScript) which plugs into Backbone.sync. Custom database migration toolset modeled after Rails migrations is also included.

The design of the whole application is strongly influenced by Rails code structure: everything is neatly compartmentalized into models, collections and templates directories. The whole thing is compiled and packaged for production utilizing Grunt as well as Ruby for preparing ISO images and such.

The app includes an extensive test suite covering integration tests (full user flows through the application) as well as isolated model and Backbone View tests. The test suite is powered by the fantastic QUnit.

Tour

VB Login Screen
VB supports multiple user accounts, user and administrator roles and an out-of-the-box guest account.
Home screen users see after login. It provides access to resume where the user left off and other quick links.
Home screen users see after login. It provides access to resume where the user left off and other quick links.
VB includes a build in English dictionary
VB includes a build in English dictionary.
Users can add new content utilizing a word list editor.
Users can add new content utilizing a word list editor.
Visual diffs on incorrect recognition of a word.
Visual diffs on incorrect recognition of a word.
Easy update to the latest version from the app itself.
Easy update to the latest version from the app itself.
Detailed reports of user progress are available to both the current user as well as administrators.
Detailed reports of user progress are available to both the current user as well as administrators.
Test suite that covers the whole app. Development was done using a mixture of test driven development as well as regression testing, depending on the particular area of code.
Test suite that covers the whole app. Development was done using a mixture of test driven development as well as regression testing, depending on the particular area of code.
Code structure heavily influenced by Rails. Don't be fooled though, this is 100% client side, CoffeeScript, HTML & SASS.
Code structure heavily influenced by Rails. Don’t be fooled though, this is 100% client side, CoffeeScript, HTML & SASS.