In A Nutshell - Messenger App

This project is my realization of the final project of TOP's React section in the Rails path.

For deployment Koyeb was used, the PostgreSQL database is run via Neon and an Redis via Upstash.

---

Try the app yourself: --> Visit deployed app

You can sign up/log in using the below credentials:

testuser@mail.com
  
password1!

Connect with me using this token:

  9b43a805c1d55d0a1a2e

---

Features

• Log in / out / Account deletion

  • Authentication with Devise gem

• Home / Chats

  • Overview of all chats with the current user's contacts, sorted by most recent activity
  • The individual chats can be accessed by clicking on them.

• Contacts

  • Users can view the profiles of others and connect with them by entering the Connect Token (which other users shared with them and can be found under 'My Profile').
  • Upon connecting with another user, a chat is created that can be accessed under 'Chats'.

• My Profile

  • By default, the email address will be the profile name.
  • The profile can be customized (profile picture, name and info)
  • On this page, users can delete their profile.

• Chat

  • On larger devices (e.g., desktop) in addition to the messages and text editor a contact list is displayed.
  • Users can send rich text messages which allows them to send images as well.
  • The chat provides real-time functionality via websockets for receiving messages.

• Miscellaneous

  • Image upload is realized via Active storage using Amazon S3 for cloud storage.
  • Sending rich text messages is enabled via ActionText and the Trix Editor.
  • The core features are covered with system tests using RSpec, Capybara and FactoryBots.

Models and Associations

Screenshots

• Login:

• Home / Chats:

  

• Chat:

  

• Contacts:

  

• Profile page - displaying the profile:

  

• Profile page - customizing the profile:

  

• Demo Video:

In.A.Nutshell.-.Demo.mp4

Image Sources

• Default profile piczutr from Vecteezy (https://www.vecteezy.com/vector-art/2534006-social-media-chatting-online-blank-profile-picture-head-and-body-icon-people-standing-icon-grey-background )
• Send icon from seekicon (https://seekicon.com/free-icon/send_12)
• Logout icon from SVG REPO (https://www.svgrepo.com/svg/67681/logout)