Creating a Simple Live Chat Server with NestJS and WebSockets

Creating a Simple Live Chat Server with NestJS and WebSockets

When we are building applications, there are many instances where we want data updates from the server to display immediately . Perhaps we have a chat application and we want to display new messages to a user, or maybe we’ve built a game that needs to display an update to the user as soon as something happens on the server. The problem with a typical client/server set up is that we would trigger a request from the client to load some data from a server when the application… continue reading.

Creating a Shared Element Transition Animation in Ionic

Creating a Shared Element Transition Animation in Ionic

Recently, someone asked me if it is possible to create a shared element transition in an Ionic application. I wasn’t actually familiar with that specific term, but it is something I’ve wanted to try building in Ionic for a while and it’s actually a little bit easier than I thought it would be. The basic idea is that rather than just transitioning directly to a new page, we take one of the items on the existing page and animate that into its position on the new page. This… continue reading.

Animating List Items in Ionic with the Intersection Observer API

Animating List Items in Ionic with the Intersection Observer API

In this tutorial, we are going to take a look at creating a directive that will allow us to apply a cool little enter/exit animation to items inside of an Ionic list. We will be able to define a simple CSS class to determine what the animated styles should look like, which might end up looking something like this: NOTE: The actual end result is smoother than the GIF above looks In this case, we are modifying the of the list items and applying a as they enter or exit the… continue reading.

Master/Detail Navigation Within a Tabs Layout in Ionic

Master/Detail Navigation Within a Tabs Layout in Ionic

There have been some reasonably big changes to tab-based navigation in Ionic, and one issue that I see pop up quite a lot is creating more complex navigation within individual tabs. Specifically, a lot of people seem to be running into an issue where after navigating to another page inside of a tab, the tab bar will disappear. In this tutorial, we will be looking at how to create a multi-level master/detail style navigation pattern inside of a tabs layout. This will allow… continue reading.

Handling Multiple File Uploads with NestJS

Handling Multiple File Uploads with NestJS

In previous tutorials, we have covered how to data to a NestJS server, but when it comes to uploading files to a NestJS (or any) server, things get just a little bit tricker. In this tutorial, we are going to walk through setting up a controller in NestJS that can handle receiving file uploads from a front-end application. I will also give a basic example of how to upload from the client-side as well (e.g. sending the files from an Ionic application) to actually make use… continue reading.

Deploying a Production NestJS Server on Heroku

Deploying a Production NestJS Server on Heroku

I’ve been writing quite a few tutorials on NestJS recently, but an important step in creating a backend for your application is actually hosting it somewhere. During development you can have your NestJS server running over , but when you are ready to launch your application that server will (usually) need to be accessible to everybody (not just your local machine). There are many different ways you could go about hosting a NestJS server - you could host it anywhere you are… continue reading.

Creating a List Gradient Effect with SASS in Ionic

Creating a List Gradient Effect with SASS in Ionic

In this tutorial, we are going to look into how we can use SASS (which is built into Ionic/Angular applications by default) to create a cool gradient effect on our Ionic lists. It will look something like this: The basic idea is that we choose a base colour, and then that colour will be transitioned dynamically across each list item. This effect can be applied to more than just lists too, you could use it in pretty much any situation where you have a parent element with… continue reading.

Displaying Upload/Download Progress in an Ionic Application

Displaying Upload/Download Progress in an Ionic Application

A good experience in a mobile application rests heavily on good communication. You communicate your intent to the application, and it communicates back to you. The better you and the application communicate, the better the experience will be. Uploading and downloading files is an operation that can take some time, so it is important that we get the communication right when this is happening. If you purchase an item online, the experience generally feels better when the seller… continue reading.

Creating & Using a Headless CMS with an Ionic Application

Creating & Using a Headless CMS with an Ionic Application

A Content Management System (CMS) provides an easy way to store and manage data related to content that you want to display. Popular Content Management Systems include the likes of Wordpress , Drupal , Magento and many more. One of the main benefits of a CMS is that it allows you to manage content without having to worry about the code - once the website or application is built you can typically manage everything through some kind of administration interface rather than… continue reading.

Adding JWT Authentication to an Ionic Application with MongoDB and NestJS

Adding JWT Authentication to an Ionic Application with MongoDB and NestJS

Many Ionic applications will require the concept of an authenticated user who is authorised to perform certain actions - perhaps only authenticated users may access your application at all, or perhaps you want to restrict certain types of functionality in your application to certain types of users. There are many different options that can be used to add this functionality to your application, including services like Firebase and Auth0 which do most of the heavy lifting… continue reading.

Using MongoDB with Ionic and NestJS

