# How we work

## Step 1 - Get in touch

We'll need to get a little more information about your project before we can give you an accurate quote, so please contact us and we'll make an appointment for a call or face-to-face meeting.

## Step 2 - Call or face to face meeting

We'll discuss your project, and explain what we can do for you. We'll also ask you a number of questions about your goals for your product or service and discuss how to use digital technology to create the types of features you'll need.

## Step 3 - Quote

After the meeting is over, we'll create a quote and email it to you for review. The quote will contain

* A detailed breakdown of the costs involved in developing, building, and launching your product or service

* A detailed timeline for development and delivery of the product or service

* The team we'll use to build and launch your product or service

* The features included in the product or service

* The regular monthly costs for hosting, support, and maintenance of the product or service

## Step 4 - Sign contract

When you're happy with the quote, we'll sign a contract and start work on your product or service.

## Step 5 - Strategy & requirements

We'll take some time to think about the strategy and requirements for the product or service. This might include a content audit of your existing website, a review of the competitive landscape, or research into the best ways to meet your goals for the product or service.

## Step 6 - Solution architecture

We'll create a solution architecture and tech stack for the product or service. This will include making decisions about the architecture of the service, and the technologies we'll use to build it. We'll also need to make decisions about the design of the product so that it meets your goals for the product or service.

## Step 7 - User interface design

We'll begin work on the user interface design for the product or service. We'll work with you to agree on the user flow, layout, and structure of the product or service before we begin work on the visual design of it.

## Step 8 - Development begins!

We'll start building the product or service. We'll produce regular updates and send them to you, so you can see how we're progressing.

## Step 9 - Launch or test

When we're ready to launch the product or service, we'll work with you to plan the launch schedule and identify the goals for the launch, before we start working on the rollout.

photo-1499951360447-b19be8fe80f5.png

We start by learning what your business does and who your customers are. We end by building working with you to develop the digital-first product or service that works best for you.

How we work

photo-1470770903676-69b98201ea1c.jpeg

While brainstorming ideas for our own marketing strategy, we figured we'd compile the ultimate list of marketing & sales tactics for small businesses.

100 actionable ways to advertise a small business

![text](/uploads/1ffb9ec2a6034542a3352b4478485b43.jpg)

# QR Connect

## Background

QR Connect is an ongoing collaborative project between Penny Vergeest, her husband Mark, and Ingot (A Hamilton-based design and digital agency). It's an online platform that lets you create and track QR codes to various pages and forms thereby helping businesses manage their training and health & safety standards.

We're very excited to see where this project will go over the next few years!

![text](/uploads/9199bb39c4864bbd852637e086bf1aa7.png)

> Home page

![text](/uploads/9fc0f550be85414c94e12e01d1266480.png)

> Manage team page


![text](/uploads/1bff7c3ab19e43d685f0c34eae040efe.png)

> Project screen


![text](/uploads/68923d8ef64e46f9b303d78aa0d57adb.png)

> QR Page/Form editor


![text](/uploads/bc3b41b72f2240e084e204cb9b84c1e1.png)

> View or download a QR code for a page




Screen Shot 2021-03-15 at 8.47.28 PM.jpg

QR Connect lets businesses provide easy to access information to staff in physical environments through tracked QR Codes. This lets them digitise and monitor workplace inductions, instruction manuals, health and safety checks or any other information used in a physical workspace.

Case study: QR Connect

# 13 most important lessons of my career so far

## 🎲 Take risks
Choosing the hard way leads to an easy life, taking the easy way leads to a hard life. Also, risks are proportional to reward so they are the only way for my path to be compounding instead of linear. The more I had at stake, the harder I had to work and the more I was forced to grow.

## 🔥 Emotions and thoughts multiply
If I give in to feeling sorry for myself, I will find more and more reasons to feel sorry for myself. If I commit to feeling gratitude, I will find more and more reasons to feel grateful for my life. If I focus on what I love, I will attract more of what I love, If I focus on what I fear, I attract more of what I fear. Cultivating positive emotions are the key to building self-confidence and momentum.

## 🥇 Nothing beats persistence + courage
In other words, the strength to keep getting rejected without losing confidence. The human quality with the highest ROI is courage. In my opinion, I still suck at these but I'm trying to get better. 

This is why it's so important to do something that I really care about. If I want to win, I have to be able to hold on through the tough times.

## 🏈 Run it straight
Go as direct as possible. If I want to do something, start doing it as soon as possible. Whether it's Sales, Engineering, Marketing, etc. Just try to do it, fail miserably, and try to do it a little bit better. The faster I start doing it, the faster I'll learn and find the most relevant information - which is usually free.

The worst way ever is to waste 3-4 years doing a degree that only teaches self-inflating theories and how to bullshit my way through fake simulated assessments. Do the real thing, don't get permission and don't let anyone tell me I'm not ready.

## 💩 It's okay to suck
I'll suck at something for a long time before I can start doing it really well. Don't let expectations and disappointment kill my motivation, learning is supposed to feel like play.

## 🔫 Put a gun to my head
The easiest way to do something is to make yourself have to do it. Knowing what to do is easy but actually doing it is really hard because willpower is weak and fickle. For example, I know exercise is really beneficial but it's hard. "Put a gun to my head" means creating commitments that force me to do the things that are good for me.

