🎨 Projects

This section outlines the projects that I've worked on. I describe what the project is about, what role I played in the project, the tech I used and something interesting that I have learnt from the experience
DEV Application (https://dev.to/) (Company: DEV/Forem)
Overview
  • Project Focus: DEV - building online communities of software developers with a over 1 million users.
  • Technical Stack: Ruby on Rails, Vanilla JavaScript, Preact and a PostgreSQL database.
Contributions
  • Built out a Open AI plugin for the store that is able to list articles and authors and summarize articles.
  • Build out a huge portion of tha Admin Interface that is use to configure and manage the application and its users.
  • Improved the home feed of the application.
  • Co-lead the effort to build out custom billboards (ads) on the platform.
  • Implemented a system to build out article tag weights and determining how they affect a users home feed.
  • Implement API endpoints and documentation for our opensource API.
  • Built the creator onboarding experience together with my team.
  • Simplifying a complex and nested routing system on the Admin Interface.
  • Building out various frontend re-useable Preact components.
  • Building a system to allow users to create their own dynamic pages on the application.
  • Introducing a campaign concept to the application that allows banners to be displayed for campaigns.
  • Generalizing the admin interface so that the application could be hosted as a different instance and used for other communities (Forem).
  • Consolidated the technologies that we used. For example we were using Vanilla Javascript, Stimulus, JQuery and Preact - I helped develop a JavaScript plan to refactor out and consolidate our JavaScript.
  • Implement caching techniques and performance enhancements to the application.
  • and much more..
Achievements
  • Working at DEV has allowed me to tremendously improve my backend, frontend and leadesrhip skills.
  • Leading numerous high priority projects.
  • Implementing numerous processes and remote communication techniques.
  • Refactoring multiple features in the application. This touched on both technical refactoring as well as making the application user friendly and more intuitive.
  • Refactored the architecture and technologies in the application to make for a more scalable application and better developer experience.
Smile Identity Partner Portal (Company: Smile Identity)
Overview
  • Project Focus: Smile Identity Partner Portal - a pivotal partner interface for identity verification and KYC data.
  • Technical Stack: React Frontend, Rails API, AWS Dynamo DB, S3 services, AWS Lambdas and PostgreSQL database.
Contributions
  • Expanded React Frontend for seamless user experience.
  • Established connections with Rails API, AWS Dynamo DB, and S3 services.
  • Writing and reading to a Postgres database that maintains a connection from the AWS Lamda's.
  • Optimized AWS Lambdas for efficient processing of facial recognition results by packaged into a normalised and useful data structure.
  • Significant involvement in developing sections of the marketing website.
Achievements
  • Developed a featured page in the partner portal, detailed in this blog post.
  • Demonstrated the ability to deliver user-centric and impactful features within the Smile Identity ecosystem.
  • Successfully navigated and integrated external integrations and surrounding technologies.
  • Committed to excellence and passionate about pushing technical boundaries.
  • Mastered complex technical aspects and demonstrated adaptability in learning domain-specific intricacies.
  • Confident that contributions have enhanced the portal's capabilities and positioned it as a robust solution in the identity verification landscape.
Smile Identity Open Source Libraries (Company: Smile Identity)
Overview
  • Project Focus: The Smile Identity Open Source Libraries, comprising the Web API and ID API, serve as a robust platform for users to verify Selfies against stored photos from Government ID Authorities. These libraries facilitate new user enrollment and authentication within various systems. Additional details about these libraries can be found here.
  • Technical Stack: Ruby, JavaScript and Java. A library in each language.
Contributions

I played a pivotal role in developing the Ruby and Java open source packages, and contributed to certain aspects of the Javascript package as well. The architecture of these libraries demanded innovative solutions to simplify the verification process, allowing users to provide minimal input parameters and receive a response with minimum complexity. The implementation also included optional polling. Managing the intricate business logic and encapsulating it within user-friendly and simplified libraries presented a challenging yet rewarding experience.

Achievements
  • Successfully built the Ruby and Java open source packages for Smile Identity Open Source Libraries and contributed to the development of the Javascript package, enhancing its functionality..
  • Implemented innovative architecture to streamline the verification process, minimizing user input complexity.
  • Ensured extensibility and flexibility of the libraries through rigorous Test-Driven Development (TDD).
  • Wrote comprehensive documentation and user friendly documentation for the libraries to facilitate effective utilization by users.
  • Demonstrated adaptability by mastering Java after 10 years, overcoming differences in core data structures and principles compared to Ruby and JS.
  • Successfully delivered the Java library when no other team member had the capacity, showcasing dedication and a proactive mindset.
  • Embraced challenges with enthusiasm, finding satisfaction in expanding capabilities and overcoming obstacles to complete tasks successfully.

The Ruby library can be accessed here, and the Javascript library is available here. For detailed documentation, including product sections, refer to this link.

Service View, Crystal Web and DFA Client Portal (Company: Zero One Consulting)
Overview

I spearheaded the development of three independent systems, each serving as a self-management client portal for different clients in the telecommunications industry. These portals enable users to monitor the health of their networks in real-time and historically. The primary function of these self-service portals is to aggregate data from various backend systems, including performance and fault management, billing, provisioning, and fulfillment systems, presenting it in an easily comprehensible format for users.

Contributions
  • Integration Expertise: Successfully implemented highly integration-heavy client portals, seamlessly pulling data from a minimum of four external systems through APIs.
  • API Development: Orchestrated the creation of robust APIs in Ruby, streamlining the correlation of information received from external systems to be served to the frontend application through a unified API.
  • Full-Stack Involvement: Engaged in all aspects of development, from architectural design to API and Ruby gem creation, as well as UI/UX and frontend development.
Achievements
  • Multi-System Data Correlation: Accomplished intricate data manipulations and integrations, ensuring the correlation of data from diverse systems, enhancing the overall functionality and reliability of the client portals.
  • Visual Representation Emphasis: Placed significant emphasis on enhancing user experience by focusing on visual representations of data, including the creation of interactive charts and visually appealing elements.
  • Technology Stack Mastery: Successfully utilized Ruby for API development and Ember.js for frontend development, showcasing a comprehensive understanding of diverse technologies in the project.

This experience highlights my ability to manage end-to-end development processes, emphasizing integration, API creation, and a strong focus on user-centric visual design.

VAST Client Portal (Company: Zero One Consulting)
Overview

The VAST Client Port is a dynamic portal that enables users to conveniently access and view information about their broadband wireless products offered through VAST Networks. The portal exposes a minimum of 8 products, each retrieving data from one or multiple external systems. Following a consistent architecture pattern, the system incorporates an API that correlates information from external sources and presents it through a visually engaging frontend. The frontend employs charts and graphics to enhance the user experience.

Contributions
  • API Development in Ruby: Successfully developed APIs in Ruby to facilitate the correlation of information from various external systems. The APIs serve as the backbone of the system, ensuring seamless communication between the frontend and external data sources.
  • Frontend Development with Ember.js: Implemented the frontend using Ember.js, creating an intuitive and visually appealing user interface. The use of Ember.js contributes to the overall responsiveness and efficiency of the portal.
  • Visual Elements: Took a lead role in designing and implementing visual elements for each product. The emphasis on visual representation enhances user engagement and comprehension of complex data.
  • Asynchronous Loading: Implemented asynchronous loading for reports and widgets, optimizing the portal's performance and providing users with a smooth and uninterrupted experience.
  • D3.js Chart Creation: Personally developed all charts from scratch using D3.js, showcasing a high level of expertise in data visualization. The charts not only contribute to the aesthetic appeal of the portal but also provide users with meaningful insights.
Achievements
  • User-Centric Design: Contributed to the creation of an extremely visual frontend that prioritizes user experience. The emphasis on charts and graphics elevates the accessibility and understanding of broadband wireless product information.
  • Favorite Project: Expressed a strong personal connection to the VAST Client Port, considering it the favorite system worked on. This sentiment highlights a deep sense of pride and satisfaction in the project's outcomes.
  • Innovative Use of D3.js: Demonstrated innovation by utilizing D3.js to create charts from scratch. This approach not only showcases technical skill but also contributes to the uniqueness of the portal's visual representation.

The VAST Client Port stands out as a flagship project, where a meticulous combination of API development, frontend expertise, and creative visualization techniques has resulted in a user-friendly and visually appealing portal for broadband wireless product information.

VAST Hotspot Locator - https://hotspot.vast.network (Company: Zero One Consulting)
Overview

The VAST Hotspot Locator is a user-friendly platform designed to empower users with the ability to discover available hotspots across South Africa. Users can conveniently refine their search based on various attributes, such as the hotspot's location type (e.g., restaurant or coffee shop), operational status, and whether the Wi-Fi is complimentary.

Contributions
  • Google Maps API Integration: Successfully implemented robust integrations with the Google Maps API. This includes automatic location detection, hotspot clustering, map filtering, zooming, and panning functionalities. The integration enhances the user experience by providing dynamic and interactive map features.
  • Customized Information Boxes: Developed and implemented customized information boxes for each hotspot location. This feature ensures that users receive specific and relevant details about each hotspot, contributing to a more informative and engaging user interface.
  • Responsive Design: Engineered the website to be fully responsive, optimizing it for seamless viewing and interaction on mobile devices. The mobile-first development approach ensures a consistent and user-friendly experience across different screen sizes.
  • Ruby API Development: Created APIs using Ruby to support the backend functionality of the VAST Hotspot Locator. The use of Ruby contributes to the application's efficiency and reliability.
  • Ember.js Frontend Development: Designed and implemented the frontend using Ember.js, enhancing the overall user interface and experience. The frontend development with Ember.js ensures a smooth and responsive interaction for users accessing the platform.
  • Mobile-First Development: Adopted a mobile-first development strategy, prioritizing the optimization of the application for mobile views. This approach aligns with current industry standards and enhances accessibility for users on various devices.

The Google Maps API integration was a particularly enjoyable and interesting aspect of the project, showcasing the ability to leverage cutting-edge technologies to enhance the functionality and user experience of the VAST Hotspot Locator.

Mpowered Toolkit (Company: Zero One Consulting)
Overview

Mpowered is a leading B-BBEE (Broad-Based Black Economic Empowerment) software solutions provider. The existing system is a server-side rendered Ruby on Rails project, and I played a key role in enhancing its functionality, specifically focusing on a custom file uploader. This uploader enables users to upload spreadsheets and configure headers and values dynamically to align with the expectations of the Mpowered Toolkit. A dynamic configuration screen/form was implemented to facilitate this process.

Contributions
  • Custom File Uploader: Developed and implemented a custom file uploader within the existing Ruby on Rails application. This uploader empowers users to seamlessly upload spreadsheets and configure their content to match the required format of the Mpowered Toolkit.
  • Dynamic Configuration Screen/Form: Introduced a dynamic configuration screen/form that allows users to configure headers and values within the uploaded spreadsheets. This feature enhances the adaptability of the system, accommodating variations in spreadsheet formats.
  • Integration of React-rails: Integrated React-rails into the existing Ruby on Rails application to efficiently handle the highly dynamic configuration requirements. This introduction of React demonstrates a strategic approach to addressing specific challenges within the server-side rendered application.
  • React Integration for Dynamic Configuration: Successfully utilized React in a server-side rendered application to address the specific needs of a highly dynamic aspect. This innovative use of React showcases adaptability and technical proficiency.
  • Enhanced User Experience: The custom file uploader and dynamic configuration screen significantly contribute to an improved user experience by simplifying the process of aligning spreadsheet content with the Mpowered Toolkit requirements.
  • Contributions to an Existing Ruby on Rails Application: Made valuable contributions to an existing Ruby on Rails project, highlighting the ability to integrate new features seamlessly into an established system.

The project at Mpowered reflects my expertise in enhancing existing systems, particularly in the introduction of dynamic features using technologies like React. The custom file uploader and dynamic configuration capabilities represent a significant improvement in user interaction and system adaptability.

Crystal Web Available Service Locator (Company: Zero One Consulting)
Overview

Crystal Web stands out as a premier Internet Service Provider renowned for delivering premium connectivity. The system in focus employs a sophisticated approach using multiple KML files, each containing attached metadata, to overlay data onto a map. These layers remain hidden until the user either inputs their location or the map autonomously detects it. This innovative system enables users to discover location-based services available to them at their specific location.

Contributions
  • Utilization of Multiple KML Files: Played a pivotal role in implementing a system that effectively utilizes multiple KML files, each carrying crucial metadata. This approach allows for the overlaying of diverse data onto the map, enriching the user experience with detailed information.
  • Location-Based Services Integration: Integrated functionality that enables users to view location-based services based on their entered location or the automated detection of their location on the map. This feature enhances user engagement by providing personalized and relevant information.
  • Basic PHP Backend Development: Contributed to the development of the system's backend using basic PHP, ensuring seamless communication between the frontend and the data sources. This backend infrastructure forms the foundation for the dynamic map overlay.
  • Pure JavaScript Frontend Development: Implemented the frontend using pure JavaScript, emphasizing a lightweight and efficient approach to the user interface. The frontend design contributes to a smooth and responsive user experience.
  • Innovation in Data Overlapping: The most intriguing aspect of the project involved the innovative process of detecting overlaps among KML files. This capability allows for the determination of multiple services, enriching the map overlay with comprehensive information.

Crystal Web's system, crafted through basic PHP and pure JavaScript, showcases a sophisticated integration of multiple KML files for dynamic map overlays. The achievements in handling spatial data and creating an intuitive location-based service discovery system reflect a commitment to technical excellence and user-centric design.

Amer Sports Pro Club (Company: Zero One Consulting)
Overview

Amer serves as the parent company for renowned brands such as Atomic, Suunto, and Salomon. The Pro Club portal, a dedicated service, caters to VIP customers within the sports industry, offering them the privilege to apply for exclusive access to discounted prices and deals. The portal consolidates information, providing VIP customers with a comprehensive view of their discounts, points, purchase history, addresses, and exclusive deals across all Amer brands.

Contributions
  • Frontend Application Development: Spearheaded the development of the frontend application for the Pro Club portal. This involved creating a user-friendly interface to cater to VIP customers, to produce a one-stop platform to access information on discounts, points, purchase history, addresses, and exclusive deals across all Amer brands. This contributes to an enhanced user experience and brand loyalty.
  • Integration with Drupal API: Implemented the interfacing of the frontend application with a Drupal API for content. This integration streamlines the retrieval of relevant and dynamic content, enhancing the portal's information delivery capabilities.
  • Integration with Magento API: Orchestrated the integration of the frontend application with a Magento API for seamless interaction with Amer's backend systems. This integration facilitates the retrieval and synchronization of data related to Amer's brands and products.
  • System Development in Backbone.js: Utilized Backbone.js as the framework for developing the entire system. Backbone.js provides a structured and efficient foundation for building a scalable frontend application that aligns with the portal's requirements.

The Pro Club portal development project, where I led the creation of the frontend application, stands as a testament to my expertise in frontend development and API integration. The achievement of providing VIP customers with a consolidated view and seamless access to exclusive offers underscores the project's success in meeting user-centric goals.

bookEU (Company: Zero One Consulting)
Overview
  • Project Focus: bookEU is a sophisticated web application designed to facilitate the seamless booking and management of flights, hotels, car rentals, and more. One of its standout features is the automatic generation of VAT & GST compliant invoices, enhancing the overall efficiency of the user experience. The system is built on Node.js for the backend, with React.js powering the frontend.
  • Technical Stack: Node.js Backend, React.js Frontend
Contributions
  • Complex and Interactive Dashboard: Spearheaded extensive frontend development work, particularly focusing on creating a highly intricate and interactive dashboard. This dashboard serves as a central hub for users, offering detailed charts and information related to flights, bookings, and more.
  • Interactive Visualizations/Charts with d3.js: Took the lead in constructing interactive visualizations and charts using d3.js. This strategic implementation significantly elevates the user interface, providing a dynamic and engaging representation of data.
  • Hover-Triggered Data Recalculation: Innovatively implemented a feature where hovering over one part of a chart triggers the recalculation of data in every other chart. This interactive functionality ensures users gain valuable contextual insights, enhancing the overall user experience.

The contributions made to bookEU highlight a commitment to enhancing the user experience through innovative frontend development, interactive visualizations, and a strategic technology stack. The achievements underscore the successful implementation of features that position bookEU as a user-friendly and efficient booking platform.

Incredible Cloud (Company: Zero One Consulting)
Overview
  • Project Focus: Incredible Cloud is a platform that generates vouchers, offering users access to cloud storage. The application features a frontend component responsible for enabling users to redeem their vouchers by providing necessary details and voucher numbers. This redemption process includes meticulous validation to ensure accuracy and legitimacy. The system is built using Ruby for the backend and Ember.js for the frontend, providing a robust and responsive user interface.
  • Technical Stack: Ruby Backend, Ember.js Frontend

Contributions
  • Redemption Interface: Took a lead role in building the frontend of the application, creating an intuitive and user-friendly interface for voucher redemption. This involves a seamless process for users to input their details and voucher numbers.
  • Thorough Validation: Implemented thorough validation mechanisms to ensure the accuracy and legitimacy of voucher redemption. This includes comprehensive checks on user-entered details and voucher numbers, enhancing the overall reliability of the system.
  • Real-time Feedback: Introduced an innovative aspect to the system by incorporating real-time validation during the voucher entry process. The system employs an algorithm that validates the voucher after every 4 characters are entered, providing users with immediate feedback. This unique feature enhances the user experience by offering feedback progressively, rather than waiting until the end of the entry process.

The contributions to Incredible Cloud showcase a commitment to delivering an exceptional user experience through frontend development excellence, thorough validation processes, and innovative real-time feedback mechanisms. The achievements highlight the success of building a robust and user-centric voucher redemption system.

Root

These were personal/side projects through collaboration with an external company. I built a ruby slackbot and a facebook chatbot that integrates with an Insurance API which allows the user to be guided through creating life policies and/or funeral cover.

Internet Solutions (Dimension Data) Projects (Company: Internet Solutions)
Overview

Throughout my career, I have contributed to the development of various systems, showcasing versatility in working with diverse technologies and frameworks. Some notable systems include:

  • Automated Quoting System
  • Network Configuration System
  • Realignment Pricing Tool
  • Project Dashboard
  • Self Service Client Network management System
  • Carrier Operations Management System
  • Frontend to manage Service Level Agreements

These systems exhibit a range of complexities, from single-page applications to server-side rendered applications, and involve the use of different API types such as REST and SOAP. I leveraged my expertise in languages like Ruby, Python, and frameworks such as Ruby on Rails, Django, Backbone.js, Marionette.js, Meteor.js, and Ember.js.

Achievements
  • Language Adaptibilty: Demonstrated adaptability in languages such as Ruby, Python, and Javascript, showcasing adaptability to different programming paradigms.
  • Framework Versatility: Leveraged frameworks including Ruby on Rails, Django, Backbone.js, Marionette.js, Meteor.js, and Ember.js, showcasing versatility in building applications using various architectural patterns.
  • API Integration: Successfully worked with both REST and SOAP APIs, highlighting expertise in integrating applications with different API types.
  • Continuous Learning and Adaptation: Embraced and adapted to new and evolving technologies, leveraging a variety of frameworks and languages to build a diverse skill set.

Most of these systems are non-public facing systems, hence urls could not be provided, however screenshots can be provided for the systems upon request