waveyboym / chat-app

A real time chat application done with tauri and react with a firebase backend

Chat-App

A real time chat application done with tauri and react with a firebase backend

I am a user/tester

Executables for windows and linux is available here
Executable for MacOS will be coming soon...

I am a developer

1. Setup Tauri on your desktop following the instructions here set up tauri. Only set up Tauri to make sure you fullfil the requirements. Don't create a new project, that is don't go to the page beyond the prerequisites page.
2. Once Tauri has been set up, clone this repo.
3. From your terminal where you cloned this repo, run:

cd "Chat-App/Fiddle Chat App"

4. Run

npm install

5. You will also now have to set up firebase and create a secrets file in the root directory. Have a look at Setting up firebase to set up a firebase project.
6. Once that is completed, you can run:

npm run tauri dev

7. Please note that by default, the application will launch as a frame-less window. If you want to change that, follow the instructions for changing that under Change App window from frame-less to not frame-less

Setting up firebase

1. To set up firebase, navigate to firebase setup and follow the instructions.
2. Once you have created a new project, add your Firebase project configuration into an .env file. The .env file must reside at the root of the application, which is this directory
3. The contents that you must place in the .env file are as follows:

VITE_APIKEY=<Your firebase api key goes here and remove the angle brackets>
VITE_AUTHDOMAIN=<Your firebase auth domain goes here and remove the angle brackets>
VITE_PROJECTID=<Your firebase project id goes here and remove the angle brackets>
VITE_STORAGEBUCKET=<Your firebase storage bucket goes here and remove the angle brackets>
VITE_MESSAGINGSENDERID=<Your firebase messaging sender id goes here and remove the angle brackets>
VITE_APPID=<Your firebase app id goes here and remove the angle brackets>
VITE_MEASUREMENTID=<Your firebase measurement id goes here and remove the angle brackets>
VITE_GOOGLECLIENTID=<Your firebase google client id goes here and remove the angle brackets>
VITE_GITHUBCLIENTID=<This can be left empty as github login does not yet work fully>

4. Now add support for google, github and email and password authentication. According to firebase docs, the instructions for that are as follows:

**Enable Google as a sign-in method in the Firebase console:**
    **In the Firebase console, open the Auth section.**
    **On the Sign in method tab, enable the Google sign-in method and click Save**
The process for adding other sign-in methods is pretty much the same.

5. To set up a database, follow the instructions here: setting up a database
6. create a collections in the database and name it "users" and add a document. It can be empty document; it is more so as a placeholder and you can delete it once your database has been populated with other users.
7. Create a storage for your database. This allows users to store their profile pictures. The instructions for that are here: creating a storage
8. (Optional) You can add rules to restrict access to your database and make it more secure otherwise firebase will continuously send you emails about this. Just know if you don't add rules, anyone can access your database. The rules I used for my database are as follows:

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if request.auth != null && get(/databases/$(database)/documents/users/$(request.auth.uid)).data.AccountActive == true
    }
  }
}

9. more information about rules in your database: https://firebase.google.com/docs/firestore/security/get-started

Change App window between frame-less and not frame-less

1. Open tauri.conf.json and select delete everything in the file.
2. For a frameless window, open tauri-frameless.txt and select, copy and paste everything into tauri.conf.json
3. For a non-frameless window, open tauri-noframe.txt and select, copy and paste everything into tauri.conf.json

Adding more colour themes

1. To add another colour theme, first go to Themes.tsx and go to a line after the last "theme-selector" div and paste the following replacing "light-yellow-col | dark-yellow-col" and "lyellow | dyellow" with the name of your colour and the text in between h3 tags with the name of your colour to display:

<div className="theme-selector">
            <motion.div 
              className={themeCol === "light-yellow-col" ? "colour-circle selected-colour-circle" : "colour-circle"}
              id="light-yellow-col" 
              whileHover={{scale: 1.03}} 
              whileTap={{scale: 0.97}} 
              onClick={() => changeThemeColours("light-yellow-col", "lyellow")}>
            </motion.div>
            <h3>Light yellow theme</h3>
          </div>

2. Go to Settings.scss and at line 448 add the class name of the theme-selector you created and it's corresponding colour, eg #light-yellow-col{background: #f8e962;}
3. Go to _constantMixins.scss
4. If you colour is a dark colour, copy a block that has a colour starting with such as [data-theme='dgreen']. If is light, copy [data-theme='lgreen'].
5. Name [data-theme='dgreen'] with the name of your colour, eg [data-theme='lyellow']. Make sure this matches otherwise the colours won't reflect when you change the theme.
6. Change the three variables,
   --root-dark-side-bar-col,
   --root-top-most-app-draggable-sec and
   --root-lighter-side-bar-col by adjusting their colours in the section of code you just copied over to suit your needs.

