Skip to content

๐Ÿ“ฌ Realtime chat app with rich media support, built with React and Node.js.

License

Notifications You must be signed in to change notification settings

fraineralex/chatify

Folders and files

NameName
Last commit message
Last commit date

Latest commit

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

Repository files navigation

๐Ÿ“ฌ Chatify ยท EC2 Deployment Pipeline GitHub license PRs Welcome Website

A realtime chat app built with TypeScript, React, Node.js, and AWS. It allows users to log in easily using OAuth 2.0 (Google, GitHub, email/password). Users can connect with others and send text messages, emojis, stickers, media, files, and more. The chat offers many features found in popular messaging apps like WhatsApp.

Open graph image of Chatify

๐Ÿ“ฆ Technologies

Main Technologies

All Technologies โšก

  • Fronted: TypeScript ยท React ยท Vite ยท TailwindCSS ยท Zustand ยท Auth0
  • Backend: TypeScript ยท Node.js ยท Express ยท Turso ยท Socket.io ยท REST ยท JWT Auth
  • Infra: AWS: EC2 - S3 - CloudFront ยท Cloudflare Pages ยท PNPM Workspaces ยท PM2 ยท GitHub Actions
  • Linting and Formatting: StandarJS ยท EsLint ยท Prettier

๐Ÿš€ Features

  • ๐Ÿ” Sign in/Sign up with Google, GitHub, or email/password

  • ๐Ÿ’ฌ Initiate personalized chats with other users.

  • ๐Ÿ“ฉ Messaging Options:

    • ๐Ÿ—ƒ๏ธ Share any file type.
    • ๐Ÿ“ท Exchange images.
    • โœ๏ธ Send and receive text messages.
    • ๐ŸŽฅ Share videos.
    • ๐Ÿ˜ Express with fun stickers.
    • ๐ŸŽž๏ธ Share animated GIFs.
    • ๐Ÿ˜€ Add emojis to convey emotions.
  • ๐ŸŒ Automatically identify links and provide clickable anchor tags.

  • ๐Ÿ”„ Respond to messages to maintain clear and contextual conversations.

  • ๐Ÿ”ฎ Stay updated with notifications for unseen messages.

  • ๐Ÿง Track message read status for improved communication clarity.

  • ๐Ÿ˜„ React to messages with emojis to express feelings and responses.

  • ๐Ÿ˜Š Access a wide array of emojis through an intuitive emoji picker.

  • ๐ŸŽˆ Send stickers using an intuitive sticker picker powered by Tenor.

  • ๐Ÿ“ท Preview sent images and files directly within the chat interface.

  • ๐Ÿ“ฌ Message Management:

    • ๐Ÿ—‘๏ธ Delete messages with a note indicating removal.
    • ๐Ÿ”Ž Filter chats and messages efficiently using the search bar.
    • ๐Ÿงฎ Sort messages by file type, media, and more.
  • ๐Ÿ”ฅ Chat Actions:

    • ๐Ÿ“Œ Pin/Unpin
    • ๐Ÿ‘€ Hide/Unhide
    • ๐Ÿ”• Mute/Unmute
    • ๐Ÿ”ต Mark Read/Unread
    • ๐Ÿ” Block/Unblock
    • ๐Ÿงผ Clear
    • โŒ Delete

๐ŸšฆRunning the Project

To run the project in your local environment, follow these steps:

  1. Clone the repository to your local machine.
  2. Rename the files: client/.env.example to .env.local and /server/.env.example to .env.local.
  3. Fill in the values of the environment variables in the newly created .env.local files with your own data.
  4. Ensure you have Node.js and pnpm installed on your machine.
  5. Navigate to the root directory of the project and install dependencies by running pnpm install.
  6. Once the dependencies are installed, start the project by running pnpm run start.
  7. You can access the app at: http://localhost:5173.

That's it! Your project should now be up and running locally.

๐ŸŒŸ Contributions

Thank you for exploring this project! If you find the structure or features useful, feel free to use this code for your project. Contributions are welcome! If you have ideas, corrections, or improvements, please open an issue or send a pull request. Your collaboration is valued and appreciated! ๐Ÿš€

Chatify is MIT licensed. โค๏ธ

๐Ÿฟ Video

Chatify720.mp4

About

๐Ÿ“ฌ Realtime chat app with rich media support, built with React and Node.js.

Topics

Resources

License

Stars

Watchers

Forks

Languages