BruceArmstrong007 / My-Chat

A Chat Application (with Auth, chat & video call with friends) using Angular, Angular Material, Tailwind, Express Server, Socket.io(WebSocket), PeerJs(WebRTC) , SQLite Prisma , Nx MonoRepo

Trying out new technologies - tRPC , prisma , zod , NX workspace , Tailwind, cypress e2e, OnPush with Standalone components

Chat App - Features

Auth with JWT
Find , add , remove friends, reject or accept friend request
Realtime notifications
Chat with friends
Change profile picture with url , password or username
Dark and light mode
Video Call Friends, mute audio / video on video call
File Transfer Responsive Added e2e testing

Commands to run the sever and client locally

1.) npm i
2.) npm run db:generate
3.) npm run db:migrate
4.) npx nx serve client - starts angular client @ port 4200
5.) npx nx serve server - starts trpc http server @ port 3333
6.) npm run db:show - to host visual representation of sqlite DB @ port 5000
7.) npx nx e2e client-e2e --watch - run E2E automation tests with cypress

Images

NX Commands

Express NX Server npx nx generate @nrwl/express:application server --frontendProject=client --tags=scope:chat-app,type:server --no-interactive

Express NX Library npx nx generate @nrwl/node:library trpc --directory=server/trpc --importPath=@server/trpc --js --strict --tags=scope:server,type:trpc --testEnvironment=node --no-interactive

Standalone NX Application npx nx generate @nrwl/angular:application client --addTailwind --backendProject=server --e2eTestRunner=none --inlineStyle --inlineTemplate --routing --skipTests --standalone --standaloneConfig --tags=scope:chat-app,type:client --no-interactive

Standalone NX Library - Component npx nx generate @nrwl/angular:library core --directory=client --changeDetection=OnPush --importPath=@client/core --inlineStyle --inlineTemplate --lazy --routing --simpleModuleName --standalone --tags=scope:client,type:core --no-interactive

Standalone NX Library - Module npx nx generate @nrwl/angular:library core --style=none --directory=client --importPath=@client/core --simpleModuleName --tags=scope:client,type:core --no-interactive

Standalone NX Component npx nx generate @nrwl/angular:component header --project=ui --changeDetection=OnPush --skipImport --standalone --no-interactive

ChatApp

✨ This workspace has been generated by Nx, a Smart, fast and extensible build system. ✨

Development server

Run nx serve client for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Understand this workspace

Run nx graph to see a diagram of the dependencies of the projects.

Remote caching

Run npx nx connect-to-nx-cloud to enable remote caching and make CI faster.

Further help

Visit the Nx Documentation to learn more.