Note

This branch is done with tauri. The old version which is done with electron is accessible here: https://github.com/waveyboym/Chat-App/tree/read-only-old-version. The old version will no longer receive updates and/or fixes. I'm just putting it up in case anyone might want to have access to it.

TODO

• Improve load times between opening messages
• Improve user interface for navigating between private messages and room message
• Add support for presence detection(whether or not a user is online)
• Add ability to view all friends in a separate component
• Add stories/most recent updates
• Maybe add more themes

Technologies & Tools used and npm packages

1. Tauri: https://tauri.app/
2. Figma(for designing the UI): https://github.com/figma
3. SCSS: https://github.com/sass/sass
4. Framer Motion(Animations and transitions): https://github.com/framer/motion
5. Material UI: https://github.com/mui/material-ui
6. Emoji-Mart: https://github.com/missive/emoji-mart
7. Firebase: https://github.com/firebase/
8. React-colorful: https://github.com/omgovich/react-colorful
9. React-loader-spinner: https://github.com/mhnpd/react-loader-spinner
10. Use-local-storage: https://github.com/nas5w/use-local-storage
11. Icon pack(Basil Icons): https://www.figma.com/community/file/931906394678748246

Images used in presentation

1. https://unsplash.com/photos/ruJm3dBXCqw
2. https://unsplash.com/photos/PGdW_bHDbpI
3. https://unsplash.com/photos/m_7p45JfXQo
4. https://unsplash.com/photos/nY14Fs8pxT8

chat-app's Issues

Search function not working as expected

When you try to search for a user or a room, the backend returns an empty array as the result which is not correct.
The issue boils down to:

1. The structure of the query for searching is wrong and needs to be redone
2. The issue itself is on the backend database, like firebase and needs to be resolved there instead

The file of interest is: MsgNavBar.tsx

Cancelling auth results in loading screen forever

When a user decides to cancel an auth process, they are greeted with a loading screen that does not go away until the user quits the app.

Steps to reproduce:

1. From the login page, a user may choose to login via google, twitter, facebook or github
2. They don't enter their details but instead choose to cancel the login process.
3. They are met by a loading screen that does not go away until they quit the app

OS/Environment:
Windows 10 22H2

Please add license for the project

Currently there is no license associated with this. Can you please add a license? Thanks

Missing break-line when sending chat messages

When typing a message and one inserts an break-line and the message is sent to another user, the break-line seems to be deleted from the message and does not show in the sent message.

Steps to reproduce:

1. In any chat, type a message and insert a break-line.
2. Send the message and notice how the break-line has disappeared in the sent message.

Online activity

Is your feature request related to a problem? Please describe.
I wish I could see when other my friends are online and I wish they too could see when I was online.

Describe the solution you'd like
When I launch the application, I would like to see an indication that a particular friend is online, maybe text that displays under their name that they are online or a green border around their profile to show that they are online and a grey border if they are offline.

Describe alternatives you've considered
There are no alternatives.

Additional context
I have none

Switching between two rooms does not work

When a user is in one room and tries to switch to another room, they stay in the same room they were previously in. However the room indicator does say they have switched to the other room even though the chat page shows the previous room.

Steps to reproduce:

1. Enter a room by clicking on the rooms name and opening the chat.
2. Try to go to another room by clicking on that rooms name and observe that you never leave the room even though the room indicator says you did leave.

OS/Environment:
Windows 10 22H2

Login page does not load

When the app is launched on windows 11 for the first time and the user is prompted to sign in or sign up, they may choose to sign with google, github, facebook or twitter. If a user clicks on any of them, a loading screen shows with nothing ever happening.

Steps to reproduce:

1. Download the executable here: https://github.com/waveyboym/Chat-App/releases.
2. Install it.
3. Launch it.
4. When the login page shows, click either the google, github, facebook or twitter signup buttons and observe that a loading screen shows up but no prompt to sign-up actually ever shows up.

OS/Environment:
Windows 11 23h2

Notifications, alerts and badges

Is your feature request related to a problem? Please describe.
I am always frustrated by the fact that whenever I want I receive messages from friends or from groups, I don't know that I have received any messages until I open their chat.

Describe the solution you'd like
It would be nice for a notification to be sent out when a new message is received.

Describe alternatives you've considered
There are no alternatives for this

Additional context
A great example is discord, whenever a message comes though, you may see a badge and notification count and a notification sound plays when a message come through.