notes.txt

[ 02/03/2023 07:15PM Day 01 ]

~ Reddit Clone w/ React, Next.js, Firebase v9, Chakra UI

-- Chakra UI
  + ChakraUI Provider
  + ChakraUI Theme
  + ChakraUI Fonts
  + ChakraUI Icons


-- 1. Begin Project
  >> npx create-next-app@latest

  + _app.tsx --> represents entire application
  + Whatever page or component we will create will be a child of this app

  + index.tsx --> represent everything rendered on the screen
  + Represent our index route

-- 2. Core package installations (Chakra-React, Firebase, Recoil)
  - Charka UI installation
    >> npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion

  + npm i firebase recoil

  - Setup Chakra
    + Import ChakraProvider in _app.tsx
    + And, wrap your component with it

  + ChakraProvider makes sure you have chakra components available throughout your application

  - Use a /src folder
    + Create a /src folder
    + Put /pages and /styles folder inside it 
    + Restart the server

  + We can completely delete the styles folder because chakra will be handling it for us

[ 03/03/2023 12:00PM Day 02 ]

--> Video starts @14:12

-- 3. Create Chakra Theme
  + We will be needing no style provided by css

  + All of our styles will be handled by chakra

  + In chakra ui, we can create our customized theme using JS objects

  + Theme contains color that will be present throughout our application such as brand color, accent, shades, etc
  + It aims to make your application consistent from styling prespective

  - How to initialize chakra theme?
   + We will keep chakra theme config in a separate chakra directory
   + Create a new directory in the /src called chakra
   + Inside it create a file theme.ts
   + Import "extend theme" function from chakra and setup the theme
   + Export the theme object
   + Import the theme object in the _app
   + Pass it as a prop to chakra provider so it will be available for us throughout the application

  + Chakra UI also provide us with fonts
  + Chakra UI fonts

  + We can also setup fonts in chakra ui theme

  + We can set global styling by passing a callback which applies it immediately

  + We can also style chakra ui components in the theme, it's variants etc

-- 4. React TypeScript Intro & NextJS Layout Component
  + Now will be working on the layout of the page

  + We will create a nextjs layout
  + This represents the layout of the page

  + Important: We put components in layout that we want to show on every page

  + We wrap the main component inside _app file with the layout component

  + Install React TypeScript Snippets extension in vs code

  - How do we setup layouts in next js?
    + Create a components folder in the /src directory 
    + Create a Layout folder
    + Because, we will be having more than one layout in our application
    + Create a Layout.ts file

  - TypeScript for react
    + We specify types for each component
    + We specify what props we will be passing into it
    + So, when we will be using it we can prevent the errors
    + JS lacks this feature

  + React.FC --> Returning a type of a react functional component

  + We wont be needing props inside our layout component, so we can remove LayoutProp type

--> Pause @01:05PM
--> Resume @02:54

-- 5. Begin Navbar
  + In react, its common to name route files of a folder to be index.tsx

  + We will create a new folder for Navbar
  + Because Navbar will itself contain bunch of component

  + We will use Navbar component in the layout file

  + <Flex></Flex> --> Applies CSS flexbox

  + We can pass CSS rules as props into the Chakra UI components

-- 6. Navbar Logos & Chakra UI Styling Fundamentals
  + Image --> To use images

  + Note: When using images from public directory
  + We dont need to specify the entire relative path from current directory
  + We can just use /images/imageName.svg

  - Media Queries
    + We write media queries for single elements
    + Base --> Mobile Screen Size --> Chakra is mobile first library
    + Md --> Medium Screen size

    + none / unset

  - How to apply media queries?
    + propertyName={{base: "value for mobile", md: "value for medium screens"}}

  - We will be making following components for the Navbar
    + <Directory />
    + <SearchInput />
    + <RightContent /> --> Different views based on user logged in or not

-- 7. SearchInput Component
  + We will take user as a prop later

  + We will use <InputGroup /> Component here
  + <InputLeftElement> / <InputRightElement>
  + <Input>
  + Because, in the search bar, there's a search logo and text field

  + <PhoneIcon> --> Coming from Chakra UI Icon Library

  --> Stop @03:05PM
  --> Start @08:30PM

  - How do we access pseudo classes in chakra ui?
    + By using a underscore in the beginning
    + _hover={{ color: 'red', border: '1px solid' }}
    + _focus
    + _placeHolder, etc...

