Full-Stack TypeScript using Node.js, Vue.js 3 & PostgreSQL - Introduction

#typescript #javascript #beginners #webdev

In this tutorial series, we will be writing a fully featured TypeScript application from scratch using Node.js & the upcoming Vue.js 3. The goal is to cover the process of building a full-stack TypeScript application in a comprehensive and accessible way so that you could see it from A to Z and step-by-step.

This tutorial will cover not only the front-end part, but also the back-end part and everything in-between: from setting up the database through designing the database schema, exposing an API using both REST & GraphQL endpoints, till the application deployment.

Check the Live Demo

This series will teach you how to connect different layers to create a fully functioning web application. This approach aims to give you the big picture of building web applications so that you have a basic understanding of all the elements and techniques needed for creating your own applications from scratch, or rather from A to Z.

Goal

In this series, we will build yet another task management application. I decided to showcase creating another task manager because the notions of such application are simple and well understood. You already know what a task is, you know that you can group or filter them, or that you can mark tasks as done. You probably used a task manager yourself at some point. As a result, instead of spending time on explaining the business features and their outcomes, we can be practical and focus on building the actual app.

Technology Stack

On the back-end we will be using Node.js 14.x+, while on the front-end we will be using a UI framework called Vue.js, specifically the upcoming (currently in beta) Vue.js 3 that introduces the Composition API (something similar to Hooks in React.js). For the database layer, you will use PostgreSQL - probably the best database out there. ;) I will show you how to design the database schema, how to create tables and how to make relations between them. We will also see how to use PostgreSQL as a NoSQL solution and how it compares to databases such as MongoDB et al. For the UI we will do something different. Instead of writing CSS by hand we will use Tailwind CSS that provides a set of predefined building blocks that we can combine directly in HTML pages to quickly create coherent UIs. Finally, Kretes will put all those tools together in a ready to use solution (it's like a boilerplate on steroids) so that you can focus on building the actual application and its business logic, instead of spending time manually configuring and putting things like TypeScript, Node.js, Vue.js or PostgreSQL together.

Future

This tutorial aims to cover modern approaches in web development. At some pointwe may switch certain things in our stack. For example, we may try to replace Node.js with Deno or Vue.js with the Solid.js framework, etc. The idea is to track the current trends & tendencies in web development instead of using older, already established ways of creating web applications, and also to give you an early example how to use these modern solutions to build full-stack TypeScript applications. In other words, our goal here is to explore new or improved ways of building web applications.