User Authorization with Firebase Walkthrough


## What is an Webpack?

- Webpack lets you code using the different filetypes and dependencies that your compfortable with and converts them to into the static assets that your browser prefers.
- When building an APP we typically will see two folders
  - SRC
    - This folder has all the working files that we will edit during the development process
  - DIST
    - This folder holds all the static assets after the BUILD process has been ran

### Other Types of Module Bundlers

- Snowpack
- Rollup
- Parcel

## Webpack Installation

- When NOT using a tool, such a Create React App, we can manually install webpack into our workspace by add these two commands.
  1. Initialize npm
     `npm init -y`
  2. Install webpack developer dependency
     `npm i -D webpack`
  3. Install webpack-cli developer dependency
     `npm i -D webpack-cli`
  4. [optional] Verify installation went well, check package.json devDependencies

## How to setup the run script

- Inside our our package.json we can setup our scripts next to run our app
  - Add "build": "webpack --mode production"
  - Now this will generate a new file main.js that takes our application and MINIFYS it and makes it CROSS-BROWSER-COMPATIBLE
  - Confirm your index.html is referencing our new file, main.js
  - We can now view the page and our app should be running
  - _Production will generate less code than development_

## Webpack Config

### Webpack Config Setup

- Create webpack.config.js in your root folder
- Use standard JS code only
- If we add mode development to our config file, we can remove that flag from our build script in our package.json
- Add const path = require('path') to allow us to use \_\_dirname
  `const path = require('path')`
- Add src/index.js as our entry
  `src/index.js`
- Add bundle.js as our filename

### Rebuild AFTER new Webpack Config

- Now we can delete our main.js file from our dist folder, our old build file
  `npm run build`
- Now bundle.js will be generated now in the dist folder
- Lastly update index.html to have bundle.js instead of main
- Sometimes you will see the entry as an OBJECT
  - You can see multiple entries and this is called code splitting
    - In this instance it is best to change the output file name to by dynamic so instead of `bundle.js` you might see `[name].js`

### Webpack Config Example

```
const path = require('path')

module.exports = {
  mode: "development",
  entry: path.resolve(__dirname, 'src/index.js')
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
}
```

## Adding Sass to be compiled by Webpack

- Sass can be easily added to Webpack by adding loaders.

### Installation and Setup of Loaders

- First we want to import Sass and our 3 loader packages, I prefer NPM.
  `npm i -D sass style-loader css-loader sass-loader`
- In src folder lets create a styles folder
- Add main.scss file and some css to test
- Now we can import to our _index.js_ file by adding _import './styles/main.scss'_
- We CANNOT run the build yet as we don't have loaders setup
- Inside our webpack config file, after our output we can add a modules object
  - Inside we will add a rules array
  - Inside that array we will add an object with
    _test: /\.scss$/,_
  - add ``use:['style-loader', 'css-loader', 'sass-loader',]

### Updated module Exports

```
module.exports = {
  mode: "development",
  entry: path.resolve(__dirname, 'src/index.js')
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  modules: {
    rules: [
      {
        test: /\.scss$/,
        use:['style-loader', 'css-loader', 'sass-loader'
      }
    ]
  }
}
```

## Plugins are great

- Plugins are great in that they allow us to just delete our _dist_ folder and _npm run build_ without having to go in and modify our index.html file manually

### HTML Webpack Plug-in Setup

- Install the devDependency first `npm i -D html-webpack-plugin`
- Import to your webpack config file `const HtmlWebpackPlugin = require('html-webpack-plugin')`
- Add underneath the module object next a _plugins_ array
  - add newHtmlWebpackPlugin()
    - title: 'webpack a filename'
    - filename: 'index.html'

```
plugins: [
    new HtmlWebpackPlugin({
      title: 'Webpack A Title',
      filename: 'index.html'
    })
```

- Now we can DELETE our dist folder completely
- Whenever we run _npm run build_ we will generate a new dist folder
- This mean we can never modify the DIST files directly moving forward as they will be overridden,

### Updated Example with Plug-Ins

```js
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  mode: "development",
  entry: path.resolve(__dirname, 'src/index.js')
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js',
  },
  modules: {
    rules: [
      {
        test: /\.scss$/,
        use:['style-loader', 'css-loader', 'sass-loader'
      }
    ]
  }
  plugins: [
    new HtmlWebpackPlugin({
      title: 'Webpack A Title',
      filename: 'index.html'
    })
  ]
}
```

## What are Templates?

