Code Cheatsheets
  • Code Cheatsheets
  • Chrome Shortcuts
  • General Debugging
  • Google Advanced
  • GraphQL
  • General Mac Shortcuts
  • markdown
  • Regular Expression
  • Tech to Try
  • Typora Shortcuts
  • All
    • Elm
    • Headless CMS
    • Java
    • Swift
    • Solana
    • Solidity
    • APIS
      • Chatwoot
      • Daily
      • DuckDuckGo
      • Facebook Login
      • Google APIS
      • Intercom
      • Mux
      • OpenAI
      • Reddit API
      • Segment
      • Sendgrid
      • Sentry (Debug In Prod)
      • Spotify
      • Stripe
      • Transloadit
      • Zendesk
    • Bash
      • IO in Bash
      • Kills
      • Makefile
      • awk
      • Bash_Profile
      • Cron
      • Curl
      • Diff
      • Emacs
      • Find
      • general
      • gGit
      • Grep
      • man
      • Editing File Metadata
      • Sed
      • Secure File Transfer Protocol
      • SSH
      • Vi
      • zip
      • ZSH
      • installed
        • ASDF
        • Bit
        • ffmpeg
        • Generact
        • Graphite
        • ngrok
        • Node Version Manager
        • Spell
        • Tmux
    • C++
      • ptrs
    • CS_Fundamentals
      • Authentication
      • Comparisons
      • Semaphore
      • Content Security Policy
      • Data Structures
      • Editors Comparison
      • Email
      • Encryption
      • Errors
      • Feature Flags
      • HTTP
      • IDs
      • Language Types
      • Microservices
      • Optimization
      • Password Hashing
      • Real Time Messaging Protocol
      • Real-Time
      • Sorting
      • StoringSecrets
      • Testing
      • WebRTC
      • Webhook
    • README
      • Advanced (Postgres?)
      • Database Desigm
      • Firebase
      • Hosts
      • Code Abstractions
      • General Mongo
      • Mongo Aggregation
      • Opensearch
      • Postgres
      • Setup
      • Redis
      • Tips
      • SQL
        • Aggregate
        • Foreign Key Constraints
        • JOINS
        • Optimizations
        • SQL Lite
    • Dev_Apps
      • Featured Shortcuts
      • Iterm2
      • Matlab/Octave
      • Notion
      • Retool
      • Slack
      • Tableplus
      • vimium
      • Featured Shortcuts
      • Warp
      • Windows Terminal
    • Docker
      • Build and Run
      • Docker-compose
      • Dockerfile
      • Multistage builds
      • Swarm
    • Elixir
      • OTP
      • Config
      • DateTime
      • Erlang
      • Errors
      • File
      • Functions
      • Math
      • Modules
      • Regex
      • Setup
      • Time
      • URI
      • Phoenix
        • Channels
        • Handling Controller Errors
        • Controllers
        • Deployment
        • Default File Structure
        • LiveView
        • Plugs
        • Presence
        • Router
        • Session
        • Setup
        • Testing
        • Phoenix.Token
        • Views
        • Workers
        • Ecto
          • ChangeSets and validations
          • Generators
          • Insert/Update
          • Many to Many
          • Migration
          • Query With Repo
          • Relations
          • Schema
        • packages
          • CorsPlug
          • ExRated
          • Ueberauth
      • Collections
        • Lists(linked)
        • Map
        • Set
        • String
        • Structs
        • Tuples
      • Packages
        • Genstage
        • Geolix
        • json
        • Logger
        • Nanoid
        • Oban
        • Redix
        • Sentry
        • Stripe
        • Swoosh
        • Timex
        • http
          • HTTP
          • HTTPoison
          • Tesla
      • Processes / Concurrency
        • Agent
        • Cron
        • GenServer (Generic Server)
        • Registry
        • Supervisors
        • Tasks
    • README
      • IO
      • JSON
      • assert
      • basics
      • control
      • dep
      • errors
      • files
      • func
      • GoRoutines
      • interfaces
      • math
      • request
      • server
      • structs
      • testing
      • time
      • README
        • arrays
        • maps
        • strings
    • HTML Basics
      • Forms
      • Fun
      • SEO
      • Favicon
      • Images
      • Optimizations
      • Scripts
      • overview
        • Handlesbars
        • jade&pug
        • mustache
    • PHP
      • AMP
      • Hack
      • requests
      • setup
    • Python
      • 2.7v3.5
      • advanced
      • Argparse
      • Async Options
      • Classes
      • Secrets
      • environments
      • Importing
      • JSON
      • Os
      • random
      • re
      • testing
      • Datetime
      • Django
        • Databases
        • Models
        • Router
        • Serializers
        • Setup
        • Views
        • packages
          • Secrets
      • General Iterables
        • Dictionaries
        • fancyDicts
        • Heap
        • List
        • Set
        • Strings
      • Flask
        • Blueprint
        • cli
        • Config
        • Deploying Options
        • flash
        • LoginManager
        • packages
        • Requests/Routing
        • RESPONSES
        • templating
        • packages
          • Cors
          • flask_mongoengine
          • Socket IO
        • Postgres in Flask
          • Flask-Migrate
          • Flask-SQLAlchemy
      • packages
        • AIOHTTP
        • Celery
        • cython
        • Environment Variables
        • Excel
        • Google
        • Jupyter Notebook
        • Langchain
        • matplotlib
        • Numpy
        • Pandas
        • PassLib
        • PIL
        • Python Reddit API Wrapper(PRAW)
        • Prisma*
        • Pydub
        • Pymongo
        • Pyppetter
        • Python Requests
        • SQL Alchemy
        • aws
          • AWS Boto3
          • Dynamo
    • README
      • class
      • collections
      • exceptions
      • functions
      • futures
      • guice
      • loops
      • objects
      • options
      • packages
      • pattern&conditional
      • performance&style
      • sbt(running)
      • Strings
      • subtyping
      • traits
  • CSS
    • Obscure
    • Animations
    • Background
    • border
    • colors
    • cursors
    • display
    • Fonts
    • gradients
    • Lists
    • Media Queries
    • Object-fit
    • Overflow
    • pseudoElements
    • Selectors Master Race
    • Transforms
    • Transitions
    • extras
      • Scss
    • Placing Common Tasks
      • HTML Content Box
      • columns
      • Flexbox
      • Grid
      • Position
      • tables
    • Tailwind
      • Animation
      • general
      • Media Queries
      • position
      • Setup
      • Size and Spacing
      • Text
      • Typography
  • Deployment Solutions
    • DNS
    • Digital Ocean
    • Cloudflare
    • Heroku
    • loadtesting
    • Nginx
    • Process Management
    • Redis
    • Socket Alternatives
    • Speed Optimizations
    • {Surge
    • Task Queues
    • Terraform
    • Vercel
    • AWS
      • Certificate Manager
      • Amplify
      • \Cloudfront
      • Cloudwatch
      • Codebuild
      • Codedeploy
      • Code Pipeline
      • Docker in AWS
      • EB
      • ELB (Elastic Load Balancing)
      • IAM roles
      • AWS Lambda (Serverless)
      • Simple Email Service
      • Simple Queue Service
      • Virtual Private Cloud (VPC)
      • Serverless
      • Zappa
      • EC2
        • Scripts
        • Types of EC2
        • EC2(Elastic Compute)
      • Storage
        • Aurora
        • Autoscaling
        • CustomEC2
        • DynamoDB
        • RDS(Relational DB Service)
        • S3(Simple Storage Service)
    • Cloud GPUS
      • Beam
      • Paperspace
      • Replicate
    • Google Cloud Platform
      • Compute
      • Network
    • Github
    • Render
  • Javascript
    • Async and Await
    • Closure
    • Dates
    • Debugging
    • Errors
    • ES6 Specific Features
    • Functions
    • Importing
    • Promises
    • regex
    • Making a request
    • Timeout
    • All
      • Bun
      • Angular
        • HTML
        • HTTP
        • bash
        • input
        • observable_Subject
        • router
        • typescript
      • Chrome Plugins
        • Browser Action
        • Config
        • Content Scripts
        • Context Menu
        • Deploying
        • Desktop Capture
        • Events
        • To Get Identity
        • Manifest
        • Messages
        • Notifications
        • Popup
        • Service Workers
        • Setup
        • Shortcuts / Commands
        • Chrome Storage
        • Tabs
        • Match Patterns
      • Electron
        • Deep Links
        • Deploying
        • Desktop Captuer
        • Dialog
        • Images
        • Menu
        • Messages
        • Differences Between Platforms
        • notarizing
        • Notifications
        • Renderer Process
        • screen
        • Storage Options
        • Tray
        • Windows
        • Electron Packages
          • Electron builder
          • Electron-is-Dev
          • Electron-Log
          • electron-store
          • Electron-Forge
          • Sentry
      • Node
        • Routing
        • ejs
        • Env
        • Errors in Express
        • Files*
        • Forms
        • Logging
        • Middleware
        • Req
        • require
        • Response
        • Setup for Nodejs/Express
        • db
          • Mongoose
          • IoRedis
          • Knex
          • MongoDB
          • Prisma
        • Packages
          • Commander
          • Config
          • Crypto
          • Dotenv
          • Grant
          • Helmet
          • Http-errors
          • Essential Middleware
          • Passport
          • puppeteer
          • Expressjs/session
    • bundlers
      • Parcel
      • Vite
      • Webpack
    • Collections
      • JSON
      • Array
      • Blob (Binary Large Object)
      • Classes
      • Map
      • Objects
      • Set
      • Strings
    • Packages
      • AI
      • AWS SDK
      • Babel
      • Bcrypt
      • Cheerio
      • Concurrently
      • Csv
      • Cypress
      • Eslint
      • Jest
      • Lodash
      • Matter
      • Monaco Editor
      • Use to compile SCSS
      • Prettier
      • Query-string
      • Socket.io
      • Supabase
      • Trpc
      • Zod
    • TypeScript
      • 3rd Party Types
      • Classes
      • Enum
      • Generics
      • Interfaces
      • Migration
      • Narrowing Types
      • Types
      • Utility Types
      • packages
        • TRPC
    • JS In the Browser
      • CORS
      • DOM Control
      • Shadow DOM
      • Audio
      • Canvas
      • Clipboard
      • Cookies?
      • Events
      • Iframe
      • Intersection Observers
      • Keyboard Input
      • Media
      • Navigator
      • Scroll
      • Serving an index.html
      • Storage
      • Web Workers
      • packages
        • Tabulator
        • Bowser
        • Boxicons
        • d3
        • mapbox
        • MouseTrap Key Bindings
        • Videojs
  • ML
    • Embedding
    • Github
    • Vector Store
    • Deploy
      • Beam Cloud
      • Paperspace
    • NLP
      • Pre-processing text
      • 2vectorizing
      • 3featureengineering
      • 4ml
      • 4ml2
      • Overview
      • nltk
    • lowlevel
      • ML BuzzWords Guide
      • Regularization
      • DataSets
      • basics
        • Datasets
        • GPU Optimization
        • Neural Nets
  • README
    • Images, Fonts, and Files
    • Children
    • Context
    • Deployment
    • useEffect
    • Errors in React
    • Events
    • Forms
    • Hooks
    • JSX
    • Lists
    • Optimization
    • Rendering
    • Server Components
    • Setting up React
    • State and Lifecycle
    • Style
    • Suspense
    • Next
      • Image
      • Route Handlers
      • App Router
      • Assets
      • Next Config
      • CSS
      • Deploying
      • Layouts
      • Adding Markdown
      • Metadata
      • App Router
      • Server Actions
      • Setup
      • PreAppRouter
        • SSR
        • Api Routes
        • Head
        • Layouts
        • Pages
      • packages
        • ContentLayer
        • MDX Enchanced
        • T3 Env
    • How to fetch Data
      • React Query
    • packages
      • SWR
      • Classnames
      • Color
      • DatePicker
      • Draggable
      • Emotion
      • React-Feather
      • Fluxible
      • General
      • Google Login
      • Intersection Observer
      • React Lazy Load
      • Script
      • Proptypes
      • React Router v6
      • Recharts
      • React-Select
      • ShadCn
      • Slate
      • React-Table
      • Tanstack Router
      • Telephone Input
      • Three-Fiber
      • React-Toastify
      • React-Tooltip
      • React Video JS
      • Waypoint
      • React-window
      • XState
    • How to manage state in React
      • Jotai
      • Mobx
      • Zustand
      • Redux
        • Immer
        • Middleware
        • Redux
        • Redux
        • Redux Toolkit
        • selectors
        • Setup
        • Thunk
    • All
      • Gatsby
        • Cli
        • Data Integrations
        • Link
        • Pages
        • Plugins
        • Setup
        • Style
        • Transformer
        • packages
          • MDX
          • TailwindCss
      • Prehooks
        • Class Components
        • Ref
        • State and Lifecycle
      • React Native
        • ListViews
        • SafeArea
        • Built-in Components
        • Networking
        • Gestures
        • Navigation
        • Notifications
        • Orientation
        • Style
        • Dimensions
        • Expo
          • Development Build
          • Env
          • Setup
        • packages
          • Reanimated
          • React Native View Shot
  • Rust
    • Error
    • Importing
    • Ownership
Powered by GitBook
On this page
  • Making App
  • Using Database/Firestore
  • Firebase Authenication
  • Ref Objects
  • Delta Snapshot
  • Adding Backend APIS / Cloud Functions
  • Setup
  • Basic Usage
  • Get specific changes
  • Promises
  • Modularize Files
  1. All
  2. README

Firebase

Making App

Go to firebase console and copy pasta the code they give you to setup connection.

Using Database/Firestore

Firestore allows you to live update data on as many devices as you want on the frontend. Add listeners to data.

  • For testing go to db setting, rules, and set read and write to true(allowing all users to read and write no auth)

  • Then you can add data

  • the DbRef gets the key value pair from text and on change changes the val of snap

    var bigOne = document.getElementById('bigOne');
    var dbRef = firebase.database().ref().child('text');
    dbRef.on('value', snap => bigOne.innerText = snap.val());

Firebase Authenication

Allows ease console setup of Facebook auth, twitter, github, etc where all the user objects look the same

const auth = firebase.auth();
auth.signInWithEmailAndPassoword(email, pass);
//return a promise where you can resolve that user
auth.createUserWithEmailAndPassword(email, pass);
 //another promise
auth.onAuthStateChanged(firebaseUser => { });
//fires callback on changes, firebaseUser = null when logout

Using the promise

const promise = auth.signInWithEmailAndPassoword(email, pass);
promise.catch(e => console.log(e, message));

Signup event

function signUp(email, pass)) {
  const promise = auth.createUserWithEmailAndPassword(email, pass);
  promise.catch(e => console.log(e.message));
  //catch errors but dont do anything on state change just make request
  //using promise then would not allow auth changes
}

