Northern Productions is a 30-year-old custom display and event marketing company. They use creativity and ingenuity to provide memorable experiences for their clients.

We were asked to design and execute a complete redesign of their website. They also needed a custom CMS solution to manage their content.

We focused on a clean, elegant, and bold style to convey professionalism as well as communicate Northern Productions' established presence in the industry. We wanted visitors to be encouraged to click around and learn more about the company through the inspiration of animations, transitions, and engaging content.

SEO and user experience were the two most important elements for this project. We decided on a React + NextJS stack because of the benefit of server-side rendering, and the opportunity to build a scalable and memorable experience efficiently. NextJS sits on top of Netlify CMS to provide an easy way for the Northern Productions team to update their content, add new case studies, and ultimately take control over all of their website experience without developer intervention.

An elegant and modern website redesign with custom headless CMS

Northern Productions Website Redesign

We use Next.js. to power many of our digital experiences and custom web applications every single day. Learn more about how we use Next to build scalable, memorable, and performant web apps.

See how we helped CFIB serve millions of page views using Next.js

From Legacy Monolith to Modern Web App

Next.js

We're pleased to announce the beta launch of our 

open-source JavaScript Discord Bot boilerplate and CLI tool

! We're looking for feedback and contributions and would love to hear from you on the 

Our team creates custom Discord bots for many of our internal and client processes. Building custom integrations in Discord gives us the flexibility to quickly access data around our day-to-day processes, as well as create powerful tooling to enhance our developer experience. Some examples of this include real-time status updates on articles that our team collaborates on, code reviews, and even team raffles and giveaways. Since we create so many, we wanted a way to quickly launch new bots and cut down on our development time.

After a few iterations, we simplified the setup process as much as we could:

1) We click the "use this template" button on the 

 to kick off the CLI tool and set our project up

The CLI tool has some powerful functionality built-in:

We can install the bot on our Discord server

We can generate a slash command with all of the supported 

, and even pre-define options that are available to the user

We can generate event listeners for all of the supported 

We can deploy all of our commands to Discord, and run our bot

This boilerplate is still in beta, but we plan on releasing modal builders, button and interaction builders, a TypeScript boilerplate, and much more.

If you're curious about how Discord bots work and want to learn more, please feel free to 

Quickly create slash commands with a CLI tool

JavaScript Discord Bot Boilerplate and CLI

Discord is a VoIP and instant messaging social platform and has a tremendous developer ecosystem. It is an excellent platform for custom integrations.

Discord

Home Page Configuration

 is the first real-time chatbot built for Discord. We wanted to create a solution that let our team interact with our web visitors right from our team's Discord server. We also wanted to share this project with the community, which is why 

 is a completely free product for you to use today!

The first challenge was to create a clean yet functional chat experience. Many chatbots are bloated and a nuisance for visitors. We wanted 

 to be a simple yet effective means of communication for our web visitors.

We built the widget with React.js, and it is quickly integrated into your website with a single line of code. All of the content and web socket connections are managed through our bot application server.

We wanted a simple way for users to signup for 

 using their existing Discord accounts. The signup flow looks like this:

1. A user signs up with their Discord account

There is no email or password necessary. A new or returning customer can quickly sign into the dashboard using their existing Discord account.

2. A user chooses the Discord server they want to add the bot to

A user will see a list of the guilds that they can add the 

 bot to based on their account's permissions. After 

 is connected, they will receive a message in their Discord server from the bot saying that the integration was successful!

3. A user can get the widget script tag from the dashboard

The last step to getting the bot live on your website is adding the widget script tag to your existing website. This can be copied and pasted into the 

 element on the page(s) you want the widget to appear.

Now the widget is live on your website! When a visitor sends a chat through the widget, the bot will kick off a new thread on our Discord server. Here's an example of what a new chat interaction looks like in real time:

 to build our custom bot integrations. Discord's robust API allows us to interact directly with users on Discord, and even integrate other custom services like our web chat widget.

When a user visits your website after the widget is integrated, our bot server renders the React widget on your web page. It also opens up a socket connection that connects the visitor directly to your chatbot. The chatbot acts as a "middleman" and receives messages from either the web user, or from your team on Discord. It handles all of the message delivery. Multiple team members on your Discord server can even interact with the same visitor through the same socket connection!

The bot also provides details to you about where the visitor is located and their timezone, as well as other useful metadata. This is helpful if you need to change your communication or messaging for different visitor locations.

We have also created several "slash commands" that you can use to manage your bot directly from Discord such as turning the widget on and off, adding team members to your 

. We will be adding many new features in the future, and would love your feedback. We have created a feature request forum on the dashboard where you can ask for new features, comment and upvote other feature requests, and interact with the community. You can 

Using web sockets, we can create real-time communication and seamless experiences as we have with 

. The possibilities for custom integrations are endless, and Discord is an extremely powerful communication tool that is quickly picking up steam. Are you looking to build a custom Discord integration or chatbot? Our team of experts would love to learn more and help you build an incredible and cutting-edge digital experience. Please 

Powering live chat with Discord

How We Built Discord's First Web Chatbot

Director IT