-- 8. Authentication buttons & Chakra UI global component styling
  + Now, we will create a RightContent Component
  + It will have further more components inside it
  + AuthModal --> SignIn Popup
  + AuthButtons --> Login / SignUp

  - Why do we need a RightContent Component?
    + Because, the content situated on the right of the navbar is dynamic
    + It will be different for signed in users and non-signed in users
    + Therefore, it will be best if we create it's own component and separate it's conditional logic there

  + Since buttons gonna appear multiple times in our application, so we need consistent styling for them.
  + Therefore, we will create globla styling for our buttons so we dont have to write the same styles again and again

  + We define global styling of each component in separate file
  + ComponentStyleConfig --> Type for component styling
  + With this type, the object will show what are the available values
  + This is the beauty of typescript

  - We do global styling of components based on following
    + baseStyle --> Just base style that every variant will follow
    + sizes --> On different screens
    + variants --> Solid, Outline, Disabled --> We name them

  + Note: Height, Width, Size of each button will depend on the usage
  + We will define it wherever we're gonna use them
  + We dont need to define them in global styling
   
[ 04/03/2023 07:10PM Day 03 ]

--> Video starts @44:59

-- 9. Authentication Modal Intro
  + We will create a folder for "Modal" in the src directory
  + Because we're gonna have more than one modal
  + Login/SignUp Modal
  + Create Community Modal

  + We will create another Auth folder inside Modal
  + Because, Auth modal itself will have multiple components

  + Copy the Modal code from Chakra UI website
  + We dont need to use useDisclosure hook
  + We will create custom implementation of opening and closing the modal

  + Both of the login and signup button will trigger opening of the modal

-- 10. Recoil Setup & Intro
  - Why do we need to implement global state?
    + Because, the modal open will be triggered from different components

    - For example, 
      + It will be opened when you wanna vote on a post and you're not logged in
      + It will be opened when you wanna join a community and you're not logged in
      + It will be opened when you wanna signin or login from navbar

    + Therefore, we need to lift the modal state from AuthModal component

  + Recoil is much simpler than redux

  - How to setup recoil?
    1. We need to wrap our app component with <RecoilRoot> component
      + It will make the global state available in the entire application

    2. Need to create an atom
      + Atom is same as slice in redux
      + Atoms contain the source of truth for our application state
      + Atom is used to initialize the state

    3. Create atoms folder in the /src directory
      + It's where all of our pieces of global state live

    4. Create a file --> 'authModalAtom.ts'

    5. Create an atom for the authModalState
      i. Import "atom" from "recoil"
      ii. Create a type of state's data using interface --> it will contain properties the auth modal atom will have
      iii. Create a default state object
      iv. Initialize the atom by passing an object to it
        + The object will contain two properties
        + key --> Used to identify the state uniquely
        + default --> Similar to useState hook --> Pass a default value for the state

  - How to use global state powered by recoil in a component?
   >> const [state, setState] = useRecoilState(stateAtom);

  + useRecoilState --> Get & Set
  + useSetRecoilState --> Only Set

--> Pause @08:20PM --> 1 hour 10 minutes
--> Resume @08:57PM

-- 11. Authentication Modal Content
  + Make the modal title dynamic using authModelState 'view'

  - What other components do we need in our AuthModal?
    + OAuthButtons
    + AuthInputs
    + ResetPassword

  + First, we will implement the AuthInputs Component
  + The AuthInputs has two further more components in it 
  + Login and SignUp Components
  + We will show these components conditionally 
  + If authModalState is login --> <Login>
  + If authModalState is signup --> <SignUp>

  - How we can use single state for multiple inputs?
    + Using dynamic property

    >> {
      ...prev,
      [event.target.name]: event.target.name
    }

--> Stop @10:10PM --> 1 hour 13 minutes --> Video starts @1:18:57

[ 05/03/2023 10:42PM Day 04 ]

--> Video starts @1:18:57

-- 12. OAuth Buttons (Sign In w/ Google, Facebook, Github, etc.)

--> Pause @11:16PM --> 34 minutes
--> Resume @12:50PM

-- 13. Firebase Setup
  - Steps to setup firebase
    1. Create a new project
    2. Register app (web app, ios, android, flutter, etc)
    3. Add firebase SDK to your application (config)

  + Note: NEXT JS performs SSR as well as CSR
  + If we initialize our the default way, it will initialize it on the server, and as well as on the client
  + To prevent this issue, we will two functions from firebase
  + getApps() and getApp()
  + We will check getApps.length if it's zero, we will initialize it 
  + Otherwise, we will get the already initialized app

