Build an App From Scratch With JavaScript and the MEAN Stack

Derek Jensen

Derek JensenSep 26, 2018Lessons: 34Length: 3.4 hours

Angular Express MongoDB Node.js Full-Stack Front-End Back-End Angular 2+Web Development JavaScript

Next lesson playing in 5 seconds

Build an App From Scratch With JavaScript and the MEAN Stack

Introduction

01:02

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

1.1
Introduction
01:02

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

Derek Jensen

Derek Jensen is a lifetime nerd that calls the Chicagoland area home. He is your typical family man that loves activities with his wonderful wife and three amazing children. He is huge sports buff (both playing and coaching) and loves football, baseball and basketball. He loves just about any technology he can get his hands on but spends most of him time on the server side of the world. His day job consists of writing highly transactional backend web services, data access layers, and n-tier applications using the .NET Framework in C#. At night, when he's not spending time with his family, he enjoys authoring Tuts+ Courses and creating ASP.NET MVC web sites and mobile apps for clients.

Unlimited Downloads
From $16.50/month

Get access to over one million creative assets on Envato Elements.

Over 9 Million Digital Assets

Everything you need for your next creative project.

Create Beautiful Logos, Designs
& Mockups in Seconds

Design like a professional without Photoshop.

Join the Community

Share ideas. Host meetups. Lead discussions. Collaborate.

Quick LinksExplore popular categories