## ⌛️ Never wait for the perfect opportunity
As a natural prospector rather than judgment maker I'm HORRIFIC at this. Life is a very long race. If I fully embrace the opportunities I get, I will attract better and better ones. I will go much further making the most of small opportunities than trying to get the perfect opportunity from the beginning.

## 🏁 Be a finisher
If I finish the things I start, they will catapult me forward into more opportunities. If I don't carry things through to completion, fewer and fewer opportunities will come my way. Try to resist the boredom for a bit longer and see things through.

## 🤝 Relationships are even more important than ability
Reputation is the thing that brings opportunity and leverage in a negotiation, and it's just a lagging indicator of current ability and output. Companies with great reputations sustain prices way higher than their competitors. 

Relationships are so important because they have a distributive effect on my reputation. They will always be the best pathway for opportunities that make a difference for myself and others. Loads of talented people fail because they didn't create relationships with people that could give them opportunities. In contrast, loads of people with little ability do well thanks to friends and family in high places.

## ⚔️ Don't dodge hard work
I did quite well in school and uni because I was extremely good at finding shortcuts and hacks for bullshitting my way through assessments. Formal education taught me that it's more important to look like I was "doing the work" than actually doing the work. 

The real world is the complete opposite. Anything worth doing is hard and only worthwhile if done properly. In fact, the harder something is, the more satisfying its pursuit becomes, and the less competition I'll have.

## 🎪 Be as unique as possible
Normal people get normal outcomes, abnormal people get abnormal outcomes. It's just supply and demand, the universe disproportionately rewards rare abilities and discounts common ones. The more unique my perspective, the more I'll see solutions and generate ideas that others won't. I try to combine hobbies and interests that don't compliment each other. I must seek social circles with very little overlap. It pays to cultivate skills and talents that are rare. 

## 💵 Earning is a lot less fun than learning
Learning happens through trial and error, testing and reflection, iterating until I get something right. Learning is incredibly satisfying and fun. Earning, on the other hand, is about replication, repetition and refinement of things that already work. Earning is extremely boring. I still don't quite know the solution to this yet!

## 🚀 To make money, get on a rocketship
Find a high growth industry that's aligned with the future. I can easily do 5-10x better by getting in the right team and being around the right people. Pick a fast-growing industry, pick a company growing faster than the industry, in a role that is growing within the company.

photo-1498329741116-4d1987b210d0.jpeg

Just a small collection of all the most important lessons that I have had to learn.

13 most important lessons of my career so far

Defining the kind of company I want to help create. I will continue to revisit and improve this over time. 

## Company Motto
'We shall either find a way or make one'

Taken from the Latin 'inveniam viam aut faciam'. Inspired by Hannibal Barca, the Carthaginian general who replied with this when told it was impossible to lead an army with Elephants over the Italian Alps to attack Rome. 

## ✨ Core Values
I want to be part of a company with deep satisfying relationships and meaningful achievements. Therefore, the values I want to ingrain into as much as possible are as follows:

1. Courage
2. Learning
3. Openness
4. Creativity

### 💪 Courage
No innovation or meaningful achievement can be achieved without courage. I truly believe it is the most rare and valuable of all human qualities. I believe courage stems from a strong internal locus of control, i.e. the belief that we can influence outcomes to create the changes we want. Courage happens when we take ownership and responsibility for results and use each lesson to grow in confidence and belief.

### 📚 Learning
The next most important thing is to strive to be the best we can be at what we do. We win by out-learning our opponents. This means we sacrifice short-term productivity for long-term capability. We don't pretend to know more than we really do and we're never afraid to ask silly questions. Everyone starts off as a beginner.

### 🤝 Openness
Openness = Speed, nothing makes a project go slower than the need for constant communication back and forth. If I trust you completely, I don't have to communicate very much, If I don't trust you, no amount of communication will fix it. I also believe compensation and equity should be fair and allocated in a transparent way. Everyone should feel safe to share their most unpopular ideas and thoughts without any emotional backlash. Mutual support, belonging, trust, and inclusion are paramount to high-performing teams.

### 🧪 Creativity
Great ideas are almost always the ones that are opposite to conventional wisdom but correct. The only way to find great ideas, therefore, is to be as unconventional as possible. We think of ways to beat the game, not play the game

I want to eventually implement...
A huge brain dump of things that I want to do

### 🔥 Alignment & Motivation
- Profit-sharing on projects
- Priority to anything that gives an employee more control of their career outcomes.
- We give anyone a chance and a clear path to grow.
- Focus recruitment and development around evaluating values and skill, not experience or reputation.
- No office hours, just outcomes
- Random seating arrangements that change periodically
- Meeting activities that force participation (i.e. 6 hats)
- Radical transparency in everything
- All pay is performance-based, peer evaluated and transparent
- Management by outcomes NOT output
- A partnership of semi-independent teams not a chain of command and control

