/recipe

Primary LanguageCSS

Welcome to Recipes!

Hi! Thank you for visiting my recipes app. This app was built to help me get familiar with React best practices. I am familiar with some items and there are others that I will be learning for the first time. Below I will list out what those best practices are and where they were utilized in the app.

Live Site

Firebase Netilify

Installation

  • Pull down code.
  • Create a firebase database
    • Add firebase config to .env.local
  • Go to Spoontacular.com to sign up for an api key.
    • Add key to .env.local
  • Run yarn start

Goal

- React Basics

  • .then
  • async/await
  • .find
  • .reduce
  • .map
  • .filter
  • .includes
  • memoization
  • hoc patterns

- React Router

  • react router dom
  • withRouter()
  • nesting routing
  • collection routing
  • memoizing selectCollection and collectionUrlParam
  • currying

- React Forms

  • formik

- Firebase & User Auth

  • setup
  • store and fetch data
  • Sign in
  • Sign up
  • Firestore
  • using firebase and redux
  • security

- Redux

  • concepts
  • actions and reducers
  • connect() and mapStateToProps()
  • mapDispatchToProps
  • redirect and action type

- Redux Saga

  • saga flow
  • generator functions
  • take(), takeEvery(), takeLatest()
  • root saga
  • persistance

- Asynchronous Redux

  • observables + observer pattern
  • promise pattern
  • redux thunk
  • debugging

- React Hooks

  • useState
  • useEffect
  • useRef
  • useReducer
  • useCallback
  • useContext
  • useLayoutEffect
  • useImperativeHandle
  • useDebugValue

- Context API

  • provider
  • context consumer + useContext hook
  • patterns
  • redux vs context api

- Stripe API

  • integration

- Tailwind

  • integration

- GraphQL

  • mutations
  • apollo overview
  • query with variables

- React Performance

  • react lazy + suspense
  • error boundaries
  • useMemo, useCallback
  • Gzipping and compression
  • react

- Testing with Jest, Enzyme and Snapshot testing

  • unit
  • integration
  • automation
  • async tests
  • mocks and spies
  • testing
    • stateful components
    • connected components
    • reducers
    • actions

- Persistance + Session Storage

  • local storage
  • session storage
  • redux persist

- State Normalization

  • data normalization
  • hash tables vs tables
  • data flow