Create Web Apps with Meteor & React

Learn how to create real-time applications using only JavaScript by creating a full polling app
4.1 (23 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.
310 students enrolled
$15
$160
91% 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

Who 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
00:08
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
00:12
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
00:04

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
00:06
Routing: Introduction to FlowRouter
12:00
Code GitHub - Routing: Introduction to FlowRouter
00:02
Collections - Creating Fake Data and saving it into a collection
17:03
Publish and Subscribe
07:31
Code GitHub - Publish and Subscribe
00:02
Organizing the polls with a masonry layout
06:14
Code GitHub - Organizing the polls with a masonry layout
00:03
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
00:03
Add icons to poll for Viewing, Editing and Deleting
03:57
Code GitHub - Add icons to poll for Viewing, Editing and Deleting
00:04
Click Events - add event to delete a poll
10:55
Code GitHub - Click Events - add event to delete a poll
00:04
Pagination
17:57
Code GitHub - Pagination
00:02
Alternative Layout - No Masonry
07:16
Code GitHub - Alternative Layout - No Masonry
00:03
Creating a NavBar
13:09
Code GitHub - Creating a NavBar
00:02
Making the NavBar responsive - Part 1
10:50
Code GitHub - Making the NavBar responsive - Part 1
00:03
Making the NavBar responsive - Part 2
03:36
Code GitHub - Making the NavBar responsive - Part 2
00:03
Improving the UI to show the active route in the NavBar
03:51
Code GitHub - show the active route on the NavBar
00:03
Managing Users Accounts
16:11
Code GitHub - Managing Users Accounts
00:02
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
00:03
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
00:04
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
00:05
Creating a sticky footer
05:25
Code GitHub - Creating a sticky footer
00:02
Creating some fake (user) accounts
05:45
Code GitHub - Creating some fake (user) accounts
00:03
Local collections
16:13
Code GitHub - Local Collections
00:02
Save New Poll - Part 1
06:34
Code GitHub - Save New Poll - Part 1
00:03
Add and remove options
08:01
Code GitHub - Add and remove options
00:02
Setting a minimum and maximum number of options per poll
10:15
Code GitHub - Setting a minimum and maximum number of options per poll
00:04
Adding alert messages
04:10
Code GitHub - Adding alert messages
00:02
Save New Poll - Part 2
05:44
Code GitHub - Save New Poll - Part 2
00:03
Defining schemas
16:08
Code GitHub - Defining schemas
00:02
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
00:04
Editing a poll
17:06
Code GitHub - Editing a poll
00:02
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
00:04
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
00:04
Copy to clipboard
04:54
Enable voting on a poll
16:50
Code GitHub - Enable voting on a poll
00:03
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
00:05
Sorting poll results by number of votes
07:13
Code GitHub - Sorting poll results by number of votes
00:03
Fixing styling issues with the widths of the bars
09:36
Code GitHub - Fixing styling issues with the widths of the bars
00:04
Creating a new layout for a posted poll
07:20
Code GitHub - Creating a new layout for a posted poll
00:03

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