### 🍕 Organisation Structure
- Small empowered self-contained teams of 3-5
- Direct communication between customers and engineers responsible for their projects
- Teams must be cross-functional, own a particular “product” and contain members from all levels of career development
- No managers or product managers, just team leaders
- Each team has a clear connection to the bottom line
- Each team has one key outcome that they are responsible for.
- Low costs of failure due to small teams with research, analysis and promotional skills. 
- Invest in platforms and tools that speed up teams' value attempts.
- Celebrate attempts and make value discovery experiments fun in themselves
- Proper introductions and an onboarding buddy
- Each employee must have a teacher and a student
- Autonomy in decision making, teams only report on their outcomes NOT output

### 📈 Personal Development
- Believability weighted decision making and peer evaluation
- Time set aside for purely experimental projects
- Frequent hackathons and opportunities for people to show off their skills
- Whenever underperformance happens, the focus should be on learning causes and effects not blaming or shaming people, same goes with praise, must be factual.
- Name wall
- Lots of 1 on 1s and asking what they would fix if they were in charge
- Strong creative attractor. The world needs what we are making. We believe it can be done. We have an opportunity to do it. Shared anticipation of a better future if we succeed
- We must have a clear sense of purpose, vision and mission
- Invest in team member growth by having opportunities for advancement
- Grant autonomy and delegate authority as much as possible, give plenty of opportunities to "step up" and provide the support necessary to succeed.

### In other words...
Small empowered teams that are passionately pursuing meaningful innovations that have the potential to transform our community, company, and lives into some epic, next-level thing.

photo-1524856781660-e5c92f4ac62a.jpeg

Defining the kind of company I want to help create. I will continue to revisit and improve this over time. 

The company culture I want to build

# How to become a full-stack developer in 2020

Here is everything I wish I knew 4 years ago when I started on my journey to becoming a full-stack developer. I really hope it helps someone in a similar situation to where I was.

A full-stack developer is just a developer who can use tools across the software spectrum. In other words, someone who can build a complete application with a "front-end" like a website, a "backend" like a server that handles logins, and a database that can store and fetch information.

Unlike most other professions, you don't need to know a bunch of theory to become qualified. It's not operations or administration focused where you do repetitive tasks or follow procedures. It mostly consists of creative and logical problem solving and you only get better by doing it. To get hired, you just need to be good enough - it's as simple as that.

### 🎉 The good news
The good news about becoming a developer is you can do it by yourself without much money and it puts you in a career with accelerating demand and nearly unlimited earning potential.

### 💩 The bad news
The bad news about becoming a developer is that the bar for entry is high. You will have to spend a huge amount of time developing your skills in your own time, and the industry is fast-paced and always changing.

### 🚫 Don't go to uni!
University will just teach you how to pass assessments. No matter what they do, it will always be a soft environment and no match to the real world. Don't pay for such an expensive simulator when the cost of doing the real thing is so low!

```
The future is:
Portfolio > Transcript
```

Remember, once you are good enough, you will get hired. Smash out a bunch of cool projects and you'll get to the required skill level much faster.

Universities were invented when the scarcest resource was information. Today, information is basically free, the scarcest resource is hands-on experience. Going to university and believing that the investment would be worthwhile was my single biggest mistake so far.

### 🥰 Try to find a community
There are tons of Websites, Subreddits, Slack Channels, Discord Servers, Github Projects, Youtube Channels etc that are super friendly to newbie developers. Finding other people on the same journey as you will help you stay motivated. It's something I wish I did way more when I started.

### 🦉 Find a mentor
I never managed to find one myself which is why I'm so determined to be the one I never had for others. I'm soon going to be looking for 5-10 aspiring developers to mentor. If you are interested contact me! The more overlooked and unconventional you are, the keener I'll be!

### 🏰 Companies don't like junior developers
When I was learning to become a developer, despite having practised every day for over a year, I couldn't seem to land a job. Every employer I approached said I needed more experience and that they were only looking for senior or intermediate developers. This is very defeating but don't let it get you down. They were just saying I wasn't good enough yet.

This is because coding is more of an art than a science. There is a big difference between knowing the basics and reaching a professional skill level. The only way to get there is to practice in your own time.

Just like top graphic designers, musicians and cinematographers spend years developing their skillset before getting paid well, top developers also typically spend years honing their skills on hard problems outside of work to reach senior positions.

### ⚔️ Find online courses and practice!
In my journey to becoming a developer, I found Udemy and YouTube to be the ultimate resources.

My advice would be to start learning "Front End" development first as it's more gratifying seeing cool websites and apps come to life and then gradually move deeper into the back end as you build increasingly powerful systems.

Here's an ordered list of my favourite courses that helped me to become a full-stack developer. 

### 1. Learn Javascript and Git 🧰
Javascript is the most practical language for building web user interfaces and very beginner-friendly. It's the only language that lets you build websites, iOS and Android apps, Windows and Mac desktop apps, servers and APIs. It's definitely the best language to learn first or tackle if you only want to only learn one.

Git is just a tool for saving code that enables easy collaboration. No-one knows it fully, just memorise a bunch of commands and you'll be fine. Don't but a Udemy course for Git, just find a decent YouTube tutorial.

