Create Web Apps with Meteor & React

Explore es6 features in javascript, including var, let, and const; learn various function definitions, invocation, and object manipulation, as a foundation for web apps with meteor and react.

Explore variable declarations using const and let, and understand when values can be reassigned, including arrays and objects, and how scope and references affect behavior.

Explore arrow functions and their concise, anonymous syntax, including implicit returns and optional parentheses for single parameters. Learn how they handle this context with respect to function expressions.

Explore ES6 destructuring assignment to pull data from objects and arrays, use default values, and reorder function parameters for clearer, more flexible code.

Explore general concepts of React as a UI library for building interactive, stateful front-end components with JavaScript and JSX, focusing on the shift from templates to components.

Build a complete web app with meteor and react, featuring user accounts, login and logout, poll creation, voting, vote tracking, and iframe-embeddable polls for external sites.

Organize a web app by structuring code in the imports directory and using explicit imports and exports, then enable lazy loading to load startup, ui, and pages only when needed.

Install Meteor, npm, and React, set up nvm, create a new project, and explore the client and server structure to run on localhost:2000.

Create a polls component in a Meteor and React app by importing, passing props, and mapping polls to render questions and answers, illustrating component composition and prop flow.

Continue building the poll component by importing it, rendering each poll item in a loop, and passing the question and options as props.

Create the option component by importing the option, passing the options props, and rendering each option with bar charts to visualize votes as we build the auction component.

Learn to render option-based bar charts with svg in meteor and react, showing each option's text, total votes, and proportional vote share using scalable vector graphics.

Explore how to use Stylus for CSS pre-processing, and install the package. Apply functions and pipes to style margins, colors, and typography in web apps.

Create and populate mongo-like collections by generating fake data with a factory and faker, inserting documents on the server and client, and using local collections for temporary data.

Explore how Meteor publishes data from server to client via publications and subscriptions, enabling bi-directional data flow and client access to server data.

Learn to organize polls with a Pinterest-like masonry layout in a Meteor and React app, using a masonry package, mapping over polls, and styling spacing for a cleaner gallery.

Remove autopublish and insecure publication to secure your Meteor and React app, preventing automatic exposure of collection data to the client. Learn routing and component mounting to ensure secure navigation.

Learn to display poll creation times by integrating the moment library in a Meteor and React app, formatting 'created at' dates with from now and other formats.

Add icons for viewing, editing, and deleting using the font awesome library in a meteor and react project, importing icons and adjusting alignment and spacing for polished ui.

Bind click events to each poll in a Meteor and React app, add a confirmation alert, and ensure only the poll creator can delete.

Learn an alternative layout that avoids masonry by using a flex layout to create equal-height, responsive cards with consistent whitespace across page widths.

Learn to build a responsive nav bar for web apps using React components, containers, and icons, organizing a title and navigation items, with Bootstrap for layout.

Create Web Apps with Meteor and React teaches how to build a responsive nav bar by adjusting menu orientation for vertical and horizontal layouts and testing across browsers.

Show the active route in the navigation bar of Meteor and React web apps by wiring a package to mark active links and style the active state.

Modify the navigation bar to conditionally show login and register options or a user menu based on whether the user is logged in, using tsx and the accounts helper.

Fix navigation reactivity for users by updating the nav bar on sign-out and redirecting to home when not registered. Show a spinner during poll closing and notify users about polls.

demonstrates building a sticky footer in a meteor and react app using a full component and a 100vh layout to stay at the bottom when content is sparse.

Create ten fake user accounts in a meteor and react app by generating usernames and profile names, setting passwords, and aligning user IDs for polls, with safe, resettable data.

Learn how to save a new poll in a Meteor and React app by creating two initial options, trimming input, and persisting options via insert without refreshing.

Add and remove poll options in a Meteor and React app, make the options reactive, render the options list, and enforce minimum two and maximum options for robust voting.

Learn to enforce a minimum of two and a maximum of eight poll options, and update the UI to show or hide the add option control when limits are reached.

Add alert messages in a Meteor and React web app using a package to show error and success notifications. Customize behavior for events and test the user experience.

Learn to structure poll options as an array of objects with ids by index. Initialize votes, replace the options array, and build a robust poll workflow.

Learn to define schemas to structure data in a collection, including an options schema, author fields, and unique identifiers for poll options.

Learn how to implement simple client-side form validation in a Meteor and React app by marking inputs as required, validating before submission, and ensuring a safe, structured schema.

Learn to view a poll and manage data with the container pattern, including data subscriptions, loading states, and dynamic routes for creating and displaying polls.

Edit a poll by reusing existing data containers and components to repopulate a form, enabling edits via a shared route and preserving vote counts.

Learn to add onClick events in the create web apps with meteor & react course to navigate edit and view poll views, with owner checks and vote-based icon display.

Generate a shareable poll url and an iframe code to embed the poll on external websites, with proper encoding and a height estimate for a seamless embed.

Learn to copy iframe code to the clipboard by wiring a button to a copy action, using the board package and npm clipboard pocket with success feedback.

Enable voting on a poll by creating a poll container and post-poll components, wiring options, and updating the vote counts to reflect user choices.

Learn how to use local storage in Meteor and React web apps to track whether a user has voted in a poll, preventing multiple votes and displaying accurate results.

Sort polls by the number of votes in descending order and adjust the user interface to maintain responsive styling as the browser width changes, using a flex container for options.

Learn to fix bar width styling issues by adjusting spacing and using the max value from parent props to keep all bars consistent across resizes.

Create a new layout for posted polls to remove top whitespace, embed via iframe, and adjust height and margins using the widget section on a blog or site.