New Zealand

This article assumes that you have basic knowledge of Webflow and Node.js. You will also need to have a recent version of Node.js and npm installed.

 We will be building a basic Node.js application that runs with Express as a custom back-end for your Webflow projects. The application will serve as a basic solution to make requests to as well as forward requests to get data into Webflow.

There are lots of great options to integrate automation apps into your Webflow projects. But at times, this may not be enough. Automation apps can get slow in their response times and are limited in their own integrations to other services. So when you want data fast, or connect to a service or app that's not supported by Webflow or automation apps, a custom solution is the better option.

Open up your IDE and go to the terminal. Create a folder called '

Go into the newly created folder by typing in:

Now we want to initialize a new Node.js project by running:

You can add details about your project such as a name and description but skipping everything is fine for now. 

A package.json file should now be present inside of your 

. What we want to do now is set the module type of our project to ESM. Add the following line right below the "

Let's install some packages we'll need to run our custom back-end. We'll use E

 as a server runtime for our Node.js project and 

 to watch our project for file changes during development.

Add a script to start our server to your 

 file where our server logic will live, by typing the following into the terminal.

Run the following command in the terminal and visit 

 in your browser. You should see a response with an object containing the data 'Hello world'.

You have now created a Node.js Express server application locally, well done. 

It's important to protect your application by deciding who is allowed to make requests to your app and who isn't. There are several ways in designing an architecture for this. But to keep it simple, for now we will block requests from origins different than our own. In other words: your Webflow domain.

What we've added is a function that our application uses to check the origin of the request. We've constructed an array of possible origins that are allowed to make requests to our app. Just add your Webflow domain to this array.

If the origin making the requests is included in the 

 array, then the correct headers will be set and the request can continue. If the origin is 

Now in your Webflow project add the following 

 to your custom-code. This will make a fetch request to our application Get endpoint at 

Open up your browser console and you'll see the data logged from our custom Webflow back-end.

Integrate different services into your app

Create more API routes that fetch and return data to your Webflow project

Deploy your app to a cloud service like Heroku or Render

Learn how to create a basic back-end solution for your Webflow project. Expanding on your ability of integrating third-party services into no-code projects.

Create a custom NodeJS & Express Webflow back-end

Community platform to build your ultimate place to live

CrowdBuilding is a platform that brings people searching for housing opportunities in The Netherlands together to form a community to start building projects as a collective. With a mix of sustainable alternatives, CrowdBuilding helps these communities build their ultimate way of living.

Node.js

Webflow

Firebase

Heroku

NextJS

Memberstack

PostMark

CrowdBuilding

Write pseudocode visually.

Pseudoflow allows you to deconstruct your coding challenges quickly and helps you solve them, visually. Break up your challenge into smaller pieces and create an overview of individual steps that need to be completed to finish your task. Implement each step into your project and work your way down the list.

ReactFlow

Pseudoflow

Integrate Unsplash into your Webflow projects

A service to integrate Unsplash directly into Webflow projects. Build forms for your users that incorporate Unsplash to allow users to search and select high quality imagery.

MongoDB

MagicLink

Vite

W-IMGR

Stimulating reuse of paper coffee cups

Bubble.io app built as an automated solution to stimulate reuses of paper coffee cups. Featuring a system consisting of a Raspberry Pi QR code scanner that keeps track of paper cup reuses and offering potential rewards towards increasing amounts of reuse of the same cup.

Bubble.io

Raspberry Pi

Python

Fortune Coffee

A Design & Research project to reduce harm and misuse of substances

Gebruikr. is an app that aims to support inexperienced drug users on festivals. The goal is to reduce harm and encourage responsible use of substances. The app gives advice on using drugs in a responsible way and allows users to see what they're using and when.

Adobe XD

Gebruikr.

Corporate website for a metalworking company

Design and development for WM-Techniek. A metalworking company focusing on delivering the highest quality goods and services from welding to CNC lasercutting. WM-Techniek's website showcases completed projects and informs potential clients of their services. 

Tailwind

MailerSend

WM-Techniek

Support and guidance for better health and life

Design and development for Vitaalcoach Den Helder. A food and lifestyle coach that supports people in their journey of improving their lifestyle. Informing potential clients of a diverse set of services that will help them achieve a better quality of health and life.

Vitaalcoach Den Helder

Corporate website for a building company

Design and development for Van der Blonk Bouwontwikkeling. Van der Blonk helps you complete your next building project, from start to finish. Van der Blonk's website delivers on presenting services towards their clients and showcasing multiple completed projects.

Van der Blonk

Playfully interacting during the pandemic

A NodeJS and Sockets.io web application using Machine Learning body gestures interaction through webcam to allow for COVID safe interaction. Stimulating informal social interactions in public space. Aimed at children to be able to interact with peers to enhance their learning ability in social development.

Sockets.io

TensorFlow

From Prevention to Resilience

First version of my BWLTRS website 

A retired one-pager version of my portfolio. Saved in the archives to look back on. 

Portfolio V1

Version 2 of my BWLTRS portfolio

The second version of my portfolio developed during my travels in New Zealand.

Sanity

Cloudinary

Portfolio V2

Smart Thermostat Interface Design

Smart thermostat interface design for a futuristic design speculation scenario where limited power supply is available in society. Hub allows to regulate and control the amount of power that is supplied to households.

Figma

No-code goal tracking app

A web application built through no-code automation apps that allows you to keep track of daily learning goals as a designer.

Zapier

Airtable

jQuery

Goals

Dating during a pandemic landing page design

Landing page visualisation for a dating during pandemic project. Bracelets allowing people to see how comfortable others are regarding social situations and distancing.

Embracelet

Design exploration of Glass Morphism

Landing page design containing elements of the visual style of Glass Morphism.

Glass Morphism Landing Page

UI design of a mobile app showing inspiration and tasty recipes for any moment of the day in the visual style of Glass Morphism.