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).


Featured Posts