- Templates allow us to have a base index.html file that our build file will process each time its ran so you can have code that isn't removed
- Normally we copy our index.html file and paste into our template.html file inside our root
- Add templates underneat our filename inside our 'html-webpack-plugin' plugin in our config
  `template: template.html`
- Now we can add _<%= htmlWebpackPlugin.options.title %>_
- Now this file dynamic data is being imported form our config file and generated on build!

## Generating Hashes and Caching

- If we want to utilizing caching or add hash IDs to our generated filename so our browsers no when the content is update its quite easy.
  - Simply add contenthash to your output filename in the config file
  - Delete dist folder again:
    `npm run build`
  - Now we will see our bundle with an appended hash

### Hash/Caching Example

```
module.exports = {
mode: "development",
    entry: {
      bundle: path.resolve(__dirname, 'src/index.js')
    },
    output: {
      path: path.resolve(__dirname, 'dist'),
      filename: '[name][contenthash].js',
},
```

## Adding Development Script

- Lets add different flags for our development or production builds
- Development allows you to build after each change and is quicker for development
- Inside our scripts object in our package.json, lets add:
  `'dev': 'webpack serve'`
- Now if we go to terminal:
  `npm run dev`
  - We may get a prompt to install webpack-dev-server, install it
  - go to localhost:8080 to see our dev server running

## Adding devServer to config and options

- After output add devServer
- port specifies port
- open auto opens browser upon run of script
- hot will auto reload upon save
- compress will use g-zip compression
- historyApiFallback allows history from previous runs for testing
- localhost:3000 is the new address

### Updated with devServer

```
  module.exports = {
    mode: "development",
    entry: {
      bundle: path.resolve(__dirname, 'src/index.js')
    },
    output: {
      path: path.resolve(__dirname, 'dist'),
      filename: '[name][contenthash].js',
      clean: 'true',
    },
    devServer: {
      static: {
        directory: path.resolve(__dirname, 'dist')
      },
      port: 3000,
      open: true,
      hot: true,
      compress: true,
      historyApiFallback: true,
    },
      modules: {
        rules: [
          {
            test: /\.scss$/,
            use:['style-loader', 'css-loader', 'sass-loader'
          }
        ]
      }
      plugins: [
        new HtmlWebpackPlugin({
          title: 'Webpack A Title',
          filename: 'index.html'
        })
      ]
    }
```

### Removing old builds

- With each new build a new bundle file is generated and can easily make your app bloated in filesize
- We can add **clean: true** to our output in the webpack config file
- Now when we _npm run build_ our bundle file is replaced now instead of creating another each time and keeping the old.

### Adding Babbel loader to make your code backwards compatible with older browsers

- Installation:
  `npm i -D babel-laoder @babel/core @babel/preset-env`
- Verify success in our package.json
- Add to webpack config next
- inside module, inside rules after the first object with our .scss entry
- Add the code below and exclude our node modules folder

### Add babel to webpack

```
test: /\.js$/,
exclude: /node_modules/,
use: {
  loader: 'babel-loader',
  options: {
    presets: ['@babel/preset-env']
  }
}
```

### Adding Assets Loader

- First put an asset in our assets folder inside src folder
- Add to webpack config next
  - Inside module, inside rule normally after the babel loader
  - Add _assetModuleFilename: '[name][ext]'_ inside our output of our webpack config
  - now if we add npm run build our asset will be generated inside our dist folder!

### Asset Loader Example

```
test: /\.(png|svg|jpeg|jpg|gif)$/i,
type: 'asset/resource'
```

## Notable Information

- Any NPM module can be installed and used with Webpack bundling
- Add _devtool: source-map_ to generate source bundle for debugging
- install _npm i -D webpack-bundle-analyzer_ and add to config file to get a complete overview if the WHOLE bundle if your app
  - Add to webpack config file

