Meteor and React for Realtime Apps

Learn to render content with React inside Meteor by creating a client folder, a main.html, and a simple div. Start the Meteor server and see automatic page reload on localhost:3000.

Import the React library, create a component, and render it to the screen, placing JavaScript in the client folder for automatic execution at localhost:3000.

Create a React component by importing a library, defining a function component with an arrow function, and returning JSX to render a div on screen; Meteor translates JSX to JavaScript.

We import react and react-dom, create a first component, and render it to the screen inside a container. We wait for Meteor startup to ensure the dom exists before rendering.

Explore building a reusable image browser in React by planning with a wireframe, breaking the app into image list, image detail, and progress bar components, and fetching image data.

Develop and export a React image list component by organizing components in a dedicated folder, importing React, returning JSX with a list, and exporting the component as default.

Learn to nest components by importing the image list into the app component and rendering it as part of the root component, composing a larger UI from smaller components.

Build and nest image list and image detail components to render one image detail per item using a static dummy data array with title and url, powered by dummyimage.com.

Learn to build a list of images by mapping an image array to image detail components, using curly braces to render the array of components in a React-like view.

Create a reusable image detail component by passing a specific image prop from a parent image list, ensuring each item shows its own title and image.

Learn to style an image detail component using Bootstrap and className, add a CSS file to cap image width, and prepare for loading images from a new API.

Fix React warnings by supplying a unique key prop for each image detail in the images array, using the image title as the key and refactoring to an arrow function.

Fetch images from the Imgur gallery API in a React app using Ajax requests, process the data array of image objects, and display titles, links, votes, and descriptions.

Learn to perform ajax requests in a React app with axios, installing and importing the library, calling axios.get, and handling the promise to access the response data.

Convert the functional component into a class based component to fetch its own data before rendering, using a render method.

Use a class-based React component and the componentWillMount lifecycle to load data with an Ajax request before rendering. Fetch results are passed as props to the image list.

Learn how state in React drives rendering by updating a JavaScript object after an Ajax call to the Imgur API, triggering re-render of the app, image list, and image details.

Shows implementing state in a React class component by initializing this.state with an empty images array, using a constructor and super(props), and updating state from an API to trigger re-renders.

Learn how state controls rendering in React by initializing state in the constructor, updating with setState after data arrives, and passing images to child components.

Pass data from the app component to the image list via props, default images to an empty array, and map props.images to render the gallery from the Imgur API.

Filter out album images from the Imgur API results by excluding items with is_album true to prevent broken images in your React real-time app.

Explore adding image descriptions to the image detail component in Meteor and React for realtime apps, handle missing descriptions, and implement a progress bar for upvotes and downvotes.

Create a React component image_score that displays a stacked Bootstrap progress bar for upvotes and downvotes, using props ups and downs and dynamic widths calculated as percentages.

Integrate the image score component into the image detail view by passing ups and downs props to render a progress bar of votes and down votes.

Wrap up this Meteor and React app by reviewing the code, creating a client folder, rendering app to the DOM, and fetching images with the Imgur API to update state.

Build a scalable employee directory with React and Meteor, rendering user cards (image, name, email, phone) and enable lazy loading via a load more button for locally stored data.

Explore the four challenges in a Meteor and React realtime app: data storage, generating thousands of unique test users, client-side data limits, and a load more mechanism.

Set up a new Meteor project and build a React app boilerplate with client and server structure. Install React and React DOM, define an app component, and render to DOM.

Explore how a Meteor and React app stores data in a MongoDB collection of employee objects (name, phone number, image, address) and retrieves it for the React front end.

Create your first mongo collection in meteor by declaring a Mongo.Collection named employees in imports/collections/employees.js. Export the collection with the export keyword (not default) so other files can access it.

Learn to generate seed data for a Meteor app using the faker library, install it via npm, and create thousands of server-side employee records at startup.

Seed data responsibly in Meteor and React apps by checking collection records with a count query before generating fake data using the Lowdown and Faker libraries.

Use lodash times to generate 5,000 fake employee records with faker, creating name, email, phone, and avatar, and insert each into the employees collection in Meteor.

The server console shows exactly 5000 records have been entered into the employees collection. Next, we start consuming these records on the React side.

Create boilerplate for a React employee list component in the client/components folder, wire it into the main app, and plan to pare down a 5000-record employees collection for display.

Learn how Meteor's publish and subscribe system controls data flow from server to client by exposing a subset of the employees collection, enabling secure, real-time updates.

Remove auto publish and create a meteor publication to share only a subset of data; publish from employees collection and return a cursor for subscriptions with a 20-item limit.

Connects server publications to the client with a container that watches the employees collection, sets up a subscription, and passes data as props to the employee list.

Learn how Meteor publications and subscriptions control data exposure by publishing a subset of 20 records, subscribing from React, and using a container to react to changes securely.

Build a reusable employee detail component and map over loaded employees to render 20 details with email, name, phone, avatar, and the _id property.

Pass employee data from parent to child via props, destructure to expose avatar, name, email, and phone, and render an image with a caption and contact list in detail component.

Learn to install bootstrap via Meteor, fix React list keys using MongoDB ids, refine employee card styling, and implement a load more button to fetch additional records.

Turn a container into a flexbox to create responsive, equal-width employee cards. Wrap items, space them with justify-content: space-around, and set a 300px thumbnail width for consistent layouts.

Add a load more button with an on click event handler in React to append 20 more records without destroying existing items, using a fat arrow function and console logging.

Update realtime data by passing a per-page argument to the employees subscription and incrementing the loaded records (e.g., from 20 to 40) each time the button is clicked.

Refactor a functional React component into a class-based one to enable persistent data, accessing props via this.props, implementing a render method, and incrementing a subscription count by 20 per click.

The lecture demonstrates refactoring a functional employee list to a class component and using a subscription-driven render, with a per-page fetch of 20 users triggered by a button.

Build a url shortening app with meteor and react, reinforcing publications and subscriptions and meteor methods for manipulating data, while emphasizing security.

Plan to store long-form and short-form URLs as pairs in a Mongo collection named lynx to persist between sessions and support redirect and click counting.

Explain two app flows: creating short links and redirecting via tokens, routing token URLs on localhost 3000 directly to the target site to skip the React app entirely.

Create a new meteor and react project from the command line, install packages, replace client boilerplate, render a hello there component, and run the server to test at localhost:3000.

Develop a React header component, import it into the main app, and apply bootstrap styling. Install bootstrap, run the Meteor server, and verify the header renders correctly.

Create the links collection in Mongo to store link pairs of long and short URLs, by importing the Mongo helper and exporting a new collection named links.

Create the link create form in a class-based React component, rendering a bootstrap-styled form to collect and validate a URL, generate a token, and save it to the links collection.

Learn to handle a form submission in React by adding a submit event handler, binding context, preventing default, and using refs to pull the input value for validation.

Learn how Meteor saves data on the client side, where a local insert happens instantly and a separate server call persists to Mongo, exposing insecure by default.

Secure application data with meteor by removing the insecure package and using meteor methods to validate input on the server, enabling optimistic UI updates and safe client-side changes.

Define and use a secure meteor method to insert a new link into the links collection, ensuring updates run on both client and server after removing the insecure package.

Validate urls by installing the valid-url package, performing server and client checks in a meteor method, and using check and match to return errors or valid urls.

Learn to implement graceful error handling for URL validation in a Meteor and React realtime app by using optional method callbacks to surface client-side errors and display them in the UI.

Generate a random token for a URL and save both the URL and token to the database. Use a meteor method to coordinate client and server insertion with optimistic updates.

Stop the Meteor server and remove auto publish to prevent broad data broadcast, then publish links and connect a LinkList container that subscribes and fetches all links.

Wire a linked list component to a subscription, render a table of links with short and long URLs and clicks, and implement token-based redirection using ES6 template strings.

Implement a meteor middleware to detect short links, look up the destination in the links collection, and redirect instantly to the long URL before the React app loads.

Apply middleware in Meteor using the web app object to intercept requests, detect a token in the URL, and redirect to the target link using Connect Route.

Redirect users from a token in the URL to a long link by a dedicated on-route function. Extract the token, query the links collection, and redirect to the long URL.

Learn to redirect users from a short link to its long url with a link object and a 307 redirect, and pass to the next middleware if not found.

Learn how to increment a link's click counter in a Meteor Mongo collection, using Mongo modifiers to update the record on the server during redirection.

Learn to use Meteor methods for safe data modification, remove the insecure package, and implement middleware with web app and connect route to redirect short links and increment clicks.

