chinmaykunkikar / firechat

A chat application using Firebase - https://firechat-8080.web.app/

🙏🏼 नमस्कार

I'm Chinmay, a frontend developer, thriving on the joy of creating delightful web experiences.

firechat's Issues

Create a header and a footer

• Header
• Footer

Fix the "You already have Chinmay Kunkikar" in your chats issue

Steps to reproduce:

1. Have multiple accounts with the same name as your user displayName.
2. Search for that name in Search bar.
3. Click on any one of those names.

Hide demo accounts from search results

Add an avatar picker to the app

Note
This will change the registration experience.

• Use the DiceBear library as it's very flexible to use.

• Use Continue with Google over Sign in/ Sign up with Google for button text.

• Also have an option to set a displayName for the user.

• #28

Reference: Build Authentication Using Firebase | React | Express - dev.to

Fix Firebase build and deploy workflows

Write about firebase setup in detail

Explain points like how does the app work and how is firebase setup.
Explain firestore collection and documents.
Explain what happens when a user signs up, logs in, logs in as demo user, searches for user, clicks on searched username (or how is a new chat created in the database), how are avatars generated.

This will solidify my understanding and will be a good technical blog for future references.
Publish it on hashnode and on this repo's wiki.

Create an onboarding page after signing up

Redirect to the avatar picker regardless of which Continue with Google button is clicked. i.e. if we are creating an account, we'll show the avatar picker.

Create a landing page

This page will have the Login component as a part of it.

Reset data of demo accounts after signing out

This is a fairly time taking task. Let's do it later. #3 will suffice for time being.

Show marker for unread chats

Maybe a simple dot will suffice.

Feature: Profile view

Show basic information

• Full name
• Email Id
• Account creation date
• Delete account action
• Reset password action
• Show if account is Demo

Make the entire app responsive

Need to think about chats list and conversation screen on mobile devices. It's fairly intuitive design but I need to think about the implementation.

• Does it need nested routing?
• etcetera.

Disable Search, Message input for demo account

Implement full text search for searching users

It's a shame how firebase still doesn't allow fuzzy search. They have their own reasons, but that shouldn't stop us from implementing an over engineered solution ourselves 😛

Algolia

• Full-Text Search In Firestore With Algolia Firebase Extension
• Full-Text Search In React With Algolia And Firestore

Typesense

• Full-text Search for Firebase with Typesense
• Build React Full-Text Instant Search App with Typesense - Video

Allow users to send friend requests before starting to chat

Something like this - https://www.youtube.com/watch?v=NlXfg5Pxxh8

Optimize long chats with virtualization or infinite scrolling

Either use infinite scrolling, or use virtualization with react-window, or tanstack virtual

More reading -

• Optimizing Lists in React - Solving Performance Problems and Anti-patterns
• List Virtualization - patterns.dev

Encrypt text messages

Show a cleaner timestamp for messages

Reset `ChatMain` when a new user logs in

• Expected behaviour
  When one user logs out and another user logs in in the same session, the chat screen should reset to the empty state message "Click on a chat to start messaging".

• Current behaviour
  When one user logs out and another user logs in in the same session, the last chat of previous user is still visible to the new user.

Add an emoji picker to Message input

Create an attractive readme with screenshots and project setup instructions.

Feature: Delete chat action

Add Sign Up with Google action to the registration page