Live Chat Playground

A simple live chatting application built for testers to practice and learn web automation testing.

Don't forget to give a ⭐ to make the project popular

Tech Stack

This is a Next.js project bootstrapped with create-next-app.

Getting Started

Installation using NPM

1. Clone the repo
2. Navigate into the root folder
3. Run npm install
4. Run npm run dev
5. Open any browser and navigate to http://localhost:3000 to start using the live chat playground

Installation Using Dockerfile

1. Clone the repo
2. Navigate into the root folder
3. Run the command docker build -t live-chat-playground . to build the app using DockerFile
4. Start the application by running the command docker run -it -p 3000:3000 -p 3001:3001 live-chat-playground
5. Open any browser and navigate to http://localhost:3000 to start using the live chat playground

Using Docker Compose

1. Clone the repo
2. Navigate to the root folder of the project
3. Run docker compose -f docker-compose-chat-playground.yml up -d - This command will start the application in detached mode
4. Open any browser and navigate to http://localhost:3000 to start using the live chat playground
5. Run docker compose -f docker-compose-chat-playground.yml down to stop the application

How to use the application

1. Open any browser and navigate to http://localhost:3000 to start using live chat app playground

   • Enter the following mandatory details on the screen to start chatting:
     • Name
     • Location
     • Age
     • Select Chat Room
     • Select Gender
     • Tick the Agree to Terms and condition
     • Click on the Start Chatting button to start the chat

2. Open a new browser on the same machine or Another Tab of same browser and navigate to http://localhost:3000

   • Enter the mandatory details on the screen to start chatting

3. To join within same network: Open a browser and enter the IP address of the network with port- 3000

   • Enter the following mandatory details on the screen to start chatting

4. Once the login is successful, on the next screen you should be able to see the live users list with their Name, Age and Gender

5. The "Enter Message" textbox could be used to type a message and "Send" button can be used to send the message.

6. The "Live Chat" window will show the following details to the user:

   • User information of joining, leaving the chat
   • Sent and Received Messages
   • Logout button to exit the Live Chat

❓ Need Assistance?

• Discuss your queries by writing to me @ [email protected] OR ping me on any of the social media sites using the below link:
  • Linktree