🚀 We just launched hackr for designers. Visit it here
Hackr.io is a programming community to find and share the best online programming courses & tutorials. Join them, it only takes 30 seconds.
Anybody can submit a course or a tutorial
Community upvotes the useful tutorials
The best tutorials rise to the top
This is the tutorial you've been looking for to master building dynamic web apps with Meteor JS, with all the most important topics covered in great depth!
Authentication? Covered. Routing? Of course! Security? We got it.
Meteor JS can get you a position in web development or help you build that personal project you've been dreaming of. Meteor is the ultimate framework for developer productivity; it is bar-none the fastest technology you can use to make fast and interactive web apps in just a few hours.
This course will get you up and running quickly, and teach you the core knowledge you need to deeply understand and build interesting apps with Meteor and React.
We'll start by mastering the fundamentals of React, including JSX, “props", “state", and eventing. Source code is provided for each lecture, so you will always stay up-to-date with the course pacing. After an introduction to React, we'll dive right in to Meteor, covering topics like Collections, Meteor Methods, Subscriptions, and Publications.
If you are new to Meteor or React, or if you've been working to learn it but sometimes feel like you still don't quite 'get it', this is the course for you! To learn Meteor you have to understand it.
I've built the course that I would have wanted to take when I was learning Meteor. A course that explains the concepts and how they're implemented in the best order for you to learn and deeply understand them.
The Basics of Any Meteor App
One Quick Item...
Link to All Code For This Course
Purpose of Meteor Projects
React vs Meteor
What is Meteor, Again?
A React Primer
Getting Something on the Screen
Building a React Component
Project Overview and Challenges
Working with Dummy Data
Building a List of Images
Communication with Props
Adding CSS in Components
Image API Endpoint
AJAX with Axios
Class Based Components
Loading Data with Lifecycle Methods
State in Components
Recap on State
Passing Images as Props
Filtering Out Albums
Upvotes and Downvotes
Implementing Image Score
On to Meteor!
Challenges in this App
Creating MongoDB Collections
Generating Data with Faker
Get Data with Collection Queries
Inserting Records into Collections
Reading Server Console Logs
Boilerplate for Employee List
Publications and Subscriptions
Publications with Cursors
Creating a Container
Publication and Subscription Review
Employee Detail Scaffolding
Styling Employee Details
More Styling and Bug Fixes
Refactoring from Functions to Classes
Fetching More Users
Getting More Complex - Meteor Methods
Problems to Solve
Redirecting Short Links
Header Component Warmup
Link Create Component
Form Submit and Refs
The Insecure Package
Handling Data Securely
Safely Changing Data with Meteor Methods
Graceful Error Handling
Generating Unique Tokens for URLs
A Publication for Links
Link List Table
Intercepting Requests with Meteor Middleware
Finding Tokens in URLs
Redirecting Users to Long Links
Redirecting Users to Long Links Continued
Updating Mongo Records
Full Stack Development - Workspaces
Workspace Collaborator Overview
Outlining Component Definitions
Bootstrapping an App
Scaffolding a Header
Authenication UI Continued
Insert Bins Method
Create Bin Button
Accessing Bins with Publications
Claiming Bins with Subscriptions
Rendering a List of Bins
Removing a Bin
Routing with React Router
More on React Router
Default Components with IndexRoutes
Accessing the URL with Route Params
Navigation with Link Tags
Just the Right Bin
Just the Right Bin Continued
Capturing Change Events
Update Meteor Method
Translating Markdown to HTML
Bin Sharing Form
Meteor Method for Sharing
Rendering Shared Addresses
Shared Bins Publication
Learning a new programming language can be tough especially if you are a beginner in programming. Find a programming buddy and learn this tutorial in a more engaged & fun way.