Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/avi9611/click-talk-mern-app

ClickTalk App๐Ÿ‘‡
https://github.com/avi9611/click-talk-mern-app

daisyui expressjs javascript jwt-authentication mern-stack mongodb nodejs reactjs socket-io tailwind-css zustand

Last synced: 13 days ago
JSON representation

ClickTalk App๐Ÿ‘‡

Awesome Lists containing this project

README

        

# ClickTalk- Realtime Chatting App using MERN Stack

## ๐Ÿ“Description
This MERN Stack App is a full-stack web application that combines modern technologies to deliver a seamless and interactive user experience. It features real-time messaging with online user status, secured authentication and authorization, and an intuitive user interface styled with TailwindCSS and Daisy UI. The app leverages Socket.io for real-time communication and Zustand for efficient global state management. With robust error handling and free deployment options, this project is an excellent foundation for scalable, real-time web applications.

## ๐ŸŒŸ Features
Tech Stack: MERN (MongoDB, Express.js, React, Node.js) + Socket.io + TailwindCSS + Daisy UI.

Authentication & Authorization: Secure authentication and authorization using JSON Web Tokens (JWT).

Real-Time Messaging: Instant messaging functionality powered by Socket.io.

Online User Status: Display the online/offline status of users in real time.

Global State Management: Efficient and scalable state management using Zustand.

Error Handling: Comprehensive error handling on both the server and client sides.

Deployment: Deploy your app like a proโ€”for free!

And Much More!
## ๐Ÿ› ๏ธ Tech Stack
Frontend: React, TailwindCSS, Daisy UI

Backend: Node.js, Express.js, Socket.io

Database: MongoDB

State Management: Zustand

Authentication: JWT
## ๐Ÿš€ Getting Started
Prerequisites

Node.js installed on your system.

MongoDB set up locally or on a cloud service like MongoDB Atlas.
## Screenshots

![App Screenshot](https://github.com/avi9611/Click-Talk-MERN-App/blob/main/login.png)
![App Screenshot](https://github.com/avi9611/Click-Talk-MERN-App/blob/main/home.png)
![App Screenshot](https://github.com/avi9611/Click-Talk-MERN-App/blob/main/profi.png)
![App Screenshot](https://github.com/avi9611/Click-Talk-MERN-App/blob/main/theme.png)

## Deployment

To deploy this project run

```bash
git clone https://github.com/avi9611/Click-Talk-MERN-App.git
cd mern-stack-app
```
Install dependencies for both frontend and backend:
```bash
cd client
npm install
cd ../server
npm install
```

## ๐Ÿง‘โ€๐Ÿ’ป Key Features
Authentication & Authorization

JWT-based secure login and registration.

Role-based access control.

Real-Time Messaging

Instant communication using Socket.io.

Dynamic online/offline status indicators.

Global State Management

Zustand for a simplified, scalable state management solution.

Error Handling

Robust error-handling mechanisms on both the client and server.

Deployment

Detailed instructions for deploying the app for free using platforms like Vercel and Render.
## License

[MIT](https://choosealicense.com/licenses/mit/)

## Badges

[![MIT License](https://img.shields.io/badge/License-MIT-green.svg)](https://choosealicense.com/licenses/mit/)
[![GPLv3 License](https://img.shields.io/badge/License-GPL%20v3-yellow.svg)](https://opensource.org/licenses/)
[![AGPL License](https://img.shields.io/badge/license-AGPL-blue.svg)](http://www.gnu.org/licenses/agpl-3.0)

## Authors

- [@avinashn](https://github.com/avi9611)