Norp Chat App

Project Description

This project is a small Real Time Chat Application built using React as a Frontend to a server Backend found at this Github repository

It is a Mobile Only View application built to demonstrate my knowledge and understanding of Web Sockets and the use of the Socket.io and Socket.io Client Libraries.

It allows any user to freely enter a chat name, select a chat group and start chatting freely with other users in the same chat group. The user can also view other users online and privately chat with them. The user also gets notified if they receive a message from a group or user they are not currently chatting with.

Future Additional Features:

• Ability to create custom groups and add other users to it.
• Ability to search for users or groups available.
• An authentication system.
• Validation and display of error messages.

⛔ UNFORTUNATELY:

Unfortunately, the backend service project built to serve this frontend project was hosted on the Heroku free service plan which nolonger exists, therefore the Norp Chat App Server is currently unavailable and this frontend project is currently inoperable. But other hosting services are being looked into and one will be provided as soon as possible.

Screenshots

🔧 Built with

• ReactJS
• Node Package Manager(NPM)
• Socket.io Client
• React Bootstrap
• Norp Chat App Server

🔴 Live Demo

• Norp Chat App

Get started on local machine

Prerequisites

1. NPM(Node Package Manager) or Yarn

2. Node

3. Norp-Chat-App-Server (The backend Project)

Steps to follow

1. Clone the repository to your local machine by running git clone git@github.com:RNtaate/norp-chat-app.git in your terminal

2. On your local machine, navigate to the project folder using cd norp-chat-app in your terminal

3. Run npm install or yarn to install all the necessary dependencies.

4. Open the project in your favorite code editor such as Visual Studio Code

5. Locate the HelperMethods.js file in the src folder and change the value of SOCKETLINK to "http://localhost:3001" (Make sure the port number is the same as the one on which the backend is running on on your local machine)

6. Clone the Norp Chat App Server project to your local machine, locate the app.js file and change the value of origin in the cors object to '*' (don't forget to include the quotes)

7. Run npm run build or yarn run build

8. Install the dependencies in the chat app server project and start it up using npm start or yarn start

9. Run npm run start or yarn start to start the application on a local server

🤝 Contributions

There are two ways of contributing to this project:

1. If you see something wrong or not working, please check the issue tracker section, if that problem you met is not in already opened issues then open the issue by clicking on new issue button.

2. If you have a solution to that, and you are willing to work on it, follow the below steps to contribute:

   1. Fork this repository

   2. Clone it on your local computer by running git clone git@github.com:RNtaate/norp-chat-app.git Replace RNtaate with the username you use on github

   3. Open the cloned repository which appears as a folder on your local computer with your favorite code editor

   4. Create a separate branch off the master branch or main branch,

   5. Write your codes which fix the issue you found

   6. Commit and push the branch you created

   7. Raise a pull request, comparing your new created branch with our default branch here

✒️ Authors

👤 Roy Ntaate

• Github: @RNtaate
• Twitter: @RNtaate
• Linkedin: roy-ntaate

Show your support

Give a ⭐️ if you like this project!

Acknowledgements

• Socket.io
• GeeksForGeeks - Node Projects
• Pedro Tech