client packages

• Tailwind and daisyui
• authentication
• react router dom
• react toastify
• react hot toast
• axios
• react hook form
• react query
• Icons
• react day picker
• image upload

server packages

• express server setup
• mongodb get started

video notes

• 76-7 (sendgrid custom email send)
• 67-5 (pagination)
• 63.5-4 (google map integration)
• 69-4 (useToken custom hook)
• 70.5 (jwt recap)
   

---

create react app

npx create-react-app my-app
#or
yarn create react-app my-app

environment variable

• .env.local at root folder
• REACT_APP_credentialName=secret key

tailwind & Daisy ui

yarn add -D tailwindcss postcss autoprefixer

yarn tailwindcss init -p

yarn add daisyui

• tailwind.config.js ->

tip - if you face webpack error while editing config.js file, restart the client

module.exports = {
  content: ['./src/**/*.{js,jsx,ts,tsx}'],
  theme: {
    extend: {
      // tailwind themes here
    },
  },
  daisyui: {
    themes: false,
    // false means it won't apply daisy ui theme
  },
  plugins: [require('daisyui')],
}

• at index.css or App.css->

@tailwind base;
@tailwind components;
@tailwind utilities;

 

---

authentication

firebase website

yarn add firebase

yarn add react-firebase-hooks

tip - don't forget to add providers on firebase website in authentication section before you start coding for the methods.

• sign in with google

// sign in with google
import { useSignInWithGoogle } from 'react-firebase-hooks/auth'
const [signInWithGoogle, gUser, gLoading, gError] = useSignInWithGoogle(auth)

function handler(arg) {
  signInWithGoogle()
}

• create user with email

// create user with email with email verification
import { useCreateUserWithEmailAndPassword } from 'react-firebase-hooks/auth'
const [createUserWithEmailAndPassword, cUser, cLoading, cError] =
  useCreateUserWithEmailAndPassword(auth, { sendEmailVerification: true })

function handler(email,password) {
  createUserWithEmailAndPassword(email, password)
}

• sign in with email

// login with email and password
import { useSignInWithEmailAndPassword } from 'react-firebase-hooks/auth'
const [signInWithEmailAndPassword, eUser, eLoading, eError] =
  useSignInWithEmailAndPassword(auth)

function handler(email, password) {
  signInWithEmailAndPassword(email, password)
}

• sign in with github

// sigin in with github
import { useSignInWithGithub } from 'react-firebase-hooks/auth'
const [signInWithGithub, gitUser, gitLoading, gitError] =
  useSignInWithGithub(auth)

function handler() {
  signInWithGithub()
}

• update profile

// update user profile
import { useUpdateProfile } from 'react-firebase-hooks/auth'
const [updateProfile, updating, updateError] = useUpdateProfile(auth)

async function handler(arg) {
  await updateProfile({ displayName, photoURL })
  alert('Updated profile')
}

• send email verification

// send email verification
import { useSendEmailVerification } from 'react-firebase-hooks/auth'
const [sendEmailVerification, sending, verifyError] =
  useSendEmailVerification(auth)

async function handler(arg) {
  await sendEmailVerification()
  alert('Sent email')
}

• password reset

// password reset email
import { useSendPasswordResetEmail } from 'react-firebase-hooks/auth'
const [sendPasswordResetEmail, sending, resetError] =
  useSendPasswordResetEmail(auth)

async function handler(arg) {
  await sendPasswordResetEmail(email)
  alert('Sent email')
}

// note: this hook does not give you confirmation if the email is exist or not...it says 'email sent' to any email you geive.ex- yadayada@mail.com

 

---

react router dom

yarn add react-router-dom

• react router authentication(require auth)

// require auth file
import { useAuthState } from 'react-firebase-hooks/auth'

function RequireAuth({ children }) {
  const [user, loading] = useAuthState(auth)
  const location = useLocation()

  if (laoding) {
    return <Spinner></Spinner>
  }
  if (!user) {
    return <Navigate to='/login' state={{ from: location }} replace />
  }

  return children
}
export default RequireAuth

// authentication file
const navigate = useNavigate()
const location = useLocation()
const from = location.state?.from?.pathname || '/'

if (user) {
  navigate(from, { replace: true })
}

---

• custom active link

function CustomLink({ children, to, ...props }) {
  let resolved = useResolvedPath(to)
  let match = useMatch({ path: resolved.pathname, end: true })

  return (
    <div>
      <Link
        style={{ textDecoration: match ? 'underline' : 'none' }}
        to={to}
        {...props}
      >
        {children}
      </Link>
      // {match && ' (active)'}
    </div>
  )
}

export default CustomLink

 

---

react toastify

# npm
npm install --save react-toastify

# yarn
yarn add react-toastify

//inside app.js
import { ToastContainer, Slide } from 'react-toastify'
import 'react-toastify/dist/ReactToastify.css'

fun App() {
  <>
    <ToastContainer autoClose={3000} transition={Slide}/>
    other...compoents
  <>
}

// usage
import { toast } from 'react-toastify'

toast.success('congrats!')
toast.error('invalid!')
toast.warning('warning')
toast.info('information')
toast('default toast')

• see more toast options

  
   

---

hot toast

# npm
npm install react-hot-toast
# yarn
yarn add react-hot-toast

// inside App.js
import { Toaster } from 'react-hot-toast';

fun App() {

  <div>
    <Toaster position="top-center" toastOptions={{duration: 3000,}}/>
  </div>
}

// usage
import toast from 'react-hot-toast'
toast.success('Successfully created!')
toast.error('This is an error!')
toast.loading('Waiting...')
toast('Hello World')

• see more toast options

 

---

axios

yarn add axios@0.25.0

