One of the ways to promote new products or to tell customers about a new sale is to display a banner on your website’s page with this information. This article will cover how to add three types of banners to the application built with Next.js. These types are defined by their position on the page: center, bottom, and top. To make the banners dynamic the content and the customization for them could be fetched from a CMS. In my case it’s ButterCMS but it could be any other CMS of your choice.

These are the screenshots of how the banner…

In this article, we will create models and schemas for the Author and Book objects that we need for API endpoints.

Photo by Glenn Carstens-Peters on Unsplash


Run this command to install mongoose:

npm i mongoose

Let’s create a schema and a model for the object author. The authors should have first and last names, biography, dates of birth, and death (optional). Create a new file authors.js in this location src/services/authors/models/ and paste this code into it:

In this file, we create the schema. We specify types and if the property is required or not. …

These are the links to articles in this series in order:

  1. How to develop API with Node.js and Express
    How to set up the project and how to develop a simple server with Node.js and Express
  2. How to create models and schemas for the API endpoints with Node.js, Express, and Mongoose
    How to create models for two objects if one of them references the other, how to separate code into several layers for better development and testing, how to create endpoints to create and retrieve objects

This is the second part of the “How to develop API with Node.js and Express” series. Previously we have set up our project. Now we will create models and schemas for the Authors and Books and will create our first API endpoints to create and retrieve authors.

Photo by Glenn Carstens-Peters on Unsplash

Project structure

These are the steps we need to make to create a model for authors and two endpoints we want to develop:

  1. Create models for our objects that we will store in the MongoDB database
  2. Create a Data Access Object (DAO) Interface that will contain operations we need for the endpoints. …

This is part one of a series that will cover how to create an API from scratch that will provide all CRUD operations with data stored in a database. The stack that we will use includes Node.js, Express, MongoDB.

Photo by Clément H on Unsplash

What we will develop

The result of this series is an API that has the following functionality:

  • create a new author with set first and last names, biography, dates of birth and death (optional parameter)
  • retrieve all created authors
  • update and delete an author by id
  • create a new book with a set title, description, and an author specified by id
  • retrieve all books written…

Let’s start by learning what Elasticsearch and Kibana are exactly.

Elasticsearch is an open source distributed, RESTful search and analytics engine capable of solving a growing number of use cases.

Kibana is an open source data visualization dashboard for Elasticsearch. It provides visualization capabilities on top of the content indexed on an Elasticsearch cluster. Users can create bar, line and scatter plots, or pie charts and maps on top of large volumes of data.

This article will show how to use Elasticsearch and Kibana locally. …

Recently I wanted to host my project built with Angular on the frontend and Node.js with Express on the backend. I have already been using Heroku for several years but I didn’t want the app to sleep, so I needed to find something else. Sometime later I was told that there is Netlify that allows hosting for free.

Site deployment

Netlify sites page
Sites page on Netlify

Netlify supports deployment projects from GitHub, GitLab, and Bitbucket. After selecting the repository you need to set some configuration options.

Sometimes we need to allow users to upload files by just dragging and dropping them in some area. How could we do it in an Angular application?

Photo by Omid Kashmari on Unsplash

Let’s create a new Angular application with Angular Material and Flex-Layout by running the following commands:

npm install -g @angular/cli
ng new file-uploader --routing=true --style=scss
cd file-uploader
npm install @angular/flex-layout
ng add @angular/material
ng serve -o

The app will be available at localhost:4200.

We want our UI to have both a styled drag&drop area and a button to select the files the regular way. So let’s create the UI without any functionality:


ButterCMS may be useful when you want to add dynamic content to your website/web application but don’t want to develop another application.

Photo by NeONBRAND on Unsplash

Set up the app

For the application we will use @angular/cli, @angular/material, @angular/flex-layout and buttercms. So to install everything and to setup the app run the following comannds:

npm install -g @angular/cli
ng new butterCMSBlog --routing=true --style=scss
cd butterCMSBlog
npm install @angular/flex-layout
ng add @angular/material
npm i -S buttercms
ng serve -o

App is now available at http://localhost:4200.

The next step is to create a module with routing for the blog. Run command

ng g module blog --module app --route blog --routing

Orly Knop

Full Stack Web Developer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store