This project is a chatapp made in React. On the main page we can authenticate, and then add todos to the our list. The ultimate goal of this project was to discover Typescript and use Redux. Also use and discover Supabase, as an online database to manage users and authentication.

This whole application took time, it was a thorough experience for me as I did the design before doing everything.

You can find more images in the screenshots section !


On this chatapp the user can do almost anything that we normaly do in a chatapp like WhatsApp.

  • The user can authenticate himself using an email and a password
  • The user can register with a username, email and password
  • The user can add another user to chat with by adding his username
  • The user can modify his settings
  • The user can modify his profile picture
  • The user can modify his bio, username, and phone number
  • The user can send messages to another user
  • The user can delete messages except images
  • The user can send an image
  • The user can get notifications when receiving messages
  • The user can see if his messages has been seen or not
  • The user can send emojis
  • The user can see another user’s profile
  • The user can logout

Future Optimizations

The user will be able :

  • to send a voice message
  • to send multiple files or videos
  • to search for other users and messages
  • turn on or off notifications
  • change the theme
  • change the chat’s background image
  • implement infinite scroll / lazy loading on messages


Login Page

App Screenshot


App Screenshot

Chat Page

App Screenshot

User Settings Page

App Screenshot

Design Conception

App Screenshot