https://github.com/themehdihn/mini-chat

A simple Mini Chat App built with React.js, Node.js, Socket.IO, and MySQL. Features real-time messaging, username-based login, message history, and validation for alphanumeric usernames. Includes a scroll-to-latest-message button and displays the current user's name. Designed for learning and practicing Full Stack development.
https://github.com/themehdihn/mini-chat

express-js expressjs mysql node-js nodejs react-hooks react-router reactjs sequelize socket-io socket-programming socketio

Last synced: 3 days ago
JSON representation

A simple Mini Chat App built with React.js, Node.js, Socket.IO, and MySQL. Features real-time messaging, username-based login, message history, and validation for alphanumeric usernames. Includes a scroll-to-latest-message button and displays the current user's name. Designed for learning and practicing Full Stack development.

• Host: GitHub
• URL: https://github.com/themehdihn/mini-chat
• Owner: themehdihn
• Created: 2024-11-15T17:04:46.000Z (4 days ago)
• Default Branch: main
• Last Pushed: 2024-11-15T17:36:38.000Z (4 days ago)
• Last Synced: 2024-11-15T18:27:56.857Z (4 days ago)
• Topics: express-js, expressjs, mysql, node-js, nodejs, react-hooks, react-router, reactjs, sequelize, socket-io, socket-programming, socketio
• Language: JavaScript
• Homepage:
• Size: 1.4 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Mini Chat App

A simple chat application built using **Socket.IO**, **Node.js**, **React.js**, and **MySQL** to enable real-time messaging. It is designed for learning and practicing Full Stack development.

---

## Features

- **Username Login**: Users must enter a username to join the chat.

- **Real-Time Messaging**: Messages are instantly shared between all connected users.

- **Message History**: Newly connected users can view previous messages.

- **Username Validation**: Only alphanumeric usernames with underscores are allowed (no non-English characters).

- **Scroll to Latest Message**: A button allows users to quickly scroll to the latest chat message.

- **Active User Display**: The current user's username is displayed at the top of the chat.

---

## Screenshots



  

  



---

## Technologies Used

- **Frontend**: React.js

- **Backend**: Node.js and Express.js 

- **Database**: MySQL

- **Real-Time Communication**: Socket.IO

- **Styling**: CSS

---

## Prerequisites

- **Node.js** (version 16 or higher)

- **MySQL**

- **NPM** or **Yarn**

---

## Installation

1. Install MySQL and create a database for the app:

   ```sql

   CREATE DATABASE your_database_name;

   ```

2. Install dependencies for the app:

   ```bash

   npm install

   ```

## Running the App

- **BackEnd**: Run the following command to start the app:

npm start    

- **FrontEnd**: Run the following command to start the app:

npm run dev  

## Contributing

Contributions are welcome! If you want to contribute to Mini-Chat, please fork this repository, make your changes, and submit a pull request.