Giter VIP home page Giter VIP logo

23emaaaa / ng-chat-ui-setup Goto Github PK

View Code? Open in Web Editor NEW

This project forked from desoga10/ng-chat-ui-setup

0.0 0.0 0.0 164 KB

In this tutorial, we delve into creating a powerful real time Chat application using Angular 17 and Supabase. Here is the link to the tutorial on YouTube: https://www.youtube.com/watch?v=8SRhekaJ5iI

Home Page: https://ng-chat-v.vercel.app

TypeScript 64.09% CSS 9.49% HTML 26.42%

ng-chat-ui-setup's Introduction

users table

  • id (uuid)
  • full_name (text)
  • avatar_url (text)

Creating a users table

CREATE TABLE public.users (
   id uuid not null references auth.users on delete cascade,
   full_name text NULL,
   avatar_url text NULL,
   primary key (id)
);

Enable Row Level Security

ALTER TABLE public.users ENABLE ROW LEVEL SECURITY;

Permit Users Access Their Profile

CREATE POLICY "Permit Users to Access Their Profile"
  ON public.users
  FOR SELECT
  USING ( auth.uid() = id );

Permit Users to Update Their Profile

CREATE POLICY "Permit Users to Update Their Profile"
  ON public.users
  FOR UPDATE
  USING ( auth.uid() = id );

Supabase Functions

CREATE
OR REPLACE FUNCTION public.user_profile() RETURNS TRIGGER AS $$ BEGIN INSERT INTO public.users (id, full_name,avatar_url)
VALUES
  (
    NEW.id,
    NEW.raw_user_meta_data ->> 'full_name'::TEXT,
    NEW.raw_user_meta_data ->> 'avatar_url'::TEXT,
  );
RETURN NEW;
END;
$$ LANGUAGE plpgsql SECURITY DEFINER;

Supabase Trigger

  CREATE TRIGGER
  create_user_trigger
  AFTER INSERT ON auth.users
  FOR EACH ROW
  EXECUTE PROCEDURE
    public.user_profile();

Chat_Messages table (Real Time)

  • id (uuid)
  • Created At (date)
  • text (text)
  • editable (boolean)
  • sender (uuid)

ng-chat-ui-setup's People

Contributors

23emaaaa avatar desoga10 avatar ronstrauss avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.