Building Blocks of a Full Stack Web-App

What goes into building a full stack web-app from scratch?

As a beginner developer, it can be hard to figure out what technologies you need to learn and how to fit it all together to produce a production ready full stack web-app.

What exactly is an API and how does it relate to the frontend? What languages and frameworks should I be using? What resources should I use to learn all this stuff?

These are the types of questions I'll be answering down below.

Table of Contents:

• What is a full stack web-app?
• Front End
  • HTML & CSS
  • JavaScript
  • Frameworks
• Back End
  • API
  • Languages & Frameworks
  • Databases
• Where should I go from here?

What is a full stack web-app?

Put simply, a full stack web-app is an application built with both a frontend (client side) and a backend (server side).

The frontend is the visible part of the application which the user can see and interact with in the browser. It's responsible for your users experience and should run smoothly, provide the expected information and work without visible bugs or problems.

The backend refers to the server side of the application that can't be accessed by the user. It's responsible for any complex logic, making queries for data from a database or an external API and securely dealing with sensitive information (such as emails and passwords) away from the view of the user.

The frontend and backend will frequently communicate with each other as the user navigates the app. For example, an E-Commerce store might ask the backend for a list of products and all relevant information such as prices and reviews etc. The backend would then query the database to get the required data then send it back to the frontend so that up to date and relevant information is provided to the user.

Examples of full stack web applications:

• Twitter
• Amazon
• Spotify
• YouTube
• Trello
• Figma

Frontend

Frontend development refers to the "client-side" where the main priority is providing the user with the best possible experience and all required information.

These are the 3 components to building the frontend:

• HTML - HTML provides the overall basic structure and content at the core of each page.
• CSS - This controls how the HTML elements are styled and presented to the user.
• JavaScript - JavaScript is used to add interactivity to the web-app by making HTML elements and content behave in different ways depending on user actions.

HTML & CSS

HTML is the foundation of any web page and is where all frontend development starts.

It is a markup language which uses tags to identify different types of content and the purposes they each serve to the page.

For example, below is a basic numbered list:

1. List Item 1
2. List Item 2
3. List Item 3
4. List Item 4

And below is the HTML code responsible for that list. The ol tag represents an ordered (numbered) list, the li tag respresents a list item.

<ol>    <li>List Item 2</li>    <li>List Item 3</li>    <li>List Item 4</li>    <li>List Item 1</li></ol>

CSS is responsible for giving a page it's entire style including layouts, colors, fonts and more. Not only that, if you want to change the style on different screen sizes (responsiveness), CSS is responsible for that too.

Basically, you can think of CSS as a list of rules for how the different HTML elements in a page should look.

Check out the list below which is the same one from above but with CSS applied.

And below is the CSS responsible for the styling changes. You can see that 3 different rules are applied to each li list item.

