
PostgreSQL is the go-to relational database for serious projects. It is ACID-compliant, supports JSON alongside traditional relational data, has one of the richest SQL feature sets of any open-source database, and the community has maintained it reliably for over 25 years. If you are reaching for a database in a Node.js project, Postgres is rarely the wrong choice.

This post covers the essentials: running it locally, core SQL patterns you will use every day, indexing basics, transactions, and connecting from Node.js with the `postgres` package.

## Running Postgres Locally

The fastest path is Docker:

```sh
docker run --name pg-dev \
  -e POSTGRES_USER=dev \
  -e POSTGRES_PASSWORD=secret \
  -e POSTGRES_DB=myapp \
  -p 5432:5432 \
  -d postgres:16
```

Connect with `psql`:

```sh
psql postgres://dev:secret@localhost:5432/myapp
```

## Core SQL Patterns

### Creating a Table

```sql
CREATE TABLE users (
  id         SERIAL PRIMARY KEY,
  email      TEXT NOT NULL UNIQUE,
  name       TEXT NOT NULL,
  created_at TIMESTAMPTZ NOT NULL DEFAULT NOW()
);
```

`SERIAL` is shorthand for an auto-incrementing integer. `TIMESTAMPTZ` stores timestamps with a time zone, which is almost always what you want over plain `TIMESTAMP`.

### Inserting Rows

```sql
INSERT INTO users (email, name)
VALUES ('alice@example.com', 'Alice')
RETURNING id, created_at;
```

`RETURNING` hands back the generated values immediately — no need for a second query to get the new `id`.

### Querying

```sql
-- All users created in the past week
SELECT id, email, name
FROM users
WHERE created_at > NOW() - INTERVAL '7 days'
ORDER BY created_at DESC;
```

### Updating and Deleting

```sql
UPDATE users SET name = 'Alicia' WHERE id = 1 RETURNING *;

DELETE FROM users WHERE id = 1;
```

### JOINs

```sql
CREATE TABLE posts (
  id      SERIAL PRIMARY KEY,
  user_id INT NOT NULL REFERENCES users(id) ON DELETE CASCADE,
  title   TEXT NOT NULL,
  body    TEXT NOT NULL
);

-- Posts with their author's email
SELECT p.id, p.title, u.email
FROM posts p
JOIN users u ON u.id = p.user_id
WHERE u.email = 'alice@example.com';
```

`ON DELETE CASCADE` means deleting a user automatically deletes their posts — you declare the relationship once in the schema and the database enforces it everywhere.

## Indexes

Postgres creates an index automatically on primary keys and `UNIQUE` columns. For any other column you filter or join on frequently, add one explicitly:

```sql
CREATE INDEX idx_posts_user_id ON posts(user_id);
```

Partial indexes are one of Postgres's killer features — they index only the rows matching a condition, keeping them small and fast:

```sql
-- Only index published posts; unpublished rows are excluded
CREATE INDEX idx_posts_published ON posts(created_at)
WHERE published = TRUE;
```

Check whether your queries are actually using indexes with `EXPLAIN ANALYZE`:

```sql
EXPLAIN ANALYZE
SELECT * FROM posts WHERE user_id = 42;
```

Look for `Index Scan` in the output. `Seq Scan` on a large table is a sign you might need an index.

## Transactions

Wrap multiple operations in a transaction so they either all succeed or all roll back together:

```sql
BEGIN;

UPDATE accounts SET balance = balance - 100 WHERE id = 1;
UPDATE accounts SET balance = balance + 100 WHERE id = 2;

COMMIT;
```

If anything goes wrong between `BEGIN` and `COMMIT`, issue `ROLLBACK` instead and the database reverts both changes as if neither happened.

## Connecting from Node.js

Install the `postgres` package — a lightweight client that uses tagged template literals:

```sh
npm install postgres
```

Create a single connection module and re-use it across your app:

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

const sql = postgres(process.env.DATABASE_URL, {
  max: 10,          // connection pool size
  idle_timeout: 20, // close idle connections after 20 seconds
});

export default sql;
```

The tagged template literal syntax automatically parameterizes every interpolated value, so SQL injection is not possible:

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

export async function getUserByEmail(email) {
  const [user] = await sql`
    SELECT id, name, email
    FROM users
    WHERE email = ${email}
  `;
  return user ?? null;
}

export async function createPost(userId, title, body) {
  const [post] = await sql`
    INSERT INTO posts (user_id, title, body)
    VALUES (${userId}, ${title}, ${body})
    RETURNING *
  `;
  return post;
}
```

Transactions use a callback that receives a scoped `tx` client. If any query inside throws, the whole transaction rolls back automatically:

```js
export async function transferBalance(fromId, toId, amount) {
  await sql.begin(async (tx) => {
    await tx`UPDATE accounts SET balance = balance - ${amount} WHERE id = ${fromId}`;
    await tx`UPDATE accounts SET balance = balance + ${amount} WHERE id = ${toId}`;
  });
}
```

