Git Product home page Git Product logo

chat-nearby-project's Introduction

Chat-nearby

The idea with this React application is to use socket.io to create a real time chat application with a catch: you connect with a stranger that is within a certain radius of you. At the moment, it is set by default to 15m, but the idea is that when there is enough user the radius can be expanded. This app is partly inspired from the (in)famous chatting website Omegle where you anonymously connect with someone from anywhere in the world. I originally wanted to make this project for Reveal 2022 competition but I couldn't meet the deadline. So, anyway, about technologies:


Watch the demo video

Demo video

Front-end

  • Framework: React
  • Styling: CSS & Material UI
  • State Management: Zustand
  • Routing: React router DOM library

Backend:

  • Node JS
  • Socket IO (Websocket library)
  • MongoDB

How it works?

As user enter the webpage, a socket connection is created and the socket ID is stored in the database. When user enters chat, the webpage will ask for location data permission. The app only tracks the latitude and longitude of the user from location and sends it to backend where the user is then either kept waiting if there is no other available user nearby (within set radius) or connected to another waiting socket within set radius distance. Upon disconnecting the user socket ID and location data is removed from database.

It is probably not the best implementation of this idea, but I guess it works for an idea I had on an extremely boring tram ride home from work which I've managed to put together in about a week using a library I've never used before. Props to the amazing documentation of socket.io and Zustand.


Improvement:

In no particular order:

  • TypeScript :)
  • Testing (Update: in the React Native Version, yes!)
  • Formatting code
  • CI/CD
  • React Native version? :D (Update: Coming soon ...)
  • User database and authentication

Live deployment:

Since it is hosted on free tier of Heroku, it will take longer to spin up so be patient and be sure to open it on multiple tabs or devices to test the chat functionality.

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.