Free API Chat App Part-1

SHASHANK SHUKLASHASHANK SHUKLA
2 min read
  1. Start With the Setup done by Hitesh sir in the given YouTube video.

    1. First, create a .env file copy paste all the code of the .env.sample file, and then change MONGODB_URI=`${Your Database connection URI}`

    2. Then do npm i in the root folder and then npm start to run backend on port 8080 if use face any port already in use issue then change the port number in the .env file

  2. After successfully running the backend navigate to examples\apps\chat-app\web\react-vite-tailwind, create a .env file, and copy and paste the .env.sample file code in .env if you changed the backend port in your .env then give the same port here hit npm i in a given route.

  3. npm run dev start application on the local server

  4. main.jsx file provides all overviews that we require to do some authentications and socket io context provider.

  5. Auth context handles the authentication of users in a very easy and structured way.

    1. Here we can see created AuthContext using createContext and define the types and default values of AuthContext

    2. This context is saved in a hook useAuth()

    3. The auth provider function is going to handle Login, Register, Logout

    4. There is also the use of local storage in a very nice way to save user id and token value.

    5. AuthProvider will return user and token values and login, register, and logout functions.

Wait I will discuss about working of other components and code structure.

0
Subscribe to my newsletter

Read articles from SHASHANK SHUKLA directly inside your inbox. Subscribe to the newsletter, and don't miss out.

Written by

SHASHANK SHUKLA
SHASHANK SHUKLA