Build & Deploy a Full Stack URL Shortener with Node.js, React, TypeScript & MongoDB

Tom Nagle
4 min readSep 20, 2021

In this guide we are going to build & deploy a full stack URL shortener with Node.js, React, TypeScript & MongoDB. You can follow along by watching the video associated with each section, or by reading the guide.

Finish repository:

By following along with this guide you will learn:

  • How to build a REST API with Node.js, Express, Mongoose & TypeScript
  • How to build a simple React.js application with TypeScript
  • How to deploy a Node.js server with Caddy on a DigitalOcean droplet

Part 1 — Building the backend

Create a new directory for your application and inside that directory, create a directory for the server. Then, initialize the application with yarn init. You can press enter on all the questions.

mkdir url-shortener

cd url-shortener

mkdir server

cd server

yarn init

Initalizer the application to be a TypeScript application with:

npx typescript --init

This will create a tsconfig.json file for you.

Install the required dependencies with:

yarn add express cors body-parser config mongoose yup nanoid

Install the development dependencies with:

yarn add @types/node @types/body-parser @types/config @types/express @types/nanoid @types/node @types/yup typescript ts-node -D

Tom Nagle

I am a full stack JavaScript developer, living in Melbourne, Australia. My preferred stack is Mongoose, TypeScript, Node.js, React & GraphQL.