Ecosyste.ms: Awesome

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

Awesome Lists | Featured Topics | Projects

https://github.com/ashilrahim/chattikko

A Real Time messaging platform with Socket.io
https://github.com/ashilrahim/chattikko

express-js javascript mongodb nodejs reactjs socket-io zustand

Last synced: 1 day ago
JSON representation

A Real Time messaging platform with Socket.io

Awesome Lists containing this project

README

        

## Real-Time Messaging App

A real-time messaging application built using the MERN stack (MongoDB, Express.js, React.js, Node.js) and Socket.IO. This app allows users to sign up, log in, and communicate in real time with others in private chats.

### Features:

- Authentication: Secure user signup and login using JWT (JSON Web Token).

- Real-Time Messaging: Instant communication powered by Socket.IO.

- User Management: Users can view and update their profiles.

- Responsive Design: Fully responsive UI for seamless use across devices.

- Persistent Data: Chat history stored in MongoDB.

## Tech Stack

### Frontend

- React.js

- Tailwind CSS (for styling)

- Axios (for API requests)

- Socket.IO Client

### Backend

- Node.js

- Express.js

- Socket.IO

- MongoDB (with Mongoose for database management)

- bcrypt.js (for password hashing)

- JWT (for authentication)

- dotenv (for environment variable management)

### User Authentication:

- Users sign up or log in.

- Authentication is handled using JWT.

- Real-Time Communication:

- Upon login, users are connected to the Socket.IO server.

- Messages are transmitted in real time between users.

### Data Storage:

- User and message data are stored in MongoDB.

- Chats are persisted and available even after a page refresh.
## Getting Started
### To run this project locally, follow these steps:

#### 1.Clone the Repository

```
git clone t
cd Chattikko
```
#### 2.Install Dependencies
For the server:
```
cd backend
npm install
```
For the frontend:
```
cd frontend
npm install
```
#### 3.Run the Application

Start the server:

```
cd backend
npm run dev
```

Start the client:
```
cd frontend
npm run dev
```

#### 5.Access the Application Open your browser and go to http://localhost:5173 to view your blog website.

#### If you want to see the project live go to https://chattikko.onrender.com
#### Use this credentials to log in
`email` = [email protected]
`password` = 123456

## Environment Variables

To run this project, you will need to add the following environment variables to your .env file

`PORT`=5000

`MONGO_URI`=

`JWT_SECRET`=

`CLOUDINARY_NAME` =

`CLOUDINARY_API_KEY` =

`CLOUDINARY_API_SECRET` =

`NODE_ENV` = development