//SIGNOUT
firebase.auth().signOut();

//handle the auth state changes here
firebase.auth().onAuthStateChanged(firebaseUser => {
  if(firebaseUser) {
    //logged in
  } else {
    //not logged in
  }
})

Ref Objects

In the cloud, event.data.ref

  • .child('specificChild')

  • .set(value) //returns promise

Delta Snapshot

  • .ref //to get about ref

  • .changed() //boolean if changed

  • .val() //to get the actual value there

Getting val

ref.once('value')
  .then(function(dataSnapshot) {
    // handle read data.
  });

Adding Backend APIS / Cloud Functions

Could do clientside, but like secrets on client?? and write for every platform?? Require the APIS apparently @google-cloud/speech can be require(nodejs right). Then you add listener to upload file and then use api then write to translationed file. So you handle the conversion clientside. Then deploy these

Setup

Need firebase CLI npm install -g firebase-tools firebase login

Start Project firebase init functions firebase deploy

Return the promise from the set method to allow it to wait or null/

Basic Usage

functions.database/firestore.ref('/somepath/1') Can do:

  • onWrite(), created, updated, or deleted

  • onCreate(), created

  • onUpdate(), updated

  • onDelete(), deleted

Return a null or a promise to be waited for b4 cleaning up

exports.test = functions.database
.ref('/games/1')
  .onUpdate(event => {
    const game = event.data.val() //game object
    return null
  }

Get specific changes

Use .params.[key] to get the wildcard routes

exports.locationChange = functions.database
  .ref('/games/1/players/{playerId}/location')
  .onUpdate(event => {
    const location = event.data.val();
    console.log("LOC change");
    console.log(location);
    console.log(event.params.playerId)

Promises

Can use the promises as promises with then chains and all and such

const p1Update = event.data.ref.child(pId).child("potentialHacks").set(curPotentialHacks);
const p2Update = event.data.ref.child(changedPId).child("potentialHacks").set(changedPotentialHacks);
return Promise.all([p1Update, p2Update]);

Modularize Files

Nodejs style simply require i.e const location = require('./location.js');

PreviousDatabase DesigmNextHosts

Last updated 6 years ago