Movatterモバイル変換


[0]ホーム

URL:


Skip to content

Navigation Menu

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up

Full Stack Chat Application with Real-time notifications

NotificationsYou must be signed in to change notification settings

hulyak/chat-room

Repository files navigation

Features:

  • Sign in with Facebook and Google
  • Link your social media accounts and create one account
  • users can upload/edit images to their profile
  • cache user avatar images for 3 days
  • user can edit their nickname through the use of reusable and editable input component
  • users nickname updates concurrently inside firebase storage
  • Create a new chat room
  • Like messages
  • user online / offline status
  • see messages
  • send a new message
  • send files to chat rooms
  • send audio files and play audio files
  • see room information
  • role-based permissions, admin can edit room information
  • broadcast message to send notification to other members
  • notifications for subscribing or unsubscribing from notifications
  • only the admin user of the room can edit the room information and the admin can grant permission to another user
  • chats are grouped by dates
  • pagination and scroll to bottom of the page when the user types a new message

Technologies

  • REACT SUITE UI LIBRARY and SASS
  • React Context API withuseContext hook to get the username for signin and registration
  • Firebase Realtime database to store profiles, rooms, status of the user(online/offline) and messages
  • Firebase Authentication with Facebook and Google
  • Firebase Storage to store profile avatar image, chat images and audio
  • useRef hook to access Canvas element for avatar image
  • Firebase Cloud Functions to add realtime data and send notifications to the user
  • FCM cloud functions Send messages to multiple devices
  • Service Worker to get a background notification, even if the app is offline, user can get notifications.
  • use-context-selector hook
  • Build presence inCLoud Firestore
  • useHover hook
  • User avatar made withReact avatar editor
  • react-mic for recording audio from a user's microphone

Installation

# applicationyarn installyarn start# runs on http://localhost:3000/# backendcd functionsnpm installnpm start# runs on http://localhost:4000/

firebase

The App is developed using Node v10.

Run frontend locally

  1. Insidesrc/misc/firebase.js replace config with your firebase project config.
  2. Get FCM vapid key for real-time notificaitons fromFirebase dashboard > Cog icon > Project Settings > Cloud Messaging > Web push certificates > Key pair and put it asfcmVapidKey insidesrc/misc/firebase.js.
  3. Runnpm run start and develop

Run functions locally

  1. Download a service account fromFirebase dashboard > Cog icon > Project Settings > Service accounts > Generate new private key.
  2. Put the file asfunctions/service-account.json
  3. Runnpm run start from functions

Deployment

  1. Install firebase-cli by runningnpm install -g firebase-tools
  2. Runfirebase deploy

[8]ページ先頭

©2009-2025 Movatter.jp