making-totel-chat.md

making totel chat app

Post man requests

• Creating locations with api:

• Creating types api works like that:

Using twilio in totel

Creating a Verify service i.e., OTP verification: (via sms/whatsapp/email/etc

• Now you may pin the product for faster access when you need it later:

• You can check the logs of otps send on your account by navigating to this:

• You can check usage summary of twilio products via:

• I WAS GETTING ERROR code 20003 probably bcoz my account is suspended. Source: Error 20003

• Firebase also have signup with phone number as well (Good Guide): https://firebase.google.com/docs/auth/web/phone-auth?authuser=0&hl=en

new life

• chat app with firebase: https://youtu.be/zQyrwxMPm88
• logrocket article 2022: https://blog.logrocket.com/how-to-build-chatroom-app-react-firebase/
• fixed firebase db error for temp from this: https://stackoverflow.com/a/54444948/10012446
• login with facebbok-firebase-docs: https://firebase.google.com/docs/auth/web/facebook-login#web-version-9_5
• creating app_id and app_secret: https://support.appmachine.com/support/solutions/articles/80000978442
• help_video In facebook setting up login_with you may set site: https://for-next-auth-example-project.firebaseapp.com and for Valid OAuth Redirect URIs you need to set it to https://for-next-auth-example-project.firebaseapp.com/__/auth/handler as suggested when you turn on the fb login from firebase console.
• Firebase Local Emulator Suite: Docs - Basic info, Implementation: Get Started
• Firebase emulator suite: The Local Firebase Emulator UI in 15 minutes - Official Googe's Channle: The Local Firebase Emulator UI in 15 minutes: https://youtu.be/pkgvFNPdiEs
• Deployed my learn-firebase on gihtub
• Cloud Firestore Data Model

# installed firebase cli
npm install -g firebase-tools
# login
firebase login
# list firebase projects
firebase projects:list
# COMPLETE CLI REFERECNE: https://firebase.google.com/docs/cli#sign-in-test-cli

npm install firebase react-firebase-hooks

For firestore db I used this version:

We are using this to provide internalization to the nextjs app

previous life

• Use socket.io with nestjs: Youtube Video
• Nestjs docs: Gateways and Official example on Github
• Socket.io: https://socket.io/docs/v4/

Amazing referece article (has code): https://gabrieltanner.org/blog/nestjs-realtime-chat/

NESTJS DOCS - FIXING error "Hydration failed because the initial UI does not match what was rendered on the server."

• React hydration Errror in Nextjs Docs
• Lovely article: here from above nextjs docs page and I fixed the isseu using <ClinetOnly> component for the issue.
• A Stackoverflow question related to this
• Medium article on making realtime chat app with nextjs only - Click here. BTW: Theo uses pusher for the RTC communication: check here
• Implementing socket.io+nextjs+heroku: 45 Upvotes Stackoverflow answer
• WE are using https://cloudinary.com/ for api for compressing and managing images and videos, check in file: src/pages/api/upload.js.

project understanding

Thats how project auth is organized:

Other

• Backup of socket.io implementation in nextjs: https://gist.github.com/sahilrajput03/4183cdf2c49bccaa80614bed1c0fd77d

This is what i need to do to fix the auth via vanillay hooks later on

Source: css-tricks article on making chat room with firebase and react