## Environment Variables

Keep connection details out of your source code. A minimal `.env`:

```
DATABASE_URL=postgres://dev:secret@localhost:5432/myapp
```

Load it with `dotenv` in development, or provide it through your hosting platform's secret manager in production. Vercel, Railway, Supabase, and Render all have first-class PostgreSQL support with one-click provisioning.

---

PostgreSQL rewards you the more of it you learn. Once you are comfortable with the patterns here, the next things worth exploring are full-text search with `tsvector`, `JSONB` columns for semi-structured data, window functions, and `COPY` for bulk data imports.


PostgreSQL for Node.js Developers: A Practical Guide


Everything in my homelab runs in Docker, and the whole thing is described by a handful of `docker-compose.yml` files I keep in a private Git repo. That one decision — treating my infrastructure as code instead of a pile of hand-installed packages — is the single biggest reason the lab has stayed reliable. When a disk dies or I rebuild a host, I'm back online in minutes because the *definition* of the stack lives in version control, not in my head.

In this post I'll walk through the patterns I actually use: a real Compose file, healthchecks that keep things honest, named volumes for persistence, and a backup approach that runs itself.

## Why Compose instead of `docker run`

You *can* start a container with a long `docker run` command. The problem is that the command is ephemeral — six months later you won't remember the exact flags, ports, and env vars you used. Compose turns all of that into a declarative file you can read, diff, and roll back.

A small, real example: Postgres plus a lightweight admin UI.

```yaml
services:
  db:
    image: postgres:16
    restart: unless-stopped
    environment:
      POSTGRES_USER: app
      POSTGRES_PASSWORD: ${DB_PASSWORD}
      POSTGRES_DB: app
    volumes:
      - db_data:/var/lib/postgresql/data
    healthcheck:
      test: ['CMD-SHELL', 'pg_isready -U app -d app']
      interval: 10s
      timeout: 5s
      retries: 5

  adminer:
    image: adminer:4
    restart: unless-stopped
    ports:
      - '8080:8080'
    depends_on:
      db:
        condition: service_healthy

volumes:
  db_data:
```

A few things I want to call out, because they're the parts people skip:

- **`restart: unless-stopped`** means the container comes back after a reboot or a crash, but stays down if I deliberately stopped it. It's the sane default for a homelab.
- **The named volume `db_data`** is where the actual database lives. Containers are disposable; the volume is not. I can `docker compose down`, pull a new image, and `up` again without losing a row.
- **The healthcheck** makes `depends_on ... condition: service_healthy` meaningful. Adminer won't start hammering Postgres until `pg_isready` actually succeeds, which avoids a noisy race on cold boot.

## Keep secrets out of the file

Notice `${DB_PASSWORD}` above. Compose reads variables from a `.env` file sitting next to the Compose file:

```bash
# .env  — never committed
DB_PASSWORD=correct-horse-battery-staple
```

I commit the `docker-compose.yml` and a `.env.example` with placeholder values, but the real `.env` is gitignored. That way the repo is safe to clone and nothing sensitive ever lands in history.

## Running it

The commands I use day to day are boring, which is exactly what you want from infrastructure:

```bash
# start everything in the background
docker compose up -d

# see what's running and whether healthchecks pass
docker compose ps

# tail logs for one service
docker compose logs -f db

# pull newer images and recreate changed containers
docker compose pull && docker compose up -d
```

That `pull && up -d` line is my entire update routine. Compose only recreates containers whose image actually changed, so updates are fast and low-drama.

## Backups that run themselves

A homelab without backups is just a countdown. For Postgres I run a nightly `pg_dump` straight into the same volume layout, then sync the dump offsite. The trick is to exec into the *already running* container so you don't need a second Postgres install:

```bash
#!/usr/bin/env bash
set -euo pipefail
stamp=$(date -u +%F)
docker compose exec -T db \
  pg_dump -U app -d app | gzip > "/srv/backups/app-${stamp}.sql.gz"

# keep the last 14 days, delete the rest
find /srv/backups -name 'app-*.sql.gz' -mtime +14 -delete
```

Drop that in `/etc/cron.daily` (or a systemd timer) and you have point-in-time recovery you never have to remember to run. I test a restore every few months by piping a dump into a throwaway container — an untested backup isn't a backup.

## What this buys you

The payoff is repeatability. My hosts are essentially cattle: a fresh Debian install, Docker, `git clone`, drop in the `.env`, and `docker compose up -d`. Everything that makes the machine *mine* is in those files. Adding a new service is a pull request to myself; removing one is deleting a block of YAML.

If you're starting your own lab, resist the urge to install things directly on the host. Put it in Compose, commit it, give it a healthcheck and a named volume, and let your future self thank you the next time hardware fails.


Self-Hosting a Homelab with Docker Compose

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