Giter Club home page Giter Club logo

abhijeetbyte / instant-chat-app Goto Github PK

View Code? Open in Web Editor NEW

This project forked from shubh28698/instant-chat-app

0.0 0.0 0.0 1.64 MB

๐Ÿ’ฌ ChatBud is an open-source, bidirectional realtime chat application which can be used in any browser. It can have unlimited numbers of group members. Use it to send messages to your peers! Built with Node.js and Express.js., this app uses sockets to send and receive messages to and from the server.

Home Page: https://try-chatbud.herokuapp.com/

License: Apache License 2.0

JavaScript 97.22% HTML 1.14% CSS 1.64%

instant-chat-app's Introduction

Instant Chat App ๐Ÿ’ฌ

This is a chat application which can be used in any browser. It can have unlimited numbers of group members. Use it to send messages to your peers! Built with Node.js and Express.js. This app uses sockets to send and recieve messages to and from the server.

Now you can try out this app on: https://try-chatbud.herokuapp.com/
Ask your friends to open this link and chat with you! You can also open the link in multiple tabs to try it out.

How to use this? ๐Ÿค”

You can go directly to https://try-chatbud.herokuapp.com/ to try this app out.
If you want to try this app on your local system, follow these steps:

  1. Clone this repository in your local environment by the following command:
    git clone https://github.com/guptasajal411/instant-chat-app.git

  2. Use NPM (Node Package Manager) to install dependencies for this project.
    npm install

  3. Now use Node.js to start the chat application:
    node server.js

  4. Go to localhost:3000 on your browser. Ask your friends to also do the same. If you dont have friends, you can also open the same link in multiple tabs.

  5. Now enter your Nickname in the box and send messages to each other. You can see that your friend's message will be updated in your browser with relevant metadata.

Screenshots ๐Ÿ“ธ

browser android terminal youtube code

Demo ๐Ÿ‘จโ€๐Ÿ’ป

demo.mp4

Find the full demo here: https://youtu.be/vxyrRrdmYCg

Inspiration ๐Ÿ’ก

I wanted to create a privacy centric chat application. As you already know, our chats on most of the applications use our chats to show us personalized ads. So I wanted to create something which doesn't store any data from my users. This application's data should be deleted as the members leave the chat.

How I built it ๐Ÿ› 

This was my first application which I built while learning Back-end development. I used Node.js for its application environment. I used Express.js for the application framework of the application. Express is helpful for synchronizing frontend and backend parts of the web application. Also, I used websocket for emitting and receiving the messages from multiple users.

Challenges I ran into ๐Ÿค’

The biggest challenge was to learn websockets, which is a very large, bidirectional communication protocol. I had to dive deep down in the docs of socket.io. Also, rendering new messages to the interface was a very big challenge.

What I learnt ๐Ÿ“š

I learnt a lot of Backend development and different technologies. I have now learnt Node.js, Express.js and websockets. I can now use these newly learnt technologies to create more amazing and interesting applications.

What's next for Instant Chat Application ๐Ÿ™Œ

Adding support for images is the next step in this application. Also, improving the UI and UX of this application is another thing which I'll be working on.

instant-chat-app's People

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.