https://github.com/nathan-somto/chatly

Chatly is a chat application that helps to connect you with friends and family.
https://github.com/nathan-somto/chatly

auto-animate chat-application clerk-auth cloudinary express mern-stack mongodb nodejs prisma react shadcn-ui socket-io tailwindcss tanstack-react-query typescript video-chat zustand

Last synced: about 1 month ago
JSON representation

Chatly is a chat application that helps to connect you with friends and family.

• Host: GitHub
• URL: https://github.com/nathan-somto/chatly
• Owner: Nathan-Somto
• Created: 2023-12-22T17:30:31.000Z (almost 1 year ago)
• Default Branch: main
• Last Pushed: 2024-09-04T15:35:14.000Z (4 months ago)
• Last Synced: 2024-09-06T16:24:01.035Z (4 months ago)
• Topics: auto-animate, chat-application, clerk-auth, cloudinary, express, mern-stack, mongodb, nodejs, prisma, react, shadcn-ui, socket-io, tailwindcss, tanstack-react-query, typescript, video-chat, zustand
• Language: TypeScript
• Homepage: https://chatly-rkui.onrender.com
• Size: 18.6 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md

Awesome Lists containing this project

README

        
# CHATLY 💬

A chat application that helps to connect you with friends and family.

## Reason For Project

I wanted to learn how websockets work, so why not build a chat app? Initially, I planned on building a mobile app but abandoned the project for about 4 months due to my final year project. Right now, I am focused on completing the web app and then hosting it. Afterwards, I want to shift my focus to mobile development with React Native.

## Design File

Preview the Figma design I used [here](https://www.figma.com/design/jZ69GqMP9gfza5jgGjn0Fq/Chat-Web-UI-Kit-(Community)) 🎨

## Features

1. Private 1-1 messaging 🗣️

2. Group Chats 👥

3. Live Video Chats 📹

4. Real-Time Messaging / Updates 💬

5. Image, Video / Audio Uploads 📷🎥🎵

6. Light or Dark Mode 🌞🌜

7. Custom Chat Wallpapers 🖼️

8. Discover Users 🔍

### Interface Preview

1. Chat Interface

![interface-preview](./screenshots/chat%20interface.png)

2. Discover Users

![discover-users](./screenshots/discover%20users.png)

3. Video Chat

![video-chat](./screenshots/video%20chat.png)

4. Custom Wallpaper Selection

![custom-wallpaper](./screenshots/custom%20wallpaper.png)

5. Landing Page

![landing-page](./screenshots/landing-page.png)

## Tech Stack

### Front End (Web)

- React ⚛️

- Tailwind CSS 🌬️

- Shadcn UI 🖌️

- Clerk 🔑

- Zustand 🐻

- Tanstack Query 🔍

- React Router Dom 🛤️

- Live Kit 🎥

### Back End

- Node 🟢

- TypeScript 🔷

- Socket.IO 🟠

- Prisma 🛠️

- MongoDB 🍃

- Express 🚂

## Installation Steps

1. [Frontend](https://github.com/Nathan-Somto/Chatly/tree/main/frontend) 

2. [Backend](https://github.com/Nathan-Somto/Chatly/tree/main/backend) 

### Contributing

I appreciate any form of contributions or feature requests. If you are interested, just contact me so that I can have an idea of what you are doing. 🤝