Hackr.io is a community to find and share the best online courses & tutorials. Join them, it only takes 30 seconds.

Here's how it works:

share-icon

Anybody can submit a course or a tutorial

thumbs-up

Community upvotes the useful tutorials

upwards-graph

The best tutorials rise to the top

Create Web Apps with Meteor & React (udemy.com)

Visit Tutorial
Video Paid
#6 out of total 10 Meteor tutorials & courses

Why developers like this tutorial (one-liner reviews):

Content quality

Qualified Instructor

Video quality

Course Pace

Course depth and Coverage

Add your one-liner review here:

Tutorial Info

Session:
Self Paced
Video:
8 hours on-demand video
Certificate:
Available On Completion
Taught by:
Submitted by:
Visit Tutorial

Tutorial Details

What you'll learn

  • 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

Requirements

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

About

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
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

Syllabus

Getting Started

Introduction

Meteor - Conceptual Overview

ES6 Primer

Introduction

Codepen code for ES6 Primer

Variable Declarations

Arrow Functions

ES6 Destructuring Assignment

React Primer

General Concepts

Codepen code for React Primer

JSX

Components and Props

Specs, Lifecycle and State

Creating a complete poll application

Description of the Application

Project structure and the imports directory

Install Meteor, npm and React and Project Setup

Data Flow and Parent-Child Relationships in React

Creating the Polls Component

Creating the Poll Component

Creating the Option Component

Using SVGs to render bar charts for the options

Code - github - Using SVGs to render bar charts for the options

Intro to Stylus

Code GitHub - Intro to Stylus

Routing: Introduction to FlowRouter

Code GitHub - Routing: Introduction to FlowRouter

Collections - Creating Fake Data and saving it into a collection

Publish and Subscribe

Code GitHub - Publish and Subscribe

Organizing the polls with a masonry layout

Code GitHub - Organizing the polls with a masonry layout

Removing autopublish and insecure

Display when the poll was created using Moment

Code GitHub - Display when the poll was created using Moment

Add icons to poll for Viewing, Editing and Deleting

Code GitHub - Add icons to poll for Viewing, Editing and Deleting

Click Events - add event to delete a poll

Code GitHub - Click Events - add event to delete a poll

Pagination

Code GitHub - Pagination

Alternative Layout - No Masonry

Code GitHub - Alternative Layout - No Masonry

Creating a NavBar

Code GitHub - Creating a NavBar

Making the NavBar responsive - Part 1

Code GitHub - Making the NavBar responsive - Part 1

Making the NavBar responsive - Part 2

Code GitHub - Making the NavBar responsive - Part 2

Improving the UI to show the active route in the NavBar

Code GitHub - show the active route on the NavBar

Managing Users Accounts

Code GitHub - Managing Users Accounts

Registration - fixes for Meteor 1.4+

Editing the navbar to include login / register

Code GitHub - Editing the navbar to include login / register

Showing nav items for login users - part 2 Fixing some issues

Code GitHub - Showing nav items for login users - part 2 Fixing some issues

Control that non-logged in users cannot save or modify data using Meteor Methods

Code GitHub - Control that non-logged in users cannot save or modify data using

Adding Facebook Login

Creating a sticky footer

Code GitHub - Creating a sticky footer

Creating some fake (user) accounts

Code GitHub - Creating some fake (user) accounts

Local collections

Code GitHub - Local Collections

Save New Poll - Part 1

Code GitHub - Save New Poll - Part 1

Add and remove options

Code GitHub - Add and remove options

Setting a minimum and maximum number of options per poll

Code GitHub - Setting a minimum and maximum number of options per poll

Adding alert messages

Code GitHub - Adding alert messages

Save New Poll - Part 2

Code GitHub - Save New Poll - Part 2

Defining schemas

Code GitHub - Defining schemas

Simple form validation

Viewing a poll & using containers to manage data

Code GitHub - Viewing a poll & using containers to manage data

Editing a poll

Code GitHub - Editing a poll

Adding onClick events to navigate to certain views (edit and view poll)

Code GitHub - Adding onClick events to navigate to certain views (edit and view

Generating URL and iFrame code to share poll on other websites

Code GitHub - Generating URL and iFrame code to share poll on other websites

Copy to clipboard

Enable voting on a poll

Code GitHub - Enable voting on a poll

Using local storage to control that users can vote only once per poll

Code GitHub - Using local storage to control that users can vote only once per p

Sorting poll results by number of votes

Code GitHub - Sorting poll results by number of votes

Fixing styling issues with the widths of the bars

Code GitHub - Fixing styling issues with the widths of the bars

Creating a new layout for a posted poll

Code GitHub - Creating a new layout for a posted poll

Show only the polls created by the current user

Code GitHub - Show only the polls created by the current user

Discuss this tutorial:

Ask a question or write your feedback/review of this course or tell anything to the people taking this course.

Kickstart the conversation!

More Meteor Tutorials