-- 14. User Creation
  + We will be using react-firebase-hooks npm package to interact with firebase app

  + For creating a new user
  + We will be using useCreateUserWithEmailAndPassowrd hook
  + It will return createUserWithEmailAndPassword function, the user itself, loading, and error states

  + We set errors in frontend by using useState hook

  + Important
  + ChakraUI Buttons consist an attribute called loading
  + If the state of the button is loading, then it will loading animation

-- 15. Firebase Error Handling (TypeScript indexing, custom error messages)
  - What if we try to signup a user that already exists
    + Firebase will respond with a error
    + We will handle it by using userError variable provided by the react-firebase-hooks library

  + We will map firebase errors using an object

  + When we pass userError.message as key to FIREBASE_ERRORS object
  + We will get a typescript indexing error
  + We can solve by using type casting like follows
  >> FIREBASE_ERRORS[userError.message as keyof typeof FIREBASE_ERRORS]

-- 16. Google Authentication (useSignInWithGoogle hook)
  + Enable "Google Provider" from google

  + SignUp using a provider is same as logging in using the service provider
  + Same logic is used in both areas

-- 17. Sign In Existing Users

[ 07/03/2023 04:10AM Day 05 ]

--> Video starts @01:56:54

-- 18. useAuthState firebase hook
  + We have to do something useful once the user has logged in 
  + We also need to tell the user that it has logged in

  + Now, we need to obtain logged in user and do somethin useful with it
  + We implement this logic using the useAuthState hook

  + Once we logged in, we need to close the modal
  + We will implement this logic in AuthModal component
  + The useAuthState hook returns three values --> user, loading, error
  + We will use useEffect hook, and put the user in its dependency array
  + If the state of the user changes, useEffect will run, closing the modal

  + There are two ways to use user
  + Call useAuthState in each component
  + OR, call it once in Navbar component, and pass it as prop to other components

  - How to implement sign out logic?
    + import signOut function from firebase/auth
    + Run it by passing the auth object --> signOut(auth)

  + useAuthState hook persist the user if the page refreshes or user comes back after few days

-- 19. Reset Passwords (useSendPasswordResetEmail)
  >> npm i react-icons

  + We can await the network requests 
  + If there is some code that's supposed to run just right after the network request
  + We can await so the next line of code waits for the network request to complete

--> Pause @05:25AM --> 1 hour and 15 minutes
--> Resume @02:10PM

-- 20. Navbar Icons (react-icons)
  + We are passing react icons as children to chakra ui Icon Component
  + To style them easily

  + We are wrapping each icon inside in another flex element
  + Because of the hover effect

--> Pause @02:30PM --> 20 minutes
--> Resume @07:25PM

-- 21. User Dropdown Menu

--> Pause @09:00PM --> 1 hour and 35 minutes
--> Resume @11:28PM 

-- 22. User Karma (custom user properties)

--> Stop @11:39PM --> 11 Minutes
--> Video @02:29:00 

[ 09/03/2023 06:00PM Day 06 ]

--> Video Start @02:28:55

-- 23. Community Directory in Navbar
  - How can we make the search bar grow while user is signed in and have a fixed size when user is logged out?
    + We can take the user object in the arguement
    + We can use maxwidth property
    + If user is logged in, set maxwidth to be auto
    + If user is logged out, set maxwidth to be fixed 600px

  + Maxwidth --> Can become smaller but cant exceed the given width

  - How to stop the logo from shrinking?
    + Give it a width!!

-- 24. Create Community Modal 1: Skeletion
  + Defining a function type in type typescript
  >> type props {
    fnName: (arg: ArgType, ...) => fnReturnType;
  }

-- 25. Create Community Modal 2: Body (input, char count, community type)
  + What is the <Stack /> component?
    + It's to maintain similar spacing between its children
    + It's like a stack

  + We can also change the size of the modals in chakra ui

--> Stop @11:21PM
--> Video stop @03:01:33

[ 10/03/2023 10:15PM Day 07 ]

--> Video start @03:01:33

