This project was bootstrapped with Create React App.

Chit Chat

• a Discord Clone

Steps :

• Add Firebase

• Add Firebase Auth

  • createUser with username, email and password
  • sign in user with email ad password
  • Add user Avatar(https://api.adorable.io/avatars/285/${email}.png)
  • Add Redux to save user info to store so to use it anywhere required
    • Add loading Screen when user is found or directing to Homepage

• Discord have five sections

  • 1. Servers section to store all the user joined servers + user created servers

  • 2. User Info Section to describe the user data profile

    • Add change Avatar
    • Show Welcome ${user.displayName}
    • show Avatar
    • Add Sign-out Button

  • 3. Channels section to store all the channels per server

    • @front-end : add a button to add channels and show form instead of extras area.
    • @firebase : Add channel model to database with properties channel name & channel description regitered under logged in User.
    • @front-end :Show all the available channels on the channel area for a given server
    • Add Active/selected Channel to redux so to get all the messages for active channel.

• 4. Mesage Board for specific Channel

  • show Current Active Channel Name inside message Board

  • Show all the Active Channel Messages already stored in db

  • Add new Messages form to add new Messages

    • messages Node Structure
      • id
      • channelId
      • message description
      • createdBy: username, userPhoto URL
      • createdAt: DateTime

  • Add User Info infront of a message

  • All Individual Person messages

  • Add Online and offline User Firebase

• 5. Extras Section to add additional Functionality to the chit chat app

  • Add create Channel Form
  • Add upload File Form and store the image in firebase storage

Thank

• https://ui-avatars.com/api/?font-size=0.5

• https://api.adorable.io/avatars/285/${email}.png

• add attributon to loading.io

• https://loading.io/ -

  Icons made by itim2101 from www.flaticon.com

• https://www.geeksforgeeks.org/firebase-realtime-database-with-operations-in-android-with-examples/

• https://spectrum.chat/react/general/how-to-remount-refresh-a-react-component~7119779f-245f-4c1b-bcdb-a01c00cdb1e6 (Solved: How to remount the component instead of re-rendering if a prop if changed for that component).

• https://stackoverflow.com/questions/37444685/store-files-with-unique-random-names && https://stackoverflow.com/questions/105034/create-guid-uuid-in-javascript (Solved: storage images are saved with file names that are unique for even same images. Issue #5 solved).

• https://medium.com/@allegra9/add-emoji-picker-to-your-react-chat-app-30d8cbe8d9a6

• chat wireframe