UI: My current state of play

For the past decade, I’ve been immersed in UI design and development, working on large-scale projects for clients like the Home Office, Met Police, major retailers, and charities. My early days revolved around JavaScript, CSS, and HTML, evolving into frameworks like jQuery, Backbone, YUI, React.js, and Vue.js. I’ve also tackled backend technologies (Java, PHP, .NET) and embraced full-stack DevOps workflows, leveraging tools like MongoDB, Node.js, Webpack, React.js, and GraphQL.
Recently, I’ve specialized in AI agent development, focusing on CrewAI to build intelligent, collaborative AI systems. I also bring hands-on experience with the Next.js AI SDK, integrating AI capabilities into modern web applications. My UI expertise informs my AI work, ensuring seamless, user-centric solutions. This site showcases my current interests, including AI-driven applications, proof-of-concept apps, and the latest in React.js, Vue.js, D3.js, CSS3, HTML5, and SVG. Reach out to connect!

You can contact me on Linkedin.

TDD approach – An asynchronus product listing app – React,Jest and Enzyme with data mocking

See the code on Github

Testing in react.js is tricky due to its lifecycle hook implementation. In this project, I have implemented a product listing app using the TDD approach. I have used Jest, Enzyme, and its many features to tackle the tricky areas around react.js testing. Read more…

GraphQL ToDo app (Full stack with Mysql backend database)

See the code on GitHub
This project implements a full stack graphQl version of a ToDo app. The project has an api and a client layer. The backend is using react.js, sequelize.js, express, and apollo server. The GraphQl layer is served by a Mysql database.

Be warned this is a full-stack project and you will need to be comfortable with the above mentioned technologies to install and run this. Read more…

A workflow for coding prototypes: Same design of To-Do app implemented in React, Vue.js, React native, and AngularJs.

Over the years I have followed these steps when designing widgets, plugins, and features. In this example, I will outline the steps to code a To-Do app in react.js, vue.js, React native, and Angular. Read more…

Vue.js and D3.js line chart

See the code on CodeSandbox

Vue.js  is a relatively new front end framework. As I have experience  in creating charts with react.js and D3.js, I thought I will Implement a relatively simple line chart using Vue.js and D3.js. My initial research had found that theres not that much examples on the web on the subject of using Vue.js and D3.js together. These are the takeaway points that you need to consider.
Read more…

Redux and React.js infographic chart

See the code on CodeSandbox


Redux and react make a perfect combination if you want to build large apps that have complex state driven rendering. When apps get larger the state management becomes complicated and that’s where redox comes in. The chart in this example was built with the d3. I first hand crafted an svg of a UK map in illustrator. Then marked and give ids to the regions which becomes your hot spots. After saving the svg in illustrator, Read more…

How to jazz up d3 charts with clipped image and animation in react.js


I wrote this post to show the versatility of react when it comes to displaying d3 charts. Also wanted to show that d3.js can be used more creatively by using its advanced svg features. For this chart I am using the bars from the bar chart as a stencil to cut out a collage from a graphical image. As a bonus the whole thing is responsive. Read more…

Temperature dial meter built with React.js and D3.js.

See the code on CodeSandbox

In this example I am rotating and animating the temperature needle. The animation is done via D3.js just after the needle container is mounted. D3.js has some hooks that can be utilised to indicate when the animation starts , ends and gets interrupted. These hooks are perfect if you want to change state within react so that it is in synch with D3 animation. Read more…