Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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๐
- Host: GitHub
- URL: https://github.com/avi9611/click-talk-mern-app
- Owner: avi9611
- Created: 2024-12-28T06:31:44.000Z (13 days ago)
- Default Branch: main
- Last Pushed: 2024-12-28T10:22:33.000Z (13 days ago)
- Last Synced: 2024-12-28T10:25:46.676Z (13 days ago)
- Topics: daisyui, expressjs, javascript, jwt-authentication, mern-stack, mongodb, nodejs, reactjs, socket-io, tailwind-css, zustand
- Language: JavaScript
- Homepage: https://click-talk-mern-app.onrender.com
- Size: 85.9 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
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 UIBackend: Node.js, Express.js, Socket.io
Database: MongoDB
State Management: Zustand
Authentication: JWT
## ๐ Getting Started
PrerequisitesNode.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 & AuthorizationJWT-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)