NetChat
A Social Chatting Service

Tech Stack and tools:

✨ Welcome to NetChat ✨

---

Overview🔨

NetChat is a social chatting service designed to facilitate seamless communication among users. With features that combine the best of modern messaging apps, it allows individuals to connect, share, and engage in real-time conversations, ensuring that no message goes unnoticed.

Key Features:

• Secure user authentication and management.
• Direct messaging and group chat functionalities.
• Multimedia support including GIFs, images, and videos.
• Real-time notifications for messages and updates.
• Message editing and deletion capabilities.
• Threaded replies for better conversation management.
• Giphy integration for fun and engaging chats.
• Search functionality for easy navigation.
• Fully responsive design for all devices.
• Twilio integration for SMS notifications.
• Upload local files directly within the chat.
• Mentions to tag specific users in conversations.
• Webhooks for enhanced notifications and integrations.

Advanced Concepts Implemented🧠

• Efficient folder and file structure.
• React Context API for state management.
• Integration with Stream API for scalable chat infrastructure.
• Custom hooks for reusable logic and more.

(back to top)

Dependencies used🖥️

• React (for building user interfaces)
• Stream Chat React (for chat functionality)
• Universal Cookie (for cookie management)
• Axios (for API calls)
• Stream Chat (for chat infrastructure)
• Express (web application framework)
• Twilio (for SMS notifications)
• bcrypt (for password hashing)
• cors (for enabling CORS)
• dotenv (for environment variable management)
• crypto (for cryptographic functionality)
• nodemon (for auto-restarting the server during development)

API & Services

• Stream API (for real-time messaging)
• Twilio API (for SMS services)
• Google Analytics (for user interaction tracking)
• Backend Server:https://netchat-backend1.onrender.com/

Usage Notes

1. If you encounter any errors during sign-in or sign-up, please refresh the page and try again.
2. When setting up your profile, you need to provide a URL for your avatar (profile picture).
3. To use GIFs in your messages, type /giphy [keyword] (e.g., /giphy hello to find a "hello" GIF).
4. To mention a specific user in a chat, type @username.
5. You need to have an account with Twilio for SMS messaging.

(back to top)

Security and User Management

We've implemented strict rules for managing users across all types of chats in NetChat to ensure security and proper access control:

• Automatic Memberships:

  • Users cannot leave or be removed from chats they were automatically added to.

• Private Conversations:

  • Members cannot leave or be removed from their private conversations (DMs).

• Administrative Control:

  • Administrators have the highest level of control and can manage most user access.

• Department-Specific:

  • Members can only access chats that are directly relevant to their specific department.

• User Engagement:

  • Users receive automatic notifications for updates related to their chats.

(back to top)

Installation Instructions

Frontend Setup

1. Install dependencies:

   npm install

2. Start the development server:

   npm start

   You can also refer to the client's README.md file for more details.

Backend Setup

1. Navigate to the server directory:

   cd ../server

2. Install dependencies:

   npm install

3. Set up environment variables:

   • Open the client/src/App.js and client/src/Components/Auth.js files and replace the placeholders with your actual API keys and tokens.
   • Create a .env file in the root directory of the server folder and add the following variables:

   STREAM_APP_ID=your_stream_app_id
   STREAM_API_SECRET=your_stream_api_secret
   STREAM_API_KEY=your_stream_api_key
   TWILIO_ACCOUNT_SID=your_twilio_account_sid
   TWILIO_AUTH_TOKEN=your_twilio_auth_token
   TWILIO_MESSAGING_SERVICE_SID=your_twilio_messaging_service_sid
   

   Replace your_* with your actual API keys and tokens.

4. Start the backend server:

   npm start
   npm run dev

(back to top)

Contributing 🤝

We welcome contributions to improve NetChat! Here's how you can contribute:

1. Fork the repository.

2. Create a new branch for your feature or bug fix:

   git checkout -b feature/AmazingFeature

3. Commit your changes and push to the branch:

   git commit -m 'Add some AmazingFeature'
   git push origin feature/AmazingFeature

4. Open a Pull Request with a detailed description of your changes.

5. Voila! ❗ You have made a PR to this awesome project 💥. Wait for your submission to be accepted and your PR to be merged.

(back to top)

License

This project is licensed under the MIT License - see the LICENSE file for details.

---

Made with ❤️