Create Web Apps with Meteor & React

Learn how to create real-time applications using only JavaScript by creating a full polling app
4.5 (20 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.
266 students enrolled
$19
$160
88% off
Take This Course
  • Lectures 98
  • Length 8 hours
  • Skill Level All Levels
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

About This Course

Published 9/2016 English

Course Description

Course Description

You are here because you want to develop your own web apps, aren’t you?

Great. Well, thanks to a full stack JavaScript framework, called Meteor, that is easier than ever.

Developing real-time web apps, such as chat or messaging apps, synchronous collaborative apps, or others was hard and time consuming until now. Furthermore, you needed to master many different frameworks and technologies.

With Meteor.js you can build sophisticated real-time web apps faster than you can imagine. Meteor is a new framework that makes building web apps easier, simpler, and faster. It uses JavaScript on both the client and the server, so you won’t have to learn and shuffle with multiple languages and environments.

So much power at your disposal… imagine what you could do.

With this course you will learn all that you need to start creating your own cutting-edge web apps with Meteor and React. The course is project based.Thus, you will learn how to create a full functional app, a polling app, from start to finish.

This is what you will learn:

  • Easy to follow and hands on web application development with Meteor and React

  • How to use Meteor.js to create the back-end and frontend for your application

  • How to build your user interfaces with React

  • How to create customized views to manage user accounts (register, login, logout, etc)

  • How to save, edit and get data from your MongoDB.

  • How to pass data from your database to your React components

  • How to install and use Meteor specific packages (via Atmosphere.js) and npm

  • How to create routes with FlowRouter

  • How to handle pagination

  • How to create a responsive navbar from scratch

  • How to generate fake data to test your application and setup your design

  • How to create alerts and and notifications

  • How to create collections and local collections

  • How to filter data

  • How to create responsive designs with Stylus and Flexbox

  • And much more

At the end of the course, you will have a complete, ready-to-launch polling web app that looks great on any computer, tablet and smartphone.

The course includes a ES6 Primer and a React Primer as well, in case you are new to both of them.

Don't forget: if you don't get value from this course, you get 100% of your money back within 30 days. There is absolutely no risk for you.

What are the requirements?

  • Basic JavaScript knowledge (variables, loops, and basic functions)

  • Some knowledge of React, although the React Primer provided should be enough to understand and follow the course.

  • A browser and text editor. You don’t need to buy any software

  • Any computer will do — Windows, OSX or Linux

What else will you get?

  • A friendly informal community to support you along the way

  • Personal contact with me, the course instructor,

  • Lifetime access to course materials with free updates. No monthly subscription. Learn at your own pace, whenever you want.

  • Access to the course code on GitHub

What is the target audience?

  • Anyone wanting to learn how to build web apps

  • Anyone wanting to make a living (or side-income) from web app development

  • People that want to take their idea for a (real-time) web app and make it a reality

  • Entrepreneurs that want to launch their web app ideas

What are the requirements?

  • A basic understanding of JavaScript
  • Any computer: OSX, Linux or Windows

What am I going to get from this course?

  • Develop real-time state of the art web and mobile apps
  • Choose the right packages to simplify the development efforts
  • Learn how to integrate Meteor with React

What is the target audience?

  • Anyone wanting to learn how to build web and mobile apps
  • Anyone wanting to create from prototypes to full feature web apps, to make their ideas a reality
  • People wanting to be able to be full stack JavaScript developers
  • People wanting to make a living or a side-income from developing web apps

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.

Curriculum

Section 1: Getting Started
Introduction
Preview
03:55
Meteor - Conceptual Overview
Preview
09:21
Section 2: ES6 Primer
Introduction
Preview
02:07
Codepen code for ES6 Primer
Preview
Article
Variable Declarations
Preview
04:02
Arrow Functions
Preview
03:30
ES6 Destructuring Assignment
Preview
07:37
Section 3: React Primer
General Concepts
Preview
05:02
Codepen code for React Primer
Preview
Article
03:13
Components and Props
Preview
11:32
Specs, Lifecycle and State
Preview
07:59
Section 4: Creating a complete poll application
Description of the Application
Preview
04:33
Project structure and the imports directory
05:36
Install Meteor, npm and React and Project Setup
08:03
Data Flow and Parent-Child Relationships in React
07:50
Creating the Polls Component
03:27
Creating the Poll Component
05:12
Creating the Option Component
04:22
Using SVGs to render bar charts for the options
09:29
Article

Here is the link to the GitHub repository for the Using SVGs to render bar charts for the options lesson

Intro to Stylus
17:21
Code GitHub - Intro to Stylus
Article
Routing: Introduction to FlowRouter
12:00
Code GitHub - Routing: Introduction to FlowRouter
Article
Collections - Creating Fake Data and saving it into a collection
17:03
Publish and Subscribe
07:31
Code GitHub - Publish and Subscribe
Article
Organizing the polls with a masonry layout
06:14
Code GitHub - Organizing the polls with a masonry layout
Article
Removing autopublish and insecure
04:38
Display when the poll was created using Moment
05:20
Code GitHub - Display when the poll was created using Moment
Article
Add icons to poll for Viewing, Editing and Deleting
03:57
Code GitHub - Add icons to poll for Viewing, Editing and Deleting
Article
Click Events - add event to delete a poll
10:55
Code GitHub - Click Events - add event to delete a poll
Article
Pagination
17:57
Code GitHub - Pagination
Article
Alternative Layout - No Masonry
07:16
Code GitHub - Alternative Layout - No Masonry
Article
Creating a NavBar
13:09
Code GitHub - Creating a NavBar
Article
Making the NavBar responsive - Part 1
10:50
Code GitHub - Making the NavBar responsive - Part 1
Article
Making the NavBar responsive - Part 2
03:36
Code GitHub - Making the NavBar responsive - Part 2
Article
Improving the UI to show the active route in the NavBar
03:51
Code GitHub - show the active route on the NavBar
Article
Managing Users Accounts
16:11
Code GitHub - Managing Users Accounts
Article
04:42

When working with Meteor 1.4+ and the accounts-password and std:accounts-ui packages, there are a couple of problems that we didn't have with Meteor 1.3.

Thus, in this lesson, I cover how to solve those problems.

Editing the navbar to include login / register
12:52
Code GitHub - Editing the navbar to include login / register
Article
Showing nav items for login users - part 2 Fixing some issues
05:31
Code GitHub - Showing nav items for login users - part 2 Fixing some issues
Article
Control that non-logged in users cannot save or modify data using Meteor Methods
04:42
Code GitHub - Control that non-logged in users cannot save or modify data using
Article
Creating a sticky footer
05:25
Code GitHub - Creating a sticky footer
Article
Creating some fake (user) accounts
05:45
Code GitHub - Creating some fake (user) accounts
Article
Local collections
16:13
Code GitHub - Local Collections
Article
Save New Poll - Part 1
06:34
Code GitHub - Save New Poll - Part 1
Article
Add and remove options
08:01
Code GitHub - Add and remove options
Article
Setting a minimum and maximum number of options per poll
10:15
Code GitHub - Setting a minimum and maximum number of options per poll
Article
Adding alert messages
04:10
Code GitHub - Adding alert messages
Article
Save New Poll - Part 2
05:44
Code GitHub - Save New Poll - Part 2
Article
Defining schemas
16:08
Code GitHub - Defining schemas
Article
Simple form validation
04:24
Viewing a poll & using containers to manage data
16:08
Code GitHub - Viewing a poll & using containers to manage data
Article
Editing a poll
17:06
Code GitHub - Editing a poll
Article
Adding onClick events to navigate to certain views (edit and view poll)
07:42
Code GitHub - Adding onClick events to navigate to certain views (edit and view
Article
Generating URL and iFrame code to share poll on other websites
08:42
Code GitHub - Generating URL and iFrame code to share poll on other websites
Article
Copy to clipboard
04:54
Enable voting on a poll
16:50
Code GitHub - Enable voting on a poll
Article
Using local storage to control that users can vote only once per poll
13:26
Code GitHub - Using local storage to control that users can vote only once per p
Article
Sorting poll results by number of votes
07:13
Code GitHub - Sorting poll results by number of votes
Article
Fixing styling issues with the widths of the bars
09:36
Code GitHub - Fixing styling issues with the widths of the bars
Article
Creating a new layout for a posted poll
07:20
Code GitHub - Creating a new layout for a posted poll
Article

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Gilbert Mizrahi, Entrepreneur, web app developer and technolgist

Hello there. I am Gilbert. I have a bachelor's degree in Industrial Engineering and a Master in Operations Research from Stanford University. I guess I am sort of a geek.

I am a technologist. My fields of experience include big data and data visualization, decision support systems, knowledge elicitation and elearning. I am currently doing consulting and developing my own products. Prior to that, I founded three companies and worked as a research engineer on projects sponsored by DARPA, NASA, the National Institute of Health and the US Department of Defense.

Thanks to my professional trajectory I have learned how to design and develop web apps, and how to manage the whole product life cycle. And now I want to pass that knowledge to people like you.

Many years ago I was a university instructor. I I taught statistics for business and operations research at la Universidad de Los Andes and la Univerisdad Javeriana (Colombia) for 5+ years.

Ready to start learning?
Take This Course