A fully responsive chat interface built using React, Vite, Material-UI (MUI), and Redux Toolkit. This project implements a simple chat UI where users can send and receive messages, with state management provided by Redux Toolkit.
- Responsive Design: The chat interface adjusts to various screen sizes and is centered on the screen for an optimal user experience.
- Message Input and Send: Users can type messages and send them via a button.
- Chat Display: Messages are displayed in a scrollable chat window with timestamps for each message.
- Auto-Scroll: The chat window scrolls automatically to the latest message.
- Simulated Message Reception: Messages are simulated after a delay to demonstrate real-time chat functionality.
- State Management: Managed using Redux Toolkit, ensuring clean and organized state for messages and user information.
- Material-UI Components: Styled using MUI components for a modern, consistent UI.
- React 18: Used for building the UI and managing the component lifecycle.
- Vite: A fast build tool used to bundle and run the project.
- Material-UI (MUI): For consistent and responsive UI components.
- Redux Toolkit: For state management, handling chat messages and user data.
- JavaScript (ES6+): Core language for all functionality.
Follow these steps to get the project running locally:
-
Clone the repository:
git clone https://github.com/yash08123/Chat-App-MUI.git
-
Install dependencies:
npm install
-
Run the development server:
npm run dev
-
Access the application:
- Open your browser and go to
http://localhost:5173/to view the chat application.
- Open your browser and go to
- Type your message in the input field at the bottom of the chat window.
- Click the "Send" button or press "Enter" to send the message.
- Messages will appear in the chat window, and you'll receive a simulated reply after a short delay.
To learn more about the technologies used in this project, visit the following documentation: