AUTH_TOKEN

Your authentication token that you acquired after a successful login.

GMAIL_EMAIL

Your email on Gmail that will be used to send confirmation emails.

OAUTH_CLIENT_ID

Your client id that we explained in the Secure Emails lesson.

OAUTH_CLIENT_SECRET

Your client's secret that we explained in the Secure Emails lesson.

OAUTH_REFRESH_TOKEN

Your refresh token that we explained in the Secure Emails lesson.

Gain insights into building robust full-stack web apps using Node.js and React. Learn server-side with Node.js, client-side with React, and deploy with Heroku.

finalfinal.tar.gz

PORT

CONFIRMATION_SECRET_KEY

CRYPTO_ALGORITHM

INITIALIZATION_VECTOR

MONGO_URI

SALT

TOKEN_SECRET_KEY

hello_world

wrong_hello_world

routes_examples

events

async

mongoose

usermodel

signup

confirmation

login

auth

props

router

react

SignupGUI

ConfirmationGUI

LoginGUI

AuthGUI

navbar

SignupPage

SignupPageGUI

ConfirmationPage

LoginPage

ux-page

home-page

UploadGUI

SpellGUI

ImageGUI

GetGUI

UpdateGUI

DeleteGUI

CRUD

Heroku

GetGUI-copy

SpellGUIV2

ImageGUIV2

CRUDV2

Node.js is a popular JavaScript runtime environment used to create server-side applications. It is an ideal tool for building robust, full-stack web applications with React.

This course is an introduction to web development leveraging these two popular technologies. You’ll learn server-side applications with Node.js and learn to add database functionality with MongoDB fitting into the Express application framework. You’ll then build a user authorization system using the JSON Web Token (JWT).

You’ll then focus on a client-side environment built with React. You’ll build a sample application to get familiar with the framework before styling the application and adding necessary user-interaction elements. You’ll wrap up by tying the frontend and backend together and deploying your web application with Heroku.

By the end of this course, you’ll be prepared to build real-world websites using the most popular JavaScript tools.

Building Full-Stack Web Applications With Node.js and React

The `npm` package is the standard package manager for Node.js. This package is also used in the frontend to manage project dependencies.

# How do we use npm?
First, we initialize the project and create a basic `package.json` file, like this:
```python
npm init
````
If a `package.json` file already exists, we can install all the project dependencies by running this code:
```python
npm install
````
To install a single package, we use the following code:
```python
npm install <package_name>
````
To install a single package globally, we use the following code:
```python
npm install <package_name> -g
````
To update installed packages, we use the following code:
```python
npm update
````
To update a single installed package, we use the following code:
```python
npm update
````
To run a task, we use the following code:
```python
npm run <task_name>
````

# The `package.json` file

The `package.json` file is created by the `npm` package when initializing a project. We can think of the `package.json` file as a project manifest that contains all the project settings. It’s where we can store names and different versions of all the installed packages.

Here’s a typical package.json file generated by the `npm` package:

```python
{
  "name": "Educative Nodejs Full-Stack Course",
  "version": "0.1.0",
  "description": "A full-stack application built using React, Nodejs, Express, and MongoDB",
  "main": "index.js",
  "scripts": {
    "start": "node index.js"
  },
  "dependencies": {
    "express": "^14.0.0"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/aashrafh/educative-Nodejs-fullstack-course"
  },
  "keywords": [
    "node",
    "express"
  ],
  "author": "Ahmed Ashraf",
  "contributors": [
    "Ahmed Ashraf <ahmed.ashraf.cmp@gmail.com> (https://github.com/aashrafh)"
  ],
  "license": "MIT"
}
```
The `package.json` file  is a typical **JSON** object that has a set of key-value pairs. Each property below indicates an important part of the project setting that’s used by the `npm` package or other tools:

* The `version` indicates the current version of the project.

* The `description` consists of a few words about the application.

* The `main` property sets the entry point of the project.

* The `scripts` are a set of node scripts that we can run.

* The `dependencies` set a list of all the installed `npm` packages.

* The `repository` is the location of the application or package.

* The `keywords` array describes what our application 0r package does.

* The `author` property is the name of the author.

* The `contributors` array lists all the contributors.

* This `license` property is the license of the application or package.

# The `packages-lock.json` file

The `packages-lock.json` file is automatically generated by the `npm` package, and we, most probably, won’t need to edit or modify it. This file is used to track the exact version of each installed package so that the application can be reproduced with 100% accuracy, even if the package is updated by its maintainer.

Let’s learn how to use the Node Package Manager (npm).

Node Package Manager(npm)

Before You Begin

The Server-side

User Authentication with a JSON Web Token

Set up the Client-side Environment

Develop the Client-side

Business Logic

Server-side Routes

Client-side Routes

Appendix

Conclusion

Node Package Manager(npm)

How do we