Full-Stack Web Apps with Meteor and React
4.8 (843 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
4,667 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Full-Stack Web Apps with Meteor and React to your Wishlist.

Add to Wishlist

Full-Stack Web Apps with Meteor and React

Create full-stack web applications using Meteor and React
Best Seller
4.8 (843 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
4,667 students enrolled
Created by Andrew Mead
Last updated 4/2017
English [Auto-generated]
Current price: $10 Original price: $85 Discount: 88% off
5 hours left at this price!
30-Day Money-Back Guarantee
  • 31.5 hours on-demand video
  • 1 Article
  • 128 Supplemental Resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Learn how to create full-stack web applications
  • Learn how to launch your own full-stack web applications, switch careers, or freelance as a full-stack developer
  • Learn how to create apps that support authentication and user accounts
  • Learn how to build out applications using great third-party tools like MongoDB, Robomongo, Enzyme, react-router, and more
View Curriculum
  • A computer on which you can install software (Windows, MacOS, or Linux)
  • A basic understanding of HTML, CSS, and JavaScript

Are you trying to build and launch full-stack web applications? Maybe you want to freelance, switch careers, or launch your own side-project. If so, this is the course for you.

Like all my courses, I designed this one with a single goal in mind: Turning you into a full-stack Meteor and React developer capable of developing, testing, and deploying real-world production web applications.

"Andrew is the best when it comes to teaching programming skills, and this is the third of his courses I've taken. You can be a total noob but you'll understand what's going on because everything is explained in detail." - Lucas Engel

This full-stack course covers everything you'll need to create real-world production web apps, and there couldn't be a better time to learn. React and Meteor are exploding in popularity with both startups and large enterprises like Netflix.

This course is entirely project-based. From the very beginning, you'll be programming every single app and completing various challenges I've designed to help test and reinforce what you've learned. This is not a "sit back and watch" course. This course is designed to get you writing code and building projects in every video.

You'll be programming and launching three web apps:

  1. A leaderboard app, where you'll learn the basics of Meteor and React
  2. A link-shortener application with user accounts, authentication, and client-side routing
  3. A note app where you'll master advanced techniques and automated testing

During the course, you'll learn about:

  1. React
  2. JSX
  3. Meteor
  4. DDP
  5. Atmosphere.js
  6. MongoDB
  7. Robomongo
  8. react-router
  9. Heroku
  10. Git
  11. GitHub
  12. JavaScript ES6
  13. Mocha
  14. Node
  15. npm
  16. CSS/SCSS
  17. And more!

I built this course from the ground up around the latest versions of Meteor and React. You'll be using all the cutting-edge features available only in newer versions.

Everything you need comes in one easy-to-use package. You can stop worrying if you're learning the right skills to build an app or land a new job. I've curated all the tech that's essential to building real-world apps. I've mapped everything out in a comprehensive, easy-to-follow package designed to get you up and running in a few weeks.

I guarantee this is the most up-to-date and engaging Meteor/React course available. Your purchase comes with a 30-day money-back guarantee.

Access to fast support and a community of like-minded students.

I offer fast and friendly support. You won't have to sit around hoping someone will actually reply. I answer every single question that students post.

Don't take my word for it. It's one of the things students like most about my courses:

"This instructor is extremely responsive, answering 5/5 of my questions within 24 hours of my asking them with clear, comprehensive and friendly responses." - Gabriel Elkind

"Andrew is knowledgeable and always on the ball in the comments ready to help you out when things go awry" - Caim Astraea

"Andrew responds to every question in the forum within 24 hours and really makes the effort to solve the problem other students are facing." - Rajat Bansal

"Andrew responds to questions in the Q&A and will not leave you stranded." - Emmanuel

I can't wait to see you inside.

- Andrew

Who is the target audience?
  • Anyone looking to launch a full-stack web app, switch careers, or freelance as a full-stack web developer.
Students Who Viewed This Course Also Viewed
Curriculum For This Course
162 Lectures
Welcome & Asking Awesome Questions
1 Lecture 02:40

Learn how to ask great questions.

Preview 02:40
Installing and Exploring Meteor
5 Lectures 28:46

Learn how to install Meteor on your machine.

Preview 04:15

Learn exactly what Meteor is and why it's become such a popular and useful tool.

Preview 09:21

Need a text editor? Set up the free and open-source Atom editor.

Preview 02:07

Create and run your first meteor application.

Preview 12:21
Meteor and React Fundamentals (Score Keeper App)
17 Lectures 03:15:23

Explore the final version of Score Keep. This is the first of three applications you'll be building.

Preview 01:36

Learn about Meteor file and directory structures.

Preview 20:07

Learn how to use ES6 imports and exports to break your app into multiple files.

Preview 18:45

Learn how to set up default exports in ES6.

Preview 07:41

Learn how to install and use npm modules. You'll also learn how to render dynamic templates to the browser using React and ReactDOM.

Installing React and Exploring JSX

Learn how to create complex templates with nested JSX elements.

Render Complex HTML with JSX

Learn how to render an array of data with JSX.

Tags: jsx, array map method, const statement

DB Planning and Rendering Static Data

Explore the difference between SQL and NoSQL databases.

What is NoSQL?

Learn how to create a MongoDB collection.

Creating a MongoDb and MiniMongo Collection

Learn how Meteor uses MiniMongo and DDP to keep your apps fast.

Quering Data on the Client with MiniMongo

Learn how to use the Meteor tracker utility to run some code when your app data changes.

Rendering Players List

Learn how to setup JSX event handlers.

Inserting Players via a Form

Explore ES6 Arrow functions. You'll learn what they are, why they're useful, and when you'd want to use them.

ES6 Aside - Arrow Functions

It's up to you to swap out ES5 functions for ES6 arrow functions.

Arrow Function Refactor

Learn how to query documents when fetching or removing from a MongoDB collection. You'll also learn how to setup click event handlers with JSX.

Removing Player Documents

Learn how to update documents using MongoDB operators.

Updating Player Documents
React Components (Score Keeper App)
13 Lectures 02:00:37

Learn how to use React components to break up your apps UI into small and reusable chunks.

What are React Components?

Learn how to use ES6 classes to create custom classes and reuse code.

ES6 Aside - Classes Part I

Learn how to extend an ES6 class. This allows you to create subclasses with unique functionality.

ES6 Aside - Classes Part II

Learn how to extend React.Component to create and render your own components.

Your First React Component

Learn how to pass data into your components using React props.

Props, Prop Types, and Prop Defaults

Prop Type Update

Create React components with custom methods and DOM references.

Custom Component Methods

It's going to be your job to create and use a new Player component. 

Creating the Player Component

Create a list-based component that renders an array of items.

List Based Components

Set up conditional rendering with JSX.

Conditional Rendering with JSX

Explore advanced conditional rendering and create the App component.

Rendering Everything with an App Component

Learn how to sort documents with MongoDB.

Querying and Sorting Player Documents
Styling and User Experience (Score Keeper App)
12 Lectures 02:35:26

Teach Meteor new tricks with Atmosphere packages.

SCSS and Atmosphere Packages

Learn how to setup and structure your SCSS styles.

CSS Reset and Header Styling

Learn how to split your styles across multiple SCSS files and partials.

SCSS Imports

Learn how to create reusable styles with CSS and SCSS.

Styling the App List

Learn how to use the BEM naming convention. It's a great way to structure your styles and selectors.

BEM Naming

Use BEM to create your own selectors.

BEM Challenge

In my opinion, Flexbox is the single greatest CSS feature. Learn how to use it in this lesson.

Styling Player with Flexbox

Learn how to use 3rd-party React components to add awesome features to your application.

Using 3rd-Party React Components (FlipMove)

Learn about the ES6 object spread operator and ES6 object property shorthand.

Calculating Player Standings with ES6

Use SCSS functions and variables to wrap up the app styles.

Dynamic Classes and SCSS Functions

Debugging doesn't have to be hard. Learn how to use the Meteor and React developer tools.

Bonus: Meteor and React Developer Tools
User Accounts, Authentication, and Routing (Short Lnk App)
17 Lectures 03:19:43

Let's take a break to talk about breaks.

Learning Burnout - This Is Important

Explore Short Lnk. This is the second app you'll be building.

Exploring the Short Lnk App

Explore some client-side routing options. Client-side routing will keep your apps fast and user friendly.

Client-Side Routing Options

Create the boilerplate for Short Lnk.

Setting Up React-Router

Setup react-router in your application. You'll learn how to setup multiple pages for your application.

Setting Up Routes

Learn how to navigate between pages with clickable links and with JavaScript function calls.

Navigating Between Routes

Learn how to use React component state. This lets your component store and manage data.

Component State and Signup Form

Learn how to create user accounts. You'll also learn how to check if a visitor is logged into your application.

Creating User Accounts

Learn how to login a user to their existing accounts.

Logging In

Learn how to log out a user. You'll also learn how to do something when a user logs in or out of your app.

Logging Out and Tracking Auth Status

Learn how to create public and private pages in your app.

Private and Public Routes

Learn how to work with Meteor error messages.

Showing Meteor Error Messages

Learn how to validate data with the simple-schema library.

Schema Validation

Learn how to validate the email and password for a new user.

New User Validation

There is nothing like a good refactor. Learn how to break your react-router config into it's own file.

Refactoring Router Code

Time for a new tool. Learn how to use the Robomongo GUI tool to manage your MongoDB database.

Bonus: Robomongo
Meteor Methods, Publications, and Subscriptions (Short Lnk App)
12 Lectures 02:34:45

Methods. Publications. Subscriptions. Learn how these three tools will help you lock down your apps data.

Overview of Methods, Publications, Subscriptions

Setup the ability to insert and view links in an insecure way.

Setting up an Insecure System - Part I

Setup the ability to insert and view links in an insecure way.

Setting up an Insecure System - Part II

Restrict the data users can see with publications and subscriptions.

Creating Publications and Subscriptions

Learn how to expose a subset of all the data in a given collection.

Advanced Publications

Create and call your first Meteor method.

Creating and Calling Methods

Create a real-world Meteor method that allows the client to securely change the database.

Building "links.create" Method

Learn how to use simple-schema to validate method arguments.

Method Validation

Explore the technology that Meteor uses to serve up your applications.

Node HTTP and Connect

Learn how to extend and customize your Meteor server with middleware.

Redirecting Shortened Links

Learn how to set custom "_id" values in your documents.

A Short Video about Short IDs
Real-World React (Short Lnk App)
14 Lectures 03:03:59

Let's kick off this section by refactoring our Link component. It's getting a little too big.

Single Responsibility with React

Learn a new way to create React components with Stateless Functional Components. It's a great alternative to class based components.

Stateless Functional Components

Learn how to generate URLs specific to your Meteor application.

Creating LinkListItem

Learn how to copy content to the users clipboard right from your web app.

Copying Link URL to Clipboard

Test your knowledge of React component state.

A State Challenge

Learn how to update MongoDB documents with Meteor methods.

Hiding Links with Method Methods

Learn how to use Meteor session variables to create temporary UI state.

Meteor Session Variables

Put Meteor session variables to work for you. In this video you'll setup a link filtering system.

Filtering Links via Form Elements

Explore how you can create controlled inputs. This lets you bind an input to an attribute on your component state.

Controlled and Uncontrolled Inputs

Add real-time analytics to your web app.

Setting up Link Analytics

No project is complete without the "moment" library. Learn how to work with time and timestamps in JavaScript.

Working with Time

Working with 3rd-party components lets you build more in less time. Learn how to create full-screen modals with react-modal.

Creating Modals with React-Modal

Customize the react-modal modal to support error messages.

Setting up Modal Errors
Styling and User Experience (Short Lnk App)
10 Lectures 01:51:39

In this lecture you'll be setting up SCSS for the Short Lnk app.

SCSS Setup and Architecture

This big goal in this section is to create a configuration file for the styles. This is going to be a file that only contains config variables. That's what you'll start building in this video.

Breaking Out Configuration

You'll be wrapping up the login/signup styles in this one.

Finishing off Login and Sign Styles

Let's switch over to the private pages. In this video you'll start to style the links page.

Button Styles

Code reusability is essential when building apps of any meaningful size. That's exactly what you'll focus on with the styles in this lecture.

Reusing Styles with Modifiers

Think you can style the app header on your own? That's your challenge in this video.

Private Header Styles

Learn how to center and style the main page content area.

Styling Filters and Page Content

It's time to style those the individual link items. You'll also be setting up a message that renders when there are no links to show.

Styling Items and Empty Items

Setting up react-flip-move is going to be your challenge for this one.

Adding react-flip-move
Meteor Deployment and Version Control (Short Lnk App)
10 Lectures 01:28:48

You'll be installing Git on your machine in this video. This is the VSC (version control system) that you'll be using in this course.

Installing and Configuring Git

Learn how to add Git to your Meteor and React project. This is going to let you track file changes over time.

Adding Git to Your Meteor App

Learn how to track files with Git. This is going to let you create "save points" for your code.

Git Add/Commit Workflows

You'll need an SSH key to communicate with GitHub and Heroku. That's all covered in this video.

Generating an SSH Key

Learn how to push and pull from your GitHub repository. This is going to let you get your code on the GitHub servers.

Pushing and Pulling from GitHub

Create and setup your Heroku account. This is going to allow you to deploy your applications.

Setting Up Heroku

Learn how to deploy your Meteor app to Heroku. You'll have a live production URL before this one is over.

Deploying Meteor Apps to Heroku

Now that everything is setup, it's time to look at a common developer workflow for committing and deploying your work.

Common Developer Workflow

The Short Lnk app is live. Your challenge is going to be to deploy the Score Keep app.

Deploying Score Keep
5 More Sections
About the Instructor
Andrew Mead
4.7 Average rating
8,002 Reviews
40,731 Students
4 Courses
A Full-stack Developer & Teacher

I'm Andrew, a full-stack developer living in beautiful Philadelphia!

I launched my first Udemy course in 2014 and had a blast teaching and helping others. Since then, I've launched 3 courses with over 21,000 students and over 1,900 5-star reviews.

I currently teach Node, Gulp, and React.

Before I ever heard about Udemy or thought about teaching, I created a web app development company. I've helped companies of all sizes launch production web applications to their customers. I've had the honor of working with awesome companies like Siemens, Mixergy, and Parkloco.

I have a Computer Science degree from Temple University, and I've been programming for just over a decade. I love creating, programming, launching, learning, teaching, and biking.

I can't wait to see you inside one of my courses!