Sanity.io is a free and open-source content management system that integrates with web and mobile app technologies like Next.js and React Native. It is a fantastic platform for marketing teams to manage content, and it gives software developers the flexibility to write custom plugins and utilities for just about any type of scenario you can think of. Below are some of the reasons why using Sanity.io to power your digital experiences is a great choice in 2022.

Sanity.io is free and open-source software that is constantly receiving updates. It is very well maintained and has received over $50 million in funding, making it a great long-term technology decision. There is a thriving community behind the project that has created an amazing ecosystem of tools and plugins.

Out of the box, Sanity provides an easy-to-use studio for writing content. Developers follow a simple setup process to create different types of document structures that make content writing very intuitive.

For example, if an article needs to have a big header image, a title, and some rich text content, developers can enforce these rules using a Sanity schema. A huge bonus that many other CMS platforms miss out on is customizability. Since Sanity.io is built with React, a developer can quickly create custom integrations in the studio by writing custom React components. This provides teams with a tremendous amount of peace of mind knowing that projects are future-proofed.

Depending on the state of your digital product, you may already have content living on a different CMS. Sanity makes it very convenient to import data from other CMS platforms or databases with a 

. You can even quickly export data and create onsite backups which is a great option if you decide to move to a different CMS provider in the future.

large number of free tools and plugins to use with Sanity

It supports everything from scheduling when to publish content, to generating PDFs, to SEO previews. This toolbelt is extremely powerful for bootstrapping MVPs and production-ready applications very quickly. There are new plugins added to the shop on a weekly basis, and the number of free tools will continue to grow exponentially due to Sanity's growing popularity.

These are just a few of the many reasons why Sanity is a fantastic technology choice for content management in 2022. At Stack Five, we use Sanity in production applications every day. If you'd like to learn more or see if Sanity is a good fit for your project, please 

how we power stackfive.io with Next.js and Sanity

Content-driven web apps made simple

Why You Should Use Sanity in 2022

A scalable, open-source CMS that can deliver content to any digital experience from a proof-of-concept to a production-ready web application.

Learn more about how we deliver meaningful and blazing-fast digital experiences built with Sanity.io

How We Power Stackfive.io with Sanity.io

Sanity.io

When I first started Stack Five in 2018, it was just a business for my own personal contracting work. I knew that I wanted to build a team, but I didn't know how to make that first step. When Jordan and I decided to partner up in 2019, we made big plans to build a team and scale the business. We had no idea that 

 and the pandemic lockdown would be so rough. We experienced the struggles and challenges that you always hear about from entrepreneurs, going months without making any money and wondering whether we would even survive. The story has been different this year (thankfully). 2021 has been the first year that we've been able to grow the team beyond ourselves. It's the first year that has felt like we're building a real company.

I'm so grateful for our team! They put their trust in us to keep this business running so that we can all have jobs, and I will never take that responsibility for granted. We started the year with just 2 full-time employees (Jordan and I). In February we brought on our first full-time team member, 

, which was a huge step for us! As the year progressed we continued growing the team, adding Nick, Daniel, and Phil. At our height, we had a team of 5 full-time developers, 3 contract developers, 1 contract designer/illustrator, and 1 contract payroll administrator.

Our first priority is always our clients! They give us the opportunity to keep doing what we love! This past year we had the pleasure of working with a bunch of great folks in a wide variety of sectors.

Our team is so talented and I'm always blown away at the range and depth of their knowledge. We love helping clients ship products end-to-end! Every part of the stack is interesting to us: exploring possibilities with UI/UX design, crafting beautiful UIs in React and NextJS, architecting scalable backends with Node.js and PostgreSQL, and optimizing workflows through DevOps.

I'm so happy with the growth of our team and business this year! Moreover, I love the relationships we've built, both in our team and with our amazing clients! We've continued to be a team that strives to be the best at what we do, which is to build beautiful experiences, ship quality code, and genuinely help those that we work with. We also kept ourselves fresh with continued learning and new projects in blockchain, pushing the boundaries of the tech we work with.

At the risk of sounding cliche, I'll say that I feel like this is only the beginning. As a company, we've got runway into 2023. That's a big deal because we aren't fighting for our survival anymore. It means that we get to focus on finding opportunities where we can be the most effective. It means that we get to spend time giving back to the developer and tech communities that we've benefitted from. Lastly, it means that next year will give us the opportunity to really define Stack Five's culture and the type of company we'll be for years to come.

What we learned and where we're going

Reflections From 2021

We are a digital product design and development company that has worked with brands like adidas, Reebok, and Salesforce. We specialize in planning, building, and launching digital products with cutting-edge technology for all types of businesses from start-ups to Fortune 500 companies. We are active members of the community, and contribute to open-source libraries and frameworks.

Culture

Custom bots and apps for the fastest growing messaging app.

adidas

Next-generation Node.js and TypeScript ORM

Prisma

The Canadian Federation of Independent Business (CFIB) is the country’s champion of small business. With over 95,000 members, we’re Canada’s largest non-profit organization devoted to creating and supporting an environment where your business can succeed.