// axios get method
//----client
useEffect(() => {
  axios('http://localhost:5000/services?name=john', {
    headers: {
      authorization: `bearer secret key`,
    },
  }).then((res) => console.log(res))
}, [])

//-----server
app.get('/services', (req, res) => {
  const authorization = req.headers.authorization

  const queryParameter = req.query
  console.log(authorization)
  console.log(queryParameter)
  res.send(services)
})

// Axios delete method
//-------client
const handleDelete = () => {
  axios
    .delete(`http://localhost:5000/services/${1}`, {
      data: {
        service: 'body from delete',
      },
      headers: {
        authorization: `bearer secret key from delete`,
      },
    })
    .then((res) => console.log(res))
}

//------------server

app.delete('/services/:id', (req, res) => {
  const query = req.params.id
  const authorization = req.headers.authorization
  const service = req.body
  console.log(authorization)
  console.log(query)
  console.log(service)
})

// Axios post method
//--------client
const handlePost = () => {
  axios.post(
    `http://localhost:5000/services`,
    {
      service: 'body from post',
    },

    {
      headers: {
        authorization: `bearer secret key from post`,
      },
    }
  )
}

// --------server
app.post('/services', (req, res) => {
  const service = req.body
  const authorization = req.headers.authorization
  console.log(service)
  console.log(authorization)
})

// axios put method
//------------client
const handlePut = () => {
  axios.put(
    `http://localhost:5000/services`,
    {
      service: 'body from put ',
    },
    {
      headers: {
        authorization: `bearer secret key from put`,
      },
    }
  )
}

//-------------server

app.put('/services', (req, res) => {
  const updatedService = req.body
  const authorization = req.headers.authorization
  console.log(updatedService)
  console.log(authorization)
})

// axios patch method
const handlePatch = () => {
  axios.patch(
    `http://localhost:5000/services`,
    { service: 'body from patch' },
    {
      headers: {
        authorization: `bearer secret key from patch`,
      },
    }
  )
}

//-------------server
app.patch('/services', (req, res) => {
  const updatedService = req.body
  const authorization = req.headers.authorization
  console.log(updatedService)
  console.log(authorization)
})

 

---

react hook form

yarn add react-hook-form

• sample form

• form with basic validation

 

---

react query

yarn add react-query

// inside index.js
 import { QueryClient, QueryClientProvider, useQuery } from 'react-query'
const queryClient = new QueryClient()
<QueryClientProvider client={queryClient}>
  <App/>
</QueryClientProvider>

// usage

//using axios
const { isLoading, error, data, refetch } = useQuery('repoData', () =>
  axios('https://api.github.com/repos/tannerlinsley/react-query').then((res) =>
    console.log(res)
  )
)

if (isLoading) return 'Loading...'

-------------------------------------------------------------------
//using fetch
const { isLoading, error, data,refetch } = useQuery('repoData', () =>
  fetch('https://api.github.com/repos/tannerlinsley/react-query').then((res) =>
    console.log(res.json())
  )
)

 

---

Icons

• react icons

yarn add react-icons

• hero icons

yarn add @heroicons/react

• font awesome

yarn add @fortawesome/fontawesome-svg-core
yarn add @fortawesome/free-solid-svg-icons
yarn add @fortawesome/react-fontawesome

// usage
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faCoffee } from '@fortawesome/free-solid-svg-icons'

return (
  <button>
    <FontAwesomeIcon icon={faCoffee} />
  </button>
)

 

---

// usage
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faCoffee } from '@fortawesome/free-solid-svg-icons'

return (
  <button>
    <FontAwesomeIcon icon={faCoffee} />
  </button>
)

 

---

react day picker

yarn add react-day-picker date-fns

import React from 'react'
import { DayPicker } from 'react-day-picker'

export default function App() {
  // disable all previous days
  const disabledDays = [
    { from: new Date(1600, 0, 1), to: new Date(Date.now() - 86400000) },
  ]

  return (
    <DayPicker
      defaultMonth={new Date()}
      disabled={disabledDays}
      mode='single'
    />
  )
}

 

---

image upload

const imageAPI = 'api key from image hosting server'

async function handle() {
  const image = data.image[0]
  const formData = new FormData()
  formData.append('image', image)

  const url = `https://api.imgbb.com/1/upload?key=${imageAPI}`
    // using fetch
    fetch(url, {
      method: 'POST',
      body: formData,
    })

    //or using axios
    axios.post(url, formData ).then....`set hostedUrl to mongodb`
}

 

---

• day picker css

  1. create a css file in src folder daypicker.css.
  2. import that into App.js import './daypicker.css'

.rdp-day_selected:not([disabled]) {
  color: white;
  background-color: #0fcfec;
}

.rdp-day_selected:focus:not([disabled]) {
  background-color: #0fcfec;
  border: 2px solid rgb(138, 238, 252);
}

.rdp-day_selected:hover:not([disabled]) {
  background-color: #19d3ae;
  border: 2px solid rgb(152, 255, 215);
}
.rdp-button:active:not([disabled]) {
  border: 2px solid #19d3ae;
  background-color: #bafff1;
}

server

express server

# npm
npm install express cors mongodb dotenv jsonwebtoken

# yarn
yarn add express cors mongodb dotenv jsonwebtoken

# if use yarn you need to add *script* manually to package.json file
  "scripts": {
    "start": "node index.js",
    "start-dev": "nodemon index.js"
  },

• express hello world api example

• dotenv config call

• cors usage

// sample code
const express = require('express');
const cors = require('cors');
require('dotenv').config()

const app = express()
const port = process.env.PORT || 5000


app.get('/', (req, res) => {
  res.send('hello world')
})

app.listen(port, () => console.log('listening to port', port))

\

 

---

mongodb quick start

• find doc

• insert doc

• delete doc

• update doc

• count doc

• sort doc

• skip and limit doc