Using MongoDB with Ionic and NestJS

In the previous few NestJS tutorials we have been discussing how to set up a basic REST API that we can interact with using an Ionic application. We have covered making both GET and POST requests to the backend, but so far we have just been using dummy data and placeholder code - our API doesn’t really do anything yet. In this tutorial, we will be covering how to integrate MongoDB into a NestJS backend and how to use that to add and retrieve records from an Ionic… continue reading.

Adding Sound Effects to an Ionic Application

Adding Sound Effects to an Ionic Application

In this tutorial, we are going to cover how we can add sound effects to our Ionic applications. This particular example is going to cover adding a “click” sound effect that is triggered when switching between tabs, but we will be creating a service that can be used generally to play many different sound effects in whatever situation you would like. I wrote a tutorial on this subject a while ago, but I wanted to publish a new tutorial for a couple of reasons: It was a long… continue reading.

Creating an Achievement Unlocked Animation with Angular Animations in Ionic

Creating an Achievement Unlocked Animation with Angular Animations in Ionic

I’ve written a few articles in the past that covered using the Angular Animations API in an Ionic application. You can find some of those articles below: The Web Animations API in Ionic Add to Cart Animation Animating from the Void: Enter and Exit Animations in Ionic Most of the tutorials that I have created so far focus on reasonably simple animations, but the Angular Animations API is powerful and can handle much more complicated animations. In this tutorial, we will be… continue reading.

Migrating to the Upgraded Ionic Tabs Components

Migrating to the Upgraded Ionic Tabs Components

In this tutorial, we are going to be walking through how to migrate your existing Ionic 4 applications that use tabs to the new tabs components that were introduced in beta.15 . We will go through a simple example of converting the old tabs components to the new ones, and we will also discuss the general ideas behind the changes. It is uncommon to see breaking changes introduced throughout the beta period, but in this case it seems to be something that has been highly sought… continue reading.

Create a Custom Modal Page Transition Animation in Ionic

Create a Custom Modal Page Transition Animation in Ionic

When we launch a modal in an Ionic application, an animation is used to provide a smooth transition as it appears on the screen. The default animation for iOS and Android causes the modal to slide up from the bottom – the effect is more pronounced on iOS, but the animation is similar on both platforms. This animation is perfectly suited to the platforms it runs on and most people will just stick with the default animation (there is no specific reason not to). However, it is… continue reading.

An Introduction to HTTP Requests & Fetching Data in Ionic

An Introduction to HTTP Requests & Fetching Data in Ionic

HTTP requests allow us to request resources that our application can make use of. In the context of this article, this will generally mean requesting data from some API over the Internet, or loading data from a JSON file over the local network. These are HTTP requests that we are going to be launching manually through our code. However, HTTP requests are also used to load other resources in our applications like images or CSS files. If you open up the debugging window, go to… continue reading.

Multi-File Upload with Ionic & Angular (Client-Side)

Multi-File Upload with Ionic & Angular (Client-Side)

I’ve been building out some software recently that involves uploading a bunch of files at once to a server, so I figured it would be worthwhile to share the solution I ended up with in this blog post. The solution is based around using the ng2-file-upload package , but we will be building that into a custom component so that we can easily drop all of the bits-and-bobs we need into the application in a single line of code. The end result will look like this: The custom… continue reading.

Sending Data with POST Requests to a NestJS Backend

Sending Data with POST Requests to a NestJS Backend

In the previous tutorial, we focused on making a GET request from an Ionic application to a NestJS backend. A GET request is generally pretty simple, as all we are doing is making a generic request to a specific URL which will then return a response. In this tutorial, we are going to cover how we can send data from our Ionic application to the NestJS backend by using a POST request. Unlike a GET request, a POST request allows us to send a data payload along with the… continue reading.

Building a Notepad Application from Scratch with Ionic (Angular)

Building a Notepad Application from Scratch with Ionic (Angular)

A difficult part of the beginner’s journey to learning Ionic is the step between understanding some of the basics and actually building a fully working application for the first time. Concepts explained in isolation can make sense, but it may be difficult to understand when to use them in the context of building an application. Even after spending some time learning about Ionic, you might find yourself starting a new project with no idea where to begin. The aim of this… continue reading.

Reordering List Items with Ionic Web Components

Reordering List Items with Ionic Web Components

A while ago, I released a video that walked through how to reorder list items in Ionic 3. Now that Ionic 4 has been released, and just about everything has moved over to web components, the way in which we need to reorder list items has changed a little. In this video, we walk through how to use the and components to reorder list items in an Ionic 4 application. Watch the video on YouTube: Click here . continue reading.