Across Canada, we advocate for small business with politicians and decision-makers. As a non-partisan organization, we influence public policy based on our members’ views, ensuring that you have a chance to affect the laws and policies that affect your business.

We provide specialized business resources, including on-call advisors, to help you navigate the daily challenges of running your business. We also offer partnerships with carefully selected service providers to deliver savings you won’t find elsewhere. And we keep you informed on key issues, so that you can focus on managing your business.

CFIB

WebRTC powers essential everyday business applications like Zoom and Slack. Our team specializes in building custom applications with WebRTC. We have launched real-time products like Viyo.io and are also partners with SimpleWebRTC.

We specialize in building scalable, real-time apps powered by WebRTC.

WebRTC

Blazing fast apps with the fastest growing React-based framework!

Learn more about the frameworks and technologies we use, and why we're "all in" on JavaScript!

We power digital experiences with JavaScript

Interested in building your own video chat web app? Check out our super simple guide to learn more about how WebRTC works, and how to get started!

The Beginner's Guide to Understanding WebRTC

JavaScript

The best CMS for delivering on-demand content with incredible flexibility.

Learn more about what's happening at Stack Five

, you've likely stumbled into errors such as 

. Fear not! We will walk through a simple example to get you on your way.

Let's use an example where we want to create a function that fetches JavaScript job postings from three cities: Toronto, Vancouver and Boston.

In the above example, our function will loop through each of the three locations, make an API call for job posting data, and add the data and location to an array. If you were to run this function, you'd receive the error 

. Why is that? The culprit is with our accumulator. If you add a 

 message at the top of the reducer, you'll see during the second iteration that 

Set our initial accumulator (source array) as a promise resolution

Wait on our job posting data to load in each iteration before continuing on to the next

The first change to take a look at above is on line 12. We're setting our accumulator as a resolved promise that contains an array. We're doing this so that we can resolve our previous promises before continuing on to the next.

The other key piece is on line 5. We've renamed our accumulator to 

 so that we can get a better idea of what's happening behind the scenes. Before continuing through each iteration, we're waiting on the previous promise to resolve and then we fetch the next set of job postings.

And it's as simple as that! After the reduce method has finished, our function 

 should return a nicely formatted array of job postings for each location.

A simple example to get you on your way!

Using Async / Await with the Array Reduce Method

, you've probably run into a situation where the data you're receiving has a reference in it. Whether it's an object reference, an array of references, or nested references, we'll show you how to expand them inside of your GROQ query.

Let's assume we have a query that grabs an article and that it has a topic attached to it. If the topic is a reference, we can expand it like this:

You can see in the query above that we have added an arrow 

 next to our topic field in the GROQ query. This is telling Sanity that we want to expand the reference. In other words, we want Sanity to give us all of the data and fields that this article's topic has.

The second piece in the query above is the spread operator (

). What this tells Sanity is that in our main article query, we want to return all of the fields that an article has. If we were to remove this, we would only receive the topic inside of the article object since it would be the only field we have defined in the query.

Next, let's assume that we have a query that grabs an article again. This time instead of an article having only one topic associated with it, our article schema has changed and now it can have multiple topics associated with it. We would expand the array of references like this:

Similar to the first query we saw, you can now see we are declaring that topics are an array of references by adding square brackets 

As a final example, let's say that a topic has a reference to tags that we want to expand. If we were to run the queries above, tags would now be references inside of our 

 data. It's basically the same situation we were facing when we had to expand topics, but now we need to expand tags inside of a topic like this:

Now we should see topics and tags both expanded, and all of the fields associated with them.

If you are expanding a reference and you define fields inside of 

 if you want all of the fields to return with your data. Otherwise, you can define each field individually that you want to return from your Sanity query.

You must expand nested references this way as deep as they go. There is currently no way to automatically expand all nested references without explicitly defining them in your query.

A simple way to define the data you're looking for

How to Expand References Using Sanity's GROQ Queries

If you're seeing flickering styles and layout shifts while using 

, there is a quick and simple solution to fixing this. Most of the articles you'll read are fixes for Next.js version 11 and below, so try this out if none of the other solutions are working for you.

1. In your next.config.js file, add this:

2. If you don't already have one, create a 

3. Because of the compiler changes in Next.js 12+, you no longer need to use the Babel configuration for Styled Components. 

Make sure you don’t have anything related to Styled Components in your .babelrc file (if you have one)

And that’s all there is to it! You should no longer have page flicker in your development and production environments.

Do you need some assistance with your Next.js application, or have a digital product you're interested in building with Next.js? Please 

, and we'd love to chat. We use Next.js for many of our custom production web applications because 

Next.js is such a powerful and scalable tool

How We Built Discord's First Web Chatbot

Case Studies

Northern Productions Website Redesign

Northern Productions Website Redesign

JavaScript Discord Bot Boilerplate and CLI

JavaScript Discord Bot Boilerplate and CLI

Tutorials

Using Async / Await with the Array Reduce Method

How to Expand References Using Sanity's GROQ Queries

How To Fix Styled Components Page Flicker in Next.js 12+

Topics

Opinions

Why You Should Use Sanity in 2022

Why You Should Use Sanity in 2022

Reflections From 2021

Reflections From 2021