Vocabulary Builder – Desktop Educational Software

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.

Principal – Integrated Business Management

Integrated business management web app for a sales company with CRM features. The functionality this Rails app provides is extensive:

  • Management of distributor accounts across multiple countries.
  • Capture, edit and build lead portfolio.
  • Logging of phone calls, appointments and notes.
  • Management of orders.
  • Invoicing.
  • Integrated credit card payments (Stripe, MyGate).
  • Management of stock and its reordering.
  • Payouts and commissions.
  • Client support pages.
  • Product download, activation and update facilities.

For me, the most important part of this project is the extensive test suite that was developed from day one, which allows for all the integrated functionality to coexist in one, easy to manage and extend codebase; and rapid development and deployment of new features.

UI Tour

Leads overview.
Leads overview. Leads can be added, edited, commented on, moved between different statutes, filtered and searched. (Note: these screenshots do not contain any real client information. This data is randomly generated for the purpose of this presentation.)
Logging and appointment.
Logging an appointment.
Logging a phone call with a lead. (Note: these screenshots do not contain any real client information. This data is randomly generated for the purpose of this presentation.)
Logging a call for a lead.
Captured order.
Captured order.
Excerpt from a stock management screen.
Excerpt from a stock management screen.
On-site credit card payment.
On-site credit card payment.

Rails stats

Lines of code, test coverage & other project stats.
Lines of code, test coverage & other project stats. Almost 14 000 lines of code – this is one of the biggest projects I’ve created, developed and worked with in production. Despite the relatively large amount of code, I am extremely happy with how Rails handles a decent sized project like this, all in one integrated, business specific and complete codebase.

Tutoring website United Kingdom & South Africa

For this project it was important to consider the target audience. Many people in South Africa, especially in schools, use older versions of Windows and Internet Explorer. These are the people that are most likely to visit this website to evaluate the company. Thus one of the primary objectives of this project was compatibility with Internet Explorer 7 and up.

Another interesting aspect of this project is that it uses the new feature of Rails 4.1 – Variants. The very same server code (a Rails app) powers both the UK and SA version of this website. This is achieved without deploying and spawning another, modified instance of the app, greatly simplifying the maintenance and future development. The varied content of the website based on the language and certain design elements are all neatly managed side by side utilizing the template variants.

Tour

Homepage.
SA front page.
UK front page.
UK front page.
tt-sa-vb
Product page.
tt-sa-schools
Contact form for schools.