Chat App programmieren mit Express, socket.io, TypeScript, Svelte + Deployment

In diesem Tutorial entwickeln wir eine Chat-Applikation mit Node, Express und socket.io auf dem Backend und Svelte und Sass auf dem Frontend. Außerdem benutzen wir TypeScript für einen besseren Entwicklungsprozess, insbesondere Auto-Vervollständigung. Am Ende geht es um das Deployment auf render.com.

? Demo & Quellcode
● Demo: https://svelte-chat-app.onrender.com/
● Code: https://github.com/ScriptRaccoon/svelte-chat-app

⏱ Zeitmarken
● Vorstellung 00:00
● Teil 1: Setup des Express-Servers mit TypeScript 04:06
● Express Server 04:09
● TypeScript Setup 06:57
● Skripte für Server 10:05
● Teil 2: Setup von socket.io mit TypeScript 14:51
● Setup von socket.io 14:54
● Typen für socket.io 18:23
● Teil 3: Setup des Svelte-Projektes für den Client 21:45
● Svelte mit Vite aufsetzen 21:48
● socket.io auf dem Client 25:20
● Skripte für Client 29:55
● Globale Typen 34:46
● Teil 4: Svelte-Komponenten und die Chat-Logik 38:02
● Login, Header und Chat-Komponente 38:05
● Pfad-Alias 44:20
● Messages- und SendForm-Komponente 47:58
● Nachrichten abschicken 51:12
● Nachrichten anzeigen 56:11
● Teil 5: Bot-Nachrichten und Anzeige der User 01:01:34
● Username in Nachricht anzeigen 01:01:37
● Willkommensnachricht 01:04:34
● Austrittsnachricht 01:08:07
● Liste der User 01:11:42
● Users-Komponente 01:16:33
● Menü 01:20:10
● Stores (Refactoring) 01:24:41
● Teil 6: Styling mit CSS und Barrierefreiheit 01:28:19
● Barrierefreiheit 01:28:22
● Setup von Sass 01:31:13
● Globale Styles 01:31:55
● Header Styles 01:39:34
● Login Styles 01:41:57
● Menü Styles 01:44:34
● Messages Styles 01:46:04
● Scrollen zur letzten Nachricht 01:52:24
● Message Styles 01:58:19
● SendForm Styles 02:00:34
● Breakpoints Datei 02:03:26
● Users Styles 02:06:47
● Tastatursteuerung 02:09:12
● Teil 7: Deployment auf render.com 02:12:15
● GitHub Repository 02:12:18
● Webservice auf render.com 02:15:00
● Abschluss 02:21:28

? Quellen
● Node: https://nodejs.org/en/
● Express: http://expressjs.com/
● TypeScript: https://typescriptlang.org/
● socket.io: https://socket.io/
● Svelte: https://svelte.dev/
● Sass: https://sass-lang.com/

? Verwendete Tools (Entwicklung)
● Visual Studio Code: https://code.visualstudio.com/
● Svelte for VS Code: https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode

? Verwendete Software (Aufnahme)
● OBS: https://obsproject.com/de
● Davinci Resolve 16: https://www.blackmagicdesign.com/de/products/davinciresolve/

#Express #Svelte #TypeScript