ChatMore: A web chatapp like Whatsapp - Made in Typescript, React and Supabase

Overview

ChatMore

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 !

Documentation

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

Screenshots

Login Page

App Screenshot

Homepage

App Screenshot

Chat Page

App Screenshot

User Settings Page

App Screenshot

Design Conception

App Screenshot

Authors

You might also like...

A whatsapp bot made using adiwajshing/Baileys-md Libary

A whatsapp bot made using adiwajshing/Baileys-md Libary

Apr 18, 2022

This Is a Whatsapp Bot Made By Turbo Do Not Recode

This Is a Whatsapp Bot Made By Turbo Do Not Recode

This Is a Whatsapp Bot Made By Turbo Do Not Recode

Dec 6, 2022

The Remix Stack for deploying to Fly with Supabase, authentication, testing, linting, formatting, etc.

The Remix Stack for deploying to Fly with Supabase, authentication, testing, linting, formatting, etc.

Remix Supa Fly Stack Learn more about Remix Stacks. npx create-remix --template rphlmr/supa-fly-stack What's in the stack Fly app deployment with Doc

Jan 7, 2023

This is a project to make the supabase REST API available from PrismaClient.

This is a project to make the supabase REST API available from PrismaClient.

sb-prisma 🔧 This project is experimental and not yet stable, so please use with caution. We look forward to your contributions. ⚠️ For non-node runti

Jul 6, 2022

⚡️ CRUDify Supabase Tables

⚡️ CRUDify Supabase Tables ⚡️ This is a wrapper around @supabase/supabase-js that generates CRUD actions (like Prisma) to manage tables' data. Quickst

Oct 14, 2022

A modern uptime monitoring tool & status page based on Supabase.

A modern uptime monitoring tool & status page based on Supabase.

StatusBase (Supabase) Uptime monitoring tool & beautiful status pages Powered by Supabase! Free • Open Source • Notification View Demo · Report Bug ·

Dec 3, 2022

In this project, you will learn how to pull datas from supabase to google sheets in a matter of minute

In this project, you will learn how to pull datas from supabase to google sheets in a matter of minute

Supabase-Googlesheet In this repo, you will see how to pull datas from your supabase project using Supabase API to a Google Sheet. No matter how many

Jul 28, 2022

A collection of framework specific Cache utilities for working with Supabase.

supabase-cache-helpers A collection of framework specific Cache utilities for working with Supabase. Supabase Launch Week Hackathon 5 Submission Team

Dec 29, 2022

This terminal application aims to help new developers to quickly create ready to play applications, powered by Supabase.

This terminal application aims to help new developers to quickly create ready to play applications, powered by Supabase.

Welcome to Create Supabase App 👁 ⚡️ 👁 Supabase is an open-source Firebase alternative. This terminal application aims to help new developers quickly

Nov 8, 2022
Releases(V.1.0.0)
Zero Two Bot,A fully Modular Whatsapp Bot to do everything possible in WhatsApp by Team Zero Two

?? ???????? ?????? ???? ?? A Moduler WhatsApp Bot designed for both PM and Groups - To take your boring WhatsApp usage into a whole different level. T

Sam Pandey 69 Dec 25, 2022
Next.js starter with TypeScript, Supabase and TailwindCSS

This project is a Next.js starter with: TypeScript Supabase TailwindCSS It is basically what is presented in the Supabase + Next.js quickstart, just w

Sébastien Castiel 32 Dec 24, 2022
A work-in-progress HTML sanitizer that strives for: performance like window.Sanitizer, readiness like DOMPurify, and ability to run in a WebWorker like neither of those.

Amuchina A work-in-progress HTML sanitizer that strives for: performance like window.Sanitizer, readiness like DOMPurify, and ability to run in a WebW

Fabio Spampinato 9 Sep 17, 2022
Learn how to set up Supabase auth for both the frontend and backend of your application using a JWT - JSON web token.

Supabase auth, frontend + backend - example with Next.js Learn how to set up Supabase auth for both the frontend and backend of your application using

YK 7 Nov 20, 2022
Example project implementing authentication, authorization, and routing with Next.js and Supabase

Magic Link Authentication and Route Controls with Supabase and Next.js To run this project, To get started with this project, first create a new proje

Nader Dabit 134 Dec 11, 2022
tooldb is a (soon) massive collection of frameworks and tools. It's build on Flowbite, Next.js, Tailwind CSS and uses Supabase.

tooldb is a (soon) massive collection of frameworks and tools. It's build on Flowbite, Next.js, Tailwind CSS and uses Supabase.

Julian Yaman 12 Jul 14, 2022
API dot Open Sauced is NestJS and SupaBase powered OAS3 backend designed to remove client complexity and provide a structured graph of all @open-sauced integrations

?? Open Sauced Nest Supabase API ?? The path to your next Open Source contribution ?? Prerequisites In order to run the project we need the following

TED Vortex (Teodor-Eugen Duțulescu) 13 Dec 18, 2022
⚡ A blazing fast, lightweight, and open source comment system for your static website, blogs powered by Supabase

SupaComments ⚡ A blazing fast, lightweight, and open source comment system for your static website, blogs ?? Demo You can visit the Below demo blog po

MC Naveen 112 Dec 27, 2022
The Remix Stack with Clerk authentication, Supabase database, Chakra UI, testing, linting, and more.

Remix Bossa Nova Stack Learn more about Remix Stacks. What's in the stack User management with Clerk Database with Supabase Styling with Chakra UI Dep

Clerk 32 Jan 2, 2023
Our super simple URL shortener. Powered by Deno and Supabase.

Feelantera URL Shortener This is our super simple URL shortener. Powered by Supabase and Deno, and Oak for the http framework. You can deploy this pro

Feelantera 16 Oct 14, 2022