Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/abdullah0dev/chatdong
A Full Stack Real-Time Chat App with React Native, Node.js, MongoDB, and Socket.io! 🚀💬 Seamless messaging across platforms, all in real-time!
https://github.com/abdullah0dev/chatdong
mongodb nativewind nodejs react-native react-native-app react-native-navigation socket-io
Last synced: about 2 months ago
JSON representation
A Full Stack Real-Time Chat App with React Native, Node.js, MongoDB, and Socket.io! 🚀💬 Seamless messaging across platforms, all in real-time!
- Host: GitHub
- URL: https://github.com/abdullah0dev/chatdong
- Owner: Abdullah0Dev
- Created: 2024-08-20T05:49:11.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2024-08-20T06:10:29.000Z (5 months ago)
- Last Synced: 2024-11-11T08:08:10.028Z (about 2 months ago)
- Topics: mongodb, nativewind, nodejs, react-native, react-native-app, react-native-navigation, socket-io
- Homepage: https://www.bit.ly/3LboNOQ
- Size: 10.7 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Chatdong - Full Stack Chat App
Build your own full-stack chat application using React Native, Node.js, MongoDB, and Socket.io. Check out the design and assets on the link below!
## 📋 Table of Contents
1. 🤖 [Introduction](#introduction)
2. ⚙️ [Tech Stack](#tech-stack)
3. 🔋 [Features](#features)
4. 🤸 [Quick Start](#quick-start)
5. 🕸️ [Assets & Code](#snippets)
6. 🚀 [More](#more)
**Chatdong** is a full-stack chat application built using React Native for the frontend, Node.js for the backend, MongoDB for database management, and Socket.io for real-time communication. This app provides a responsive, real-time chat experience with a modern UI designed with Tailwind CSS.
The project structure consists of two main folders:
- `frontend`: React Native app.
- `backend`: Node.js server with Express and Socket.io.
You can view the design assets and other resources [here](https://drive.google.com/file/d/1ZKCV4HLKSkajlb-8CVMIRV3q2_qqW2Gs/view?usp=sharing).
- **React Native**
- **Node.js**
- **MongoDB**
- **Socket.io**
- **Tailwind CSS**
## 🔋 Features
👉 **Real-time Chat**: Leveraging Socket.io, the app offers real-time communication between users.
👉 **User Authentication**: Secure user authentication with JWT tokens.
👉 **Responsive Design**: Optimized for both mobile (React Native) and web interfaces.
👉 **Message Storage**: Stores chat history in MongoDB, ensuring messages persist across sessions.
👉 **Group Chats**: Users can create group chats with multiple participants.
👉 **Notification System**: Real-time notifications for new messages and activities.
Follow these steps to set up the project locally.
**Prerequisites**
Ensure you have the following installed:
- [Git](https://git-scm.com/)
- [Node.js](https://nodejs.org/)
- [npm](https://www.npmjs.com/)
- [MongoDB](https://www.mongodb.com/)
**Cloning the Repository**
```bash
git clone https://github.com/Abdullah0Dev/Chatdong.git
cd Chatdong
```
**Setting Up Backend**
```bash
cd backend
npm install
```
Create a `.env` file in the `backend` directory and add the following environment variables:
```env
MONGO_URI=
JWT_SECRET=
```
Start the server:
```bash
npm start
```
**Setting Up Frontend**
```bash
cd ../frontend
npm install
```
#### For Android:
1. Make sure your Android emulator is running, or connect a physical device.
2. Run the following command to start the Metro bundler and launch the app on Android:
```bash
npx react-native run-android
```
#### For iOS:
1. Make sure your iOS simulator is running, or connect a physical device.
2. Run the following command to start the Metro bundler and launch the app on iOS:
```bash
npx react-native run-ios
```
**Tailwind CSS Configuration**
Here’s a snippet from the Tailwind CSS configuration:
```javascript
module.exports = {
theme: {
extend: {
colors: {
accent: '#fef3ce',
white: '#ffffff',
primary: '#110905',
secondary: '#f7f7f7',
black: {
100: '#010411',
200: '#8d8d8f',
},
blue: '#E4F2FD',
purple: '#eecbd1',
},
},
},
plugins: [],
};
```
components/ChatCard.tsx
```typescript
import React from 'react';
import { View, Text } from 'react-native';
const ChatCard = ({ user, message }) => (
{user}
{message}
);
export default ChatCard;
```
server.js
```javascript
const express = require('express');
const http = require('http');
const socketIo = require('socket.io');
const mongoose = require('mongoose');
require('dotenv').config();
const app = express();
const server = http.createServer(app);
const io = socketIo(server);
mongoose.connect(process.env.MONGO_URI, { useNewUrlParser: true, useUnifiedTopology: true });
io.on('connection', (socket) => {
console.log('a user connected');
socket.on('chat message', (msg) => {
io.emit('chat message', msg);
});
});
server.listen(3000, () => {
console.log('listening on *:3000');
});
```
## 🚀 More
Feel free to contribute to the project or suggest new features by opening an issue or a pull request. If you have any questions, reach out to me on [GitHub](https://github.com/Abdullah0Dev). Happy coding!