[Udemy Javascript Course](https://www.udemy.com/course/javascript-es6-tutorial/learn/)

### 2. Learn a front-end framework 🏪
I recommend React.js, it's the most dominant player at the moment. But check out Vue.js or Angular too if you want to see what else is being used.

[Udemy React and Redux Course](https://www.udemy.com/course/react-redux/learn/)

[Udemy React Course](https://www.udemy.com/course/react-the-complete-guide-incl-redux/)

### 3. Learn a back-end framework ⚙️
I recommend Node.js. It's a Javascript server-side framework.

[The Complete Node JS Guide](https://www.udemy.com/course/nodejs-the-complete-guide/learn/)

[Node Plus React Fullstcak Development Course](https://www.udemy.com/course/node-with-react-fullstack-web-development/)

### 4. Learn a mobile framework 📱
I recommend React Native as you can directly transfer ~60% of what you learned in React.

[The Complete React Native Course](https://www.udemy.com/course/the-complete-react-native-and-redux-course/learn/)

[React Native The Practical Guide](https://www.udemy.com/course/react-native-the-practical-guide/)

### 5. Keep improving your skills 🏆
Learn additional tools and practices that help you create better programs.
- Typescript (make fewer mistakes)
- Websockets (faster apps, with live updating)
- Databases (I like Postgres & MongoDB)
- Practice using cloud platforms, use 3rd party tools built by super-smart people to make your apps way more powerful. (Azure, AWS, Google Cloud Platform)
- Testing

There you have it!
If you have any questions or would like some advice regarding any of this please get in touch! I'm more than happy to help you get into software development.

photo-1595617795501-9661aafda72a.jpeg

Here is everything I wish I knew 4 years ago when I started on my journey to becoming a full-stack developer. I really hope it helps someone in a similar situation to where I was.

How to become a full-stack developer in 2020

# Top technical skills I learned in 2020
My main goal in 2020 was to become a master at custom full-stack web and mobile applications. Picking up these skills below had the biggest impact on my performance:

### 🛠 Typescript Programming Language
Typescript is just Javascript with super helpful additions that help you catch a plethora of common bugs and typos that are easy to make when writing code. It cuts down development time and adds an extra layer of structure, and reliability to any code.

### 🧶 GraphQL APIs and Graph Databases
GraphQL is a very opinionated API specification that emphasises a highly structured and consistent way of dealing with data and algorithms. It takes a fair bit to wrap your head around and there is a lot of up-front effort before you start to get rewards. But once it's set up, it does so much heavy lifting for you that it saves enormous amounts of time in the long run.

### ⛵️ TailwindCSS Styling Framework
By far the best way to style a website that I have ever come across.

## Technical skills I want to learn in 2021
My long term goal is just to keep getting better and better at building digital-first products and services. To pursue that goal in 2021, I want to learn the following:

### 📦 Docker / Kubernetes
To build really big apps with high performance, I need to get good at splitting them up and hosting them in separate little bits called containers. Not terribly excited about this but it's necessary!

### 🤖 Physical Computing & Simple Electronics
At the moment I build custom web and mobile applications. In 2021 I really want to add the ability to build custom IoT (Internet of things) devices too. There are so many cool products that can be made using small computers and simple robotics.

### ⛓ Building Etherium & Blockchain-Based Applications
I firmly believe that cryptocurrencies are here to stay and will eventually surpass the ease of use and popularity of traditional fiat currencies. I'm very excited about the potential of Etherium (the second most popular one), especially for everyday transactions and I want to learn more!

### ⚙️ Rust Programming Language
Rust is apparently the best thing to happen to high-performance computing environments in decades. If I get somewhere on my quest to learn physical computing, I'll definitely be giving it a go!

### 🧱 3D design & Additive Manufacturing
I want to get a basic 3D printer and start making cool things. By 2022 - 2023 I want to start being able to develop genuinely useful hardware-first products.

## Summary
I probably won't get to cover all five of these goals! There is always a tradeoff between what I want to learn and what's going to have a real financial impact. But I'll try my best!  

photo-1457195740896-7f345efef228.jpeg

My long term goal is just to keep getting better and better at building digital-first products and services. To pursue that goal in 2021, I want to learn the following:

My top skills-to-learn list for 2021

# How to detect inactivity and auto-reset a React app

## Background
Sometimes an application needs to be reset after a certain period of inactivity, for example, public apps on 'kiosk' tablets, or banking and finance applications. To keep user data private and secure we need to be able to safely reset these if a user accidentally leaves before properly exiting.

Here's a guide on how to make a simple react component that auto resets an application after one minute of inactivity. I am using Next.js but the same principles would work with Create React App and React Router Dom.

## 1. Create a whitelist (optional)
Create a list of all pages where you don't want to trigger an auto-reset. Or, if you only need a few pages to auto-reset, make a blacklist that only includes these pages.

```
const whitelist = [
  '/',
  '/admin',
  '/results',
  '/profile'
];
```

## 2. Create Component

Build the component, place it early in your app's component tree for the best results, ideally inside your top level App component or just inside your Redux Provider Component (if using one).

```
import React from 'react'

const whitelist = [
  '/',
  '/admin',
  '/results',
  '/profile'
];

const IdleTimer = () => {
  return <div />; // must show something on the screem
};
```

## 3. Call a function every time the page changes
We will set up a **useEffect** hook that watches for changes to the current page's pathname and executes the code inside it every time the page changes.

```
import React from 'react'
import { useRouter } from 'next/router';

const IdleTimer = () => {
  const router = useRouter();
  
  useEffect(() => {
    // code here will run everytime the page changes
  }, [router.pathname]); 
  
  return <div />;
};
```

## 4. Stop the pages in your whitelist from executing
Inside the  **useEffect** hook, set up a check to make sure the reset will only occur on the pages you want.
```
  ...
  useEffect(() => {
    let preventReset = false;
    for (const path of whitelist) {
      if (path === router.pathname) {
        preventReset = true;
      }
    }
    if (preventReset) {
      return;
    }
    /* 
      code here will run everytime the page changes & the 
      current page is NOT in the whitelist 
    */
  }, [router.pathname]);
  ...
```

Or if you want to be fancy, you can do this with reduce

```
  ...
  useEffect(() => {
    const preventReset = whitelist
      .map(path => path === router.pathname ? 1 : 0)
      .reduce((prev, curr) => prev + curr, 0)
    if (preventReset) {
      return;
    }
    /* 
      code here will run everytime the page changes & the 
      current page is NOT in the whitelist 
    */
  }, [router.pathname]);
  ...
```

## 5. Create the timeout
We need to create a timer that will reset the app after a period of time.

So, at the top of the **IdleTimer** component, initiate a variable 'timeout' to which you will assign a Javascript timeout.

> Note: we must assign the timeout to a variable in order to clear it and restart it each time user activity is detected.

```
const IdleTimer = (props: Props) => {
  const router = useRouter();
  let timeout = null; // <- Javascript
  // Typescript -> let timeout: NodeJS.Timeout | null = null 
...
```

Then create a function inside the component to handle the reset timer. This will be called any time user activity is detected and starts the countdown again from zero.

```
...
  const restartAutoReset = () => {
    if (timeout) {
      clearTimeout(timeout);
    }
    timeout = setTimeout(() => {
      // Insert your code to reset you app here
    }, 1000 * 60); // 60 Seconds
  };
...
```

Make sure the timeout starts up at the beginning of each page load by putting it inside the **usEffect** hook under the whitelist code.

```
  ...
  useEffect(() => {
    ...
    if (preventReset) {
      return;
    }
    
    // initiate timeout
    restartAutoReset();
    
  }, [router.pathname]);
  ...
```

The **IdleTimer** component will now trigger your reset code exactly one minute after it mounts. The next step is to cancel and restart this timeout every time we detect user activity.

## 6. Listen for user activity
Now the last thing we need to do is listen for user activity and reset the timer if the user is still active.

We will achieve this by listening to the global **onmousemove** event.

Create the function that will fire every time the mouse moves and call the timer resetting function we created in the previous step.

```
  const onMouseMove = () => {
    restartAutoReset();
  };
```

Now we must make sure that we start listening for mouse movement when the page loads and the **IdleTimer** component mounts.

Inside the **useEffect **hook, underneath the whitelist code and timeout initiation code, add an event listener that will fire every time mouse movement is detected.

```
  ...
  useEffect(() => {
    ...
    if (preventReset) {
      return;
    }
    
    // initiate timeout
    restartAutoReset();
    
    // listen for mouse events
    window.addEventListener('mousemove', _onMouseMove);
    
  }, [router.pathname]);
  ...
```

The **IdleTimer** component will now trigger your reset code exactly one minute after the last detected mouse movement.

One more thing!
The last thing we need to do is make sure we cancel the timeout and stop listening for mouse activity when the page changes and the component unmounts. 

If we do not explicitly stop Javascript timeouts and event listeners they will just carry on running on the next pages and we'll end up initiating more and more of them and it will cause mayhem.

The fix is to include a cleanup function inside the **useEffect** hook that runs whenever the component is about to be unmounted from the screen. Here we will clear out the timer and mouse movement event listener.

```
    ...
    // inside useEffect hook
    
    // initiate timeout
    restartAutoReset();

    // listen for mouse events
    window.addEventListener('mousemove', onMouseMove);

    // cleanup
    return () => {
      if (timeout) {
        clearTimeout(timeout);
        window.removeEventListener('mousemove', onMouseMove);
      }
    };
  }, [router.pathname]);
  ...
```

The **IdleTimer** component will now trigger your reset code exactly one minute after the last detected mouse movement. It will clear itself and restart every time the user changes pages.

Completed code
```
import { useEffect } from 'react';
import { useRouter } from 'next/router';
import { connect } from 'react-redux';

const whitelist = [
  '/',
  '/admin',
  '/results',
  '/profile'
];

export const IdleTimer = () => {
  const router = useRouter();
  let timeout: NodeJS.Timeout | null = null;

  const goBackToHome = () => {
     // code to reset the application
  };

  const restartAutoReset = () => {
    if (timeout) {
      clearTimeout(timeout);
    }
    timeout = setTimeout(() => {
      goBackToHome();
    }, 1000 * 60);
  };

  const onMouseMove = () => {
    restartAutoReset();
  };

  useEffect(() => {
    // Whitelist certain pages
    let preventResett = false;
    for (const path of whitelist) {
      if (path === router.pathname) {
        preventReset = true;
      }
    }
    if (preventReset) {
      return;
    }

    // initiate timeout
    restartAutoReset();

    // listen for mouse events
    window.addEventListener('mousemove', _onMouseMove);

    // cleanup
    return () => {
      if (timeout) {
        clearTimeout(timeout);
        window.removeEventListener('mousemove', _onMouseMove);
      }
    };
  }, [router.pathname]);
  return <div />;
};
```

There you have it! Hope you found this useful!

photo-1582139329536-e7284fece509.jpeg

Sometimes an application needs to be reset after a certain period of inactivity, for example, public apps on 'kiosk' tablets, or banking and finance applications. To keep user data private and secure we need to be able to safely reset these if a user accidentally leaves before properly exiting.

How to detect inactivity and auto-reset a React app

# Case study: Deliveryby.bike, an ordering system for bike couriers

## Early days
I had a chance encounter at a LinkedIn Local event back in early 2020. That's where I met Felix, who was starting up a bike delivery service in Hamilton through the nonprofit organisation GoEco. I thought it was an epic idea and volunteered to build a little web-app for managing orders. Over the next 6 months, we had some fun evolving that little web app into a cool little order management system.

![text](/uploads/204e8996bdd547e1a827835b436435ad.png)

## An opportunity appeared
Around October 2020, I got an email from Adrian, a Melbourne based designer. Adrian was working on a new website for Momentum Messenger, a well-established bike messenger service in Melbourne. Turns out Lachie, one of the founders of Momentum Messenger had come across the little ordering app Felix and I developed. Lachie had asked Adrian to get in touch to see if I could help offer their clients a similar experience.

![text](/uploads/b92824c0ae364c3bb83b4a4b8af5c0e6.png)

## Delivery by Bike was born
We had a chat and decided to work together to develop a complete ordering platform for bike messenger companies. Over the next several months we iterated on a prototype app until Delivery by Bike was born! In early 2021 we started testing and refining the app to get it ready for public use.

### Admin screens

![text](/uploads/1cfc9b7e8c4c4b1591cd32950eed39d4.png)

![text](/uploads/846e4de4e4b643a58815a9b3551d923b.png)

![text](/uploads/14fa233de1c444099b2e1d7f5b313a50.png)

### Customer ordering screen

![text](/uploads/d0ebb891c7c946aabb52a59f1054b88a.png)

## Where we're going
This is in no way an attempt to build a "platform" that tries to get between bike couriers and their customers. I want members of the bike messenger community to be actively involved and see Delivery by Bike as a tool built for them to help their businesses thrive. My goal is to focus 100% on helping bike messenger services run their bookings smoothly so that they crush it in the stuff that matters most.

You can check out the live product at [deliveryby.bike](https://deliveryby.bike)!

Screen Shot 2021-03-15 at 8.28.44 PM.jpg

Delivery by bike is an online booking and job management platform for bicycle courier companies. We worked with Momentum Messenger from Melbourne to develop a booking and job management platform for their messenger service.

Case study: Deliveryby.bike, an ordering system for bike couriers

# We are only just getting started.

Rikus started Zeltta while in quarantine in March 2020. He decided to start a software company out of a dual passion to build amazing things and pursue projects that he believed had the possibility of making a positive impact on society.

## The values that we live and act by:
- Big ambition
- A work ethic that actually backs it up
- Brutal transparency
- Non-conventional thinking. 

## Working process

1. Meet up to clarify your goals and identify the obstacles in the way to achieving them.
2. Breaking down those obstacles into specific requirements.
3. Translating those requirements into a set of technology features and functionalities.
4. Designing an application with the right arrangement of all the necessary features.
5. Building a working prototype and evolving that prototype quickly, based on real-life feedback

photo-1572504007493-8f56e6075860.jpeg

We aim to be more than just a company that builds custom web applications and mobile applications. We believe that passionate individuals and small groups of people can push humanity forward by confronting difficult obstacles in the way of progress. That's why we're super focused on our values and goals, we don't say yes to every opportunity and we work with people we believe are solving meaningful problems.

About us

# Case study: Tākaro, the Te Reo Māori card game

## Background

Tākaro is a fast-paced Māori language learning game created by the team at Game Kings in Hamilton, NZ. The idea came after they realised how few Māori games there were on the market, especially those aimed at beginners.

Eliot from Game Kings had a chat to me about building an online reference site for the game to help players ensure they were correctly pronouncing the Maori words they are learning.

## Design phase

> We first settled on some basic specs and requirements for the site

![text](/uploads/27c6de6a915941b18898737e1e7d93b2.png)

> I then went away and designed a simple mockup that covered all the needs we outlined (with some descriptive tags)

![text](/uploads/8d35862db7b64dfaad90ecfcc214eabd.png)

## Build phase

I built the site over a couple of days and then worked with Poppy, (from the Game Kings team), on some final refinements over the next few days.

![text](/uploads/fb809ce61dea414b82af8bf82a05ae51.png)

> Final product

![text](/uploads/36cee9ebacb9428c81a869b038bf952f.png)

You can check out the finished website for yourself at [takarogame.com](https://takarogame.com)!


Screen Shot 2021-03-15 at 8.27.19 PM.jpg

I worked with Game Kings to build a reference site for Tākaro, The Te Reo Māori Card Game.

Case study: Tākaro, the Te Reo Māori card game

*Watch the video on youtube by clicking on the image below:*

[![kaivolution-video](/uploads/a8de8c73ffb040cfae43f800161bec1e.png)](https://www.youtube.com/watch?v=xqiHEgjfZGk)

# Case study: Kaivolution

## How it all began

I initially built a simple ordering app for Go Eco's bicycle delivery project. They were happy with the result and asked me to come in for a chat to discuss ways of streamlining the data requirements of their food rescue service. 

The food rescue service takes edible food that is about to be discarded from supermarkets and bakeries and distributes it for free to community groups that give it to the needy. We decided to go ahead with an app that would streamline the tracking of their food pickups and deliveries - this would free up their time and help them report their impact when applying for funding.

## The goals of the project
We discovered 3 areas of focus
1. Recording the types and quantities of food at each pickup
2. Recording the types and quantities of food at each delivery
3. Reporting the overall impact of the operation in a visual way

## What happened
I initially went along with Simon from Go Eco on a couple of food rescue trips to understand the nature of the operation firsthand.

Afterward, I sketched out a rough UX and UI design for the application on Adobe Illustrator. Some examples from the document are shown below.

![text](/uploads/90230540d2ab43c390affcade519bbb9.png)

![text](/uploads/e8975013f77c476f9a8b66710665cc10.png)

## Development
I was able to reuse a lot of code written previously for other projects, so the total development time was only a few days 🎉
The software stack I used was:

### Languages
Typescript
HTML & CSS

### Front-end frameworks
React (Next.js)
Bootstrap and Sass
Redux

### Back-end frameworks
Socket.io
Node.js and the Express Library
Prisma ORM

### Database
Postgres

## Final Product
I was very pleased with the final product and I'm also super happy that the team from Go Eco received it quite well!


![text](/uploads/cc8e42cbfc0c460ebf96d993687d673b.png)
*User profile page & editing*

![text](/uploads/beb371be3d3749b3a3ba25210388d969.png)
*View & edit all records*

![text](/uploads/36529316bf6b446bb732a217ddb6819b.png)
*Dashboards for each, donor organization, recipient organization, and overall impact*



Screen Shot 2021-04-05 at 4.01.36 PM.jpg

I worked with Go Eco to develop a data capture and dashboard app for their food rescue service.

Case study: Kaivolution

![text](/uploads/5417e5e300b1482abf0928847fc79ca5.jpg)

# Taku Wairua

## Background

Taku Wairua is a self-development program developed by The Waterboy. We worked with The Waterboy to bring the program into a digitized online format so that they could reach more kiwi teens.

So far we have built a simple prototype version of the app and completed some initial user testing. We are super excited to see what we can achieve over the next few months.

## Screenshots of the current app

![text](/uploads/8f893aad99fc4d6c92112ec748e6b572.png)

> Challenges screen

![text](/uploads/35e899dcae5f48d4b2382da2c3b89b25.png)

> Create submission screen

![text](/uploads/6a6d554f99874c7da489484b721ed8d0.png)

> Profile screen

Screen Shot 2021-03-15 at 8.46.28 PM.jpg

I worked with The WaterBoy to digitize their self-development program for Kiwi youth.

Case Study: Taku Wairua

![text](/uploads/5804ce66f87445898e6ef9745338b57a.jpg)

# Triton Hearing Check

## Background

The triton hearing online test has been a collaborative project with Neon Hive, Rising Tyde, Datamine, and Strata Systems.

Zeltta's role in the project was to build the application using the expert designs developed by Neon Hive.

You can check out the finished product at [tritonhearingtest.co.nz](https://tritonhearingtest.co.nz)!

Screen Shot 2021-03-15 at 8.33.29 PM.jpg

I worked with Neon Hive to build the Triton Hearing Check Application that you see in Pharmacies around New Zealand and online.

Case Study: Triton Hearing Check

The_WaterBoy_Logo.png

FB_IMG_1574117982273_crop.jpeg

GameKings_Logo_2020_GoldCrown_Alt_300x@2x.png

Ingot-Logo-150x150.png


![text](/uploads/4c1e72ffeb0c4a0789a58dda6fe5dda5.png)

# Strategy & Requirements

> About 50% of all software projects fail.

That's right, the industry average is 50%! Software projects have some crucial differences from conventional engineering projects that make them harder to manage and more likely to fail (see key differences below).

## What we offer

With our strategy & requirements planning service, we deliver expert guidance to maximize your odds of success. This may include user interviews, research of existing and alternative solutions, 

#### Key benefits:
* Translate complex ideas into clear objectives and requirements based on your business goals and the needs of your customers, market, and technology, rather than an “engineer’s” view of what is technically feasible.
* A more thoughtful, consistent user experience that makes the product easier to develop, better to use, and more successful in the market.
* Reduced time to market and faster time to revenue by taking advantage of the latest technologies in the right places, without building technology into the product just for the sake of it.

## Software's key differences

### High uncertainty
Software is made of "thought stuff", so it's very hard to measure and plan. Therefore, projects need to be managed via risk elimination instead of sequentially.

### Evolution not Assembly 
Software evolves from simple systems to complex systems, there is too much complexity to assemble final pieces together and expect them to work.

### Speed vs Technical debt
Deadline pressures just end up creating fast yet unmaintainable code. The faster you move in the short term, the slower you'll move in the long term.

### Conservation of complexity
The easier something is for a user, the more complex the code must become. It's extremely important to start off with the simplest prototype possible. Add too much at the beginning and it'll never do anything truly well!

### Time vs Scope 
Unlike conventional projects, software scope isn't really measurable, features can be complete, but it's the *level* of completion that matters. As a result, it's better to set fixed deadlines and evaluate *whatever* scope is reached before doing another cycle than to set a fixed scope and watch the deadline or quality slip.

### High Specialisation
Technical people understand what they do not manage and managers do not understand what they are managing. This imbalance requires trust, the delegation of responsibility, and more communication of the big picture than in conventional projects.


Developing clear objectives for your digital product or service, spotting the key technical problems to solve, and forming the right plan to overcome them.

compass-line.svg

Strategy & Requirements


![text](/uploads/1c92238e8f414a8f95b8c6774dae64b4.png)

# Solution Architecture

Solution architects are translators who sit between the worlds of business, design, engineering. Their task involves taking in a big picture view of all the details relevant to a project in sufficient detail to understand the best way to make it all fit together. 

A good solution specification begins with building a deep understanding of end-user and business goals and then draws from multiple disciplines to form a complete technical plan that will balance the requirements and constraints of each discipline.

## What we offer

Our Solution Architecture service provides you with expert assistance at translating your customer needs, business goals, and technical obstacles into a technical specification and roadmap that will achieve all those needs.

#### Key benefits
* We focus on the “why” behind your customer’s needs to find the best solution
* We build on a comprehensive understanding of your customer’s needs to offer a clear, complete, and detailed technical solution
* We understand how all the pieces of technology fit together to build the right thing in the right way

Creating a detailed technical specification that outlines exactly what tools, resources, and features are needed to achieve your product or service's requirements.

map-2-line.svg

Solution Architecture


![text](/uploads/06035fe1ef9d4279879de45dc6a71667.png)

# User Interface Design

Great UI designers turn a list of features into a beautiful arrangement of interface elements that together perfectly. A design phase should include several iterations, careful consideration of multiple layouts and flows, and take roughly half the amount of time to complete as the final build stage. If the design step is executed well, it saves an enormous amount of time and money during the final build step.

## What we offer

We'll create a full interface design of your application, bring it back for feedback and perform a few design iterations. By the end of the design phase, you'll know exactly what we're going to build and how it's going to work.

#### Key benefits
* Your app's interface will be visually stunning
* You'll avoid costly design changes during development
* We'll discover the best possible interface
* We'll have a head start when building the app
* We'll help you create a great user experience

Working through a design and feedback cycle to find an arrangement of interface elements that will fit your product or service's features together perfectly.

pencil-ruler-line.svg

User Interface Design

![text](/uploads/f72b7888a81b4fcf9760b3dbc1433acc.png)

# Software Development

Custom software development is the final, most important, and most time-consuming part of bringing a digital product to life. Software developers transform a user interface design into a complete application using the right tools and technologies to ensure the closest realization of the design possible.

## Our top skills & technologies

React.js, Next.js, React Native, Redux, Sass/CSS Frameworks - Tailwinds & Bootstrap, Javascript, Typescript, Express.js, GraphQL, Node.js, Azure, AWS, API Development, Git, Websockets/Socket.io, Testing with Jest/Enzyme/Cypress, Postgres databases, MongoDB databases.

## What we offer

We can build your application using the same top-tier tools and techniques used at leading global startups like Uber, Spotify, Airbnb, and tech giants like Amazon, Google, and Microsoft.

#### Key benefits:
* End-to-end software development process from requirements analysis to feature implementation
* Modern software technologies including React.js, GraphQL, and Node.js
* Industry-leading methodologies and tools including Scrum for Agile development and Git for version control
* Expertise in the latest front-end development methodologies
* Built-in feedback loop with the design and product teams
* Dedicated project managers and scrum masters
* Extensive experience across a wide range of industries, technologies, and business domains

Bringing your design to life via custom software development. We'll use our deep software expertise to expertly balance technical tradeoffs and constraints. 

code-s-slash-line.svg

Software Development

401ab403193d4db6bc4e309bd4e77efe.jpeg

Rikus is most happy when building cool things that have the potential to make a positive impact on the wider community.

Rikus Wiehahn

1611711034229.jpeg

Nico has a wealth of experience leading enterprise software businesses and sales teams. His accountability, advice, and insight have been instrumental so far!

Nico Hadj-Blaha

1540267140699.jpeg

Eliot Jessep

Sarah Osbourne.jpeg

Katie Scott

1605490677561.jpeg

Thomas Nabbs

Rikus is trustworthy, dependable, and innovative. Thanks for all your help Rikus,



1517625315265.jpeg

Dan Webster

Zelta are a huge asset for us. Timely, well-crafted apps and dev with good comms.

Katie Hampton.jpeg

Ingrid Neuman

Thanks for helping us automate one of our key data and reporting areas.

Apps to power your business!

We work with rebels and dreamers to build radical digital-first products and services.

Portfolio

Testimonials

Articles

Services

Our story

Meet the team

Clients