Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m

Next lesson playing in 5 seconds

Cancel

Free Preview: Build an App From Scratch With JavaScript and the MEAN Stack

Introduction

01:02
  • Overview
  • Transcript

Full-stack web development requires coding both a front-end for the browser and a back-end server. Using JavaScript for both parts of the app makes life a lot simpler for full-stack devs. That's where the MEAN stack (MongoDB, Express, Angular, and Node.js) comes in. With the MEAN technologies, you can code a cutting-edge web app in JavaScript, from the front-end all the way down to the database.

In this course, you'll learn how to use the MEAN technologies to build full-stack web apps using only JavaScript (and its close cousin TypeScript). You'll start from absolute scratch, scaffolding an empty project, and build up a complete web app using the MEAN stack. You'll learn how to configure a MongoDB database, how to write a database abstraction layer, and how to create a REST API to make that data available to the front-end. On the client side, you'll learn how to structure an Angular app, how to create a service to connect with the back-end API, and how to implement each of the UI components that make a complete app.

It's easier than you think, so let's get started!

Learn JavaScript: The Complete Guide

We've built a complete guide to help you learn JavaScript, whether you're just getting started as a web developer or you want to explore more advanced topics.

1.Introduction
2 lessons, 07:21

Free Lesson
1.1
Introduction
01:02

Free Lesson
1.2
Prerequisites
06:19

2.Getting Started
3 lessons, 30:48

2.1
Creating the App Structure
11:46

2.2
Creating the Server-Side Entry Point
10:14

2.3
Starting the Angular and Express Apps
08:48

3.Setting Up the Mongo Database
4 lessons, 27:53

3.1
Getting MongoDB Up and Running
06:08

3.2
Connecting to MongoDB
06:47

3.3
Creating the Database Schema
07:49

3.4
Creating a Simple Data Access Layer
07:09

4.Creating an API With Express
6 lessons, 29:16

4.1
Handling Requests in Express
09:57

4.2
Taking Advantage of the Express Router
05:52

4.3
Adding the `GET` Handler to the API
05:34

4.4
Adding the `POST` Handler to the API
03:18

4.5
Adding the `PUT` Handler to the API
02:17

4.6
Adding the `DELETE` Handler to the API
02:18

5.Building the Front-End Angular App
6 lessons, 45:52

5.1
Creating the Front-End Models
06:57

5.2
Creating an Angular Service
07:31

5.3
Making HTTP Requests From the Service
08:33

5.4
Setting Up the User Interface
09:05

5.5
Creating All the Components
05:28

5.6
Adding Routing to the App
08:18

6.Creating the App Components
12 lessons, 1:00:02

6.1
Adding the View Lawn Markup
05:55

6.2
Adding the View Lawn Code
06:51

6.3
Adding the Add Lawn Markup
04:34

6.4
Adding the Add Lawn Code
07:41

6.5
Adding the Edit Lawn Markup
03:06

6.6
Adding the Edit Lawn Code
04:11

6.7
Adding the View Application Markup
02:54

6.8
Adding the View Application Code
07:46

6.9
Adding the Add Application Markup
02:16

6.10
Adding the Add Application Code
04:49

6.11
Adding the Edit Application Markup
04:20

6.12
Adding the Edit Application Code
05:39

7.Conclusion
1 lesson, 03:18

7.1
Conclusion
03:18


1. Introduction

1.1 Introduction

I don't know about you, but sometimes creating web applications can sure feel exhausting. Splitting your time between different parts of the application from front end, to back-end, to database, and back again. And this almost always involves switching between languages and technologies from interpreted languages, to compiled languages, and everything in between. Today, we are gonna build a fully functional web application from the ground up. Starting from scratch with only one language, and we'll be touching everything from the database, to server side code, to front end code, all with our good old friend JavaScript. Well, and its close cousin TypeScript, because today, we're diving head first into the MEAN stack. And I'm gonna show you how you can take some basic knowledge of JavaScript and turn it into a high quality full stack web application, and anybody can do it. So, what are we waiting for? Let's get started.

1.2 Prerequisites

