TawkTalk

A modern, responsive chat application built using React, Node.js, and Socket.io. This app is designed for seamless real-time communication with support for group chats, personal messages, and emoji interactions.

Feel free to explore the app live at TawkTalk!

Table of Contents

• Design
• Features
  • Frontend
  • Backend
• Screenshots
• Installation
• Technologies Used
• Project Structure
• Future Enhancements
• Contributing
• Contact

Design

Features

Frontend

• Framework: React
• UI Components: ShadCN
• Styling: Tailwind CSS
• Responsiveness: Fully responsive design for mobile, tablet, and desktop.
• Authentication: Secure JWT-based authentication.
• File Handling:
  • File uploads using Multer.
  • File downloads for shared files.
• Real-time Messaging: Powered by Socket.io for instant communication.
• Chat Support:
  • Group chats.
  • Personal messages.
• Fun Conversations: Emoji support for a lively chat experience.

Backend

• Framework: Node.js and Express.
• Database: MongoDB for reliable data storage.
• State Management: Zustand for efficient state management.
• API Calls: Axios for handling client-server interactions.
• Real-time Communication: Socket.io for instant messaging functionality.
• Security: JWT authentication and authorization.

Screenshots

Click to view application screenshots

Coming soon

Installation

1. Clone the repository:

   git clone https://github.com/TudorGR/TawkTalk.git
   cd TawkTalk

2. Install dependencies:

   # For the frontend
   cd client
   npm install
   
   # For the backend
   cd ../server
   npm install

3. Configure the environment variables:

   • Create a .env file in the client folder with the following key:

     VITE_SERVER_URL="http://localhost:8747"

   • Create a .env file in the server folder with the following keys:

     DATABASE_URL=your-database-url
     JWT_KEY=your-jwt-key
     PORT=8747

4. Start the development servers:

   # Start the backend server
   cd server
   npm run dev
   
   # Start the frontend server (in a new terminal)
   cd ../client
   npm run dev

5. Open your browser and navigate to:

   http://localhost:5173
   

Technologies Used

Frontend

• React: For building the user interface.
• ShadCN: UI components library.
• Tailwind CSS: For styling and responsive design.
• Zustand: State management.
• Axios: API call handling.
• Vite: Build tool for faster development.

Backend

• Node.js: Server-side runtime.
• Express: Web framework.
• Socket.io: Real-time communication.
• Multer: File handling.
• MongoDB: NoSQL database.
• JWT: Authentication and authorization.

Project Structure

TawkTalk/
├── client/                 # Frontend React application
│   ├── src/
│   │   ├── assets/         # Static assets
│   │   ├── components/     # Reusable UI components
│   │   ├── context/        # React context providers
│   │   ├── lib/            # Utility libraries
│   │   ├── pages/          # Application pages
│   │   └── store/          # State management
├── server/                 # Backend Node.js application
│   ├── controllers/        # Request handlers
│   ├── middlewares/        # Express middlewares
│   ├── models/             # Database models
│   ├── routes/             # API routes
│   └── uploads/            # Uploaded files

Future Enhancements

• Add voice and video call features.
• Implement message reactions.
• Enhance chat search functionality.
• Add message threading for organized conversations.
• Implement end-to-end encryption for enhanced privacy.
• Add typing indicators for better user experience.
• Support for dark/light mode themes.

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the repository
2. Create your feature branch: git checkout -b feature/amazing-feature
3. Commit your changes: git commit -m 'Add some amazing feature'
4. Push to the branch: git push origin feature/amazing-feature
5. Open a Pull Request

Contact

Tudor Gradinaru - GitHub Profile

Project Link: https://github.com/TudorGR/TawkTalk