-- 26. Create Communities & Cloud Firestore Database
  + We will be doing database transactions, batch rights, etc

  - Example of collections
    + Community
    + Post
    + Comment

  + We will access our firstore database using the firestore object
  + We are exporting the firestore object from clientApp.ts
  + We will use it anytime we try to interact with our database

  + To check if a community name already present in the databse or not
  + We will create a document reference

  + In firestore, we have document reference, and then document itself

  - How to get a specific document in firebase?
    1. Create document reference
      >> const docRef = doc(firestore, '<COLLECTION_NAME>', '<DOCUMENT_ID>');
      >> const communityDocRef = doc(firestore, 'communities', communityName);

    2. Get the document using the document reference
      >> const document = getDoc(docRef);
      >> const communityDoc = getDoc(communityDocRef);

    + doc() --> Firebase function to get a document reference
    + getDoc() --> Firebase function to get the document

  - How to create new documents?
    + By using, setDoc() function

--> Pause @11:35PM
--> Resume @03:30AM

-- 27. Joining Communities 1
  + We want users to join our communities
  + This will lead to modeling data with NoSQL

  + What happends when a user joins a community --> SQL vs NoSQL
  + From user prespective --> How many communites have they joined?
  + From community prespective --> How many users are in it?

  + A user can join many communities
  + A community can have many users 

  + Therefore, it's a many-to-many relation
  + We need a join table between them --> SQL

  + However, we have a little freedom in NoSQL
  + We can design the relationship however we want
  + But, we can run into scalability issue really quickly

  - We have three options:
    1. Either store array of users in communites or store array of communites in users
    2. Make a join table --> But, NoSQL has no join queries, we need to write more queries to make it happen
    3. Store an array of communites objects in the users 

  + We will be going with the option no. 3
  + Because, a community can have millions of users
  + An array cannot hold that many elements

-- 28. Cloud Functions
  + We need to store communitySnippets sub-collection on user
  + But, we have a problem --> We dont have a collection called users 
  + Because, firebase auth service is completely different from its firestore service
  + They are not linked

  - We can solve this issues by using cloud functions
    + We want to listen to auth
    + Whenever a new user is created
    + We want to create its document in the firestore database

  + To use cloud functions, we need to upgrade our project from free to pay-as-you-go project

--> Stop @04:50AM
--> Video @03:44:15

[ 11/03/2023 08:26PM Day 08 ]

-- 29. Joining Communites 2 (Firebase Transactions and Sub-Collections)
  + What is a database transaction?
  + Transaction --> Set of read/write operations on one or more documents
  + Transactions are useful because they represent all or nothing operations
  + If you're performing a set of operations on a database that are part of a transaction
  + If one of them fails, we have to fail the entire transaction because the operations are dependent on each other

  - Why do we care about it?
    - When we're creating a community, we're doing two things
      1. Create community document
      2. Update user's sub-document

    + They are dependent on each other
    + If community is failed to be created, we dont want to update the user's document

    + Therefore, "Transactions" are very usefull

  + Transaction is similar to batch writes
  + But, there's a slide difference to it

  - How do we get params from url?
    >> context.query.paramName

  - How do we implement transactions in firebase?
    + using firebase runTransaction function
      >> runTransaction(firestore, (transaction) => {})

    + It receives a transaction object in the callback
    + We will use the transaction object to perform update, set, get, and delete operations
    + Only transaction.get(docRef) needs to be awaited

    + We will still use doc() function to create references

  + To update a sub-collection inside a document, we use absolute path
  >> collectionName/documentName/subcollectionName
  >> collectionName/documentName/subcollectionName/documentName/subcollectionName

[ 12/03/2023 07:48PM Day 09 ]

-- 30. Community Page (Server Side Rending and Data Fetching)
  + We will perform server side rendering in next js

  + The client side route of a reddit community looks something like this
  >> /r/communityName

  - Therefore, our folder structure will look something like this
    - pages
      - r --> static route
        + [communityId]
          + index.tsx --> root / --> /r/communityName
          + submit.tsx --> /r/communityName/submit

  - How will we use server rendering?
    + We just have to export getServerSideProps function, and nextjs will perform server rendering on it

    + By using a function getServerSideProps
    + This function is called on the nextjs server
    + Data is fetched from the database
    + Then, the data is passed to the component
    + Server renders the component
    + Then, this component is sent to the client

    + In other words, this page is pre-build before showing it to the user
    + Client will think data is appeared magically from somewhere
    + Whereas, the data was fetched and rendered on the server side
    
  - How can we receive data passed as props from getServerSideProps function to other components?
    + There will be no jsx in the getServerSideProps function
    + It returns an object consisting of a property named props
    >> return { props: { ...props } }

    + We can pass data as props by assigning it to the props object
    >> return { props: { userData } }

    + Therefore, we will receive the data consist in the props object as props in other components
    >> const Component = ({ userData }) => {}

  + Reddit uses a mix of server side rendering and client side rendering

  + For client-side rendering, nextjs uses something known as "hydration"  
  
  + NextJS allows us to make custom pages if error occurs in getServerSideProps

  + If there are timestamps in the data, getServerSideProps maybe not able to handle it
  + SOLUTION: By using a packge safe-json-stringify

