ChatBuddies Tailwind Templates

Chatbuddies

A real-time chat application built with the MERN stack and enhanced with Socket.io for instant messaging. The app secure authentication using JWT tokens and Cookie Parser, state management with Zustand, and a modern UI styled with Tailwind CSS and DaisyUI.

Chat-Buddies

This repository contains a full-stack chat application built using the MERN stack (MongoDB, Express, React, Node.js) with additional technologies for enhanced functionality and user experience.

Features:

Real-time Communication: Implemented using Socket.io for seamless and instant message exchange.
State Management: Powered by Zustand, providing a simple and scalable solution for state management in React.
Authentication: Utilizes JWT tokens for secure user authentication and Cookie Parser for managing user sessions.
Styling: Styled with Tailwind CSS and DaisyUI for a modern and responsive user interface.

Technologies Used

Backend:
Node.js: JavaScript runtime environment.
Express: Fast, unopinionated, minimalist web framework for Node.js.
MongoDB: NoSQL database for storing user data and chat history.
Socket.io: Enables real-time bidirectional event-based communication.

Frontend:
React: JavaScript library for building user interfaces.
Zustand: Small, fast, and scalable state management solution.
Tailwind CSS: Utility-first CSS framework for rapid UI development.
DaisyUI: UI component library based on Tailwind CSS.

Authentication & Authorization:
JWT (JSON Web Tokens): For secure token-based authentication.
Cookie Parser: Middleware for parsing cookies and managing sessions.

Login Interface

loginPage

Signup Interface

singupPage

Chat Window

chatPage

Installation and Setup

Clone the repository:

git clone https://VishalSahu18/Chat-Application.git
cd Chat-Application

Install dependencies:

Backend:

npm install

Frontend:

cd frontend
npm install

Environment Variables: Create a .env file in the backend directory and add your environment variables (e.g., database URL, JWT secret).

Run the Application:

Backend:

npm run server

Frontend:

npm run dev

Access the Application: Open your browser and navigate to http://localhost:3000.

Contributions are welcome! Please fork the repository and submit a pull request for any improvements or bug fixes.

Top categories

Loading Svelte Themes