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 2023.

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 2023. 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 2023

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

This article assumes prior experience to using 

, and a basic working knowledge on the usage of 

For web applications where a CMS is a requirement, Sanity's Content Lake and Studio offers a quick way to incorporate a customizable flow for non-technical users to update content.

While Studio has out-of-the-box components to represent simple data structures such as those that make up a simple blog, more complex data types may require more specific methods of representation. For instance, a sports tournament bracket represented by an object nested several-levels deep - with team and seeding data - could be visually represented as:

, which essentially enables us to represent our data structure through React components. All that is required is to implement the React component and to declare it inside the field of the document.

The above is the aforementioned bracket, named `entries`, declared inside an example document schema. `CustomBracket` is a React component, and we can look towards Sanity's documentation on how to start 

, enabling us to retrieve the document `_id`. Using this, we can perform operations to mutate the document:

Note the ternary operation to check for the existence of `_id`; the `useDocumentOperation` hook requires an `_id` be supplied, so a placeholder is given to avoid edge case errors.

Another thing to note: as of the time that this article was written, mutations to a nested property of a field requires replacing the whole field (e.g. in the earlier schema, `entries` is to be replaced even if only a nested property of `entries` is changed). Therefore, the data structure parsing and mutation is left for the developer to implement:

The above shows a full high-level overview of the custom component's flow; a function to handle changes in the `entries` field is used whenever a change to the data needs to be made. The function makes a copy of the data, parses and mutates it, and executes the patch to update the document.

The resulting flow that a user in Studio is left with matches the out-of-the-box flow for non-custom components. Such usage of custom components with more complex data structures makes Sanity extremely versatile. For one, this allows developers to incorporate schemas with more complex data types while maintaining the ability to allow users (such as content creators) to add and update data. There are endless possibilities, and we will explore more ways to leverage this customizability in the upcoming parts of this article series.

Representing complex data types in Sanity

Building Custom Components in Sanity CMS (Part I)

We build scalable custom integrations for the Discord ecosystem

adidas

Next-generation Node.js and TypeScript ORM

Prisma

Vercel combines the best developer experience with an obsessive focus on end-user performance.

Vercel

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.

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.

Learn more about what's happening at Stack Five

Culture

, 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 17. 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

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 Fix Styled Components Page Flicker in Next.js 12+

Building Custom Components in Sanity CMS (Part I)

Topics

Opinions

Why You Should Use Sanity in 2023

Why You Should Use Sanity in 2023

Building Custom Components in Sanity CMS (Part I)

Building Custom Components in Sanity CMS (Part I)