Update 'README.md'

.docker/kratos/default.schema.json

@@ -1,7 +1,7 @@
 {
-  "$id": "https://schemas.ory.sh/presets/kratos/quickstart/email-password/identity.schema.json",
+  "$id": "file:///etc/config/kratos/default.schema.json",
   "$schema": "http://json-schema.org/draft-07/schema#",
-  "title": "Person",
+  "title": "default",
   "type": "object",
   "properties": {
     "traits": {
@@ -10,6 +10,7 @@
         "email": {
           "type": "string",
           "format": "email",
+          "title": "E-Mail",
           "minLength": 3,
           "ory.sh/kratos": {
             "credentials": {
@@ -31,7 +32,7 @@
           "minLength": 3
         }
       },
-      "required": ["email"],
+      "required": ["email", "username"],
       "additionalProperties": false
     }
   }

.docker/kratos/kratos.yml

@@ -1,12 +1,28 @@
 version: v0.10.1
 
 dsn: memory
+dev: true
 
 serve:
   public:
     base_url: http://127.0.0.1:4433/
     cors:
       enabled: true
+      allowed_origins:
+        - http://127.0.0.1:3000
+      allowed_methods:
+        - POST
+        - GET
+        - PUT
+        - PATCH
+        - DELETE
+      allowed_headers:
+        - Authorization
+        - Cookie
+        - Content-Type
+      exposed_headers:
+        - Content-Type
+        - Set-Cookie
   admin:
     base_url: http://kratos:4434/
 

README.md

@@ -1 +1,41 @@
+![](assets/logo.png)
+
 # twitch-clone
+
+A Twitch clone to experiment with various technologies.
+
+![](assets/screenshot.png)
+
+## Technologies
+- ScyllaDB for storing messages, compatible with Cassandra but much faster. Usage is inspired by Discord's usage of the technology. 
+- Ory Kratos for auth, a very comprehensive open-source Auth0 competitor.
+- Sentry for client-side monitoring, to help find bugs or other issues early.
+- Next.JS for the frontend, React with SSR important for SEO and to speed up the initial load.
+- Tailwind for styling, eliminating the need to manage stylesheets.
+
+## Dependencies
+- [podman](https://github.com/containers/podman)
+- [pnpm](https://github.com/pnpm/pnpm)
+- [node](https://github.com/nodejs/node)
+- [go](https://github.com/golang/go)
+
+## Usage
+Start the necessary infrastructure:
+```sh
+podman-compose up
+```
+
+Start the frontend:
+```sh
+cd client
+pnpm i
+pnpm run dev
+```
+
+Start the chat-service:
+```
+go run ./cmd/chat-service/main.go
+```
+
+## Disclaimer
+I am in no way affiliated with Amazon or Twitch.

client/.env.sample

@@ -0,0 +1 @@
+ORY_SDK_URL=http://localhost:4433

client/components/chat/index.tsx

@@ -1,20 +1,50 @@
-import { FC, useEffect, useState } from "react"
+import { FC, KeyboardEventHandler, useEffect, useRef, useState } from "react"
-import { CHAT_URL } from "../../config"
+import { CHAT_URL, MAX_CHAT_MESSAGES } from "../../config"
+import useSession from "../../hooks/useSession"
 import { ChatMessage as Message } from "../../types"
 import Input from "../common/Input"
 import ChatMessage from "../message/ChatMessage"
 
 const Chat: FC = () => {
+  const { session } = useSession()
   const [messages, setMessages] = useState<Message[]>([])
+  const wsRef = useRef<WebSocket | null>(null)
+  const messagesEndRef = useRef<HTMLDivElement | null>(null)
 
   useEffect(() => {
-    const ws = new WebSocket(CHAT_URL)
+    wsRef.current = new WebSocket(CHAT_URL)
-    ws.onmessage = (ev) => {
+    wsRef.current.onmessage = (ev) => {
       const newMsg = JSON.parse(ev.data) as Message
-      setMessages((old) => [...old, newMsg])
+      if (typeof newMsg === "string") return
+      setMessages((old) => {
+        if (old.length >= MAX_CHAT_MESSAGES) old.shift()
+        return [...old, newMsg]
+      })
+    }
+
+    return () => {
+      if (wsRef.current) wsRef.current.close()
     }
   }, [])
 
+  useEffect(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" })
+  }, [messages])
+
+  const handleChatInput: KeyboardEventHandler<HTMLInputElement> = (event) => {
+    if (event.key === "Enter" && wsRef.current) {
+      const msg = JSON.stringify({
+        fromUser: "niku",
+        fromUserID: 10,
+        toUser: "niku",
+        toUserID: 10,
+        content: event.currentTarget.value,
+      })
+      wsRef.current.send(msg)
+      event.currentTarget.value = ""
+    }
+  }
+
   return (
     <div className="bg-zinc-900 w-80 border-l border-l-zinc-700 flex flex-col">
       <div className="flex flex-row justify-center items-center border-b border-b-zinc-700 p-2 h-12">
@@ -24,9 +54,15 @@ const Chat: FC = () => {
         {messages.map((message) => (
           <ChatMessage key={message.messageId.toString()} message={message} />
         ))}
+        <div ref={messagesEndRef} />
       </div>
       <div className="m-2">
-        <Input className="w-full p-2" placeholder="Send a message" />
+        <Input
+          disabled={!session}
+          className="w-full p-2"
+          placeholder="Send a message"
+          onKeyDown={handleChatInput}
+        />
       </div>
     </div>
   )

client/components/login/SignupForm.tsx

@@ -45,6 +45,7 @@ const SignupForm: FC = () => {
       password: data.password,
       traits: {
         email: data.email,
+        username: data.username,
       },
     })
   }

client/components/message/ChatMessage.tsx

@@ -9,7 +9,7 @@ const ChatMessage: FC<ChatMessageProps> = ({
   message: { fromUser, content },
 }) => {
   return (
-    <div className="mx-2 p-2 hover:bg-neutral-700 text-sm rounded-md">
+    <div className="mx-2 p-[0.4rem] hover:bg-neutral-700 text-xs rounded-md">
       <div className="space-x-1 inline">
         <span className="align-middle">{fromUser}: </span>
       </div>

client/config/index.ts

@@ -1,2 +1,3 @@
 export const KRATOS_URL = "http://127.0.0.1:4433"
 export const CHAT_URL = "ws://localhost:1323"
+export const MAX_CHAT_MESSAGES = 50

client/types/index.ts

@@ -1,9 +1,9 @@
 export interface ChatMessage {
-  messageId: bigint
+  messageId: number
-  fromUserId: bigint
+  fromUserID: number
   fromUser: string
-  toUserId: bigint
+  toUserID: number
   toUser: string
   content: string
-  createdAt: bigint
+  createdAt: number
 }

docker-compose.yml

@@ -21,7 +21,7 @@ services:
   #     - POSTGRES_PASSWORD=${POSTGRES_PASSWORD}
   #     - POSTGRES_DB=${POSTGRES_DB}
   chat-service-scylla:
-    image: scylladb/scylla
+    image: docker.io/scylladb/scylla
     ports:
       - 7000:7000
       - 7001:7001
@@ -29,7 +29,7 @@ services:
       - 9160:9160
       - 10000:10000
   kratos-migrate:
-    image: oryd/kratos:v0.10.1
+    image: docker.io/oryd/kratos:v0.10.1
     environment:
       - DSN=postgres://${KRATOS_POSTGRES_USER}:${KRATOS_POSTGRES_PASSWORD}@kratos-postgres:5432/${KRATOS_POSTGRES_DB}?sslmode=disable&max_conns=20&max_idle_conns=4
     volumes:
@@ -41,7 +41,7 @@ services:
   kratos:
     depends_on:
       - kratos-migrate
-    image: oryd/kratos:v0.10.1
+    image: docker.io/oryd/kratos:v0.10.1
     ports:
       - '4433:4433' # public
       - '4434:4434' # admin
@@ -57,12 +57,12 @@ services:
         source: .docker/kratos
         target: /etc/config/kratos
   mailslurper:
-    image: oryd/mailslurper:latest-smtps
+    image: docker.io/oryd/mailslurper:latest-smtps
     ports:
       - '4436:4436'
       - '4437:4437'
   kratos-postgres:
-    image: postgres:9.6
+    image: docker.io/postgres:9.6
     ports:
       - '5432:5432'
     environment: