Building interactive web applications with JavaScript and TypeScript.
<ul>
 <li>Built several customizer/configuration-related applications to allow users to drag and drop elements to customize an image they can export</li>
 <li>Expertise in JavaScript and a variety of libraries like <a href="https://tinaciousdesign.com/services/technologies/react">React</a>, Vue, Svelte, Handlebars, <a href="https://tinaciousdesign.com/services/technologies/angularjs">AngularJS</a>, jQuery</li>
 <li>Building fully functional applications in vanilla JavaScript without the usage of frameworks</li>
 <li>Writing scripts to automate build processes with Node.js</li>
 <li>Using JavaScript to write user scripts to augment third-party websites via script runners like GreaseMonkey, TamperMonkey, etc.</li>
 <li>Building my own static site generation scripts in Node.js</li>
 <li>Working with a variety of build tooling and bundlers including Webpack, Parcel, Rollup, Grunt and Gulp</li>
 <li>Working with HTML5 canvas including building interactive canvas applications (<a href="https://tinaciousdesign.com/portfolio/jewelry-curation-tool-body-piercings">example</a>)</li>
 <li>Working with Protobuf and Server-Side Events (SSE) on web</li>
</ul>

JavaScript / TypeScript

Extensive experience working with Ruby on Rails to build API's, and limited experience building server-rendered apps.
<ul>
 <li>Technical leadership in Ruby on Rails</li>
 <li>Building API's using REST and GraphQL</li>
 <li>CI/CD setup on a variety of CI platforms to support running unit tests and automating deployments including database migrations with Postgres</li>
 <li>Leveraging Ruby on Rails features including ActiveRecord to quickly build apps that need to manage a large amount of data</li>
 <li>Building authentication for both server-rendered and API Rails projects, including working with JWT tokens (symmetrical and asymmetrical signing)</li>
 <li>Developing and setting up the infrastructure to run asynchronous tasks with Sidekiq</li>
 <li>Building custom clients to work with Firebase Authentication, Firebase Storage, and other Google services that are not officially supported in Ruby</li>
 <li>Generating documentation for API's including Entity Relationship Diagrams (ERD) graphs</li>
 <li>Scripting with Ruby to improve productivity</li>
 <li>Working with Sinatra, a lighter-weight framework similar to Rails</li>
 <li>Working with RBS and adding RBS support to company Ruby SDKs</li>
</ul>

Ruby and Ruby on Rails

A library for building complex single page applications in JavaScript and TypeScript. I have been working with React since 2014.
<ul>
 <li>Single page app development using React with TypeScript</li>
 <li>Technical Leadership in React to ensure teams build maintainable, testable React applications</li>
 <li>Presentational-Container component architecture to separate presentational and functional concerns, as well as to leverage the team based on competencies.</li>
 <li>Building custom hooks and context providers to power a variety of functionality</li>
 <li>Unit testing of utility functions, presentational components, functional components, and custom hooks</li>
 <li>Automated UI testing with libraries like Cypress, Selenium, and Protractor</li>
 <li>Working with Redux for global state management</li>
 <li>Improving performance bottlenecks with regards to rendering concerns in React and Redux applications</li>
 <li>Setting up CI/CD for React projects on a variety of CI platforms</li>
 <li>Micro-frontends with React, when appropriate</li>
 <li>Setting up and using Storybook to help developers develop UI quickly, as well as to allow developers with higher attention to detail to focus on building UI components and others to focus on functionality to ensure a polished UI.</li>
 <li>Building multiple component libraries (with Sass and Styled Components) to build a library to support teams to build React UI's quickly.</li>
 <li>Working with existing component libraries and frameworks like Material UI, Chakra UI, Tailwind, shadcn, Boostrap, etc.</li>
</ul>

React

Native Android development in Kotlin and Java.
<ul>
 <li>Technical leadership on native Android projects</li>
 <li>Expertise in developing for the Android user experience including best practices for permissions, notifications, back button behaviour, and other UX</li>
 <li>Building Design Systems that support both light and dark appearance modes to support teams in building out views</li>
 <li>High attention to detail with regards to UI implementation and striving for pixel-perfect layouts on Android</li>
 <li>Building Android apps that support multiple flavours and build variants, e.g. Development, Staging and Production app flavours.</li>
 <li>Extensive experience with Android SDK versions and have been building functionality to support down to Lollipop (and previously Jellybean)</li>
 <li>Building support for deep link functionality including deferred deep linking</li>
 <li>Working with a variety of libraries and API's including Firebase, error trackers, networking libraries, etc.</li>
 <li>Working with push notifications and allowing users to configure notifications based on type</li>
 <li>Networking, including REST with JSON, web sockets, gRPC, and Protobuf</li>
 <li>MVVM architecture with LiveData and architecture components</li>
 <li>Reactive programming with Kotlin flows and LiveData with experience in Rx</li>
 <li>Data persistence in SQLite with Room database</li>
 <li>Implementing asynchronous worker tasks with WorkManager</li>
 <li>Building location-based functionality including "near me" functionality and working with maps</li>
 <li>Building custom UI for audio/video recording</li>
 <li>Building web view applications and enabling communication between the web view and native layer</li>
 <li>Unit testing in Java and Kotlin, including with coroutines, JUnit (4 &amp; 5), Mockk</li>
 <li>Automated UI testing with Espresso and Appium</li>
 <li>Setting up Android lint and Kotlin lint to ensure code style consistency in the project</li>
 <li>CI/CD setup for running tests, lint and other tasks for Git workflows, as well as automating deployments and code signing for Firebase App Distribution and the Google Play Store</li>
 <li>Most of my experience is working with XML views, but I have also built projects using Jetpack Compose, as well as worked in apps that use both</li>
 <li>Building apps that use Kotlin Multiplatform Mobile to build apps in Kotlin for both Android and iOS</li>
</ul>

Android

UIKit and SwiftUI experience in Swift and Objective-C as well as multiplatform technologies.
<ul>
 <li>Familiar with code signing</li>
 <li>Ability to build views for UIKit programmatically and with Interface Builder</li>
 <li>Limited SwiftUI and Combine experience</li>
 <li>Knowledge and understanding of the Human Interface Guidelines</li>
 <li>Working with SF Symbols to speed up the development of apps without designers</li>
 <li>Building WebView applications and enabling communication between the web view and native layer</li>
 <li>Unit testing with XCTests and UI testing with XCUITests and Appium</li>
 <li>Working with a variety of package managers including Cocoapods, Carthage, and Swift Package Manager</li>
 <li>Working with multi-platform technologies like React Native, Kotlin Multiplatform Mobile, and Cordova to build apps for both Android and iOS</li>
</ul>

I build backend web services and cross-platform command line interfaces (CLI tools) in the Go programming language for macOS, Linux, and Windows.
<ul>
 <li>Interactive terminal user interfaces (TUI apps)</li>
 <li>Cross-platform CLI apps to support functionality on macOS, Linux, and Windows</li>
 <li>Unit testing, including test-driven development (TDD) where appropriate</li>
 <li>REST API development with experience in the native http package, chi, and gin</li>
 <li>Working with SQL using SQLx</li>
 <li>Building web socket servers</li>
 <li>Working with goroutines, channels and context</li>
 <li>Shipping CLI apps over Git using GoReleaser</li>
</ul>

Go lang

Extensive experience building backend API's in JavaScript and TypeScript.
<ul>
 <li>Working with web frameworks like Express and Hapi</li>
 <li>Unit testing and integration testing</li>
 <li>Writing middleware for Express.js applications</li>
 <li>Creating and distributing TypeScript-supported NPM modules and libraries for Node.js applications</li>
 <li>Designing and developing authentication solutions including JWT and OAuth flows for a variety of providers</li>
 <li>Building for serverless environments including Vercel, Netlify, Amplify, Google Cloud Functions, Firebase Functions, and Cloudflare Workers</li>
 <li>Serving realtime content via web sockets and server-side events (SSE)</li>
</ul>

Node.js

Extensive experience working with Postgres, MySQL, and SQLite both on the back-end and front-end, including migrations.
<ul>
 <li>Experience setting up SQL environments on macOS and Linux, as well as with Docker and third-party database-as-a-service platforms</li>
 <li>Setting up automated migrations to deploy SQL schema changes when a new version of a service is deployed to production</li>
 <li>Troubleshooting and fixing failed migrations in production</li>
 <li>Working with a variety of GUI and CLI tools for working with different dialects of SQL locally and remotely on a server</li>
 <li>Using Flyway to automate database migrations in backend Java and Kotlin apps</li>
</ul>

I've been doing front-end development since the early 2000s. Starting initially with just HTML and CSS, I progressed to using various languages and libraries to help with templating, and CSS preprocessors like Less, Stylus, and Sass/SCSS. I am fluent in various CSS frameworks/libraries like Bootstrap, Material UI, Foundation, and Tailwind, and now that front-ends are primarily single-page apps, I have worked extensively with CSS-in-JS tools like styled-components, emotion, radix-ui, shadcn.
I have also done an extensive amount of front-end development for server-rendered apps like WordPress, Drupal, CakePHP, custom PHP apps, Handlebars and other moustache-inspired templating engines, server-rendered Rails templates, and similar technologies in other languages like Go and Rust.
I do Responsive Web Design, which means I develop responsive interfaces for websites and web applications that are not only compatible with, but also optimized for all screen sizes and devices. I build web products to support the user's preferred appearance mode, including light mode and dark mode. My expertise in CSS allows me to help teams migrate their existing, large front-end codebases to support dark mode or be responsive and support mobile phones.
I use a variety of JavaScript libraries and frameworks to build interactive web front-ends including JavaScript, React, Vue, Svelte, Ember, AngularJS, and jQuery.&nbsp;
I work with designers with varying levels of expertise&mdash;from your most opinionated senior designers to your more junior designers that could benefit from guidance from a tech lead to help them make their designs more efficient to implement to save time during development and increase team velocity. I use Figma and Sketch as a developer to help me ensure my implementations are accurate as I strive for pixel perfection.
For more bootstrapped teams without designers, I design in the browser by implementing the desired functionality and making design choices as I go, leveraging the team's existing design system, brand guidelines, and UI frameworks. I can also use Figma to make wireframes or basic designs for stakeholders who want to see something before it's implemented.
As a front-end tech lead, I have led multiple projects to build component libraries to help teams build UI faster. My experience helps me understand the importance of separating behaviour from style so that our team can move faster. I also structure my web apps and teams in a way to allow team members with a diverse set of talents to thrive at what they do best, for example, allowing those who prefer CSS and UI development to focus on that, and those who prefer working on behaviour and business logic to focus on that.
I can augment your existing team to provide that front-end development expertise and guidance your team may be lacking, or work alongside your team of experts the way they prefer to work to help them power through a big project.
<a href="https://tinaciousdesign.com/contact">Contact me</a> if you're interested in working with me.

I turn the pretty pictures your designer makes into real, functioning websites and apps.
I can build UI&rsquo;s in a variety of tools including but not limited to HTML, CSS, JavaScript, React, Vue, and jQuery.
I can work with your designer if you have one, or use my high attention to detail to come up with something aesthetically pleasing, simple, and efficient to implement.

Extensive experience with HTML since the early 2000's and how to use HTML and CSS features to improve the performance of JavaScript applications.
<ul>
 <li>Using the power of HTML to simplify complex, bloated, and poor-performing JavaScript applications</li>
 <li>Thorough understanding of semantic HTML principles to optimize markup for search engines&mdash;portfolio entries in my personal sites often outperform client websites (I didn't work on) in search engine rankings.</li>
 <li>Search Engine Optimization techniques to improve ranking on Google and other search engines</li>
 <li>Developing HTML markup to optimize for accessibility including screen readers and Web Content Accessibility Guidelines (WCAG) compliance</li>
</ul>

HTML

Extensive expertise with CSS including SCSS, Less, Stylus and Styled Components syntaxes to build scalable and maintainable CSS.
<ul>
 <li>Technical Leadership with CSS including establishing and enforcing best practices for CSS</li>
 <li>Building custom grids in CSS to offer the highest amount of flexibility without requiring developers to hack existing grid systems</li>
 <li>Building Design Systems to support teams in building UI functionality faster</li>
 <li>Implementing CSS methodologies and aspects of them to support a variety of CSS problems including custom grid layouts, white labeling, dark mode support, etc.</li>
 <li>Applying CSS methodologies like BEM and SMACCS to build maintainable CSS and prevent specificity-related bugs and tech debt</li>
 <li>Experience with a variety of CSS libraries including Bootstrap, Material UI, Foundation, Chakra</li>
 <li>Expertise in troubleshooting large and difficult CSS code bases</li>
 <li>High attention to detail to implement pixel-perfect CSS layouts with designer Figma and Sketch files</li>
 <li>Mobile-first, Responsive Web Development to build web layouts that follow best practices and are optimized for a variety of device screen sizes including desktop, and tablets and phones in portrait and landscape orientations</li>
 <li>Working with designers to ensure their web layouts are designed in a way that allows developers to build maintainable CSS and reduce tech debt</li>
 <li>Building CSS animations and migrating animations to use CSS where appropriate to improve animation-related performance</li>
</ul>

Building robust applications in Next.js with TypeScript that support either Static Site Generation (SSG) or Server-Side Rendering (SSR) depending on the problem.
<ul>
 <li>Leveraging infrastructure on serverless infrastructure platforms to host Next.js apps and reducing costs</li>
 <li>Supporting multiple environments (staging, production) for CI/CD workflows</li>
 <li>Generating static sites at build time to limit the cost of infrastructure by allowing websites to be hosted in object storage buckets or on the free plan of many infrastructure-as-a-service providers.</li>
 <li>Leveraging server-side rendering to optimize dynamic websites for search engines and sharing links to social media sites, including Facebook and Twitter</li>
</ul>
As Next.js is a framework that is built on top of React, all React skills apply to Next.js.

Next.js

Extensive experience building browser extensions for Google Chrome, including the distribution of several Chrome extensions in the Google Play Store.
<ul>
 <li>Augmenting the functionality of existing websites via Chrome extension API's</li>
 <li>Building embeddable applications via the Chrome extension API's, e.g. tools that can be embedded in Gmail</li>
 <li>Building productivity tooling as a Chrome extension</li>
 <li>Leveraging a number of Chrome extension API's</li>
 <li>Implementing web messaging to support interprocess communication between content and background scripts</li>
 <li>Overwriting and augmenting CSS styles via Chrome extension API's</li>
 <li>Building options/configuration pages, browser action popups, content scripts, and background scripts to augment a user's experience across the web</li>
 <li>Upgrading Chrome extensions to manifest version 3</li>
 <li>Thorough understanding of Chrome Web Store guidelines and review process</li>
</ul>

Chrome extensions

Developing video streaming functionality for Chromecast end-to-end including Android, iOS, and web.
<ul>
 <li>Familiarity with interprocess communication between the Chromecast web host and mobile devices</li>
 <li>Building functionality to reliably stay connected to the Chromecasting experience, and properly syncing state between mobile devices and the Chromecast</li>
 <li>Led a team to build a Chromecast app that streams video from an existing mobile app in a day. I was the leader and core contributor for this hackathon project.</li>
</ul>

Chromecast

Experience working with Vue 2, Vue 3, and Nuxt with Webpack and Vite build systems.
Experience debugging Vue apps with the Vue dev tools to troubleshoot state management and rendering issues.
Experience working with the composition API and VueX.

Vue.js

I've been working with Angular since version 1.x since 2013 and have kept up with the framework, where I most recently built internal tools in Angular version 18.2. Angular is an excellent enterprise-level JavaScript framework for building robust and testable single page apps.
<ul>
<li>Responsive web apps in Angular to provide an excellent user experience for mobile users</li>
<li>Building functionality in Angular using MVC patterns</li>
<li>Building custom directives</li>
<li>Unit testing controllers, directives, and services</li>
<li>Migrating code bases from AngularJS to more modern libraries and frameworks, including the use of micro-frontends</li>
<li>Leveraging Angular 18.2 and Tailwind to quickly build internal tooling</li>
</ul>

Angular

Extensive experience leveraging third-party API's to build out functionality faster and cheaper than building in-house, depending on the problem and client's budget. I often leverage third-party API's for the following (but not limited to):
<ul>
 <li>Content management</li>
 <li>Performance, uptime and error monitoring</li>
 <li>Embeddable functionality, e.g. chat, video, etc.</li>
 <li>Authentication</li>
 <li>Integrating into third-party services and platforms by either implementing their API's or building embedded extensions</li>
 <li>Augmenting the functionality of existing websites</li>
</ul>

Third-Party APIs

Experience building with, and helping companies migrate away from a variety of Firebase products, including but not limited to AppEngine, Functions, Authentication, Storage, Dynamic Links, Cloud Messaging, Realtime Database, Firestore, Analytics, App Distribution, Crashlytics, and setting up local emulation of Firebase infrastructure to speed up development.

Firebase

Front-end Development

I do back-end development in a variety of programming languages and frameworks depending on the task and team.
These days I primarily do back-end development with Ruby on Rails, Node.js, Kotlin, Java and Go lang, but have also developed back-end applications using Rust, PHP, and Python.
I started my career doing back-end development with PHP and MySQL, building out dynamic custom websites backed by <a href="https://tinaciousdesign.com/services/content-management-system-cms" target="_blank" rel="noopener">content management systems</a> that are easy for non-technical users to maintain with WordPress, Drupal and ProcessWire. Then, I shifted to doing back-end development with Node.js, and Ruby on Rails with PostGres. I also have experience doing back-end development in Java and Kotlin.
When appropriate, I reach for no-SQL databases/datastores like MongoDB, and have worked with Firebase datastores like Firestore and Firebase Realtime Database.
Another great tool I reach for is Redis to improve networking performance via caching, as well as create real-time user experiences with Redis streams and Pub/Sub.
For my personal back-end APIs, and productivity tools that require back-end development, I tend to develop these tools using Ruby on Rails, Node.js with TypeScript, and the Kotlin and Go lang programming languages, and usually tend to prefer SQL databases like PostGres, SQLite, and MySQL.
I often use test-driven development when doing back-end development to help speed up the implementation and increase confidence in the code.
I have done a variety of back-end development work:
<ul>
 <li>Building back-end APIs backed by databases with complex relationships, both SQL and no-SQL databases/datastores</li>
 <li>Real-time back-ends with web sockets, server-sent events (SSE), and gRPC</li>
 <li>Geolocation search</li>
 <li>Web hooks</li>
 <li>Periodic workers and CRON jobs</li>
 <li>Building GraphQL APIs</li>
 <li>Building server-side SDKs for various programming languages</li>
 <li>Implementing third-party APIs to speed up implementations</li>
 <li>Unit testing business logic, request lifecycles, and database interactions</li>
 <li>Integration testing deployed services</li>
 <li>Creating CI/CD pipelines and workflows to test and automatically deploy my back-end services to various Infrastructure-as-a-Service platforms. I've worked with a variety of platforms including but not limited to Circle CI, Github Actions, Gitlab Pipelines, Bitbucket Pipelines, Heroku, Google Cloud Platform (GCP), Amazon Web Services (AWS)</li>
 <li>Building for serverless in a variety of programming languages including but not limited to JavaScript, TypeScript, Java, and Rust, on a variety of platforms including Vercel, Cloudflare Workers, Google Cloud Platform (GCP), Amazon Web Services (AWS)</li>
</ul>
I build greenfield projects from scratch to help new companies launch their MVPs, as well as work with established and mature companies, codebases, and larger teams to build new features, fix complicated bugs, optimize the performance of their existing and slow back-ends, and help overcome years of tech debt.&nbsp;
Sometimes I inherit complex projects that the previous team failed to deliver, which sometimes require me to redesign parts of the system and rewrite key parts of the existing back-ends.
I have worked with many other programming languages and frameworks, not just the ones listed above. Read more about the <a href="https://tinaciousdesign.com/services/technologies">technologies I've worked with</a>.
I can augment your existing team to provide that&nbsp;back-end development expertise&nbsp;and guidance your team may be lacking, or work alongside your team of experts the way they prefer to work to help them power through a big project. I'm a full stack web and mobile developer based in Canada, and I work with teams locally and internationally. If you'd like to work together, feel free to <a href="https://tinaciousdesign.com/contact">contact me</a>.

I do back-end development and develop REST API's, micro-services, and GraphQL API's backed by databases.
I tend to primarily do back-end development in Ruby on Rails, Node.js, Kotlin, Java, and Go lang.
For databases I work with both SQL and no-SQL databases, including PostGres, MySQL, SQLite, MongoDB, and Redis.

I have extensive experience in Kotlin and Java, building native Android apps in both languages, as well as backend web API's. The capacity at which I work with Kotlin and Java at companies includes either Tech Lead roles, or as the resident Java/Kotlin expert on smaller teams.
<ul>
 <li>REST API development</li>
 <li>Web socket servers</li>
 <li>Building complex SDK's in Java</li>
 <li>Distributing libraries over Git using Jitpack</li>
 <li>gRPC on Android</li>
 <li>Unit testing and integration testing in Kotlin using JUnit and JUnit Jupiter, including test-driven development (TDD) where appropriate</li>
 <li>Frameworks I work with include Spring Boot and Ktor, depending on the project</li>
 <li>Using profiling tools to test for memory leaks</li>
</ul>
Experience working with the Kotlin programming language in a variety of contexts including backend development with Ktor as well as Kotlin Multiplatform Mobile.
<ul>
 <li>Building real-time web and mobile applications with server and client web sockets</li>
 <li>Building backend REST API's</li>
 <li>Setting up and working with dependency injection frameworks including Dagger2, Hilt, Koin, and Kodein</li>
 <li>Setting up and working with ORM's and similar database libraries like Room database, SQLDelight, and Exposed</li>
 <li>Unit testing in Kotlin, including with coroutines, JUnit (4 &amp; 5), Mockk</li>
 <li>Networking with gRPC, Protobuf, Retrofit, OkHttp, and Ktor HttpClient (with CIO and OkHttp engines)</li>
 <li>Leveraging Kotlin to generate TypeScript code</li>
 <li>Building productivity tools and chatbots to support interactivity for live-streaming content creators</li>
 <li>Using profiling tools to test for memory leaks</li>
</ul>

Kotlin and Java

I have experience building CLI tools and web apps in Rust with various libraries:
<ul>
 <li>Implementing OAuth with various providers</li>
 <li>Web apps with Rocket and Axum</li>
 <li>Working with SQL using SQLx</li>
 <li>Unit testing</li>
 <li>Working with JSON with serde_json</li>
 <li>Building for WASM targets</li>
 <li>Building CLI apps with libraries like ratatui and clap</li>
</ul>

Rust

Experience working with Redis for a variety of applications including caching, key-value storage, asynchronous worker tasks, as well as building event-driven, real-time applications.
<ul>
 <li>Using Redis in Ruby on Rails and Node.js contexts for caching and key-value storage</li>
 <li>Building event-driven functionality using Redis Pub/Sub</li>
 <li>Building real-time functionality using Redis Streams</li>
</ul>

Redis

Using MongoDB for storing data that needs more flexibility with regards to its schema.
Leveraging MongoDB geospatial queries to power location-related services in API's I build, including "near me within X kilometres" functionality.

MongoDB

Experience in Drupal, WordPress, ProcessWire, and vanilla PHP to build websites for clients and internal tooling.
<ul>
 <li>Theme development in Drupal, WordPress and CakePHP</li>
 <li>Using ProcessWire to quickly build content management system (CMS) websites that require more advanced content modelling for a variety of clients</li>
 <li>Plugin development in WordPress</li>
 <li>Developing custom themes for WordPress including custom post types and custom fields to allow WordPress to be used like a CMS</li>
</ul>

I have extensive experience working with a variety of hosting providers including but not limited to Amazon Web Services, Google Cloud Platform, Firebase, Heroku, Digital Ocean, shared hosting providers, Vercel, and Netlify.
I can work with infrastructure-as-a-service providers as well as provision bare metal servers, if needed.
I also automate deployment processes for this infrastructure.
I can work with Docker as a consumer as well as to Dockerize applications (Node.js, Ruby on Rails).
I also have experience using Vagrant to enable local development for LAMP stack environments.
Limited experience with Ansible.

Web Hosting & Infrastructure

Back-end Development

Since the mid 2010s I've been doing mobile development in various technologies including native Android, native iOS, Cordova/PhoneGap, Ionic, Kotlin Multiplatform, and React Native. The apps I have helped build are in the hands of millions of users worldwide.
I started my career in mobile web development working on <a href="https://tinaciousdesign.com/portfolio/bitstrips" target="_blank" rel="noopener">the Bitstrips app</a>, and then native mobile app development for Android in Java and iOS in Objective-C when working on <a href="https://tinaciousdesign.com/portfolio/bitmoji" target="_blank" rel="noopener">the Bitmoji app</a>. Since then I've learned the more modern programming languages Swift (iOS) and Kotlin (Android) to help speed up native mobile app development.
As a full stack web and mobile app developer, I have the expertise to implement the features every mobile app needs end-to-end:
<ul>
 <li>the data for your app and how to build API endpoints to make it easy for mobile apps to send and receive data</li>
 <li>push notifications on both iOS and Android, including notification channels for Android</li>
 <li>deep link support on both iOS and Android</li>
 <li>thorough understanding of the design guidelines for both iOS and Android</li>
 <li>localization, which often requires translating content on iOS, Android, as well as on the back-end for content that's pushed from the back-end to the devices</li>
</ul>
As well as building for native mobile, I also work with cross-platform technologies like Kotlin Multiplatform Mobile (KMM), Cordova/PhoneGap, Ionic, and React Native (including building React Native plugins), and have some experience with Flutter.
I have developed various things on mobile:
<ul>
 <li>custom keyboards and other app extensions and widgets</li>
 <li>real-time experiences with web sockets, server-sent events, and gRPC</li>
 <li>audio and video recording and playback</li>
 <li>building apps that work with a user's contacts</li>
 <li>text message-based authentication to allow users to login with their mobile phone number</li>
 <li>social media service authentication (login and signup)</li>
 <li>in-app purchases</li>
 <li>working with files for exporting and importing data</li>
 <li>performing periodic worker tasks in the background</li>
 <li>building features that leverage the user's location to help them locate content near them</li>
 <li>managing data on-device with databases like CoreData (iOS) and Room database (Android)</li>
</ul>
For iOS specifically:
<ul>
 <li>working in Objective-C and Swift</li>
 <li>working with both UIKit and Swift UI</li>
 <li>building a custom keyboard extension</li>
 <li>building an Apple Watch extension</li>
 <li>universal links support (deep links)</li>
</ul>
For Android specifically:
<ul>
 <li>working in Java and Kotlin</li>
 <li>working primarily in XML views Android, with some experience with full Jetpack Compose apps, as well as hybrid XML-Compose apps</li>
 <li>extensive experience with Android's implicit intent system and leveraging it to build faster and require less permissions from the user</li>
 <li>leveraging Android's notification channels to allow users to customize which notifications they'd like to receive</li>
 <li>deep understanding of concurrency in Android apps in both Java and Kotlin</li>
 <li>building widgets/quick settings tiles for Android</li>
 <li>architecting an Android app to follow established patterns including MVVM architecture and making it easier to unit test, dependency injection, and improving type safety when navigating and accessing views to prevent runtime crashes</li>
</ul>
Read more about <a href="https://tinaciousdesign.com/services/technologies#android" target="_blank" rel="noopener">my Android experience</a>.
Some example mobile projects I've worked on:
<ul>
 <li>Native mobile:&nbsp;
 <ul>
 <li><a href="https://tinaciousdesign.com/portfolio/bitmoji" target="_blank" rel="noopener">Bitmoji</a> where I was part of the small founding dev team building features for both the native iOS and Android apps</li>
 <li>Canned Replies productivity tool for <a href="https://tinaciousdesign.com/portfolio/canned-replies-android" target="_blank" rel="noopener">Android</a> (there's also a <a href="https://tinaciousdesign.com/portfolio/canned-replies-chrome-extension" target="_blank" rel="noopener">Chrome extension</a>)</li>
 <li><a href="https://tinaciousdesign.com/portfolio/mobile-app-tattoo-artists-piercers-android" target="_blank" rel="noopener">Mobile app for tattoo artists</a> where I did the back-end and most of the native Android app development, and oversaw the native iOS development</li>
 </ul>
 </li>
 <li>Cross-platform:
 <ul>
 <li>React Native and mobile web:
 <ul>
 <li><a href="https://tinaciousdesign.com/portfolio/jewelry-curation-tool-body-piercings" target="_blank" rel="noopener">Jewelry curation tool for body piercers</a></li>
 </ul>
 </li>
 <li>Mobile web using the native mobile JavaScript APIs:
 <ul>
 <li>The avatar builder in the&nbsp;<a href="https://tinaciousdesign.com/portfolio/bitmoji" target="_blank" rel="noopener">Bitmoji</a> app</li>
 </ul>
 </li>
 <li>Cordova/PhoneGap: <a href="https://tinaciousdesign.com/portfolio/bitstrips" target="_blank" rel="noopener">Bitstrips</a></li>
 </ul>
 </li>
</ul>
I can augment your existing team to provide that&nbsp;mobile app development expertise&nbsp;and guidance your team may be lacking, or work alongside your team of experts the way they prefer to work to help them power through a big project. I'm a full stack web and mobile developer based in Canada, with significant experience in iOS and expertise in Android, and I work with teams locally and internationally to help them write software. If you'd like to work together, <a href="https://tinaciousdesign.com/contact">contact me</a>.

I build native and cross-platform mobile apps in various technologies.
As a full stack web and mobile developer, I have the expertise to implement the features every mobile app needs end-to-end.
Whether your goal is to ship a prototype quickly, or you've already validated your idea and need to build something performant with a strong foundation, I can help.
Whether you prefer to build separate native applications, or leverage cross-platform frameworks to build once and deploy everywhere, I can help.

Experience working with React Native to build new apps, maintain existing apps, and migrate away from React Native.
<ul>
 <li>Improving legacy, sluggish, buggy React Native code bases</li>
 <li>Adding unit testing to legacy React Native code bases to improve code quality</li>
 <li>Building custom plugins in React Native to support better functionality on Android</li>
 <li>Helping teams incrementally migrate away from React Native</li>
 <li>Using Storybook for the quick development of UI components</li>
 <li>Setting up Redux and Redux Dev Tooling to support debugging state management in React Native</li>
 <li>Implementing Firebase API's including Realtime Database, Firestore, Firebase Authentication</li>
</ul>
As React Native is a framework that is built on top of React, all React skills apply to React Native.

React Native

Realm database (now known as Atlas Device SDK), is a cross-platform object database that is used on Android and iOS, among other platforms.
I have experience working with Realm on Android.

Realm database (Atlas Device SDK)

Mobile Development

As a tech lead, I like to set my team up for success by setting up a solid codebase and all the automated processes the team needs from the start so they can focus on building.
I meet with stakeholders to gather a thorough understanding of the stakeholders' goals and priorities, which helps influence which technologies to choose.
After choosing appropriate technologies for the job, I set up the codebases with CI/CD pipelines for testing and deployments, as well as linting and other automated tasks. This allows me and my team to focus on building rather than chore-related tasks.
To support my team I like to write extensive documentation that is easy to follow including style guides and the occasional instructional tutorial when appropriate. I like to provide style guides for all languages used, code examples, and design systems to support developers of all experience levels. I also make myself available to team members for mentorship including doing pair programming with peers and juniors, and running workshops to grow the team.
I like to communicate transparently and frequently in Slack, documentation, and meetings so that stakeholders are never left in the dark with regards to status on a project.
When it comes to building teams, I try to source as fairly as possible and include applications from developers from both traditional and non-traditional backgrounds, as well as use structure assessment practices to fairly assess candidates abilities rather than go by gut feeling which can lead to bias in the interview process.
I prioritize building the right organization framework and processes up front to create a supportive, healthy environment so teams can do their best work. My primary goals are to increase productivity so that team members feel empowered to contribute code and opinions, have a sense of ownership, and are motivated to ship quickly, and avoid scenarios that can introduce conflict and leave engineers feeling unmotivated.
When building teams, I put a strong emphasis on Diversity, Equity and Inclusion, and prefer working with companies with the same values, or at least those that demonstrate that they're willing to grow in that area.
If this sounds like a good fit for your engineering organization and you think you may like to work with me, please feel free to <a href="https://tinaciousdesign.com/contact">contact me</a>.

As a technical leader, I aim to set up full-stack web and mobile software development teams for success.
I believe the right tools and automated processes in place, a healthy risk-free environment where devs can communicate and disagree, transparent communication, documentation, and a diverse group of individuals on the team to get a diverse set of opinions and influences all help build successful teams.

Technical Leadership

As a full stack web and mobile developer, I have been designing and developing software for web and mobile since the early and mid 2010s.
I design systems based on your team's short-term and long-term goals.
I work with new companies on a limited budget to design software to help them get to market as soon as possible.&nbsp;
I work with mature companies to help them redesign and rewrite their existing software, and help them solve problems where their current solution falls short, as well as migrate from expensive technologies that made sense to choose at the start but don't scale financially with the current load on their systems.
Back-end programming languages, web technologies, single page apps or server-rendered apps, micro-services or monoliths, serverless or servers, SQL or no-SQL, native desktop or mobile apps or cross-platform solutions&mdash;there are many decisions to make when it comes to the system design of a product. There is no single right answer, and no silver bullet programming language or framework. I help you design a system based on your unique situation, what's important to you, and your priorities and goals.
I can augment your existing team to provide that&nbsp;system design expertise&nbsp;and guidance your team may be lacking, or work alongside your team of experts the way they prefer to work to help them power through a big project. I'm a full stack web and mobile developer based in Canada, and I work with teams locally and internationally to help them write software. If you'd like to work together, feel free to <a href="https://tinaciousdesign.com/contact">contact me</a>.

How a software system is designed will have an impact on how well it can be maintained and built on, and how fast your team can ship. Let me help you build a solid foundation for your software.
Maybe you've asked yourself: Which back-end language or framework should I use? Should I do native apps or go cross-platform? Should I use an expensive off-the-shelf product or build my own? What kind of database should I use?&nbsp;
If you&rsquo;re looking to develop a product, I&rsquo;m here to help you make the right technical decisions for you from start to finish.

Software System Design

I build websites and apps that users can manage themselves.
I enable my clients to manage the content on the websites and mobile apps I build them by leveraging open-source content management systems like Strapi, WordPress, Drupal, and ProcessWire.
I also work with cloud-based and headless content management systems like Dato CMS, Contentful, Airtable, and Strapi, among others, as well as no-code and low-code platforms like Retool.
I have been building with content management systems since the early 2000s and use CMS technologies to manage the content of my own websites. All of the content on this website is managed by a content management system.
I also build custom plugins to enhance functionality when the existing plugin ecosystem doesn't have something that can solve the problem.
A content management system solution might make sense for you in the following cases:
<ul>
 <li>You are a graphic designer or artist and would like a custom-built website to showcase your work</li>
 <li>You are a restaurant owner and would like a website that you can update yourself when you need to change the menus, hours of operation, contact information, image gallery, or other information on the site to showcase your restaurant</li>
 <li>You have a decent amount of structured data that you'd like to display for web or mobile</li>
 <li>You want to manage a variety of content and serve it as a REST API for your web and mobile apps to consume</li>
 <li>You need non-developers at your company to be able to create, update, and manage content on your website without relying on your dev team</li>
 <li>You want to build tools to help you run your business, e.g. accounting or invoicing software, etc.</li>
</ul>
I can augment your existing team to provide that&nbsp;content management system expertise&nbsp;and guidance your team may be lacking, or work alongside your team of experts the way they prefer to work to help them power through a big project. I'm a full stack web and mobile developer based in Canada, and I work with teams locally and internationally. If you'd like to work together, feel free to <a href="https://tinaciousdesign.com/contact">contact me</a>.

<div class="services-list__item mb-5">
 <div class="services-list__item-text">
 <div class="rendered-page-content">
 I build websites that are easy for clients to add to, update, and manage themselves.
 I leverage the power of community-supported systems and frameworks to empower my clients to manage their own content. I also work with cloud-based platforms for faster development.
 I also build custom tools for managing content when appropriate.
 </div>
 </div>
</div>

ProcessWire is a great, light-weight, easy-to-use PHP-based content management system. It's lesser known than Drupal and WordPress and definitely doesn't get the recognition it deserves, but it's a great alternative to these technologies. In my opinion, it's easier to use than both, and offers more flexibility than WordPress for custom content types, and is generally much simpler to theme for compared to Drupal. ProcessWire is quite mature, having been around for almost 2 decades, and is a great choice for my clients who want to update the content on their website.

ProcessWire

Drupal is a PHP-based content management system that is often leveraged for larger content sites. I have expertise in Drupal theme development.

Drupal

WordPress is a powerful blogging engine that can also be used as a content management system for server-rendered apps, as well as a headless CMS for more modern front-ends like staticallyl generated websites (SSG) with technologies like Next.js and Vue.js.

WordPress

Strapi is a Node.js-based headless content management system. It has a slick admin dashboard that is quick and enjoyable to use as a content creator.
Strapi has a well-documented plugin development API, making it easier for developers to inject UI elements into the default CMS to extend functionality, for example, generating PDF's from content.
I use Strapi to build content-focused websites and internal tools, including my own invoice management software.
One of the benefits to Strapi over more traditional PHP-based content management systems is that it can be hosted on ephemeral infrastructure-as-a-service platforms.

Strapi

Sometimes it makes sense to use a low-code/no-code platform to build internal tools. These can be cloud-based or self-hosted.
Low-code tools help you save development time and are great for a variety of tasks:
<ul>
 <li>analytics dashboards</li>
 <li>performing content moderation for user-generated content</li>
 <li>helping your users manage their accounts</li>
 <li>other important tasks where you need a real human involved</li>
</ul>
Low-code tools I primarily work with include Metabase and Retool, but I'd be happy to help out if your team has a different preferred option.

Low Code tools

Content Management

Since the early 2010s I've been developing websites with a focus on accessibility. Early in my careeer, I worked on projects for not-for-profits that were government funded, and one of the requirements of receiving the funding was to ensure that the websites passed the strict accessibility requirements set out by the provincial and federal governments, which at the time meant that it needed to meet the Web Content Accessibility Guidelines (WCAG 2.0) for AAA compliance, the Accessibility for Ontarians with Disabilities Act (AODA), and had to be compatible with Internet Explorer 6.
There are various ways to support accessibility, including graceful degradation and progressive enhancement, as well as providing alternative more accessible formats for content.
While <a href="https://tinaciousdesign.com/portfolio/tangerine-bank-redesign" target="_blank" rel="noopener">financial service</a> and <a href="https://tinaciousdesign.com/portfolio/sheridan-college-redesign" target="_blank" rel="noopener">higher-education</a> companies have stricter accessibility requirements, caring about accessibility can help all companies make their software easier to use and their content easier to consume.
If your business has a requirement to conform to strict accessibility standards, or you just want to make your software and content accessible to as many people as possible, I can help with that. I can augment your existing team to provide that accessibility expertise and guidance your team may be lacking, or work alongside your team of experts the way they prefer to work to help them power through a big project.
<a href="https://tinaciousdesign.com/contact">Contact me</a> if you're interested in working together.

I make websites and mobile apps for people regardless of technology and ability, and can create accessible, enjoyable digital experiences for users of all abilities.
I can provide accessibility consulting and development as per the Web Content Accessibility Guidelines and other guidelines.
Early in my career I worked on projects with strict accessibility requirements, and since then accessibility has always been top of mind for me.

Accessibility

A local tattoo shop in Canada hired me as their Tech Lead and primary developer for a new mobile app project. The app is geared towards tattoo artists and other body modification service providers (piercers, brow artists, scalp micro-pigmentation artists, etc.) The goal of the app is to help service providers and clients find each other. The app was designed by their in-house designer and my role was technical leadership and&nbsp;full stack development&nbsp;on the backend, the website, and&nbsp;Android.
Features of the Android app include:
<ul>
 <li>Ability for service providers to&nbsp;post a service listing&nbsp;(opening). This functionality is similar to Kijiji or Craigslist but for tattoo artists and other body modification service providers</li>
 <li>Allows service providers to create&nbsp;posts with multiple images. This functionality is similar to Instagram.</li>
 <li>Ability for clients to&nbsp;find artists by service and location&nbsp;on the Find tab. Clients can provide their location or choose from suggested locations to find service providers near them or in a supported city</li>
 <li>Ability for clients to follow artists via the &ldquo;VIP&rdquo; feature.</li>
 <li>Ability for artists to&nbsp;send broadcast announcement messages&nbsp;to all of their followers. This feature was a rewrite of a feature that another developer took several months to deliver but hadn&rsquo;t quite worked as desired. At the time of writing this post, it is not live yet.</li>
 <li>Full stack features to support an&nbsp;invite-only artist onboarding flow, allowing service providers to only be allowed to sign up if they receive a one-time use link by another service provider on the platform. This exclusivity feature was specifically requested by the client to limit access to the app.</li>
 <li>Push notification configuration&nbsp;allows Android users to customize which notification categories they&rsquo;d like to receive notifications for, if any.</li>
 <li>Allow users to customize their profiles including profile image, name, username, profile details, and pronouns</li>
 <li>Notification feed&nbsp;for clients and artists to stay in the loop with activity in the app (broadcasts, new posts, listings, etc.)</li>
</ul>
Technical features:
<ul>
 <li>Location-aware search queries&nbsp;to allow resources to be indexed by location and queried based on distance from a provided location, e.g. 50 km away. This allows users to choose a city and find service providers within a specific range of that city.</li>
 <li>Deep linking&nbsp;functionality on Android (verified app links) and iOS (universal links). This was implemented to support linking into posts, listings, and to support the exclusive invite-only artist onboarding flow.</li>
 <li>Push notifications&nbsp;functionality to alert artists when they have a new follower, as well as to alert followers when an artist they follow has created a new post, a new listing, or sends a broadcast message.</li>
 <li>Google Maps Platform&nbsp;implementation to support auto-complete lookup and rendering of maps</li>
</ul>
As the Technical Lead of the project, I owned the development of and was the&nbsp;primary contributor on the backend API&rsquo;s,&nbsp;native Android&nbsp;app,&nbsp;website, and oversaw the development of the iOS app. I led a team of approximately 2-3 developers. I worked with the client to architect the solutions from a full stack perspective to find the best solution from a wide angle.
<ul>
 <li>System Design&nbsp;from a full stack perspective.</li>
 <li>Implemented&nbsp;CI/CD workflows&nbsp;(Continuous Integration, Continuous Deployment) to support automated testing and deployment for both the Android app, the backend services, and the website
 <ul>
 <li>Automated deployments for the backend services and website</li>
 <li>Automated deployments to Firebase App Distribution on Android</li>
 <li>Semi-automated deployments to the Google Play Store including automated code signing</li>
 </ul>
 </li>
 <li>Documentation and best practices: As the Tech Lead, I wrote best practices docs to support the other developers on the team. Documentation includes both manually- and technically-generated diagrams to help onboard developers.</li>
 <li>I created&nbsp;code generation&nbsp;tooling to remove the need to write boilerplate, and encourage consistent patterns.</li>
 <li>Overseeing the implementation of the iOS rewrite in Swift UI</li>
 <li>Service&nbsp;uptime monitoring&nbsp;to ensure production apps stay up and the team could respond to incidents</li>
 <li>Hiring developers to implement chat, iOS</li>
</ul>
I implemented all of the above-mentioned features myself, usually as the sole contributor. There are other features in the app that I did not develop: chat and the old broadcast functionality that leveraged chat, written by another developer that implemented a third-party service. I needed to rewrite the latter as it was not something that was suitable for the long-term.
Technologies I used for this project:
<ul>
 <li>Ruby on Rails</li>
 <li>Node.js</li>
 <li>native Android with Kotlin</li>
 <li>Postgres</li>
 <li>MongoDB</li>
 <li>Vue.js</li>
 <li>various API&rsquo;s</li>
</ul>
When I left the project, the app on the Google Play Store had a 5-star average review.
Note: Featured artist lauren_epsom is a fabricated artist profile (think lorem ipsum). User, listing and post data is fabricated or uses image attribution. Images from&nbsp;<a href="https://unsplash.com/s/photos/tattoos" target="_blank" rel="noopener">Unsplash</a>&nbsp;by photographers Taylor Harding, Daniel Gomez, Allef Vinicius, Annie Spratt, Clem Onojeghuo, Dylan Sauerwein, Jasmin Chew, JJ Jordan, Nathalie Stimpfl, Steven Erixon, Stories Ink, Seyi Ariyo. Images from&nbsp;<a href="https://www.pexels.com/" target="_blank" rel="noopener">Pexels</a>&nbsp;by photographers Prime Cinematics, Chris F.

3 screenshots of the native Android app I built. The first screenshot shows a tattoo artist's profile with a circular profile image, 3 openings, number of followers, and buttons for managing their profile. It also includes pictures of tattooed clients. The 2nd screenshot has a picture of an ad (opening) with a title, description, date, and a featured image of a woman in a yellow cami tank top, with coloured sleeve tattoos on both arms, adjusting her sunglasses. The 3rd screenshot is a 2 by 4 grid of square images, all of people with tattoos. Images are mostly of women.

Mobile app for Tattoo Artists to find clients

Screenshot of a service listing in the app. Full-width image at the top shows the left side profile of a woman with brown skin and a sleeve tattoo, wearing a sleeveless shirt. She has long wavy dark hair and is wearing rings on her middle and ring fingers. Below the header image shows the fabricated artist lauren_epsom who has red hair and sunglasses. The title of the listing "Full sleeve or nah." The date is August 31 at 12pm. Post body: I have a last minute opening. Come get that tattoo you've been thinking about. Price $1337. Time: 4 hours.

Tattoo artists can create listings to advertise their openings for specific dates

Front view of a white woman with sleeve tattoos, blonde hair, dark reddish brown lipstick, and a ring septum piercing. Woman is from a stock photo image by Clem Onojeguo. The image takes up the top half of the screen. A purple heart is filled showing that the user liked the photo. Artist's username is lauren_epsom, a fabricated artist.

Client users can view, like, and save content published by artists

Screenshot of the post view. The post image features the back of the head of a white male model with a short haircut who has tattoos on the back of his head and neck. He has his hands touching the back of his head and you can see his tattoos and rings on his hands. Stock photo by Steven Erixon

Client users can view posts that artists create

Screenshot of an artist's profile which includes a 2 by 4 grid of square images. Images are of people with tattoos. There's a purple floating action button with a plus symbol on it, allowing the artist to add more content.

Artists can feature their work on their profile

Artists can feature their artwork on their profiles

Posts in a layout very similar to Instagram with a heart and ribbon icon for liking and saving. Posts are from fabricated tattoo artist lauren_epsom.

Feed view of a client user's feed

Service listing view. Top section has an image of the artist's work. Below the image includes listing details like the artist's username, their service, a catchy title, the date, and other information

Artists can post ads to try to fill a spot in their calendar

Screen for the artist's profile view including their full name, username, how many listings they have, their followers, and whether they're taking new clients. Also includes bio and booking preferences, as well as post images in a 2-up grid.

Artists can manage their profile and whether they're taking new clients or not

Screen with a bottom tab navigation on the tab that says Openings which shows a feed of listings with their title and date

The Openings screen allows users to look for artists providing the service they're looking for.

Artist highlight card shows the artist's username, profile image, and the 3 latest images they posted, and a button to get notified about their content

Users can browse for artists and get notified when they post content

Users can see a notification feed of all information relevant to them including updates by their favourite artists

Screenshot of a the website in mobile Safari which shows a listing title, date, location and service. The bottom section includes links to the app store listings for Android and iOS.

The website supports artist profiles and listings via deep links including deferred deep links, allowing new users to download the app and see the content artists share

Junipurr Jewelry, a luxury body jewelry wholesale company that works directly with piercers, approached me to develop an ear piercing jewelry curation tool that they can embed in their existing Shopify website in their existing mobile apps on Android and iOS.
Body piercers would use Junipurr&rsquo;s new ear curation tool with their clients to help them visualize what new jewelry can look like alongside their existing pieces.
<h3>Features</h3>
The following features are available in the app:
<ul>
 <li>A piercer can&nbsp;take a picture&nbsp;of their client&rsquo;s ear with existing jewelry and upload it to the app. They can also use a&nbsp;picture from their photo gallery.</li>
 <li>The client and piercer can choose from a catalogue of jewelry available in the app and see what it would look alongside their existing pieces</li>
 <li>Users can&nbsp;filter&nbsp;jewelry by material (yellow gold, rose gold, white gold), and jewelry type (ring, studs, studs with gems, etc.)</li>
 <li>Users can&nbsp;drag and drop&nbsp;jewelry on the canvas, and&nbsp;resize&nbsp;as needed</li>
 <li>Curated pieces can be added to the piercer&rsquo;s&nbsp;Shopify&nbsp;cart</li>
 <li>Users can&nbsp;download&nbsp;and&nbsp;share&nbsp;the completed image curation to their Android and iOS devices</li>
 <li>The curation tool is&nbsp;white labeled&nbsp;so it can be themed with a custom brand to support multiple businesses that Junipurr works with</li>
</ul>
<h3>Tech Stack &amp; Challenges</h3>
The curation tool is built in JavaScript/TypeScript using React. It uses HTML5 Canvas. It was built as a standalone tool that would implement an interface that the hosting Shopify site would provide.
The jewelry curation tool needed to be embedded in their Shopify website which would be accessed via their existing mobile apps:
<ul>
 <li>a&nbsp;React Native&nbsp;app for Android which implemented a community&nbsp;web view&nbsp;plugin for the&nbsp;Shopify&nbsp;store</li>
 <li>a native iOS app written in Objective-C which implemented a native Safari web view for the Shopify store</li>
</ul>
This unique stack added a few interesting challenges with regards to interacting with the native layer on both Android and iOS from an HTML5 canvas in a web view in a native mobile app, and in the case of Android, via a web view via React Native.
In order to support exporting an image to the native devices via a JavaScript app in a web view in React Native for Android and support all of the Android versions that Junipurr supported, I needed to develop a&nbsp;React Native plugin&nbsp;that supports exporting images as a base64 string:&nbsp;<a href="https://www.npmjs.com/package/react-native-save-base-sixty-four">react-native-save-base-sixty-four</a>&nbsp;&ndash; This plugin also has full support for iOS.
This standalone JavaScript application interacts with the native app layers via a web view (and in the case of Android, React Native) to trigger native functionality like alerts, opening native share sheets, saving images to gallery, getting images from the gallery, getting images from the camera, and more.
<h3>Download</h3>
The curation tool can be found in the Create tab in the Junipurr Jewelry apps on Android and iOS.

2 screenshots on a gold and black background with the Junipurr logo in the bottom right. First screenshot shows a black androgynous woman with the following piercings in her right ear: industrial helix, tragus, 2 rings and 1 stud in her lobe. Second screenshot is a horizontally split view, where the top part is a 2D rendering of a right ear: dark brown skin, 2 jeweled studs in the lobe. The bottom part is the jewelry curation section with rose gold studs and rings.

Jewelry curation app for body piercing company Junipurr Jewelry. Tapping the jewelry in the bottom section allows you to add the piece to the rendering or a picture of your own body.

Users can upload pictures of themselves to see the new pieces alongside their existing jewelry.

Onboarding screen shows a catalogue of jewelry that a user can swipe through

Onboarding screen demonstrates how to curate jewelry

Piercers and clients can curate jewelry on a canvas of the client's existing ear and jewelry pieces

Users can filter jewelry by category, e.g. studs, rings, studs with gems, etc.

Jewelry can be dragged, resized, deleted and rotated on the canvas

Piercers can add the curated jewelry to their Shopify carts and proceed to check out as normal on Shopify

Jewelry curation tool for body piercings

👩🏻&zwj;🎨 Colour Tools makes it easier for web and mobile software developers to work with colours:
<ul>
<li>Pick colours and create colour palettes, either using the plugin's colour picker, or from existing colours in your project</li>
<li>Generate shades from any colour, choosing one ad-hoc or from existing styles in your project</li>
<li>Copy code snippets for software development on web and Android, making it easier for you to add colours to CSS (including preprocessors), and Android (including XML and Jetpack Compose)</li>
</ul>
Various technologies were used for this project:
<ul>
<li><a href="https://static.figma.com/api/figma-extension-api-0.0.1.css">Figma plugin UI CSS</a></li>
<li><a href="https://github.com/vuejs/petite-vue">PetiteVue</a> for the view layer</li>
<li>Various utility functions ported over from the original <a href="https://tinaciousdesign.com/portfolio/colour-tools-shades-generator">Colour Tools</a>&nbsp;app</li>
</ul>
This plugin was developed and published in less than 2 days. The goal of the project was to launch the tool as quickly as possible in Figma, so the tools chosen were to optimize speed of development rather than a more <a href="https://github.com/tinacious/colour-tools-figma/issues/9">ideal</a> workflow for developers.
Some useful links:
<ul>
<li><a href="https://www.figma.com/community/plugin/1420155850496120693/colour-tools" target="_blank" rel="noopener">Colour Tools on Figma Community</a>: View or run the plugin in your Figma project</li>
<li><a href="https://github.com/tinacious/colour-tools-figma" target="_blank" rel="noopener">colour-tools-figma source code on Github</a>: View the source or create an issue for feature requests or bugs, or help out with some of the <a href="https://github.com/tinacious/colour-tools-figma/issues">open issues</a></li>
</ul>

Figma plugin for working with colours

Colour Tools for Figma generates Local Styles, color variables, and sample swatches for your picked colours and generated shades

Pick a single colour and generate as many shades as you want. These are created as local styles and color variables.

Curate colours in the extension and when you're ready, generate local styles and colour variables

Copy code snippets for software development on web and Android, making it easier for you to add colours to CSS (including preprocessors), and Android (including XML and Jetpack Compose) (showing Android XML and Jetpack Compose)

Copy code snippets for software development on web and Android, making it easier for you to add colours to CSS (including preprocessors), and Android (including XML and Jetpack Compose) (showing CSS)

Figma plugin for generating colour palettes and shades

I re-designed and re-developed the new Tinacious Design website (that&rsquo;s &ldquo;tenacious&rdquo; with a Tina!) which is my personal website and software developer portfolio for my brand and freelance business. It&rsquo;s this website you&rsquo;re looking at right now!
<ul>
 <li>UI design, including logo illustration, using Figma</li>
 <li>JavaScript development using React and Next.js with TypeScript</li>
 <li>CSS with Sass (SCSS)</li>
 <li>Support for light and dark appearance modes</li>
 <li>Support for reduced motion</li>
 <li>Accessibility tested for use with keyboards, mobile screen readers (iOS, Android) and desktop screen readers (macOS VoiceOver)</li>
 <li>Static site generation to ship a site that loads as quickly as possible, and is cheap to host, while still being dynamic</li>
</ul>
In the initial 2022 build, it used WordPress as a REST API, and in 2024 it was migrated to use DatoCMS as the <a href="https://tinaciousdesign.com/services/content-management-system-cms">content management system</a>.

Landscape orientation graphic is split vertically. The left side has a dark purple and black gradient and the Tinacious Design logo, while the right side has a pink and orange gradient and the Tinacious Design logo. The Tinacious Design logo is a circle with 5 horizontal rounded rectangles offset from each other.

Tinacious Design wallpapers in dark mode and light mode

Hero banner in dark mode on desktop

Hero banner in light mode on desktop

Portfolio page on desktop in dark mode

Portfolio page on desktop in light mode

Services page outlines some services on offer. Front-end Development, Back-end Development, Mobile Development

Services page outlines some services on offer

Social media previews allows links to be optimized for sharing in messaging platforms and on social media websites

Technologies page allows users to search for a specific technology (dark mode)

Technologies page allows users to search for a specific technology (light mode)

Footer provides relevant links and contact info

Mobile menu in both light and dark modes

Portfolio page on mobile in both light and dark modes

Technologies page with search functionality in both light and dark modes

Mobile-optimized view allows for multiple ways for a user to view the featured images on mobile

Tinacious Design software developer portfolio redesign (2022)

Workout Bounty was a 1.5-day hackathon project I worked on with a small team I recruited during my time at Wealthsimple.
"Get Fit and Get Rich" 💪 Reward yourself financially for your workouts.
Workout Bounty was a third-party app that allowed you to login to the platform via Wealthsimple and add your workouts.&nbsp;
<ul>
<li>View workouts in a list view, including time spent on the workouts</li>
<li>View your workouts in a calendar view, with different colour dots based on the type of workout</li>
<li>View your workouts in a pie chart</li>
<li>Set a goal for number of workouts per week</li>
</ul>
My responsibilities were product ideation, leading the team, doing most of the key product development in React and CSS (while another front-end dev focused on auth), designing the look of the app, and overseeing the backend development in Ruby on Rails.

Workout Bounty: Get Fit and Get Rich

Workout Bounty website

Workout Bounty mobile responsive website, calendar view

Workout Bounty mobile responsive website, list vieww

Workout Bounty

As a senior developer on the Wealthsimple for Advisors team, a small team focusing on Wealthsimple's business-to-business (B2B) offering, I led the development of various features that enabled financial advisors to offer traditional advisor services while leveraging Wealthsimple's modern technology.
<ul>
<li>White labeling: I was a key player for our internal design system of themeable React components, ensuring we could build a system that supported a robust theme layer</li>
<li>Associate Role and Onboarding: This feature saves Advisors time by allowing them to invite colleagues to securely manage their clients. Advisors can invite many Associates, and Associates can support many advisors, an ideal setup for financial advisor companies. This project help set up the foundation to support additional roles.</li>
<li>Rewriting the "View as Client" feature: This feature powered both the advisor platform as well as the customer service platform. The experience was unreliable and had accumulated bugs over the years as Wealthsimple migrated from a server-rendered app to a single page app. I rewrote how we do this to solve the bugs that occurred due to the legacy implementation.</li>
</ul>
Technologies used include Ruby on Rails, Sinatra, Postgres, HTML/CSS, Angular.js, React, and TypeScript.

UI of the Wealthsimple for Advisors dashboard on desktop and mobile

Wealthsimple for Advisors

Colour Tools is a web app built with Angular 18.2 and Tailwind as a tool to help web developers and mobile developers build their design systems quickly, with a focus on colours.&nbsp;
It features colour palette management and a shades generator.
<h3>Shades Generator</h3>
Do you need 50 shades of grey but not the book or movie? This tool can help!
<ul>
<li>Generate shades from any of the colours in your colour palettes</li>
<li>Pick a random colour from which to generate shades</li>
<li>Choose any number of shades to generate</li>
<li>Generates code for a variety of design coding languages including hex, HSL, RGB, Sass (SCSS), Android XML, and Android Jetpack Compose</li>
</ul>
<h3>Colour Palettes</h3>
Create, view and copy colours from colour palettes.
<ul>
<li>Colour palettes are stored client-side in the browser in localStorage&mdash;nothing is sent to any servers</li>
<li>Copy colours from a swatch in your preferred format including hex, HSL, RGB and Jetpack Compose</li>
</ul>
The codebase is <a href="https://github.com/tinacious/colour-tools" target="_blank" rel="noopener">open-source and managed on Github</a>. If you'd like to request features or report a bug, or contribute in any way to improve the tool, feel free to create an issue.

colour-tools, a client-side web app for working with colours and shades

Shade generation in colour-tools allows you to choose a colour ad hoc using the colour picker or from your palettes and generate as many shades as you want (dark mode)

Shade generation in colour-tools allows you to choose a colour ad hoc using the colour picker or from your palettes and generate as many shades as you want (light mode)

Manage colour palettes, copy colours from palettes in any of the supported modes (hex, HSL, RGB, Android Jetpack Compose) (dark mode)

Manage colour palettes, copy colours from palettes in any of the supported modes (hex, HSL, RGB, Android Jetpack Compose) (light mode)

50 shades of grey, generated by Colour Tools

Colour tools

Rainbow JSON Viewer is a small and simple extension that makes it easier for you to read JSON in the browser.
<ul>
<li>🌈 Each level of JSON properties are a different colour to help with readability, creating a rainbow effect as you scroll</li>
<li>🌙 Automatic light and dark mode detection that uses your operating system's default</li>
<li>🪗 Show and Hide sections of JSON</li>
<li>🔗 Link support for external links and Open API schema reference links</li>
<li>📋 Copy button allows you to copy the raw JSON to your clipboard</li>
<li>🩷 Free and open-source without ads</li>
</ul>
Rainbow JSON Viewer is built with TypeScript, Svelte, Tailwind, postcss, and Vite.
<ul>
<li><a href="https://github.com/tinacious/rainbow-json-chrome" target="_blank" rel="noopener">View the source code on Github</a></li>
<li><a href="https://chromewebstore.google.com/detail/rainbow-json-viewer/iakcjimcoieocfbencfeboakepbaanlm" target="_blank" rel="noopener">Install on Chrome</a></li>
</ul>

Rainbow JSON Viewer

Rainbow JSON Viewer automatically detects your operating system's theme preference and uses it to render the JSON in light or dark themes

Rainbow JSON Viewer's dark mode is a nice, dark black and purple gradient

Rainbow JSON Viewer's light mode is a nice, light grey and purple gradient

Rainbow JSON Viewer allows you to open external links or link to other components in an OpenAPI schema definition

Rainbow JSON Viewer allows you to copy the raw JSON to your clipboard

Rainbow JSON makes JSON pretty and easier to read

I redesigned my business cards and they offer the following features:
<ul>
 <li>Full colour printing on both the front and back on premium, thick card stock</li>
 <li>Two variants for the back design</li>
</ul>
The business card is available in a virtual version, and is displayed in an interactive model viewer built with TypeScript and&nbsp;<a href="https://threejs.org/">Three.js</a>.
<ul>
 <li>The card auto-rotates on load for a few seconds to demonstrate that it&rsquo;s interactive</li>
 <li>The user can rotate the card on the X and Y axes and zoom in and out</li>
 <li>Dark and light mode toggles to display different variants of the card design</li>
 <li>Offers a QR code to visit my website</li>
</ul>

Screenshot of the Interactive 3D business card website

Interactive 3D business card

Screenshot of 3D business card viewer in the browser, displaying the front of the business card

3D business card model viewer, in dark mode

3D business card model viewer, in light mode

3D business card model viewer, in dark mode (back)

3D business card model viewer, in light mode (back)

Layers in Figma

TextDiffer&nbsp;is was a macOS desktop application available in the&nbsp;Mac App Store.&nbsp;TextDiffer&nbsp;allows you to view text diffs for code and documents.
Stay on top of changes of important documents (e.g. legal documents) by seeing exactly what&rsquo;s changed between versions.
TextDiffer&nbsp;has some great options for sharing diffs:
<ul>
 <li>Share diffs as patches (for code, JSON)</li>
 <li>Share markdown-formatted diffs where supported (for copywriting)</li>
 <li>Share diffs as rich text where supported (for copywriting)</li>
</ul>
TextDiffer&nbsp;is a great tool to use for teaching people how to code and demonstrating incremental changes.
TextDiffer&nbsp;is built in Electron and leverages native desktop API&rsquo;s like Notifications and the Touch Bar.
Note: TextDiffer is no longer available for the general public as personally maintaining this app for the public and paying the Apple Developer tax did not seem worth the cost and effort.

Screenshot of the website for TextDiffer on macOS

TextDiffer on macOS

TextDiffer has light and dark themes so you can view your text diffs the way you like

TextDiffer allows you to customize the text size and fonts you use to view your text diffs

TextDiffer allows you to view text diffs for documents

TextDiffer allows you to diff JSON

TextDiffer allows you to share diffs as patches, rich text, and Markdown (where supported)

TextDiffer integrates with the macOS Touch Bar

TextDiffer is available on the Mac App Store

TextDiffer macOS desktop app

I wanted to update the design of my resum&eacute; while leveraging more modern technologies. I opted to build my resum&eacute; using React, Next.js, and leveraging Contentful as a content management system.
The resum&eacute; is mobile-first responsive, and allows visitors to save my resum&eacute;.
It&rsquo;s built using the following technologies:
<ul>
 <li>Next.js with React in TypeScript</li>
 <li>HTML, CSS/SCSS</li>
 <li>Contentful as a back-end (CMS-as-a-service)</li>
 <li>Password protection implementing OAuth with Auth0</li>
 <li>Print-optimized view allowing users to print or save as PDF</li>
 <li>Allows users to copy a rich text version of my resum&eacute; to paste it into Word</li>
 <li>Custom modal design for feedback message dialogues</li>
</ul>
This project is a rewrite of the&nbsp;2013 version of my resum&eacute; website.

Resumé website built in React using Contentful

Desktop view of the profile and work experience section. Offers Print and Copy buttons to save the resumé.

Desktop view of the education section

Mobile view of the profile and work experience section. Offers Print and Copy buttons to save the resumé.

Mobile view of the education section

Custom modal design and development

Print-optimized view for print and PDF export

Authentication implemented with OAuth and Auth0 to only grant access to permitted individuals

Canned Replies Chrome extension allows you to save and quickly send commonly-used text snippets in GMail and everywhere else on the web.
Canned Replies implements the Inbox SDK to allow for a more refined and integrated user experience within GMail.
Users configure their text snippets on the options page. Then, in GMail, they can click the Canned Replies icon that appears in the compose window to see the available text snippets that can be inserted into the email.
Though the primary use case is GMail, Canned Replies makes text snippets available everywhere online. Using the popup from the browser bar copies the snippet to your clipboard so it can be pasted anywhere. You can also find your canned replies in the context menu on any website.
Canned Replies can be easily exported and imported into other Chrome profiles from the Options page.

Canned Replies Chrome extension

Users configure their snippets on the options page and can access them by clicking the icon in the browser bar.

Provides a refined and integrated user experience in GMail with an easy-to-access icon in the compose window.

Use the context menu to insert canned replies

Bitmoji is a native mobile application for iOS and Android that allows you to create your own personal emoji. Users can create and customize their avatar, and share them in most social media mobile applications, just like emojis. Bitmoji is one of the&nbsp;most popular, highly-rated, mobile apps on both iOS and Android&nbsp;worldwide and has received lots of celebrity attention for being a new, fun way to express yourself using emojis. Bitmoji was one of the first, and is one of the best keyboard apps for iOS.
Bitmoji averages about 8 million daily active users and is often in the top spot in the iOS App Store and the Android Google Play Store.
Bitmoji has other non-mobile platforms including the&nbsp;Slack integration, as well as the Bitmoji&nbsp;Chrome extension&nbsp;and complementary account sign-up web application, for which I was one of the top 2 developers, alongside the tech lead. The Chrome extension and sign-up web application are built&nbsp;in ReactJS., and the Slack integration is built in Node.js.
Bitmoji was one of the first apps to integrate with the new Facebook Messenger platform, and was featured at the F8 Facebook Developer conference.
I am one of the key players in the development of Bitmoji for both Android and iOS, developing responsive layouts, features, fixing bugs, and overall problem-solving. My role was primarily involved in the development of the Android app, ensuring pixel-perfect design implementation and functionality to interact with a variety of APIs.
Bitmoji offers&nbsp;in-app purchases&nbsp;on both Android and iOS so that users can get free and paid theme packs featuring their avatar.
<ul>
 <li>Native Android development in Java using Android Studio and Gradle</li>
 <li>Native iOS development in Objective-C using XCode, Rake, and Cocoapods</li>
 <li>Unit testing for Android using Robolectric, and iOS using Kiwi</li>
 <li>Integration testing to ensure the functionality of all of the APIs Bitmoji relies on</li>
 <li>Development of the Avatar Builder using ReactJS</li>
 <li>Localization of the main application and the Avatar Builder in a variety of languages</li>
 <li>Native in-app purchases SDK implementation for buying free and paid packs on both Android and iOS</li>
 <li>Working with the&nbsp;native JavaScript APIs&nbsp;for web views in a hybrid native application context</li>
 <li>Server-side development in&nbsp;Node.js, including the use of the Express.js and Hapi.js frameworks, for the development of back-end APIs including the new user registration system</li>
 <li>Apple Watch&nbsp;app prototype on a hackathon day written in Swift</li>
</ul>

The new Avatar Builder allows you to customize 2 different styles for your avatar, including the classic Bitstrips style, and the brand new Bitmoji style. You can customize your body, outfit, and facial features.

Bitmoji offers in-app purchases on both Android and iOS, allowing users to get free and paid theme packs of their avatar.

CSS

Projects that use CSS