Chat Application π using MERN Stack with Tailwind CSS
- MongoDB: NoSQL database for flexible and scalable data storage.
- Express.js: Web application framework for Node.js, providing robust features for web and mobile applications.
- Node.js: JavaScript runtime for server-side development.
- React.js: A JavaScript library for building reusable UI components and efficient single-page application views.
- Tailwind CSS: A utility-first CSS framework for rapid UI development.
- Socket.IO: Enables real-time, bidirectional and event-based communication.
- JWT (JSON Web Tokens): Securely transmits information between parties as a JSON object.
- Redux: A Predictable State Container for JavaScript Apps.
- React-Toastify: A JavaScript library for providing toast notifications in React.
- User Authentication: SignIn, SignUp, and Logout functionality.
- Real-time Chat: Users can send and receive messages in real-time.
- Group Chat: Create and participate in group chats.
- Message Notifications: Get notified of new messages with sound and visual alerts.
- State Management: Manage application state efficiently using Redux.
- Responsive Design: Tailwind CSS for a responsive and modern user interface.
Follow these steps to set up and run the project locally:
-
Clone the Repository:
git clone https://github.com/akashdeep023/Chat_App.git cd Chat_App
-
Install Dependencies: Frontend Folder :
cd frontend npm install
Backend Folder :
cd backend npm install
-
Set Up Environment Variables:
Configure the following environment variables by creating a .env file in the root of Forntend and Backend Folder:
Frontend Folder :
VITE_BACKEND_URL=http://localhost:9000
Backend Folder :
FRONTEND_URL=http://localhost:5173 MONGODB_URI=mongodb://127.0.0.1:27017/chat-app PORT=9000 JWT_SECRET=secret-kvndkvdlkajkhkJkBiu6JJNjkbhkvnskcmhLJ5dKbkjsamnv
Replace the values with your specific configurations.
-
Run the Application:
Frontend Folder :
npm run dev
Backend Folder :
npm run dev
-
Open in Your Browser:
Open http://localhost:5173
in your web browser.
βββ frontend
β βββ public
β βββ src
β β βββ assets
β β βββ components
β β βββ pages
β β βββ redux
β β βββ socket
β β βββ utils
β β βββ App.jsx
β β βββ main.jsx
β β βββ index.css
β βββ index.html
β βββ tailwind.config.js
β βββ .env
β βββ package.json
βββ backend
β βββ config
β βββ controllers
β βββ middlewares
β βββ models
β βββ routes
β βββ server.js
β βββ .env
β βββ package.json
βββ README.md
Akash Deep
Email: contact.akashdeep023@gmail.com
LinkedIn : https://www.linkedin.com/in/akashdeep023/
Add User in Group (Admin Access)
Remove User in Group (Admin Access)
Thank you for exploring Chat App! Your feedback is valuable. If you have any suggestions or thoughts, feel free to share them with us. π