Before we can get started writing any code and building our Full-Stack MEAN application, we need to have a couple of tools downloaded and installed, and a basic understanding of some of the things that we're gonna need to know in order to follow along with this course. So the first thing and kind of most foundational that we're gonna need to actually download and install is gonna be Node. So you need to have Node.js running on your machine. Now, it can be a Windows machine or a Mac, like I'm running on here, or a Linux machine, it doesn't really matter. There is flavors for Node for just about any platform you can run on. So all you need to do is head over to nodejs.org and go ahead and download whichever version you would like. I would stick with maybe the recommended for most users version here, the LTS, but you could run on the most current. And actually, my machine is running on a relatively current version, it's a 9.0 version. So anywhere in there should should be just fine. Now, it's important to get Node.js installed because we need to have that as kind of the foundational software that's running the back end server application. But at the same time, when you downloaded and installed Node.js you also get NPM, which is the node package manager, which is going to allow us to bring in a lot of third party libraries and all of their dependencies. And make that process really, really simple. So you're gonna notice that there's only a couple things that you actually need to download and install for this course. Everything else is gonna be brought in using NPM, which is really quick and really simple and really easy. So you do need to download and install Node.js, and once you've done that, you're also gonna need to download and install Mongo. Now, Mongo is a database application or database software that allows you to kind of creates and store free-form schemaless data. So you can create a database with collections of JSON objects that are very flexible, that you can add to. And you don't have to worry about tables and columns and all those types of things that you would have to worry about in a relational database. Now, both of those types of databases, kind of the free-form document database and the relational database both have really good places in the market. But depending in what you're trying to do, you can definitely go one way or the other. So in this course, because we're using the MEAN stack and the M in MEAN stands for Mongo, obviously we're gonna go ahead and need to have this. So you can head over to mongodb.com and simply download it, it's a free download, and install it on your machine. Once again, there are flavors for Windows, Mac, and Linux, so download whichever version that you need to run on your machine. And then you're gonna be ready to go. From that point on, that's really all you have to download and install, Node.js and MongoDB. Now, above and beyond that, it would definitely be in your best interest to have a text editor that you really feel comfortable with, and that is kind of geared more towards software development. You could absolutely use Notepad or TextEdit, or those types of built-in text editors that come on most platforms. But to really get the full development feel, and some assistance along the way, it would really benefit you to have kind of a developer’s text editor. So you could use something like Atom or Notepad++ or something like that, and those are definitely viable options. In this course, I'm actually gonna be using Visual Studio Code. I've definitely come to like it over the last couple of years. And I'm sure you've noticed that in the previous courses that I've come out with. But it's just a phenomenal text editor that you can just type up normal text documents. But then there's also so many extensions and other things that you can install into Visual Studio Code to make it such a joyful development experience that has a lot of great features that, if you haven't used it yet, I would highly recommend you check it out. So that's what I'm gonna be using for this course. So if you wanna follow along and do the same as me, then you can go ahead and download this software, this Visual Studio Code for your particular platform. From that point on, it really just is a matter of your level of comfort with the technologies that we're gonna be using. Now, the foundational things that you're gonna need to have at least a basic understanding of would be JavaScript. So if you don't have a lot of experience with JavaScript, you can head over to tutsplus.com and search for JavaScript. You're gonna find a lot of really good tutorials and video courses. The same with TypeScript, you're gonna need to know a little about TypeScript cuz we're gonna be working with Angular. So if you wanna know a little bit more about Angular, if you're not really sure about it, you can do a little background research. And check out our Angular courses here on Tuts+ as well. So that's just kind of the way it's gonna work. Now, I'm gonna do the best that I can over the duration of this course to really give you some background information, as well as teach you about what these things are as we build out this full stack application. Now, this is not an Angular course, although we are gonna be talking about Angular and using Angular in this course. So if you need to understand a little bit more, and maybe if I'm going through things a little bit quicker than you're comfortable with, then I would highly recommend you coming back over to Tuts+ and taking a look at some of our Angular courses. Because we have several as well. And that's just kind of the way this is gonna go. So we're gonna be doing a lot of work with Mongo, which we've already got installed here. With Express, which you really don't have to know a ton about. I'm gonna take you through the process of building an Express back end application. We're gonna be using that for building out our API for our application. Angular, which I'm gonna take you through a little bit, but it would kind of be beneficial for you to understand or have at least the basics in your tool belt. And then Node, and Node you're really not gonna have to know a ton about. Simply because that's kind of the underlying framework that everything is gonna be running on. But to have it downloaded and installed on a basic understanding of what it is would not hurt you either. So once you have all of these things downloaded and installed, namely Node.js and MongoDB, and whatever your text editor of choice is, then you're gonna be ready to get started. So the next couple of lessons, we're gonna spend some time setting up our application, getting our application built, and the structure kind of ready to go. And then once we've got all that set up, we can start building our application. So let's go ahead and start working on the foundational structure of our application.