Giter VIP home page Giter VIP logo

socketchat's Introduction

socketchat

A chat application built in MERN stack with socket.io! live demo here

SocketChat.xyz allows users to create accounts, manage profiles, and send live chat messages to multiple public chat rooms or to other individual users privately. This app is built with mongodb, node/express, react, socketio. It uses a bcrypt and json web token based authentication flow and a state management flow based on react's context and hooks.

This project was inspired by challenges I ran into while building http://mernsocialmedia.xyz, particularly with integrating socketio chat features and storing/serving images. This project allowed me to build fluency in those areas and explore react's context.

The main challenges I ran into with this project ended up being:

  1. Implementing an auto-scroll effect when new messages come in, getting the flow of events in the right order to make this happen was a bit tricky
  2. Implementing react-spring animations that play nicely with the timing of the other animation effects (mainly the auto-scroll)

To run on your machine:

  1. clone or download and unzip
  2. open terminal from the root folder of the project and run npm i then cd client then npm i again and then cd ..
  3. start the project with npm run dev or, alternatively, first start the backend server with npm start and then open a second terminal and run cd client followed by npm start
  4. project front-end should be running at http://localhost:3000 and back-end running at http://localhost:8000
  5. socketio chat connection string in client/src/components/chat/chatcontainer must be changed to the url that backend is running on, it is currently set to `?token=${token}` for production so it needs to be set to `http://localhost:8000?token=${token}` for use in a local environment

socketchat's People

Contributors

thomasfoydel avatar

Stargazers

Okoro John avatar Varun Kumar N.R avatar Kevin Uriel Fonseca avatar  avatar Nishant Rana avatar  avatar  avatar Darlo Miguel Ilagan avatar Milad avatar Srinivas Shashank Mulugu avatar Rodrigo Martinez Medina (Rod) avatar

Watchers

 avatar  avatar

socketchat's Issues

Change in README.md file

Hey Thomas! An awesome project indeed.

You might want to check point no. 5 in the .md file.

socketio chat connection string in client/src/components/chat/chatcontainer must be changed to the url that backend is running on, it is currently set to ?token=${token} for production so it needs to be set to http://localhost:8000?token=${token} for use in a local environment

Instead of 'client/src/components/chatcontainer' it should be 'client/src/pages/chat/Chat'

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.