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

## Client-side dependencies list

Here is a full list of the client-side dependencies and the instructions needed to install them. To understand what the goal of a package is, please refer to the corresponding lesson.

* [`axios`](https://www.educative.io/courses/building-full-stack-web-applications-with-node-js-and-react/authentication-service)
  ```
  npm install axios
  ```
* [`@headlessui/react`](https://www.educative.io/courses/building-full-stack-web-applications-with-node-js-and-react/navbar)
  ```
  npm install @headlessui/react
  ```

## TailwindCSS

Tailwind CSS is a client-side dependency, but we need to explain its integration with React in detail. That’s because Tailwind CSS needs different and customized configurations of other dependencies.

### Prerequisites
We need to install the following prerequisites packages to integrate Tailwind CSS:

   * **PostCSS** is a tool for transforming the CSS using JavaScript, which leads to faster performance.
   * **Autoprefixer** is a PostCSS plugin used to parse CSS and add the vendor prefixes that make the styles compatible with different browsers.
   * **Tailwind CSS** is the main package that provides the classes of the framework for the application.


```
npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
```
### CRACO
**Create React App Configuration Overide**, or **CRACO**, is similar to the `npm` package. The only difference is that CRACO gives a user the ability to override the default configuration of the application generated by `create-react-app`. We can follow the steps below to use CRACO to override the default configuration of PostCSS, which will allow us to configure Tailwind CSS easily.

1. We install CRACO:
   ```
   npm install @craco/craco
   ```

2. We change `scripts` in `package.json` to look like this:
   ```
   // frontend/package.json
   {
     // ...rest of package.json
     "scripts": {
       "start": "PORT=4000 craco start",
       "build": "craco build",
       "test": "craco test",
       "eject": "react-scripts eject"
     }
     // ...rest of package.json
   }
   ```

3. We create a configuration file for CRACO in the root of the`frontend` directory:
   ```
   touch craco.config.js
   ```

4. We configure CRACO to use `tailwindcss` and `autoprefixer`:

   ```
   // frontend/craco.config.js
   module.exports = {
     style: {
       postcss: {
         plugins: [require("tailwindcss"), require("autoprefixer")],
       },
     },
   };
   ```
### Configure TailwindCSS

All the requirements of Tailwind CSS are installed, so we can integrate it easily by following the steps listed below:

1. We generate the following configuration file for Tailwind CSS:
   ```
   npx tailwindcss-cli@latest init
   ```
   We’ll find a file called `tailwind.config.js` at the root of `frontend` directory with the following structure:
   ```
   // frontend/tailwind.config.js
   module.exports = {
      purge: [],
      darkMode: false,
      theme: {
        extend: {},
      },
      variants: {
        extend: {},
      },
      plugins: [],
    };
   ```


2. We modify the configuration file to remove any unused styles.

   ```
   // frontend/tailwind.config.js
   module.exports = {
      purge: ["./src/**/*.{js,jsx,ts,tsx}", "./public/index.html"],
      // ...rest of the file
    };
   ```

3. We include Tailwind CSS in `index.css` so that we can use its classes.
   ```
   // frontend/src/index.css
   @tailwind base;
   @tailwind components;
   @tailwind utilities;
   ```

# Client-side dependencies list

Here is a full list of the client-side dependencies and the instructions needed to install them. To understand what the goal of a package is, please refer to the corresponding lesson.

* [`axios`](https://www.educative.io/courses/building-full-stack-web-applications-with-node-js-and-react/authentication-service)
  ```
  npm install axios
  ```
* [`@headlessui/react`](https://www.educative.io/courses/building-full-stack-web-applications-with-node-js-and-react/navbar)
  ```
  npm install @headlessui/react
  ```

# TailwindCSS

Tailwind CSS is a client-side dependency, but we need to explain its integration with React in detail. That’s because Tailwind CSS needs different and customized configurations of other dependencies.

## Prerequisites
We need to install the following prerequisites packages to integrate Tailwind CSS:

   * **PostCSS** is a tool for transforming the CSS using JavaScript, which leads to faster performance.
   * **Autoprefixer** is a PostCSS plugin used to parse CSS and add the vendor prefixes that make the styles compatible with different browsers.
   * **Tailwind CSS** is the main package that provides the classes of the framework for the application.


```
npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
```
## CRACO
**Create React App Configuration Overide**, or **CRACO**, is similar to the `npm` package. The only difference is that CRACO gives a user the ability to override the default configuration of the application generated by `create-react-app`. We can follow the steps below to use CRACO to override the default configuration of PostCSS, which will allow us to configure Tailwind CSS easily.

1. We install CRACO:
   ```
   npm install @craco/craco
   ```

2. We change `scripts` in `package.json` to look like this:
   ```
   // frontend/package.json
   {
     // ...rest of package.json
     "scripts": {
       "start": "PORT=4000 craco start",
       "build": "craco build",
       "test": "craco test",
       "eject": "react-scripts eject"
     }
     // ...rest of package.json
   }
   ```

3. We create a configuration file for CRACO in the root of the`frontend` directory:
   ```
   touch craco.config.js
   ```

4. We configure CRACO to use `tailwindcss` and `autoprefixer`:

   ```
   // frontend/craco.config.js
   module.exports = {
     style: {
       postcss: {
         plugins: [require("tailwindcss"), require("autoprefixer")],
       },
     },
   };
   ```
## Configure TailwindCSS

All the requirements of Tailwind CSS are installed, so we can integrate it easily by following the steps listed below:

1. We generate the following configuration file for Tailwind CSS:
   ```
   npx tailwindcss-cli@latest init
   ```
   We’ll find a file called `tailwind.config.js` at the root of `frontend` directory with the following structure:
   ```
   // frontend/tailwind.config.js
   module.exports = {
      purge: [],
      darkMode: false,
      theme: {
        extend: {},
      },
      variants: {
        extend: {},
      },
      plugins: [],
    };
   ```


2. We modify the configuration file to remove any unused styles.

   ```
   // frontend/tailwind.config.js
   module.exports = {
      purge: ["./src/**/*.{js,jsx,ts,tsx}", "./public/index.html"],
      // ...rest of the file
    };
   ```

3. We include Tailwind CSS in `index.css` so that we can use its classes.
   ```
   // frontend/src/index.css
   @tailwind base;
   @tailwind components;
   @tailwind utilities;
   ```

Let’s read through a guide for installing the client-side dependencies.

Client Dependencies

Before You Begin

The Server-side

Build a Rest API for an Image-Sharing App With Node.js

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

Build an E-learning Website with the MERN Stack

Client Dependencies

Client-side dependencies list

TailwindCSS