-- 31. Community Not Found component
  + If community does not exist, we will send am empty string as prop from server

  + On client, if we get an empty string, we will render the community not found component

-- 32. Community Page Header component
  + Header will take CommunityData as prop

  + flexGrow --> Take all the remaining height

  + Join functionality will be a part of global community atom

-- 33. Custom PageContent Layout component (React children)
  + Home, Community, and Submit Community Page layouts are same
  + We can create a page layout component that we can reuse
  + So, we dont have to write the same css again and again

  - How to pass more than one component as children to other components?
    + By wrapping each component in fragment
    >> <OtherComponent>
        <>
          <Child1 />
        </>
        <>
          <Child2 />
        </>
       </OtherComponent>

  - How can we get multple children components?
    + When we use fragments to pass multiple components as children
    + The children object becomes an array

    >> const child1 = children[0];
    >> const child2 = children[1];

-- 34. Community Data Recoil Atom (global communites state)
  - To show the communities the user have joined on the navbar, and on the community page, we need to:
    1. Make a reusable useCommunityData hook to get data
    2. Make global community state

  + Multiple components in our app need to utilize the community snippets data

-- 35. useCommunityData Custom Hook
  + The functionality for joining and leaving the community is also shared by multiple components as well

  + That's why we need to create a custom hook
  + We can keep repeated state and logic inside the custom hooks

  - useCommunityData
    + communitesState
    + joinCommunity
    + leaveCommunity

  - useCommunityData will be used by following components
    + Header
    + MyCommunitesDropdown
    + Top Communites

  + In react, if there's a repeated data that is required at multiple places, we can use a custom hook for it

  - How to booleanize something?
    >> By using double bangs --> !!
    >> !!5 --> true
    >> !!'' --> false
    >> !!'something' --> true

-- 36. Fetch User Community Snippets (getMyCommunites function)
  + For fetching a single doc ref, we use --> doc(firestore, path, docId)
  + For fetching a collection/sub-collection ref, we use --> collection(firestore, path)

  + For fetching a single doc, we use getDoc(docRef)
  + For fetching a collection/sub-collection, we use getDocs(collectionRef)

  + Collections (Docs) --> collection + getDocs
  + Doc --> doc + getDoc

  + Note: We wanna fetch snippets, once the user is logged in
  + We can call getMySnippets function inside a useEffect hook
  + It will load snippets as the hook is called

  + But, we dont want to fetch snippets if there is not user
  + Therefore, in the dependency array, we will use user object
  + And, we will create a guard, if user doesnot exist return

  + Therefore, as new users logged in, new snippets relative to them will be fetched

  + Note: When we log the user out, we need to clear the communitesState
  + This will be done by using useResetRecoilState(atom);
  + We just need to call it, and will reset the state to default

  + Therefore, when we log out a user, in communites, joined will be changed to join

[ 15/03/2023 06:15PM Day 10 ]

-- 37. Join & Leave Communites (Firestore Database Batched Writes)
  - What is the difference between transactions and batch writes?
    + In transactions, we perform read and write operations
    + Whereas, in batch writes, we only perform write operations 

  + Transactions --> Read + Write
  + Batch writes --> Writes

  + As we writes some operations to the firestore database
  + We also need to update communites global state to reflect the change on the UI

  - How to perform batch write operations?
    1. import writeBatch() function from firebase
    2. initialize it by passing the firestore object
    3. store it in a variable

  + batch.set() --> for inserting a newly create document
  + batch.update() --> for updating an existing document

  + batch.update() --> Pass only the updated field, other fields would be as it is

  + batch.commit() --> To execute batch writes and save changes

-- 38. Create Post Page & CreatePostLink Component
  + Creating a post inside a community
  
  - How to redirect a user from one url to another?
    + Using userRouter hook from 'next/router'
    + call it --> const router = useRouter();
    + redirect user --> router.push(NEW_URL)

