text.txt

1 npx create-react-app <app name>

2. npm i react-router-dom 

3. for tailwind 
                npm install -D tailwindcss postcss autoprefixer
                npx tailwindcss init -p
                in tailwind.config.js==============
                 content: [
                     "./src/**/*.{js,jsx,ts,tsx}",
                 ],
                in top of index.css==============
                @tailwind base;
                @tailwind components;
                @tailwind utilities;
4. for install daisyui
                npm i daisyui

                in tailwind.config.js

                module.exports = {
                   //...
                 plugins: [require("daisyui")],
                }
5. for install swiper ============= 
                npm install swiper
6. for install date picker 
               npm install react-day-picker date-fns
               go to search ===https://react-day-picker.js.org/
               

7. install react form 
            npm install react-hook-form
            https://react-hook-form.com/get-started
8. for Use firebase go to sie 
          https://console.firebase.google.com/u/0/project/
          create a new project
          the create web app </> click this icon

          then npm install firebase

          then create a Folder in src folder name it firebase . inside firebase folder create a file firebase.config.js in your project 
9. after complete sign up and log in use Auth context 
         create context folder inside src folder 
         then create file AuthProvider.js
         then above the file create a context
         then 
10. install toastify 
        first 
         npm install --save react-toastify
         then in App.js use 
               <ToastContainer position='top-center' />
         and import it
         then 
         toast.success(`User add successfuly`, { autoClose: 2000 })
         then import it 
         import { toast } from 'react-toastify';

        or use this line whenever if you need the toast in the component


10. how to insert a c group of data manually in mongodb
        1. https://cloud.mongodb.com/v2/635e4b8089935215210d7d89#clusters
        2. go to Database then Browse Collection
        3. then click create Database
        4. to go insert a group of json data 1. remove _id
        5. then Click Insert Document option in mongodb
        6. then in popup remove  the _id
        7. then click {} paste the json and click insert button
11. how to connect online mongodb
        1. click https://cloud.mongodb.com/v2/635e4b8089935215210d7d89#clusters
        2. then Click Database
        3. then  Connect then click connect your application
        3 
12. the topic intersting React Query
    few years ago the topic was React Query Now topic is TanStack Query
        1. https://tanstack.com/query/v4/docs/overview
        2. Instal the query 
           npm i @tanstack/react-query
        3. use of React Query
            1. React Query is actually for data Fatching  fetching, caching, synchronizing and updating server state 
            2. to use in INDEX.JS first only use index.js import 
                          import {
              useQuery,
              useMutation,
              useQueryClient,
              QueryClient,
              QueryClientProvider,
            } from '@tanstack/react-query'
         3. in index.js  
                      <QueryClientProvider client={QueryClient}>
              <AuthProvider>
                <App />
              </AuthProvider>
            </QueryClientProvider>
         4. then je component e amra Query use korbo
            se component 
            const {} = useQuery({  //useQuery 2ta parameter nibe 
              queryKey : [''] ei parameter e search query or parameter thake thahole dibo comma use kore
              querFn : () => {
                eti function ne
              }
            })

13. React Query er magic holo 
       same computer e 2ta browser e 2ta account khula thakle 1ta change korle r ekta te change hoye jay 

14. we added sidebar and navbar simultaniously
    sidebar and navbar from daisyui
    go to daisyui search drawer then copy the code from Drawer for mobile + fixed sidebar for desktop

15. show table deshboard 
      go to daisyUi table 
       then copy  Table with a row that highlights on hover this code
16. for create jwt in signIN , signUp , and socail Login use Custom hook

17. ekhane useAdmin database theke kono user admin kina check kore true false return kora
    AdminRoutes Alluser component k  protect korche . ei khan thke useAdmin hook e email jacche return korche boolean 
    and 
    DeshBoard Layout e oi admin hole dekhabe admin na hole dekhabe nas

18. Add a Doctor react form use kore form create korlam and image hosing imgbb
     then Three places to store images
       1. image hosting server
       2. File system of your server
       3. mongodb(database)
    then imgbb te host korlam 
     1. imgbb.com 2. then sign in 3. About option
     4. then api option
     5. copy the api 
     6. oi key ta .env.local file e REACT_APP_imgbb_key = name e save korte hbe
     7. https://api.imgbb.com/1/upload ei url e image patate hbe
     8. 
19. ekta component theke r ekta component er modal open 
     model ki open korbo naki korbo na eijonno state lagbe
     1. first je component e click kora hbe oikhane state declare korte hbe
     2. then r ekta component e thakbe sudhu modal 
     3. then jkhon click kora hbe thokon state e rakha hbe
     4.
20. jodi amra protected route data undifine pay
     1. thole chorme e network tab jete hbe
     2. jodi onek gula dekha jay thahole filter korte hbe
     3. filter korar por 
     4. oita te click korle Header , preview , dekha jabe


21. to use stripe payment gateway
    1. first sign up stripe website 
    2. search stripe js react
    3. then search stripe js react :github
    4. create Payment folder
    5. then create CheckoutForm js and Payment.js file
    6. i have followed the link https://github.com/stripe/react-stripe-js/blob/master/examples/hooks/0-Card-Minimal.js
    7. Note : Stripe devloper er jonno onek friendly
    8. ora visa card diye dice
    9. go to documentation .. https://stripe.com/docs/testing
    10. go to card copy the card number try the test visa card

             //follow this
    11. first install npm install --save @stripe/react-stripe-js @stripe/stripe-js
    12. card loadStripe https://github.com/stripe/react-stripe-js/blob/master/examples/hooks/0-Card-Minimal.js
    // loadStripe er moddhe pk dite hbe
    //documentation follow https://stripe.com/docs/stripe-js/
     
    13. card element  
    14. card form
    15. stripe , elements
    16. check card error and display error
22. for confirm Card Payment go to visit 
      https://stripe.com/docs/js/payment_intents/confirm_card_payment

       ei method ta 2t parameter nibe ekta holo
       client secret ja server side theke pawa gech
       const { paymentIntent, error: confirmError } = await stripe.confirmCardPayment(
            clientSecret,
            {
                payment_method: {
                    card: card,
                    billing_details: {
                        name: patient,
                        email: email
                    },
                },
            },
        );
23. React hook use kora holo 
    Navigation() ei hook ti 
     const navigation = useNavigation();
     navigation er moddhe state pacchi
    if (navigation.state === 'loading') {
        <Loading></Loading>
    }
24. How to deploy client cide application to firebase
    1. first select http://localhost:3000/
    2. then control + shift + f click kore server er link replace korte hbe
    3. then firebase init korte hbe
    4.  y 
    5. then Configure file for firebase hosting
    6. then Use an existing project
    7. then select your app
    8. build  ==== likhe dite hbe
    9. y 
    10. No
    11. npm run build
    12. firebase deploy
    13. see the website
    14 . do you want to update 
         1. npm run build
         2. firebase deploy

{"question":"How does prototypical inheritance work?","answer":"SQL is the programming language used to interface with relational databases. (Relational databases model data as records in rows and tables with logical links between them). NoSQL is a class of DBMs that are non-relational and generally do not use SQL.","img":"https://lh3.googleusercontent.com/a/ALm5wu0gKSbj-vrE-htx83t_56TBALi1t7_JwwWnxFh1gA=s96-c","name":"Arif"}