Build a large meteor and react app with authentication and routing. Implement a markdown editor, instant save, and per-user accessible workspaces called bins.

Build a real-time Meteor and React app with route-based navigation, authentication, a markdown editor and viewer, and a bins data model with access control.

Outline the component definitions for a meteor and react realtime app, detailing the index page, header, bin list, and the bin editor, viewer, and share within bin main, plus router.

Bootstrapping a meteor react app by deleting old files, wiring up boilerplate, and creating a main.js with a render target div to render a separate App component at localhost:3000.

scaffold a header component for a Meteor and React real-time app, using a class-based component to display the app name mark ben with sign up, sign in, and create buttons.

Discover that Meteor's authentication is the easiest in any framework, and learn to render Blaze UI forms in React using accounts-ui and accounts-password.

Learn to render Meteor Blaze login templates into a div using Blaze in a React app, then clean up on unmount to manage authentication state.

Create a bins collection to store user-created workspaces with markdown content, owner ID, and a shared-with email list, including created timestamps for sorting.

Define a meteor method to insert a new bin with sensible defaults, including created at, content, shared with, and owner using this.userID, after removing the insecure package.

Wire the create bin link to call the meatier insert method, prevent navigation, and navigate to the bin editor page; import the bin method file on both server and client.

Publish only the current user's bins and render them in a list, by removing auto publish, creating a publication, and subscribing in React.

Consume the bin publication on the client with a bins list container using Meteor createContainer, subscribing to bins and rendering user-only data with an option for anonymous bins.

Render a list of bins by mapping over props.bins, using bin_id as the key, and displaying each bin name in a list group item, with client-server creation via Meteor methods.

Define the bin remove meteor method and wire a per-bin remove button with a fat-arrow click handler to remove the targeted bin from the collection.

Learn to map URLs to components using React Router in a meteor app, installing the library, configuring a router with history, and defining route paths and components.

Learn to use react router for conditional rendering of app header, bin list, and bin main via nested routes like /bins and /bins/:binId, with children passed as props.

Learn how default components with index routes use react router to keep the app and header visible, show bins list by default, and reveal bins main for specific paths.

Configure a dynamic route parameter by defining a path with a colon, and pass the bin id to the bin's main component to render the correct bin based on URL.

Navigate a React Router app with link tags, replacing anchor tags to move between routes. Implement link tags for bin items to update URL and display the bins main component.

Create a bin via the Meteor method and wait for its callback to return the id. Push the new URL with browser history to navigate to /bins/{id}.

Wire up the bin data via the publication to feed the editor and viewer with markdown.

Retrieve a targeted bin by id from the URL, subscribe to the bins collection, and pass only that bin to the bin's main component via createContainer for precise rendering.

Learn to implement a bookmarkable bin editor in a React-based bin system, enabling markdown editing and content loading from a bin model passed as a prop.

Implement a markdown editor in the Meteor app using react code mirror, with markdown mode and line numbers. Install the npm package and styling, then wire it into editor component.

Wire the code mirror onChange to capture markdown content. Update the bin in the bins collection using a meteor method with $set to save the new content.

Wire the editor to call the Meteor update method with the bin and new content, ensure the editor value syncs, and add a loading guard to prevent undefined errors.

Create a new bin viewer component to render markdown as HTML in real time. Use the markdown npm package to translate markdown into HTML on the right-hand preview pane.

Translate saved markdown into raw HTML using a markdown-to-HTML library, then render it in React with dangerouslySetInnerHTML, while explaining the cross-site scripting risks.

Design and implement a bottom sharing bar to add emails to a bin's shared with list, render the share UI, and publish access so users see bins they can access.

Build a bin sharing form in React with an email input and share button, styled by Bootstrap and flexbox, handle click to read the email and update the shared list.

Define a meteor method to update the bin's shared with array by pushing the user's email, and trigger it on share.

Render the shared with emails by iterating the shared with array and displaying each address as a button, verifying saved emails and updating the list in real time.

Create a separate publication to list bins shared with the current user by retrieving the user's email from their id and filtering bins whose shared with array contains that email.

Configure subscriptions in both the bin main and bin list to load the shared bins publication, enabling direct access across pages and real-time collaboration on a markdown document.

Explore a real-time Meteor and React app with authentication, bins, and collaborative markdown editor that renders live and enables granular sharing via router design and Mongo modifiers.