--> Resume @10:43PM

-- 39. NewPostForm 1: FormTabsComponent (Multi-step React forms)
  + Our form will have a navbar that will be statefull
  + It will highlight on which tab you are on

  + Static variables are created outside react component
  + Because it's not something related to react
  + e.g. constants, etc.

[ 16/03/2023 05:26PM Day 11 ]

-- 40. NewPostForm 2: PostTextInputs (Post Title & Body)

[ 17/03/2023 09:50PM Day 12 ]

-- 41. NewPostForm 3: ImageUpload Component
  + To let users select files from their file system
  + A normal button wont work
  + We wanna use here an input element
  + We then have to make the type of that input element "file"

  + Button the input element having the type "file" looks ugly
  + What we can do is when we click the button, the button clicks the file upload input

  + We will use useRef hook to make this functionality become possible

  - Input having file type
    + onChange will run when a image is selected
    + We can get what image is selected by using the value property

    - How to read what file user uploaded?
      + event.target.files --> An array of selected file
      >> const reader = new FileReader() --> Will be used to read files
      >> reader.readAsDataURL(' fileName ') --> To read actual file
      >> reader.onload = (readerEvent) => {} --> To perform operations once the file is read

    + We will store the uploaded file in the selectedFile state

    + Once user has uploaded the file, we want to change the tab

[ 19/03/2023 08:45PM Day 13 ]

-- 42. handleCreatePost Function (Save Posts to Firestore, Upload Image to Firebase Storage)
  + We have created a post creation form
  + And, image upload functionality

  + Now, we need to store this information in the database

  + We will store our Posts in firestore database
  + We will store images in firebase storage

  - Steps in post creation
    + We will first store the post in our db
    + Then, we will check for the image and upload it as well
    + Now we can get imageURL by using the function getImageURL
    + We will update the post in the db and add imageURL with it as well
    + Finally, we will redirect the user to the community page

    + Note: We are creating a post first without uploading the image. 
    + This is because if we uploaded the image first, and then there was some error in post creation
    + We would have an unnecessary image in the storage
    + Therefore, creating a post first is a good option

  + We're going to create a post atom, because we will need at multiple pages

  + We will access the community id from the url
  + Using the useRouter hook

  - The bang operator in typescript
    >> user.email!.split(@)[0]
    
    + By using the bang operator, we tell typescript that we know forsure that the value exists 

-- 43. Fetch All Posts in Community (usePosts custom hook, Firestore queries)
  + We're gonna create a custom hook for posts
  + Because posts gonna share some common logic
  + Voting on posts
  + Deleting posts, etc..

  - How to get posts of a community?
    + Now, we need to perform some firebase queries
    + SELECT * FROM POSTS WHERE communityId = id;

    + We perfrom queries in firebase using some functions
    + query(collectionReference, where(), ...)
    + where('filedName', '==', fieldValue)
    + orderBy('fieldName', 'asce')

    >> const postsQuery = query(...)
    >> const postDocs = await getDocs(postsQuery)

  + To perform queries in firebase, we need to enable indexing

[ 20/03/2023 09:20PM Day 14 ]

-- 44. PostItem Component
  + When you use async functions you dont need define the return type

  + We will use moment libray to show when the post was created
  >> npm i moment

-- 45. PostLoader Component
  + It will show post skeleton while the posts are being loaded from the database

  + Chakra UI makes it easier
  + Chakra UI provides a lot skeleton components

  + Loading components are very important to improve the user experience

-- 46. Deleting Posts (handleDelete function, TS promises)
  + If we have a onDeletePost function
  + Then, why do we need a handleDelete function?

  + Because, the handleDelete function will do error handling for us
  + If the post was not successfully deleted we need to notify the user
  + We will do all the error handling in the handleDelete function

-- 47. About Community Component (currentCommunity recoil state)
  - We will be displaying the about community page on three pages
    1. Community Page
    2. Single Post Page
    3. Submit Post Page

  + AboutCommunity component consists current community data

  + toLocaleString() --> Converts a number that has commas in it 

[ 22/03/2023 08:18PM Day 15 ]

-- 48. Customize Community Image (useSelectFile, admin/moderator permissions)
  + To show the new image without refreshing the page
  + We need to use the state value
  + Because, we need to refresh the page to load a new image from the database

[ 26/03/2023 01:49AM Day 16 ]

-- 49. Voting on Posts (user postVotes collection batched writes)
   +