username

password

stripe_secret

stripe_publishable

Gain insights into Meteor.js, explore JavaScript concepts, and discover how to build full-stack applications with React integration, email support, and Stripe payment processing.

meteor-docker.tar.gz

CreateMeteorApp

CreateMeteorAppSettingsFile

CreateReactiveApp

RunAppWithAuthentication

RunAppWithInstallation

Meteor.js is a Node.js framework for developing JavaScript applications. It's used to create full-stack applications that use a single language on both the server and client sides. Meteor.js is easy to use and simplifies the development of web applications.

This course will begin by discussing the fundamental concepts of Meteor.js before moving on to refresh the learner's knowledge of some key aspects of JavaScript used in React, another JavaScript framework. Then, through hands-on experience, you will learn how to build a production-grade Meteor.js application with a React frontend. Following that, you'll learn how to set up an SMTP server to send transactional emails and how to integrate Stripe into your Meteor.js application to accept payments.

By the end of this course, you will be able to create a full-stack application from scratch using Meteor.js and feel confident working with MongoDB as well. You will also be able to integrate Stripe into any Meteor.js application you create.

Building Full Stack Applications Using Meteor.js

## Application navigation
A non-trivial application should include the means for users to navigate across the numerous pages in the application. In a React application, `react-router-dom` is used for navigation. This lesson creates the navigation for the bookshop application. Earlier, we created some routes for navigation. We also created a `ProtectedRoute` component and an `Authorized` routes component that renders based on defined conditions.


## Navbar creation
The application navbar for navigation can be found in the `imports/ui/Navbar.js` file. Opening this file should reveal that, on **line 2**, we import the `Link` component from the `react-router-dom` and the `isAdmin` function from the `utility.js` file.

The imported `Link` is an anchor tag that’s used to navigate between different components of the application. The Navbar components receive the `authenticated`, `roles`, and `setAuth` props from the `App.jsx`, which is its parent component. The `authenticated` prop is used to check the login status of the user, and the `Navbar` components render its links based on the user login status. The `isAdmin` function is used to render admin-only links, while the `setAuth` prop is a function that’s used to change the auth state of the `AuthContext`.

On **lines 8–12**, a logout function called logoutUser is defined. This function is attached to a Link anchor when a user is authenticated so that the user can log out from the application by clicking on it.

On **line 54** of the `App.jsx` file, the `Navbar` component is added to the `App` component. Notice that the `Navbar` isn’t placed inside the `Switch` component of the `router`. This is so the `Navbar` will render on every route that’s visited at the very top of the page. Click “Run” to start the application.








# Application navigation
A non-trivial application should include the means for users to navigate across the numerous pages in the application. In a React application, `react-router-dom` is used for navigation. This lesson creates the navigation for the bookshop application. Earlier, we created some routes for navigation. We also created a `ProtectedRoute` component and an `Authorized` routes component that renders based on defined conditions.


# Navbar creation
The application navbar for navigation can be found in the `imports/ui/Navbar.js` file. Opening this file should reveal that, on **line 2**, we import the `Link` component from the `react-router-dom` and the `isAdmin` function from the `utility.js` file.

The imported `Link` is an anchor tag that’s used to navigate between different components of the application. The Navbar components receive the `authenticated`, `roles`, and `setAuth` props from the `App.jsx`, which is its parent component. The `authenticated` prop is used to check the login status of the user, and the `Navbar` components render its links based on the user login status. The `isAdmin` function is used to render admin-only links, while the `setAuth` prop is a function that’s used to change the auth state of the `AuthContext`.

On **lines 8–12**, a logout function called logoutUser is defined. This function is attached to a Link anchor when a user is authenticated so that the user can log out from the application by clicking on it.

On **line 54** of the `App.jsx` file, the `Navbar` component is added to the `App` component. Notice that the `Navbar` isn’t placed inside the `Switch` component of the `router`. This is so the `Navbar` will render on every route that’s visited at the very top of the page. Click “Run” to start the application.








Learn about application navigation, including how to create a navbar.



Getting Started

Meteor Framework

Introduction to MeteorJS

Working With Data

A Pop Quiz On Data Access With Meteor

A Simple Idea Vote Application

JavaScript Refresher

Pop Quiz: JavaScript Refresher for React Development

An Overview of React

Pop Quiz: React

Coding an Online Bookshop

Deployment

Appendix

Create Application Navigation

Application navigation