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.

Latest iteration of klevo.sk

To start 2015 in style, I’ve got a new theme for this website. Build from ground up to put the focus on my portfolio, clear typography and content. CSS were hand crafted, mobile first. On the backend – good old WordPress. Since all the cool internet kids are switching to https – I am following suit. For extra speed (and a free SSL certificate) I am utilizing CloudFlare to sit in front of the host.

All and all, I am satisfied and I hope all this new shiny tech will motivate me to write some quality content this year. Stay tuned!

Homepage serves to inform the visitor about what this website is about, put the most important content forward as well as create a good first impression.
Homepage serves to inform the visitor about what this website is about, put the most important content forward as well as create a good first impression.

Dockerized Percona MySQL Server with automated replication, tools & tests

Docker & Percona Server I developed this container to solve specific needs and alleviate pain points present when dealing with deployment and administration of MySQL on servers that I manage.

I decided to look into Docker during a migration from MySQL 5.5 to 5.6 on one of the production servers. The server hosts multiple applications and services and is running in a hot spare configuration (another server mirrors this server, acts as the MySQL slave, etc.). Thus I wanted a migration strategy where I can have the 5.6 installation ready and running on the server, so that I can test it with production data and when ready just turn the switch to replace the old 5.5. Docker turned out to be the cleanest solution.

Since the MySQL server is such a critical part of the infrastructure I decided to develop the container utilizing test driven development. This allowed me to quickly add new features, like performance optimization and replication over a ssh tunnel (to support servers in different public clouds). Having this functionality in a standalone, tested and isolated unit is amazing. Before, all this complexity would be managed by Chef provisioning, which is much harder to test and experiment with on the production server. Having this functionality contained in a Docker container allows me to just use Chef for orchestration and deployment of the containers themselves, witch requires much simpler logic, compared to provisioning a full MySQL server install, configuration, replication and upgrading.

  • Code is available at Github.

This project is released under the MIT license.

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.

DevOps

serversSoon after I started working with Rails, I wanted to start using my own server environment, instead of a managed hosting. I wanted to be able to use any kind of libraries, their versions and any other tools my projects required on my server, set up the way I need it. Thus I got my first VPS.

From one small VPS server, over a period of a few years, I find myself managing 6+ dedicated servers to serve the needs of the applications I’ve developed and maintain.

At the beginning I managed my first server manually: ssh into the machine, install packages, edit the configs… This soon became tedious and I was aware that there are tools designed to do this better. I picked up Chef and never looked back. Nowadays all my servers are managed by cookbooks, deployed by chef-solo in conjunction with my own knife-like toolset based on Mina.

Here’s a short list of some of the more interesting things that I’ve learned and have experience with in conjunction with DevOps:

  • MySQL configuration, backup & replication (I’ve developed my own Docker container for this).
  • Using Postfix as a relay for services like Mandrill for reliable transactional email delivery.
  • Nginx, Unicorn, Upstart for reliably running apps with hot reloads on deploys.
  • Infrastructure monitoring using Zabbix (I’ve got my own container for that too).
  • Recovery from a failed disk in software RAID environment.
  • Setting up rate limiting and basic DDOS attack precautions.
  • Defending against small attacks like spam bots, password guessers, etc.

All of these skills translate and support my software development and application design, as I’m much more aware of the whole lifecycle of an application, and the real world usage scenarios that will be thrown at it.

EQAFE – Ecommerce

This is one of the first projects where I started using Rails in production. EQAFE developed—over the years—from a simple checkout page to sell a single book to an ecommerce platform featuring thousands of products, affiliate program, gifts and more.

Deliverables:

  • UI design and implementation.
  • Backend design and implementation (Rails).
  • Automated test suite.
  • ~4 years running in production (DevOps).

Tour

Front page provides an index of the latest products.
Front page provides an index of the latest products.
Product details.
Product details.
A lot of the functionality is neatly tucked away in the always accessible dropdown menus.
A lot of the functionality is neatly tucked away in the always accessible dropdown menus.

Rails stats

eqafe-code-stats
It’s interesting to observe how each project can have quite a different allocation of the amount of code. Here for example, test vise, most of the code is located in controller tests – this tells us a lot about the app itself – a lot of the control flow is located in the controllers, most of the interesting stuff happens there, like for example users are redirected to different locations depending on their starting point and actions.

DIP Lite: E-learning Platform

DIP Lite is a free e-learning platform. Its fully automated in-browser experience connects the users with a personally assigned “buddy”: an experienced person that overviews and assist the user throughout the course. The user walks the course on her own pace as well as engage in daily exercises, complete with email notifications and communication with the course buddy provided by the course platform.

For this project I delivered the following:

  • Initial design of the flow and functionality of the platform based on the goals set by the client.
  • Mockups of the UI and user flows.
  • Graphic design.
  • Logo creation.
  • Implementation within Rails.
  • Automated test suite.
  • Further feature development and updating/upkeep of the codebase.
  • Running this project in production for 3 years (DevOps).

Tour

Front page.
Front page.
After the lightning fast registration users immediately start with Lesson 1.
After the lightning fast registration users immediately start with Lesson 1.
Reviewing user's feedback.
Reviewing user’s feedback.
Admin dashboard.
Admin dashboard.

Rails stats

Code stats.
Code stats.

Equal Money System Website

The goal for this project was to create a presentation which immediately engages the user and allows them to interact with the website and information in a meaningful fashion. Therefore, instead of a static presentation, we came up with easy to use and immediately available voting in relation to the goals of the project that is being presented.

Deliverables:

  • UIX design and its implementation within HTML & CSS.
  • Backend implementation in Rails, MySQL, including a fully integrated admin interface to manage the website content, votes and translations.
  • Custom lightweight Wiki.
  • Automated test suite.
  • Utilizing web APIs of other products of the client.
  • Running, maintaining & upgrading the app in production since 2012 (Unicon, Nginx, Ubuntu & Upstart).
  • Associated PhpBB forum.

Tour

Front page with immediately available point of interaction: voting on the projects goals.
Front page with immediately available point of interaction: voting on the projects goals.
Viewing a "goal" with voting results and visitor's feedback.
Viewing a “goal” with voting results and visitor’s feedback.
Votes are managed and responded to by moderators from the build in & easy to use interface.
Votes are managed and responded to by moderators from the build in & easy to use interface.
The Wiki editor is custom build, features live side-by-side preview and formatting help.
The Wiki editor is custom build, features live side-by-side preview and formatting help.

Rails stats

ems-stats

DIP Pro – Online Course Delivery Platform

E-learning project similar to DIP Lite but for more serious and advanced students, providing much more features including credit card payments, commission payouts, file (course material) delivery, multiple different courses divided into years and months and API for integration with other projects.

Deliverables:

  • Initial design of the flow and functionality of the platform based on the goals set by the client.
  • Mockups of the UI and user flows.
  • Graphic design.
  • Logo creation.
  • Implementation within Rails.
  • Automated test suite.
  • Further feature development and updating/upkeep of the codebase.
  • Running this project in production for ~4 years (DevOps).

Tour

Front page explains what is it all about.
Front page explains what is it all about.
Courses overview.
Courses overview.
The dashboard students sees after confirming her email address.
The dashboard a new student sees after confirming the email address.
If a particular screen is still empty, it contains information about what it does.
If a particular screen is still empty, it contains information about what it does.
Integrated online payments.
Integrated online payments.

Rails stats

dip pro stats