Git Product home page Git Product logo

kushajveersingh / chat_messaging_app Goto Github PK

View Code? Open in Web Editor NEW
0.0 2.0 0.0 3.75 MB

Developed and deployed a full-stack chat application with authentication, Twilio SMS notifications, and a wide array of features, including direct/group chats, emojis, reactions, GIF support, and message editing, using JavaScript, React, Node.js, Express and Stream API.

Home Page: https://kushaj-chat-app.vercel.app/

License: Apache License 2.0

HTML 0.73% CSS 46.01% JavaScript 53.26%
express javascript nodejs react react-context-api render-deployment responsive stream-chat stream-chat-react twilio-api vercel-deployment

chat_messaging_app's Introduction

Real-Time Chat Messaging App

demo

  • Developed and deployed a full-stack chat application with authentication, Twilio SMS notifications, and a wide array of features, including direct/group chats, emojis, reactions, GIF support, and message editing, using JavaScript, React, Node.js, Express and Stream API.
  • Implemented advanced React best practices, custom hooks, and React Context API to create a responsive, and scalable chat interface; and acquired skills to create fully custom chat applications by doing this project.
  • Seamlessly integrated Twilio for real-time SMS notifications for offline users and employed Vercel for deploying the frontend application and Render for deploying the Express server, showcasing proficiency in diverse technology stacks and third-party APIs for a complete, mobile-responsive chat experience.

Table of Contents

Demo Videos

Sign up and Sign in process

Sign up by providing your username, a profile photo, phone number for SMS notifications, and providing a secure password. The password is hashed and then stored in the backend.

Once signed up, you can easily login providing your username and password.

Note:- I am using the free version of Render to deploy the server and due to this reason, sometimes you will get a Connection error. Generally, waiting for some time, or pressing the logout button and signing in should solve this problem.

signup_signin.mp4

Create channels and invite people

Create your own channel and invite people to talk about things you are interested in. You can use emojis, reactions, GIF, edit messages, reply in threads.

create_channel.mp4

Direct messages and search for people/channels

You can also send direct messages to people and search for people.

direct_messages_and_search.mp4

Dependencies

Local Setup

Step 1. Setup Node.js v16.17.1. nvm can be used to quickly setup Node.js (and you can also have multiple versions of Node.js).

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
nvm install 16.17.1

Step 2. Clone the repository and install all the dependencies.

git clone https://github.com/KushajveerSingh/chat_messaging_app
cd chat_messaging_app

cd client
npm install --legacy-peer-deps
cd ..

cd server
npm install --legacy-peer-deps
cd ..

--legacy-peer-deps would install the exact packages as used in the repository. The repository already includes VSCode and Prettier setup, and you can modify the default behavior in .vscode/settings.json and .prettierrc respectively.

Step 3. In the client folder, create .env.local and copy the contents from .env.example to .env.local.

  • REACT_APP_STREAM_KEY - Goto https://getstream.io/ and create an account. And then follow the instructions to setup your first app. After creating the app, you can copy the stream key here.
  • REACT_APP_SERVER_URL - Goto https://render.com/ and create an account. After that you can deploy the app in the server folder, and then copy the link of the server here.

Step 4. In the server folder, create .env.local and copy the contents from .env.example to .env.local.

  • STREAM_API_KEY, STREAM_API_SECRET,STREAM_APP_ID - This information is available in the stream app you created.
  • TWILIO_ACCOUNT_SID, TWILIO_AUTH_TOKEN, TWILIO_MESSAGING_SERVICE_SID - Goto https://www.twilio.com/ and create an account and follow the instructions to generate the tokens.

Step 5. In the client folder, run npm run dev to start the local development server at localhost:3000. Now you can customize the application as per your needs.

Step 6. In the server folder, run npm run dev to start the backend server.

Step 7. After making the desired changes you can push the code to GitHub and connect the repostiory on Vercel (for deploying the client side app) and Render (for deploying the backend server).

License

This application has Apache License Version 2.0, as found in the LICENSE file.

chat_messaging_app's People

Contributors

kushajveersingh avatar

Watchers

 avatar  avatar

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.