/Chat-Room

Created chatroom using React.js and chatengine.io.

Primary LanguageJavaScript

ChatBook📱📕

Steps:

1.Initial steps

- Installing essential libraries such as firebase,react-router-dom,react-chat-engine.
- created basic login page with google signup

2.Setting up firebase authentication

- create new project.
- Add app for web.
- copy the firebase template for npm(i.e fireabase.js) and paste it into your src/firebase.js file.
- export const auth variable so that can be imported in other components which basically has getAuth(app) method it returns authentication instance w.r.t ur app.
- Export const signin function which contains method signInWithPop to which provided details like auth and provider(instance for GoogleAuthProvider) and this can be used in login.js file or can be fired when user clicks on google button .

3.Create context api

- created contexts folder in which authcontext.js file.
- created context hook and api,usestate to store users data and loading usestate.
- And in useeffect added dependency array [user] and have method onAuthStateChanged contains callback function which will call setuser,setloading function and if user is valid then navigate to ("/chats")
- This context hook can be imported in App.js and will be wrapped up between Router

4.Setting up chatengine

- create account on chatengine.io and create one project which contains project_id,key.
- fetch it's api using axios.get if users exist or else axios.post if its not with having header values,data(user.email,user.uid) in chats.js.

5.Deploy it's build in netlify

- link:- chatbook