li {    color: #0f7cd0;    font-weight: 800;    font-style: italic;}

Recommended learning resources:

• Learn HTML5 and CSS3 From Scratch - Full Course by Free Code Camp (YouTube)
• Build Responsive Real World Websites with HTML5 and CSS3 by Jonas Schmedtmann (Udemy)
• Modern HTML & CSS From The Beginning (Including Sass) by Brad Traversy (Udemy)
• Advanced CSS and Sass: Flexbox, Grid, Animations and More! by Jonas Schmedtmann (Udemy)

CSS Preprocessors

A CSS preprocessor is a program that lets you generate CSS using its own unique syntax.

There are many preprocessors to choose from and each add different features that don't exist in pure CSS such as mixins, nesting, and functions. They are especially useful for large full stack web-apps since they offer more flexibility and maintainability.

Some of the most popular ones today:

• Sass
• Less
• Stylus

CSS Frameworks

CSS frameworks provide a basic structure and generic functionality for styling a web app and deals with common and repetitive problems.

They're extremely useful for quickly building a frontend without having to start from scratch and can usually be overridden with your own CSS at any time.

Some of the most popular ones today:

• Bootstrap
• Tailwind CSS
• Semantic UI
• UI kit
• Bulma
• Materialize

JavaScript

JavaScript is at the heart of frontend development and is what's used to modify content and make the web app behave differently depending on a user's actions.

Common uses for JavaScript include confirmation boxes, buttons and handling form inputs.

For example, JavaScript can be used to make an alert popup when a button is pressed.

const button = document.getElementById('button');button.onclick = function () {    alert('Hi! This is an alert!');};

Recommended learning resources:

• Learn JavaScript From Scratch (Free Code Camp)
• Learn JavaScript - Full Course for Beginners by Free Code Camp (YouTube)
• The Complete JavaScript Course 2020: Build Real Projects! by Jonas Schmedtmann (Udemy)
• JavaScript: Understanding the Weird Parts by Anthony Alicea (Udemy)

Frameworks

When building a full stack web-app, it's likely that you're going to want to use a JavaScript framework (or library).

A JavaScript framework provides developers with a collection of pre-written code that solves many of the recurring problems that consistently pop up in frontend development. Although more complex than any other area of frontend development, it's worth learning to use at least one since it makes life as a full-stack developer much easier.

You will often see the words framework and library used interchangeably but there are slight differences. Libraries (React) offer code that you can plug into your web app when needed whereas frameworks (Angular) provide a more rigid structure (or framework) for you to build your frontend on.

There are many frameworks and libraries with different pros and cons to each. Right now the most popular frameworks are React, Angular and Vue.

React

Created and maintained by Facebook, React is by far the most popular frontend framework.

React encourages modularity and scalability in your frontend making it perfect for web-apps of all sizes.

Features include:

• Component Based - Every section of the frontend is wrapped inside a self-contained modular component which makes code reuse and debugging much easier.
• JSX - It uses a markup syntax that closely resembles HTML which allows you to easily create elements within a React component.
• Performance - React has its own event system and virtual DOM which makes DOM interaction and event handling more performant. JavaScript and CSS is also automatically optimized.
• Easy To Learn - It's easy to learn due to the plethora of online resources and a large, vibrant community. The fact that it's technically a library also helps (you only need to learn the parts you use).
• Community Support - Since it's so popular and is backed by Facebook, it's regularly updated and improved. There are also many community packages and React frameworks such as Next.js or Gatsby.js.
• In Demand - Due to it's large popularity, React is in high demand in the job market.

Recommended learning resources:

• Learn React JS - Full Course for Beginners by Free Code Camp (YouTube)
• Modern React with Redux by Stephen Grider (Udemy)
• Complete React Developer in 2020 (w/ Redux, Hooks, GraphQL) by Andrei Neagoie (Udemy)

Angular

Angular is an opinionated framework released by Google in 2016 in answer to the massive success of React in 2016.

It was built to target web-apps that require a more rigid and structured approach on the frontend and is suitable for large applications. This is especially the case due to it's suitability for using TypeScript.

Features include:

• Opinionated Framework - Angular is an opinionated framework meaningthat it has out of the box support for developing large applications and you need tofollow certain design patterns. This means less flexibility but less problems.
• Deals With Complexities - Angular takes care of many JavaScriptcomplexities such as decorators, dependency injection and TypeScript allowing thedeveloper to focus on other areas of development. It will feel familiar to thoseexperienced with backend frameworks such as ASP.NET.
• Well Supported - Since it's backed by Google and is popular, Angular isconsistently getting updates and improvements.
• TypeScript Support - Angular is built using TypeScript and recommendsthe use of TypeScript making it a great choice for big applications where problems anderrors are more likely.
• Secure - Angular is by far the most secure JavaScript framework withbuilt in security features such as data sanitization.
• Tough To Learn - Since it's so complex and full of advanced features,the barrier to entry into Angular is high, especially when compared to React and Vue.

Recommended learning resources:

• Learn Angular - Full Tutorial Course by Free Code Camp (YouTube)
• Angular - The Complete Guide (2020 Edition) by Maximilian Schwarzmuller (Udemy)
• Pluralsight Angular Path (Pluralsight)

Vue

Vue was created with the aim of combining the best of Angular (the view layer) and the best of React (the virtual DOM) and it's fair to say that they succeeded.

It offers a nice middle ground between the two with the option of a simple view layer like React and the option to build a full end-to-end framework with routing and data-binding like Angular.

Features include:

• Component Based - Like React, the view layer is component based withexternal data flow and state management.
• Incrementally Adoptable - Vue is designed from the ground up to beincrementally adoptable meaning it's easy to gradually implement into an existingcodebase.
• Community Support - Being the only one of the big 3 that isn'tmaintained by a big tech corporation, Vue has massive support in the community. It alsohas a vast library of packages and frameworks such as Vuex for state managemant andNuxt.js.
• Growing Fast - With lots of innovation and support over the years, Vuehas only continued to grow and who knows how far it can go. Many people think that Vueis the future of frontend web development.
• TypeScript Support - The core library was recently completelyre-written using TypeScript and is equally suited to both JavaScript and TypeScript.
• Easy To Learn - Vue is also quite easy to learn since most of it'sfeatures are optional and can be learned incrementally as you build your app. Thedocumentation is also excellent.

Recommended learning resources:

• Learn Vue.js - Full Course for Beginners by Free Code Camp (YouTube)
• Vue JS - The Complete Guide (incl. Vue Router & Vuex) by Maximilian Schwarzmuller (Udemy)
• Build Web Apps with Vue JS 2 & Firebase by The Net Ninja (Udemy)

Although not as popular as the top 3 frameworks right now, it's also worth checking out other rising frameworks such as Svelte and Ember.

Backend

The backend is the foundations that the rest of the app is built on.

These are the 4 main components to the backend:

• Server - The backend is stored and ran on a server which provides thestorage space, processing power, security and other web services that the backend needs.
• API - The API is how the frontend interacts with the backend. Thefrontend sends requests through url routes (endpoints) to the backend which takes therequest, calls middleware functions (functions that act on the request before sendingthe response) and sends a response with any required data.
• Language/Framework - Every backend is obviously written using aprogramming language and makes use of a framework which makes development much easier.
• Database - The brains of any full stack web-app, the database takesqueries and fetches any data needed by the frontend. E.g. checking the username andpassword provided matches the pair in the database.

Although you can build the frontend and backend in any order (or at the same time), I think it makes sense to start building out the backend first. It's much easier to develop the frontend when you've already planned out what data you're going to need and how you're going to access that data.

API

API stands for Application Programming Interface and is the method any application interacts (interfaces) with the backend.

The most widely used type of API is a RESTful API which basically just means that there's a set of standardized rules about how communication with the backend should take place.

In a web-app, the frontend would make HTTP requests to the backend through specific API routes (urls) and the backend would return a response with data.

There are 4 parts to a RESTful API:

• Endpoints - Every API has a root endpoint (e.g. https://api.github.com) which is the starting point for every request. The path after this endpoint corresponds with the request we want to make and the response wewant in return. For example, to return the repos of a particular user on GitHub, theendpoint would look something like: https://api.github.com/users/:username/repos.
• Methods (CRUD) - Each request will have a CRUD (Create Read UpdateDelete) method which describes the request type. A GET request is used torequest data from the database. A POST request is used to create and insertnew data into the database. A PUT or PATCH request is used toupdate already existing data in the database. A DELETE request is used toremove data from the database.
• Headers - Headers are used to provide information with each request &response such as authentication credentials.
• Body - The body is where we store the data we want to send to theserver with the request and where the data that's returned to the frontend with isstored.

Learn more about API's with this great video by Free Code Camp.

Languages & Frameworks

Since the backend runs on a server (instead of in the browser), it can be built using a variety of languages and frameworks.

Learn about some of the most popular backend frameworks below.

JavaScript & Node.js

JavaScript can be used for both frontend and backend thanks to Node.js which makes it possible to run JavaScript code outside the browser.

Node.js is increasingly a very popular choice for the backend, especially for frontend devs who are already experienced with JavaScript. It's extremely well supported, is easy to learn and use, has many useful NPM packages and allows you to make a full stack web-app in the same development environment.

Recommended learning resources:

• Learn JavaScript From Scratch (Free Code Camp)
• Node.js Crash Course by Traversy Media (YouTube)
• Learn Node.js - Full Tutorial for Beginners by Free Code Camp (YouTube)
• The Complete Node.js Developer Course by Andrew Mead (Udemy)

PHP & Laravel

PHP is a server-side scripting language that was designed specifically for developing web-apps.

Laravel is a PHP framework which makes development much easier through many built in features. These include a modular packaging system, a complete authentication system, automatic testing and more.

Recommended learning resources:

• PHP Tutorial for Beginners by Net Ninja (YouTube)
• Laravel PHP Framework Tutorial - Full Course for Beginners by Free Code Camp (YouTube)
• PHP with Laravel for beginners - Become a Master in Laravel by Edwin Diaz (Udemy)

C# & ASP.NET

C# is a simple and modern strongly typed object oriented programming language developed by Microsoft.

When used together with the ASP.NET Core framework, you're able to build dynamic and secure web-apps with a complex and organized backend. It also has the NuGet package system which is easy to use and is full of useful packages.

Recommended learning resources:

• PluralSight C# and ASP.NET Paths{' '}(PluralSight)
• Learn ASP.NET Core 3.1 - Full Course for Beginners by Free Code Camp{' '}(YouTube)
• Developing ASP.NET Core MVC Web Applications by Learning Tree{' '} (Learning Tree)

Python & Django

Python is one of the most popular languages due to it being easy to learn, well supported and efficient.

Django makes it simple to build a web-app which is versatile, scalable and secure.

Recommended learning resources:

• Learn Python From Scratch (Free Code Camp)
• The Python Mega Course: Build 10 Real World Applications (Udemy)
• Python Django Web Framework - Full Course for Beginners by Free Code Camp (YouTube)
• Python Django Crash Course by Traversy Media (YouTube)

As well as these languages and frameworks, you can also use Golang, Java, Ruby and C++.

Databases

Databases are the brains of the backend and is the main component that makes a web-app dynamic.

This is where all the data is stored and is where data is retrieved from or saved to with every request to the backend. Using the E-Commerce store example, every product and all of it's details will come from a database as will the users account and order information.

There are two main types of databases: SQL & NoSQL (or relational and non-relational) databases.

The difference is in how theyre built, the type of information they store, and how they store it.

SQL (Relational)

SQL databases use SQL (structured query language) to query for data and are structured in rigid tables, like phone books that store phone numbers and addresses.

When to use an SQL database:

• You want you data organized in a very organized way with little room for error.
• You're working with complex queries and reports that require relationships between datatypes.
• You're web-app has a heavy volume of queries. SQL is safer, more stable and ensures dataintegrity.
• You don't anticipate large changes or large volumes of data. SQL databases are quiterigid and time consuming to change.

Popular SQL databases:

• MySQL
• Oracle
• PostgreSQL
• MariaDB
• Microsoft Azure
• MS SQL Server

Recommended learning resources:

• SQL Tutorial - Full Database Course for Beginners by Free Code Camp (YouTube)
• The Complete SQL Bootcamp 2020: Go from Zero to Hero by Jose Portilla (Udemy)
• The Ultimate MySQL Bootcamp: Go from SQL Beginner to Expert by Colt Steele (Udemy)
• The Complete Oracle SQL Certification Course by Imtiaz Ahmad (Udemy)

NoSQL (Non-Relational)

NoSQL databases use JSON documents to store data with key-value pairs. Seperate documents will hold specific data like a users account details, product review information or profile information.

When to use a NoSQL database:

• You're constantly adding new features and data types and its difficult to predict howthe web-app will grow over time. NoSQL is much more flexible when it comes to changes.
• You are not concerned about data consistency and having perfect data integrity isn't apriority. E.g. Twitter probably won't care if everyone sees a new post at the exact sametime meaning data consistency isn't important.
• You have a lot of data, many different data types, and your data needs will only growover time. NoSQL databases provide much more flexibility when it comes to storing largeamounts of data.

Popular NoSQL databases:

• MongoDB
• Firebase
• Redis
• Amazon DynamoDB
• Cassandra
• Couchbase

Recommended learning resources:

• An Introduction To NoSQL Databases by Traversy Media (YouTube)
• MongoDB Crash Course by Traversy Media (YouTube)
• Firebase Firestore Tutorial Series by The Net Ninja (YouTube)
• Redis Crash Course by Traversy Media{' '} (YouTube)

Where should I go from here?

You now know everything you need to learn in order to build a full stack web-app from scratch.

If you want some more direction, here are some great learning resources which use a variety of technologies and languages:

• Full Stack Web App using Vue.js & Express.js by Free Code Camp (YouTube)
• Python and Django Full Stack Web Developer Bootcamp by Jose Portilla (Udemy)
• MERN Stack Front To Back: Full Stack React, Redux & Node.js by Brad Traversy (Udemy)
• Build an app with ASPNET Core and Angular from scratch by Neil Cummings (Udemy)
• Node with React: Fullstack Web Development by Stephen Grider (Udemy)
• Build Web Apps with Vue JS 2 & Firebase by The Net Ninja (Udemy)

Be sure to also check out this list of fullstack web-app ideas if you're struggling to get an idea of what to build.