# 01 - Build a Login system with Nuxt, FaunaDB, and Netlify

Watch the YouTube video:



Today I will introduce a new dev guide series. These dev guides will show you how to use a set of technologies to implement a Login system.

# Executive summary

Welcome to my introduction to building a Login system. This series of dev guides will explore the JAMstack architecture. Checkout the following article to see if this series is for you. These dev guides may be of interest to frontend developers who use Vue, Nuxt, Gridsome, or VuePress. You may also be interested in these articles if you are learning Vue, Vuex, Vue Router, Vue Server Renderer (SSR), Vue CLI, Nuxt, Gridsome, or VuePress.

# Prerequisites

There are no technologies specified for this dev guide.

# Citations

There are no references cited for this dev guide.

# What is JAMstack?

JAMstack is an architecture that uses:

  • client-side JavaScript,
  • reusable APIs, and
  • prebuilt Markup.

JAMstack is also a challenger to the client-server model.

The reasons for writing these dev guides include:

  • sharing my practice with anyone who's interested,
  • actively learning a new development process, and
  • documenting the steps for creating a Login system.

Each dev guide in this series achieves a specific goal, and then the code is built upon in later dev guide articles. I use this approach for documenting my process because I plan to:

  • onboard other developers in the future, and
  • share some of these dev guides with the community.

At the end of these dev guides, you will have something practical to use as a foundation for your own apps.

In a moment, I am going to describe a practical implementation of JAMstack called FAGANN stack.

# Prerequisites for these dev guides

It is normal for a developer to have a collection of tools. Below is a list of tools I'll use throughout these dev guides.

# FAGANN stack

FAGANN stack is an selection of key development tools. My toolkit is made up of:

  • FaunaDB, a serverless database,
  • Axios, a promise-based HTTP client,
  • GraphQL, a standard & API architecture,
  • AWS Lambda, a serverless compute service,
  • Nuxt, a JavaScript-based frontend framework, and
  • Netlify, a serverless web host & CDN for static sites.

# Generic tools

Support technologies, while not very exciting, are nonetheless essential to any developers' toolkit. My assembly of support technologies consists of:

  • VS Code, a code editor,
  • Git, a version control system,
  • GitHub, a remote code repository,
  • Node, an open-source server environment,
  • NPM, a package manager for Node modules,
  • JavaScript, a popular programming language,
  • CSS3, the design language for presenting web pages, and
  • HTML5, the markup language for creating web pages.

# Specialist tools

Then there are the specialist tools that I use with FAGANN stack. These amazing devices really enhance my developer experience. My FAGANN stack utilities include:

  • Fauna Shell, a remote database CLI,
  • Netlify CLI, a remote hosting CLI,
  • Netlify Dev, a local dev server, and
  • Netlify Lambda, a local functions dev utility.

# Development platforms

You can use whatever platform you like. The most common options are Windows 10, MacOSX, or a Linux-based distribution. For instance, I use Ubuntu Desktop 20.04 LTS running Ubuntu Studio Installer. Ubuntu comes in different flavours with their own desktops, default applications, and settings:

Flavour Desktop
Ubuntu GNOME
Kubuntu KDE Plasma Workspace
Lubuntu LXQt
Ubuntu Budgie Budgie
Xubuntu Xfce
Ubuntu Studio Xfce

With my setup, I get to use GNOME instead of Xfce as my desktop, and I also get a full range of multimedia production tools.

Also, software development is not very demanding on your hardware resources, unlike gaming, or video editing. My last rig was very modest when I built it (using an AMD Athlon II X4 620 CPU) but that system was so simple that there was very little that could go wrong with it and, as such, it stuck around for 10 years!! Thank goodness it finally died in 2019 or I'd still be using it today. Brrr. A cold chill just ran up my spine.

# Review

In this dev guide, I introduced:

  • the Login system,
  • why I'm building a Login system,
  • the JAMstack,
  • the toolkit, and
  • a small selection of development platforms.

# Next

In the next dev guide, we are going to scaffold a Nuxt framework.