Information Sourced from: [Webpack-5-Crash-Course](https://www.youtube.com/watch?v=IZGNcSuwBZs)


What is Webpack 5 and Module Bundling


## What is Helper file?

One of the well known conventions of React components is that any logic should be broken out of the render function into a helper function. This keeps the component clean, and separates the concerns inside of the component.

![Helper Files](helper-main.png)

## Documentation.

- Referenced Documentation [here](https://www.jsmount.com/how-to-create-a-common-helper-class-or-util-file-in-react-js/)

## Usage

This file contains all utility exposed functions and directly available into other classes and components.
Here we need to expose every function which we want to use outside while in the Helper Class file we don’t expose methods directly, we expose only class.

We can create multiple util files as well as per our code structure.

### Basic Util

```js
export function addTwoNumber(number1, number2) {
  return number1 + number2;
}
export function getUserName() {
  return 'JS Mount';
}
export function getNameArray() {
  const data = [];
  for (let i = 0; i < 50; i++) {
    data.push('JS-' + i);
  }
  return data;
}
```

### Usage of Basic Util

```jsx
import React from 'react';
import { addTwoNumber, getUserName, getNameArray } from './../../util/util';
const ComponentA = (props) => {
  return (
    <>
      <h3>Welcome to Router Component A</h3>
      <h6>Called util function: Username is {getUserName()}</h6>
      <h6>Sum of two number (3,4) using util.js - {addTwoNumber(3, 4)}</h6>
      Total Names: {getNameArray().length}
      <ul>
        {getNameArray().map((name) => {
          return <li>{name}</li>;
        })}
      </ul>
    </>
  );
};
export default ComponentA;
```

## More Helper Patterns

### DB-util

```js
import { MongoClient } from 'mongodb';

const dbusername = process.env.mongodb_username;
const dbpassword = process.env.mongodb_password;
const dbconnection = '@cluster0.ewevp.mongodb.net/';
const dbname = 'nextEvents';
const dbprefix = 'mongodb+srv://';

export async function connectToDatabase() {
  const client = await MongoClient.connect(
    `${dbprefix}${dbusername}:${dbpassword}${dbconnection}${dbname}`
  );

  return client;
}

export async function insertDocument(client, collection, document) {
  const db = client.db();

  const result = await db.collection(collection).insertOne(document);

  return result;
}

export async function getAllDocuments(client, collection, sort, filter) {
  const db = client.db();

  const documents = await db
    .collection(collection)
    .find(filter)
    .sort(sort)
    .toArray();

  return documents;
}
```

### Usage of DB-util

```js
import {
  connectToDatabase,
  insertDocument,
  getAllDocuments,
} from '../../../helpers/db-util';

async function handler(req, res) {
  const eventId = req.query.eventId;

  let client;

  try {
    client = await connectToDatabase();
  } catch (error) {
    res.status(500).json({ message: 'Connecting to the database failed!' });
    return;
  }

  if (req.method === 'POST') {
    const { email, name, text } = req.body;

    if (
      !email.includes('@') ||
      !name ||
      name.trim() === '' ||
      !text ||
      text.trim() === ''
    ) {
      res.status(422).json({ message: 'Invalid input.' });
      client.close();
      return;
    }

    const newComment = {
      email,
      name,
      text,
      eventId,
    };

    let result;

    try {
      result = await insertDocument(client, 'comments', newComment);
      newComment._id = result.insertedId;
      res.status(201).json({ message: 'Added comment.', comment: newComment });
    } catch (error) {
      res.status(500).json({ message: 'Inserting comment failed!' });
    }
  }

  if (req.method === 'GET') {
    try {
      const documents = await getAllDocuments(
        client,
        'comments',
        { _id: -1 },
        { eventId: eventId }
      );
      res.status(200).json({ comments: documents });
    } catch (error) {
      res.status(500).json({ message: 'Getting comments failed.' });
    }
  }

  client.close();
}

export default handler;
```

### API-util

```js
export async function getAllEvents() {
  const response = await fetch(
    'https://next-js-course-9dc05-default-rtdb.firebaseio.com/events.json'
  );
  const data = await response.json();

  const events = [];

  for (const key in data) {
    events.push({
      id: key,
      ...data[key],
    });
  }

  return events;
}

export async function getFeaturedEvents() {
  const allEvents = await getAllEvents();
  return allEvents.filter((event) => event.isFeatured);
}

export async function getEventById(id) {
  const allEvents = await getAllEvents();
  return allEvents.find((event) => event.id === id);
}

export async function getFilteredEvents(dateFilter) {
  const { year, month } = dateFilter;

  const allEvents = await getAllEvents();

  let filteredEvents = allEvents.filter((event) => {
    const eventDate = new Date(event.date);
    return (
      eventDate.getFullYear() === year && eventDate.getMonth() === month - 1
    );
  });

  return filteredEvents;
}
```

### Usage of API-util

```jsx
import { Fragment } from 'react';
import { useRouter } from 'next/router';
import Head from 'next/head';

import { getAllEvents } from '../../helpers/api-util';
import EventList from '../../components/events/event-list';
import EventsSearch from '../../components/events/events-search';

function AllEventsPage(props) {
  const router = useRouter();
  const { events } = props;

  function findEventsHandler(year, month) {
    const fullPath = `/events/${year}/${month}`;

    router.push(fullPath);
  }

  return (
    <Fragment>
      <Head>
        <title>All Events</title>
        <meta
          name="description"
          content="Find a lot of great events that allow you to evolve..."
        />
      </Head>
      <EventsSearch onSearch={findEventsHandler} />
      <EventList items={events} />
    </Fragment>
  );
}

export async function getStaticProps() {
  const events = await getAllEvents();

  return {
    props: {
      events: events,
    },
    revalidate: 60,
  };
}

export default AllEventsPage;
```

## Noteables

- Remember to create UTIL files early as it can save you time and headache!

Learn more about it [here](https://v4.mui.com/styles/api/#makestyles-styles-options-hook)


Helper Files or Utils


## What is Material-UI?

![Material-UI](mui-main.png)

Material-UI | React components for faster and easier web development. Build your own design system, or start with Material Design.

## Documentation.

- NPM Package [here](https://www.npmjs.com/package/@material-ui/core)
- Documentation Referenced [here](https://v4.mui.com/styles/api/#makestyles-styles-options-hook)

Sometimes we want to to make our own unique styles, Material-UI styled components is a popular method to create your own components styles.

Material-UI lets you create styled compononents with their makeStyle() method.

1.  Import makeStyles
2.  Create useStyles object before main function
3.  Inside our function we can bind useStyles to a variable
4.  Then we can tap into that variable like the example below with ``className={classes.title}``

## NPM Installation

``npm install @material-ui/core``


```
import {makesStyles} from '@material-ui/core'

const useStyles = makeStyles(() => ({
  title: {
    flex: 1,
    color: 'gold',
    fontFamily: 'Montserrat',
    fontWeight: 'bold',
    cursor: 'pointer',
  },
}));

const Header = () => {
  const classes = useStyles();
  const navigate = useNavigate();

  const { currency, setCurrency } = CryptoState();

  const darkTheme = createTheme({
    palette: {
      primary: {
        main: '#fff',
      },
      type: 'dark',
    },
  });
  return (
    <ThemeProvider theme={darkTheme}>
      <AppBar color="transparent" position="static">
        <Container>
          <Toolbar>
            <Typography
              variant="h6"
              onClick={() => {
                navigate('/');
              }}
              className={classes.title}
            >
              Crypto Hunter
            </Typography>
            {/* <Button color="inherit">Login</Button> */}
            <Select
              variant="outlined"
              labelId="demo-simple-select-label"
              id="demo-simple-select"
              value={currency}
              style={{ width: 100, height: 40, marginLeft: 15 }}
              onChange={(e) => setCurrency(e.target.value)}
            >
              <MenuItem value={'USD'}>USD</MenuItem>
              <MenuItem value={'INR'}>INR</MenuItem>
            </Select>
          </Toolbar>
        </Container>
      </AppBar>
    </ThemeProvider>
  );
};

export default Header;
```


## Noteables
- This is a a VERY basic implementation.
- There are other ways to implement or pass props, please refer to documentation below

Learn more about it [here](https://v4.mui.com/styles/api/#makestyles-styles-options-hook)

Material-UI Styled Components Implementation with JSS


### What is Bootstrap?
  - Bootstrap is the most popular CSS Framework for developing *responsive* and *mobile-first* websites.
  - Created by Twitter
  - Has CSS styles built in but can be overridden
  - Uses the 12-column Grid System
  - Tons of Pre-built Components, like JumboTron, Carousel, etc.


## Installation for a REACT APP
  - npm i bootstrap@5.0.0-alpha3
  - Add import to index.js file ``import “bootstrap/dist/css/bootstrap.min.css”;``
  - 

## Adding Bootstrap Icons
  - Bootstrap 5 offers 1,300 free, high-quality SVG / web font icons that you can use on your project.
  - In order to install this on our React JS app, we need to install it via npm using the following command on our terminal:
  - ``npm i bootstrap-icons``
  
## About the 12 Grid System
  - Unlimited Rows
  - Specify column amount depeding on view size (x-small, small, medium, large, xlg)
  - Example class would be ``col-med-6``
  - Containers, Rows and Columns make up the 12 grid system

Info sourced from Designmodo [here](https://designmodo.com/bootstrap-react-sass/)
Check out this Comprehensive CheatSheet [here](https://bootstrap-cheatsheet.themeselection.com/)


Bootstrap Framework


### What is React?
  - A JS library for building User Interfaces
  - A Single Page Application that utilizes the virtual DOM to greatly improve performance as the whole DOM is already downlaoded annd just what needs to be displayed is rendered.

## What are components in React?
  - Components make up the visual layer of our applicaiton and lets us create re-usable but seperate pieces of code
  - Components are class or functions that return JSX
  - Components can be nested as deep as you want



## What are Hooks?
  - Hooks are features within React that let you use functional components to interact with the state, lifecycle and more.
  - Hooks changed teh way most developers use React these days and class components aren't seen as much anymore.
  - Hookes are essential, and their name derives from their ability to "Hook the state"
    - Hooks include: 
      - useState
      - useEffect
      - useContext
      - useReducer
      - useCallback
      - useMemo
      - useRef
      - many more...

## What is JSX?
  - JSX is a hybrid of JavaScript and HTML code that React can read. 
  - Browsers don't know how to read JSX natively so the code will need to be compiled.

## What is React-Router?
  - React router lets us have multiple pages in our React
  - Using BrowserRouter, Router, Route, Routes to achieve this.

## What are Props?
  - Props are how we pass data down from one parent component to a child
  - Props are short for properties and can be passed down to multiple children
  - Use the "this" keyword when interacting with props from a class based component
  - Prop Drilling is the act of passing props down mulitple components.

props.js
  ```
  import React from 'react';
  import ReactDOM from 'react-dom/client';

  function Car(props) {
    return <h2>I am a { props.brand }!</h2>;
  }

  function Garage() {
    return (
      <>
        <h1>Who lives in my garage?</h1>
        <Car brand="Ford" />
      </>
    );
  }

  const root = ReactDOM.createRoot(document.getElementById('root'));
  root.render(<Garage />);
  ```

## What is State?
  - State is a JS object that lets us store data about a particular component
  - We don't interact with the state directly and we don't create new variables in place of the state
  - setState is how we set the state in class components or functional components with the hooks.
  - Lifting the state is used to take data about a particular component and pass it back to a parent that may need that data


state.js
  ```
  import React, { useState } from 'react';

  function Example() {
    // Declare a new state variable, which we'll call "count"
    const [count, setCount] = useState(0);

    return (
      <div>
        <p>You clicked {count} times</p>
        <button onClick={() => setCount(count + 1)}>
          Click me
        </button>
      </div>
    );
  }
  ```

  

## What is the component Lifecycle?
  - Initialization
  - Mounting
  - Updating
  - Unmounting
  - Class based components use lifecycle methods suck as componentDidUpdate, componenentDidMount, etc
  - Function based components use the useEffect hook
    - If the component is in the original useEffect call it will load on component mount while if you put the component inside our useEffect dependency array it will update everytime the state changes.

  - No dependency passed
  ```
  useEffect(() => {
  //Runs on every render
  });
  ```

  - An Empty Array

  ```
  useEffect(() => {
  //Runs only on the first render
  }, []);
  ```

  - Props or state values
  ```
  useEffect(() => {
  //Runs on the first render
  //And any time any dependency value changes
  }, [prop, state]);
  ```

### Run only on initial render
  ```
  import { useState, useEffect } from "react";
  import ReactDOM from "react-dom/client";

  function Timer() {
    const [count, setCount] = useState(0);

    useEffect(() => {
      setTimeout(() => {
        setCount((count) => count + 1);
      }, 1000);
    }, []); // <- add empty brackets here

    return <h1>I've rendered {count} times!</h1>;
  }

  const root = ReactDOM.createRoot(document.getElementById('root'));
  root.render(<Timer />);
  ```

### Run only on variable update

  ```
  import { useState, useEffect } from "react";
  import ReactDOM from "react-dom/client";

  function Counter() {
    const [count, setCount] = useState(0);
    const [calculation, setCalculation] = useState(0);

    useEffect(() => {
      setCalculation(() => count * 2);
    }, [count]); // <- add the count variable here

    return (
      <>
        <p>Count: {count}</p>
        <button onClick={() => setCount((c) => c + 1)}>+</button>
        <p>Calculation: {calculation}</p>
      </>
    );
  }

  const root = ReactDOM.createRoot(document.getElementById('root'));
  root.render(<Counter />);
  ```

## What is React Global State Management?
  - Sometimes React needs a global state object to keep the app working
    - think of a logged in user profile
  - Prop drilling isn't practical once our application reaches a certain size
  - We can use the ContextAPI or Redux to solve this

### When to use Context?
- We designed the application in which used color props in the ParentClass and passed that props to all component (top to down) without checking that it is required by the child class or not and another issue also here that in case if GrandChildClass component was more deeply nested than it was very difficult to manage. This is the problem that Context solves. Context is designed the share values that can be considered "global" such as preferred language, current user, or theme.
- These types of data include:
  - Theme data (like dark or light mode)
  - User data (the currently authenticated user)
  - Location-specific data (like user language or locale)

    *When to use context*
  ```

  const App = () => {
    return(
      <ParentClass color= "blue"/>
    );
  }

  const ParentClass = (props) => (
    <ChildClass color= {props.color} />
  )

  const ChildClass = (props) => (
    <GrandChildClass color= {props.color} />
  )

  const GrandChildClass = (props) => (
    <p>Color: {props.color}</p>
  )
  ```
  ### 4 Steps to using React Context

  1. Create context using the createContext method.
  2. Take your created context and wrap the context provider around your component tree.
  3. Put any value you like on your context provider using the value prop.
  4. Read that value within any component by using the context consumer.

  ### There are two main components that make up Context
    - Provider of Context
    - Consumer of Context



## What is the Virtual DOM
  - This allows React to update only specific components in the tree without updating the whole DOM
  - Keys will need to be generated for each list item for the VDOM errors to go away


## Event Listeners
  - camelCase the eventName
  - Pass the function we want to execute

## Conditional Rendering
  - ``isAuthenticated === true`` 
  - `` {isAuthenticated && operator}``
  - Using an inline if/else also known as *ternirary* is godo for additional logic

## Noteable Terminal Commands
  - ``npx create-react-app appname ``
  - ``npm start``
  - ``npm build``

  

React [here](https://reactjs.org/)

Check out this Comprehensive CheatSheet [devhints](https://devhints.io/react)


React Overview


## What is an API? 

API stands for application programming interface, a concept that applies everywhere from command-line tools to enterprise Java code to Ruby on Rails web apps. An API is a way to programmatically interact with a separate software component or resource.

Unless you write every single line of code from scratch, you’re going to be interacting with external software components, each with its own API. Even if you do write something entirely from scratch, a well-designed software application will have internal APIs to help organize code and make components more reusable. And there are numerous public APIs that allow you to tap into functionality developed elsewhere over the web.


### Types of APIs

API stands for Application Programming Interface, which is a mechanism that allows the interaction between two applications using a set of rules.

APIs are beneficial because they allow developers to add specific functionality to an application, without having to write all of the code themselves. APIs also allow developers to access data from other applications. For example, when bloggers put their Twitter handle on their blog’s sidebar, WordPress enables this by using Twitter’s API.

### Main types of Web APIs
There are four main types of APIs:

- Open APIs: Also known as Public API, there are no restrictions to access these types of APIs because they are publicly available.
- Partner APIs: A developer needs specific rights or licenses in order to access this type of API because they are not available to the public.
- Internal APIs: Also known as Private APIs, only internal systems expose this type of API. These are usually designed for internal use within a company. The company uses this type of API among the different internal teams to be able to improve its products and services.
- Composite APIs: This type of API combines different data and service APIs. It is a sequence of tasks that run synchronously as a result of the execution, and not at the request of a task. Its main uses are to speed up the process of execution and improve the performance of the listeners in the web interfaces.

## Web service APIs

- SOAP
  - SOAP (Simple Object Access Protocol): This is a protocol that uses XML as a format to transfer data. Its main function is to define the structure of the messages and methods of communication. It also uses WSDL, or Web Services Definition Language, in a machine-readable document to publish a definition of its interface.
  - Added data types
  - Envelope wraps header and body
- XML-RPC
  - XML-RPC: This is a protocol that uses a specific XML format to transfer data compared to SOAP that uses a proprietary XML format. It is also older than SOAP. XML-RPC uses minimum bandwidth and is much simpler than SOAP. 
- JSON-RPC
  - JSON-RPC: This protocol is similar to XML-RPC but instead of using XML format to transfer data it uses JSON
- REST
  - REST (Representational State Transfer): REST is not a protocol like the other web services, instead, it is a set of architectural principles. The REST service needs to have certain characteristics, including simple interfaces, which are resources identified easily within the request and manipulation of resources using the interface.
  - Added GET,POST,PUT,DELETE http methods and caching
  - Allows Middleware
  - Uniform interface
  - Sets constraints
  - replaced SOAP
- GraphQL
  - GraphQL Rest APIs were too chatty and downloads to much data
  - GraphQL makes a Single Precise Request and returns an all inclusive reply. No need to mix and match endpoints
  - Uses a Schema to facilitate
  - Quickly becoming the default but harder to learn.






Information Sourced from: [Rapid API](https://rapidapi.com/blog/types-of-apis/)

Application Programming Interfaces


## What is Postgres?

![PostgreSQL](postgres-main.jpeg)

PostgreSQL is an advanced, enterprise class open source relational database that supports both SQL (relational) and JSON (non-relational) querying. It is a highly stable database management system, backed by more than 20 years of community development which has contributed to its high levels of resilience, integrity, and correctness. PostgreSQL is used as the primary data store or data warehouse for many web, mobile, geospatial, and analytics applications

## Documentation

- NPM Package [here](https://www.npmjs.com/package/postgres)
- PostgreSQL Favorite YouTube Tutorial [here](https://www.youtube.com/watch?v=zw4s3Ey8ayo)

## Installation

```sh
npm install postgres
```

## Usage

### Create your sql database instance

```js
import postgres from 'postgres';
const sql = postgres({
  /* options */
}); // will use psql environment variables
export default sql;
```

### Simply Import for use elsewhere

```js
import sql from './db.js';

async function getUsersOver(age) {
  const users = await sql`
    select
      name,
      age
    from users
    where age > ${age}
  `;
  // users = Result [{ name: "Walter", age: 80 }, { name: 'Murray', age: 68 }, ...]
  return users;
}

async function insertUser({ name, age }) {
  const users = await sql`
    insert into users
      (name, age)
    values
      (${name}, ${age})
    returning name, age
  `;
  // users = Result [{ name: "Murray", age: 68 }]
  return users;
}
```

## Connection

- postgres([url], [options])
  You can use either a postgres:// url connection string or the options to define your database connection properties. Options in the object will override any present in the url. Options will fall back to the same environment variables as psql.

```sql

const sql = postgres('postgres://username:password@host:port/database', {
  host                 : '',            // Postgres ip address[s] or domain name[s]
  port                 : 5432,          // Postgres server port[s]
  database             : '',            // Name of database to connect to
  username             : '',            // Username of database user
  password             : '',            // Password of database user
  ...and more
})
```

## Noteables

- A Free Open Source Relational Database Management System or RDBMS
- Emphasized extensibility and SQL Compliance
- Postgres features transactions with ACID pipelines.

Learn more about it [here](https://www.npmjs.com/package/postgres)


Postgres Notes


## What is React Helmet Async?

![React-Helmet-Async-NPM](Flutter-main.png)

This package is a fork of React Helmet. <Helmet> usage is synonymous, but server and client now requires <HelmetProvider> to encapsulate state per request.

## Documentation

- NPM Package [here](https://www.npmjs.com/package/react-helmet-async)
- Helmet YouTube Tutorial [here](https://www.youtube.com/watch?v=iAbtNdgjn2Y&t=215s)

## Installation

`npm i react-helmet-async`

## Setup and Usage

- Import Helmet and HelmetProvider
  `import { Helmet, HelmetProvider } from 'react-helmet-async';`
- We need to wrap our app in a HelmetProvider Tag like our example below

  ```
    <HelmetProvider>
    <App>
      <Helmet>
        <title>Hello World</title>
        <link rel="canonical" href="https://www.tacobell.com/" />
      </Helmet>
      <h1>Hello World</h1>
    </App>
  </HelmetProvider>
  ```

- Next we need to add our Helmet for the APP and Individual Pages or Components we want seperate META tag information
- A child with the Helmet tag will override the Meta Tags of a parent with the same type
- We can also insert Dynamic Data into our Meta Tags to have singlePage unique SEO content.

Learn more about it [here](https://www.npmjs.com/package/react-helmet-async).


React Helmet Async


## Flutter

![Flutter-HomePage](Flutter-main.png)

Flutter let's you design pixel perfect mobile applications that are App store and Google Play ready. Code in one language and ship in the same day. Flutter is more robust than React native or standard mobile development while also not relying on primitive system specific components.

## Installation

Install it [here](https://docs.flutter.dev/get-started/install).

Check for installation success by running flutter docter from your shell

```sh
 flutter doctor
```

## Create and run a simple Flutter app

To create your first Flutter app and test your setup, follow these steps:

Create a new Flutter app by running the following from the command line:

```sh
 flutter create my_app
```

A my_app directory is created, containing Flutter’s starter app. Enter this directory:

```sh
 cd my_app
```

To launch the app in the Simulator, ensure that the Simulator is running and enter:

```sh
 flutter run
```

Learn more about it [here](https://flutter.dev).


Flutter Introduction


NextJS is a **framework for ReactJS**.

👀 Wait a second ... a "framework" for React? Isn't React itself already a framework for JavaScript?

Well ... first of all, React is a "library" for JavaScript. That seems to be important for some people.

Not for me, but still, there is a valid point: React already is a framework / library for JavaScript. So it's already an extra layer on top of JS.

## Why would we then need NextJS?

Because NextJS makes building React apps easier - especially React apps that should have server-side rendering (though it does way more than just take care of that).

In this article, we'll dive into 3 core concepts and features NextJS has to offer:

- File-based Routing
- Built-in Page Pre-rendering
- Rich Data Fetching Capabilities


## File-based Routing

![Create routes via your file + folder structure](nextjs-file-based-routing.png)

## Classic React Rendering
![No-rendering Example](No-rendering.png)
React doesn't have pre-rendering so you must wait for the content to load.


## Built-in Page Pre-rendering
![Pre-rendering Example](Pre-rendering.png)

By default, Next.js pre-renders every page. This means that Next.js generates HTML for each page in advance, instead of having it all done by client-side JavaScript. Pre-rendering can result in better performance and SEO.
Each generated HTML is associated with minimal JavaScript code necessary for that page. When a page is loaded by the browser, its JavaScript code runs and makes the page fully interactive. (This process is called hydration.)

## Two Types of Pre-rendering
### Server-Side Rendering
![SSR](SSR.png)

### Static Site Generation
![Static-Gen](static-gen.png)

- Next.js has two forms of pre-rendering: Static Generation and Server-side Rendering. The difference is in when it generates the HTML for a page.
- Static Generation is the pre-rendering method that generates the HTML at build time. The pre-rendered HTML is then reused on each request.
- Server-side Rendering is the pre-rendering method that generates the HTML on each request.

### Per Page Basis 
![Per Page Basis](per-page-basis.png)

Importantly, Next.js lets you choose which pre-rendering form to use for each page. You can create a "hybrid" Next.js app by using Static Generation for most pages and using Server-side Rendering for others.

When to Use Static Generation v.s. Server-side Rendering
We recommend using Static Generation (with and without data) whenever possible because your page can be built once and served by CDN, which makes it much faster than having a server render the page on every request.

You can use Static Generation for many types of pages, including:

- ***Marketing pages***
- ***Blog posts***
- ***E-commerce product listings***
- ***Help and documentation***

You should ask yourself: ***"Can I pre-render this page ahead of a user's request?"*** If the answer is yes, then you should choose Static Generation.

On the other hand, Static Generation is not a good idea if you cannot pre-render a page ahead of a user's request. Maybe your page shows frequently updated data, and the page content changes on every request.

In that case, you can use Server-side Rendering. It will be slower, but the pre-rendered page will always be up-to-date. Or you can skip pre-rendering and use client-side JavaScript to populate frequently updated data.



## Rich Data Fetching Capabilities

### Static Generation with and without Data
![Static without data](static-wo-data.png)
Static Generation can be done with and without data.

So far, all the pages we’ve created do not require fetching external data. Those pages will automatically be statically generated when the app is built for production.


### Static Generation with and with Data
![Static with data](static-with-data.png)

However, for some pages, you might not be able to render the HTML without first fetching some external data. Maybe you need to access the file system, fetch external API, or query your database at build time. Next.js supports this case — Static Generation with data — out of the box.

Static Generation with Data using getStaticProps
How does it work? Well, in Next.js, when you export a page component, you can also export an async function called getStaticProps. If you do this, then:

- getStaticProps runs at build time in production, and…
- Inside the function, you can fetch external data and send it as props to the page

```js
export default function Home(props) { ... }

export async function getStaticProps() {
  // Get external data from the file system, API, DB, etc.
  const data = ...

  // The value of the `props` key will be
  //  passed to the `Home` component
  return {
    props: ...
  }
}
```

Information Sourced from: [NextJS Docs](https://nextjs.org/learn/basics)

NextJS: Core Feature Overview


JavaScript powers the web - it's **the** most important programming language you need to know as a web developer.

For example, you should understand code like this:

```js
const basics = 'Okay, that should not be too difficult actually';

function printBasics() {
  console.log(basics):
}

printBasics();
```

Learn more about it [here](https://academind.com).


All Posts