Skip to content

raulwwq0/NuChat

Repository files navigation

NuChat

NuChat is an instant messaging app (similar to WhatsApp) built with Nuxt 3 and Supabase.

You can find a further explanation of every part of the project in the following links:


Installation

This project uses Turborepo, so to install all dependencies from every part of the project you just need to run the following command:

npm install # or "npm i"

After that, you just need to run the next command to start the whole app:

npm run dev

Note: Since Turborepo works with npm monorepos, running the previous commands in the project root will execute the exact same command in each folders inside apps directory (sub-project). You can also run the command you want inside each sub-project to avoid executing them globally.

Port List

These are the ports where each sub-project is expose locally:

  • Web (Nuxt): 3000
  • Supabase (Studio): 3100
  • Supabase (API): 3200
  • SonarQube: 3300

Dev Users

When running Supabase in development mode, it creates a some users. Since the project uses emails to identify users, I decided to use Yopmail to create some fake emails to use in development mode. These are the emails that you can use to sign in:

  • nuchat-admin@yopmail.com (Admin)
  • nuchat-userX@yopmail.com (User) where X is a number between 1 and 20.

After using one of these emails to sign in, you will receive an email with a magic link and a code. You can use the code to sign in or just click the magic link.

You can also use the Github sign in button to sign in with your Github account.

Warning: Don't use these emails in production mode since anyone can access them.


Screenshots

Landing Page

Landing page screenshot

Sign In Form

Sign In Form screenshot

Sign In Mail Dialog screenshot

Main View

No Chats screenshot

Messages screenshot

Find User Dialog screenshot

Dropdown screenshot

Profile

Profile screenshot

Admin Panel

Admin panel screenshot


Low-Fi Prototypes

Landing Page

Landing page low-fi prototype

Sign In Form

Sign In Form low-fi prototype

Main View

Main View low-fi prototype

Profile

Profile low-fi prototype

Admin Panel

Admin panel low-fi prototype

UML

Use cases

Landing Page

Landing page UML

Sign In Page

Sign in UML

Chats Page

Chats UML

Database

Since Supabase provide a lot of pre-made tables in their database, I'm going to represent only the ones that I create for this project but there are more under the hood.

Database UML

Web Class Diagram

Web Class Diagram