Skip to content

๐Ÿ’ฌ Realtime chat app, built with react, typescript, firebase.

Notifications You must be signed in to change notification settings

mirayatech/Chatify

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

๐Ÿ“ฑ Chatify - Chat App

Chatify is a realtime chat app built with Vite, React, TypeScript, Firebase, and other technologies. This chat app is purposefully made for the web, like a web chat app, but it also works on mobile devices.

๐Ÿš€ Features

  • ๐Ÿ— Sign in with Google (authentication)
  • ๐Ÿ‘ค View your own profile, email, name, id, etc.
  • ๐Ÿ—จ Create conversations (1-on-1 or group)
  • ๐Ÿ“ฌ Users can send:
    • ๐Ÿ“ Files
    • ๐Ÿ–ผ Images
    • ๐Ÿ“ Text
  • ๐Ÿ”— Detect links and add an anchor tag to them
  • ๐Ÿ’ฌ Reply to messages, indicating what you're replying to (text, image, file, etc.)
  • ๐Ÿ“ฅ Drag and drop to upload files and images
  • ๐Ÿ”” Get notified of unseen messages
  • ๐Ÿ‘€ See if someone has seen your message (via a small avatar moving down if seen)
  • ๐Ÿ˜‚ Send reactions to messages
  • ๐Ÿ˜Š Send emojis through an emoji picker
  • ๐Ÿ‘ View reactions to each message
  • ๐Ÿ“ธ View sent images and files
  • ๐Ÿ”„ Change group picture and group name
  • ๐ŸŒ“ Toggle between light mode and dark mode
  • ๐Ÿšฎ Remove messages, with a note that says "message removed"
  • ๐Ÿ‘‘ Make someone an admin, kick someone out of the group, and add participants in the current active group again

๐Ÿ› ๏ธ Main Technologies

  • React
  • Firebase
  • TypeScript
  • Styled Components
  • Vite

๐Ÿ“ Process

I started by jotting down in my notebook what features I wanted. I often use WhatsApp Web, so I tried to draw inspiration from that.

I obviously started by setting up Firebase, then continued with authentication. Next, I set up routing, the home page, and the private route for it, then focused on the sidebar, since there's a lot happening there, and finally the chat page and its components.

Then it was the smaller details, like creating a drag and drop for images and files, adding an emoji picker, changing the group name, etc. I didn't have a design idea at first; I just built everything and came up with something later. By design, I mean the colors and the styling.

The most challenging part was figuring out how the data structure should be. One new thing I learned was indexing in Firebase. That was new to me and something I can take with me into the future.

๐Ÿค” How Can It Be Improved?

It would be amazing if users were able to send GIFs and stickers, just like on WhatsApp. Also, being able to send voice messages and videos to each other would greatly improve the project. Adding testing would be beneficial as well, something I definitely plan to do next time.

๐Ÿ› Current Bug

So far, I'm not really sure if there are any bugs. However, there might be some issues on the mobile version. I tested it out on my phone (iPhone 14 Pro Max), and so far it looks good there, but on smaller devices or Android phones, it might look a bit odd. I'm not sure from that side, but there might be some bugs to iron out.

๐ŸŽฅ - Demo Video

video-output-ADC1BDA9-BA71-4694-8961-24F28E2011BE.MP4
video-output-02B16405-6729-45E6-9E56-A1DECCE85D64.MP4

๐Ÿ“ธ - Demo Images

Screenshot 2023-12-28 at 11 45 11

Screenshot 2023-12-28 at 11 45 53

Screenshot 2023-12-28 at 11 48 12

Screenshot 2023-12-28 at 11 48 35

Screenshot 2023-12-28 at 11 52 06

Screenshot 2023-12-28 at 11 52 15

Screenshot 2023-12-28 at 11 53 01

Screenshot 2023-12-28 at 11 53 20

Screenshot 2023-12-28 at 11 54 04