Categories

There are currently no items in your shopping cart.

User Panel

Forgot your password?.

Full-Stack Web Apps with Meteor and React

Video Introducing this tutorial

Welcome & Asking Awesome Questions :
Welcome & Asking Awesome Questions


Installing and Exploring Meteor :
Section Intro
Installing Meteor (Linux, macOS, Windows)
What Is Meteor and Why Should I Use It?
Need a Text Editor? Try Atom!
Hello Meteor


Meteor and React Fundamentals (Score Keeper App) :
Section Intro
Exploring the Final Score Keep App
Stripping down the Meteor Boilerplate App
ES6 Aside - Importing and Exporting
ES6 Aside - Advanced Importing and Exporting
Installing React and Exploring JSX
Render Complex HTML with JSX
DB Planning and Rendering Static Data
What is NoSQL?
Creating a MongoDb and MiniMongo Collection
Quering Data on the Client with MiniMongo
Rendering Players List
Inserting Players via a Form
ES6 Aside - Arrow Functions
Arrow Function Refactor
Removing Player Documents
Updating Player Documents


React Components (Score Keeper App) :
Section Intro
What are React Components?
ES6 Aside - Classes Part I
ES6 Aside - Classes Part II
Your First React Component
Props, Prop Types, and Prop Defaults
Prop Type Update
Custom Component Methods
Creating the Player Component
List Based Components
Conditional Rendering with JSX
Rendering Everything with an App Component
Querying and Sorting Player Documents


Styling and User Experience (Score Keeper App) :
Section Intro
SCSS and Atmosphere Packages
CSS Reset and Header Styling
SCSS Imports
Styling the App List
BEM Naming
BEM Challenge
Styling Player with Flexbox
Using 3rd-Party React Components (FlipMove)
Calculating Player Standings with ES6
Dynamic Classes and SCSS Functions
Bonus: Meteor and React Developer Tools


User Accounts, Authentication, and Routing (Short Lnk App) :
Section Intro
Learning Burnout - This Is Important
Exploring the Short Lnk App
Client-Side Routing Options
Setting Up React-Router
Setting Up Routes
Navigating Between Routes
Component State and Signup Form
Creating User Accounts
Logging In
Logging Out and Tracking Auth Status
Private and Public Routes
Showing Meteor Error Messages
Schema Validation
New User Validation
Refactoring Router Code
Bonus: Robomongo


Meteor Methods, Publications, and Subscriptions (Short Lnk App) :
Section Intro
Overview of Methods, Publications, Subscriptions
Setting up an Insecure System - Part I
Setting up an Insecure System - Part II
Creating Publications and Subscriptions
Advanced Publications
Creating and Calling Methods
Building "links.create" Method
Method Validation
Node HTTP and Connect
Redirecting Shortened Links
A Short Video about Short IDs


Real-World React (Short Lnk App) :
Section Intro
Single Responsibility with React
Stateless Functional Components
Creating LinkListItem
Copying Link URL to Clipboard
A State Challenge
Hiding Links with Method Methods
Meteor Session Variables
Filtering Links via Form Elements
Controlled and Uncontrolled Inputs
Setting up Link Analytics
Working with Time
Creating Modals with React-Modal
Setting up Modal Errors


Styling and User Experience (Short Lnk App) :
Section Intro
SCSS Setup and Architecture
Breaking Out Configuration
Finishing off Login and Sign Styles
Button Styles
Reusing Styles with Modifiers
Private Header Styles
Styling Filters and Page Content
Styling Items and Empty Items
Adding react-flip-move


Meteor Deployment and Version Control (Short Lnk App) :
Section Intro
Installing and Configuring Git
Adding Git to Your Meteor App
Git Add/Commit Workflows
Generating an SSH Key
Pushing and Pulling from GitHub
Setting Up Heroku
Deploying Meteor Apps to Heroku
Common Developer Workflow
Deploying Score Keep


Testing Your Apps (Notes App) :
Section Intro
Exploring the Notes App
Creating Meteor/React Boilerplate
The Meteor Test Command
Exploring Mocha and Expect
Using An Assertion Library
Testing User Validation
Testing Meteor Methods
Testing Note Removal
Testing Note Updating
Testing Note Updating - Part 2
Testing Meteor Publications


Testing React (Notes App) :
Section Intro
Enzyme 101
Mocking Functions with Spies
Setting Up React-Meteor-Data
Testing Login
Testing Login - Setting Inputs and Submitting
Testing Signup


Building the Client (Notes App) :
Section Intro
Adding and Counting Notes
Rendering Notes
Rendering Notes - Part II
Rendering Empty List Item
Selecting Notes
Test Fixtures
Highlighting Selected Note
The Editor Component
Editor Input and TextArea
Setting up Logout to Work with New Routes
Setting up Logout to Work with New Routes - Part II
Removing Notes
Testing The Editor
Testing The Editor - Part II
Loading Newly Created Notes
Deploying The App


Styling and User Experience (Notes App) :
Section Intro
Customizing Auth Pages
Creating the Side-By-Side Layout
Styling Sidebar and Main Container
Styling the Editor
Styling the NoteList
Media Queries
SCSS Media Query Mixins
Mobile Menu: Part I
Mobile Menu: Part II
Favions, Momentum Scrolling, and Final Deployment
New Feature Ideas


Wrapping Up :
That's It
What Are You Working On?
Free-Mini Courses