/bca-project

Chat Application with React JS, Redux and Firebase with Video Call Integration using WebRTC.

Primary LanguageJavaScript

Slack/Discord Application Project

A clone for slack/discord application with following features ✔️

  • 💡 Authentication
  • 💡 Channel Creation
  • 💡 User Panel
  • 💡 Direct Message
  • 💡 Track of Online / Offline users
  • 💡 Meta panel for channel details
  • 💡 Chat area to chat in channels as well as with other users
  • 💡 Avatars / Update avatars
  • 💡 Image uploading in chat
  • 💡 Emojies
  • 💡 Notifications for unseen messages
  • 💡 Top posters of one group
  • 💡 Favorite channels
  • 💡 Embedded Youtube Videos
  • 💡 Search in the chat
  • 💡 Indicators when the other peron is typing.
  • 💡 VideoCall Feature
  • 💡 Gifs Feature
  • 💡 Dark Mode / Light Mode

Upcomming features ✔️

  • Mobile responsive layout
  • Online User's List Icons
  • Add reply message bubble
  • Add Support for uploading other file types
  • Friend and Contact List
  • Join and Leave Channel
  • Add Formik and Yup for Validation in Login and Register.
  • Threads of chats displayed in Sidebar
  • Optional - voice command feature
  • Shared Links of Youtube will play on player.

Issues

  • Add className for Emojis
  • VideoCall feature integration
  • Gifs not working
  • Sidebar issues (need a button to hide and show sidebar)
  • Favourite Channel (Starring Channel) not working
  • User Profile Picture Updation Issues
  • VoiceCall integration
  • Conversion from firebase realtime to firebase firestore
  • Animations
  • time format i.e add exact time
  • Dark Mode
  • Search User Integration
  • Push Notifications
  • Responsive - Much bigger issue
  • Security of Users and Links

How to setup ?

Step 01

npm install

or

yarn install

Step 02

Create an env.local file, add your firebase credentials like this

REACT_APP_apiKey=[API_KEY_HERE]
REACT_APP_authDomain=[AUTH_DOMAIN]
REACT_APP_databaseURL=[DATABASE_URL]
REACT_APP_projectId=[PROJECT_ID]
REACT_APP_storageBucket=[STORAGE_BUCKET_ID]
REACT_APP_messagingSenderId=[MESSAGE_SENDER_ID]
REACT_APP_appId=[APP_ID]
REACT_APP_measurementId=[MEASUREMENT_ID]

📣 NOTE : You have to create your own firebase project in firebase console and you will get the credentials from there.

Step 03

npm start

or

yarn start

Want to contribute?

These are the things you can do in this project

  • ⚡ Refactoring
  • ⚡ Better flow for operations
  • ⚡ Add more features
  • ⚡ Testing
  • ⚡ Documentation
  • ⚡ Issues

⭐ Thank you so much! Don't forget to put a star if you loved this project ⭐