Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/iamsuudi/messaging-app
Real-time chat application powered by express, react and socket-io
https://github.com/iamsuudi/messaging-app
express mongodb mongoose nodejs react shadcn-ui socket-io tailwindcss typescript vite
Last synced: 8 days ago
JSON representation
Real-time chat application powered by express, react and socket-io
- Host: GitHub
- URL: https://github.com/iamsuudi/messaging-app
- Owner: iamsuudi
- Created: 2024-07-17T22:02:33.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2024-08-13T16:31:55.000Z (6 months ago)
- Last Synced: 2024-12-13T18:38:40.036Z (2 months ago)
- Topics: express, mongodb, mongoose, nodejs, react, shadcn-ui, socket-io, tailwindcss, typescript, vite
- Language: TypeScript
- Homepage: https://dalochat.onrender.com
- Size: 8.3 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# DaloChat
Website: https://dalochat.onrender.com/
It's completely free, just login with a google account or signup with your email-password and try it out!
---
## Tech Stack
- **Front End:** React | TypeScript | TailwindCSS
- **Back End:** Express | Node | MongoDB
- **Other Libraries:** Shadcn UI | Zustand | TanStack
---
## Goal
My goal was to create an application where users can chat in groups or individual in real-time
---
## Key Features
- Real-time update.
- End-to-end individual chat.
- Creating and managing groups.
- Profile update that supports image uploading.
- Deleting the messages we sent.
- Adding contacts using their usernames and Deleting chats.
- User authentication using Auth2.
- Interactive UI that is in sync with the database.
---
## What I learned
It was my first time moving bundled client code to the backend and serve html from the server. It is very fast compared to hosting react code separately.
I also learned that managing and scaling react-app gets more difficult as the app gets more complex. I have been using react-router for client side SPA routing and zustand for client state management.
I used tanstack's react-query for server state managements which updates UI better than react's default useEffect. But it has a problem related to updating data in the background.
I used Socket.io for real-time connections, which is much better than Web Browser's websocket and all the datas are saved to mongodb atlas.
---
## Project Images
**Landing Page**
This is the landing page for my web application. I added some cool scroll animaions.
---
**Chat**
This is the individual chat section. As soon as you select a user the conversation will be shared between you in real time.
---
Profile Page
## Setup
Installation:
```bash
git clone [email protected]:iamsuudi/messaging-app.gi
```
---
Install Dependencies:
```bash
pnpm install
```
---
Set Up Environment Variables:
Create .env file at the root folder in the /api and add your own values to them
```js
PORT=3001
SECRET=*****
MONGODB_URI=mongodb://localhost:27017/messaging-app
MONGODB_PROD_URI=********
SALT=********
CLOUDINARY_NAME=********
CLOUDINARY_API_KEY=******
CLOUDINARY_API_SECRET=******
GOOGLE_CLIENT_ID=******
GOOGLE_CLIENT_SECRET=******
```
---
Running Client Dev Server:
```bash
cd client
pnpm dev
```
---
Running Api Dev Server:
```bash
cd api
pnpm dev
```
---
Running Prod Server:
If you have made changes in the client code, re-build it and move the dist folder to the api as follows:
```bash
cd client
pnpm build
mv -f dist/ ../api/
```
Then go to api directory and build it
```bash
cd api
pnpm build
pnpm start
```