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
English [Auto-generated]
Current price: $10 Original price: $85 Discount: 88% off
5 hours left at this price!
30-Day Money-Back Guarantee
Includes:
  • 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
Requirements
  • A computer on which you can install software (Windows, MacOS, or Linux)
  • A basic understanding of HTML, CSS, and JavaScript
Description

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
31:35:33
+
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
19:46

Learn how to create complex templates with nested JSX elements.

Render Complex HTML with JSX
08:15

Learn how to render an array of data with JSX.

Tags: jsx, array map method, const statement

DB Planning and Rendering Static Data
18:40

Explore the difference between SQL and NoSQL databases.

What is NoSQL?
03:03

Learn how to create a MongoDB collection.

Creating a MongoDb and MiniMongo Collection
13:50

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

Quering Data on the Client with MiniMongo
14:58

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

Rendering Players List
10:21

Learn how to setup JSX event handlers.

Inserting Players via a Form
12:09

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
16:13

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

Arrow Function Refactor
03:29

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
09:50

Learn how to update documents using MongoDB operators.

Updating Player Documents
15:22
+
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?
07:04

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

ES6 Aside - Classes Part I
13:36

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

ES6 Aside - Classes Part II
14:24

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

Your First React Component
11:51

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

Props, Prop Types, and Prop Defaults
14:58

Prop Type Update
04:20

Create React components with custom methods and DOM references.

Custom Component Methods
10:59

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

Creating the Player Component
10:16

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

List Based Components
07:48

Set up conditional rendering with JSX.

Conditional Rendering with JSX
04:54

Explore advanced conditional rendering and create the App component.

Rendering Everything with an App Component
10:31

Learn how to sort documents with MongoDB.

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

Teach Meteor new tricks with Atmosphere packages.

SCSS and Atmosphere Packages
10:46

Learn how to setup and structure your SCSS styles.

CSS Reset and Header Styling
16:11

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

SCSS Imports
09:14

Learn how to create reusable styles with CSS and SCSS.

Styling the App List
12:01

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

BEM Naming
19:31

Use BEM to create your own selectors.

BEM Challenge
06:47

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

Styling Player with Flexbox
15:58

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

Using 3rd-Party React Components (FlipMove)
13:16

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

Calculating Player Standings with ES6
19:02

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

Dynamic Classes and SCSS Functions
13:04

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

Bonus: Meteor and React Developer Tools
18:29
+
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
01:48

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

Exploring the Short Lnk App
01:52

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

Client-Side Routing Options
09:28

Create the boilerplate for Short Lnk.

Setting Up React-Router
17:25

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

Setting Up Routes
15:06

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

Navigating Between Routes
17:40

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

Component State and Signup Form
16:20

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

Creating User Accounts
20:00

Learn how to login a user to their existing accounts.

Logging In
09:48

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
18:54

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

Private and Public Routes
13:19

Learn how to work with Meteor error messages.

Showing Meteor Error Messages
06:38

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

Schema Validation
19:58

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

New User Validation
14:58

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

Refactoring Router Code
09:24

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

Bonus: Robomongo
06:16
+
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
07:57

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

Setting up an Insecure System - Part I
13:20

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

Setting up an Insecure System - Part II
16:46

Restrict the data users can see with publications and subscriptions.

Creating Publications and Subscriptions
14:17

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

Advanced Publications
11:00

Create and call your first Meteor method.

Creating and Calling Methods
18:37

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

Building "links.create" Method
17:43

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

Method Validation
15:43

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

Node HTTP and Connect
20:28

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

Redirecting Shortened Links
13:39

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

A Short Video about Short IDs
04:23
+
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
12:57

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

Stateless Functional Components
16:48

Learn how to generate URLs specific to your Meteor application.

Creating LinkListItem
12:57

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

Copying Link URL to Clipboard
16:15

Test your knowledge of React component state.

A State Challenge
08:23

Learn how to update MongoDB documents with Meteor methods.

Hiding Links with Method Methods
16:36

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

Meteor Session Variables
10:57

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

Filtering Links via Form Elements
08:53

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

Controlled and Uncontrolled Inputs
18:48

Add real-time analytics to your web app.

Setting up Link Analytics
14:52

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

Working with Time
19:04

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
12:32

Customize the react-modal modal to support error messages.

Setting up Modal Errors
14:04
+
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
06:01

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
16:35

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

Finishing off Login and Sign Styles
16:26

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

Button Styles
16:10

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
15:56

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

Private Header Styles
11:07

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

Styling Filters and Page Content
07:07

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
16:06

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

Adding react-flip-move
04:56
+
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
06:36

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
14:01

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

Git Add/Commit Workflows
09:35

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

Generating an SSH Key
10:09

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
12:21

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

Setting Up Heroku
05:00

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
13:25

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

Common Developer Workflow
05:36

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

Deploying Score Keep
11:05
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!