Mastering Fullstack Development: Learn How to Build Modern Web Apps

Architecting the Stack

Understanding what we'll be building and how our frontend & backend will be set up

As mentioned in the previous chapter, throughout this tutorial series we will be creating a production ready clone called "Conduit". You can view a live demo of the application here. Conduit is a fully featured social blogging site including:

  • Authentication with JWT
  • Profiles with images
  • Write/edit/read articles
  • Comments on articles
  • Ability to "favorite" articles
  • Ability to follow other users & have their articles show up in your feed

We recommend taking a few minutes to familiarize yourself with Conduit's functionality (i.e. create an account, post an article, etc). This will help you get a good feel for the project and what would need to power it under the hood.

The anatomy of Conduit's stack

There are many different ways you can configure & build out a fullstack app. You can have your frontend & backend codebases hosted separately, together, or even partially render parts of your frontend on the server (commonly known as "server-side rendering").

For this series, we decided to have all of the frontend & backend codebases separated from each other. This is now fairly commonplace in real world applications, as being able to deploy frontend code independently of the backend can dramatically shorten the turnaround time for releasing updates & new features.

We've also found that building two separate codebases helps solidify the roles that the frontend & backend play in fullstack apps.

It also isn't terribly difficult to implement server-side rendering after you've created both the frontend and backend, and we've included some pointers on how to do this in the last few chapters.

Next steps

The first thing we'll need to do is build out our backend codebase (we'll create the frontend codebase immediately afterwards).

(Note: If you're only looking to learn a frontend framework, feel free to skip to Building the Frontend and simply follow the instructions for using our hosted backend API)

With that all said, lets get started building out our backend!