REACT SLACK CLONE

Empower Collaboration with React-slack-clone: Where Real-time Chat Meets Seamless Integration!

Built with the tools and technologies:

Notice

This app was using Pusher chatbit as a realtime chat backend, But since pusher has taken down chatkit service, this code doesnt work anymore. If you want you can migrate app to comet chat, by following steps here.

Preview

📍 Overview

The React-slack-clone project is a real-time chat application that replicates the functionality of Slack. It enables seamless communication between users through features like user authentication, role assignment, and room management. Targeting developers and teams, it leverages Pusher Chatkit server and Express for a reliable chat experience.

👾 Features

	Feature	Summary
⚙️	Architecture	React-based frontend with Express backend for server-side logic Real-time chat functionality using Pusher Chatkit server Client-server communication via REST APIs
🔩	Code Quality	Consistent coding style and conventions Proper error handling and logging Use of modern JavaScript features
📄	Documentation	Extensive documentation in JavaScript, JSON, CSS, and HTML Clear instructions for installation, usage, and testing Well-documented codebase for easy understanding and maintenance
🔌	Integrations	Integration with Pusher Chatkit server for real-time chat functionality Utilization of Express for server-side logic Integration of various npm packages for enhanced features
🧩	Modularity	Modular components for easy maintenance and scalability Separation of concerns between frontend and backend functionalities Reusable code snippets for efficient development
🧪	Testing	Comprehensive testing suite using npm test Unit tests for individual components and integration tests for end-to-end functionality Ensuring code reliability and robustness through testing
⚡️	Performance	Optimized frontend rendering for fast user interactions Efficient server-side processing for real-time chat updates Performance monitoring and optimization for smooth user experience
🛡️	Security	Secure user authentication and role assignment mechanisms Data encryption for sensitive information transmission Protection against common web vulnerabilities
📦	Dependencies	Essential dependencies such as Pusher Chatkit server, Express, body-parser, and cors Version consistency maintained through package-lock.json Proper management of npm packages for project stability

📁 Project Structure

└── React-slack-clone/
    ├── README.md
    ├── client
    │   ├── .bablerc
    │   ├── .gitignore
    │   ├── README.md
    │   ├── build
    │   ├── jsconfig.json
    │   ├── package-lock.json
    │   ├── package.json
    │   ├── public
    │   └── src
    ├── package-lock.json
    ├── package.json
    ├── server.js
    ├── slack.png
    └── slack2.png

📂 Project Index

REACT-SLACK-CLONE/

__root__

package-lock.json - The code file provided in the package-lock.json within the project structure is essential for managing dependencies and ensuring version consistency in the overall codebase architecture
- It plays a crucial role in specifying the required dependencies, such as "@pusher/chatkit-server" version 1.3.0, and locking them to prevent unintended updates
- This file acts as a cornerstone for maintaining a stable and reliable project by accurately defining the dependencies needed for the application to function correctly.

package.json - Facilitates real-time chat functionality using Pusher Chatkit server, Express, and other dependencies
- Handles server-side logic for the chat application, enabling seamless communication between users
- The file defines essential configurations and dependencies for the project, ensuring smooth operation of the chat feature within the overall architecture.

server.js - Implements a server using Express to handle user authentication and role assignment in a chat application
- It utilizes Chatkit for managing users and rooms, serving static files from a React app, and authenticating users
- The server listens on a specified port for incoming requests.

client

package-lock.json - The `client/package-lock.json` file in the project structure is crucial for managing dependencies in the Slack2 project
- It ensures that the correct versions of dependencies, such as "@ant-design/colors", are locked in place to maintain stability and consistency across the codebase
- This file plays a key role in guaranteeing that the project can be built and run reliably by resolving and securing the necessary dependencies.

jsconfig.json Defines project's base URL and path mappings for source files in the codebase architecture.

.bablerc - Enables hot reloading for React components in the client-side codebase by configuring the Babel plugin 'react-hot-loader'
- This setup enhances the development experience by automatically refreshing the UI when code changes are made, improving productivity and facilitating rapid iteration during frontend development.

package.json - Manages dependencies and scripts for the React-based Slack2 client, facilitating development, testing, and deployment
- Key dependencies include React, Redux, Axios, and Ant Design
- Scripts for starting, building, testing, and deploying the application are defined
- Additionally, it includes configurations for ESLint and Browserslist.

src

index.css - Define global styling for the project, ensuring consistent typography and font rendering across the application
- The code in the provided file sets the base styles for the body and code elements, enhancing readability and visual appeal.

App.css Define consistent styling for the project's layout and components, ensuring a cohesive user interface experience.

serviceWorker.js - Enables service worker registration for offline capabilities and faster subsequent visits in production
- Handles updating cached resources in the background and provides callbacks for update and success scenarios
- Supports checking for valid service worker existence and unregistering if needed.

Chatkit.js - Facilitates real-time chat functionality by connecting users to Chatkit service, handling room subscriptions, and managing user interactions
- Utilizes Chatkit SDK and Ant Design for notifications
- Implements event handlers for room updates, user presence, and typing indicators
- Handles errors gracefully with user-friendly notifications and local storage management.

config.js - Define global constants for the Slack Clone project, including the app name, server URL, group message duration, and emoji codes
- These constants are crucial for maintaining consistency and ease of configuration across the codebase.

setupTests.js Enables configuration of Enzyme for React component testing in the client-side codebase.

App.js - Defines routing for the React application using React Router, connecting components to specific paths
- Integrates Redux state management and hot module reloading.

index.js - Render the main application component using Redux store for state management, enhancing the app's functionality
- Integrate React components with the store to provide a seamless user experience
- Optimize app performance by enabling offline capabilities through service workers.

components

Notification

Notification.js - Defines a reusable notification component for displaying messages in the application
- The component takes parameters for type, title, and description to customize the notification appearance
- It integrates with the 'antd' library for consistent UI feedback across the project.

index.js Exports the Notification component from the client/src/components/Notification directory, facilitating easy access and integration of notifications within the project architecture.

SlackHeader

SlackHeader.css - Define styling for SlackHeader component, including room title and settings menu
- Set font size and weight for room title, adjust menu layout and styling for a clean interface.

SlackHeader.js - Enhances Slack interface by displaying room details and user information dynamically
- Determines room type and user status to render appropriate header content
- Supports both channel and private chat headers, adapting based on the context
- Integrates with user data and room settings for a personalized user experience.

index.js - Exports the SlackHeader component from the client/src/components/SlackHeader/index.js file
- This component plays a crucial role in the project's frontend architecture, contributing to the user interface and overall user experience.

HeaderOptions

HeaderOptions.js Expose a React component for Slack header options, facilitating channel information display and user interaction.

index.js Expose HeaderOptions component for SlackHeader to enhance user interaction and navigation within the project's frontend architecture.

RemovePeople

RemovePeople.js - Implements a modal component for removing users from a Slack room
- Displays a selection dropdown of existing room users, allowing multiple selections for removal
- Handles user interactions for removing selected users and closing the modal.

index.js Facilitates removing people from Slack channels by exporting the 'RemovePeople' component.

DeleteChannelConfirm

DeleteChannelConfirm.js - Implements a modal component for confirming channel deletion in the SlackHeader section
- Displays a confirmation message with the channel name and an option to delete
- Provides visual cues and actions for users to confirm or cancel the deletion process.

index.js Enables exporting of the DeleteChannelConfirm component from the SlackHeader directory.

AddPeople

index.js Enables exporting the 'AddPeople' component from the SlackHeader module to facilitate adding new members to a Slack channel.

AddPeople.js - Facilitates adding people to a Slack room
- Displays a modal to select users from a list, with options for submission and closure
- Ensures a seamless user experience by providing a user-friendly interface for managing room members.

ChatHome

ChatHome.test_.js - Verifies rendering and structure of ChatHome component with Sidebar, Header, Content, and Footer sections
- Tests presence of Sidebar component with user data and room details
- Ensures proper integration and display within the overall chat application layout.

index.js Exports the ChatHome component from the client/src/components/ChatHome directory, facilitating seamless integration of the chat functionality within the project architecture.

ChatHome.js - ChatHome component renders the main chat interface, handling user and room data to display messages and manage channels
- It dynamically adjusts UI based on data availability, showing loaders when needed
- It also includes offline handling and modals for adding channels
- This component plays a crucial role in providing a seamless chat experience within the application.

Alert

Alert.test.js - Tests the rendering and functionality of the Alert component by verifying correct display of title, message, and icon based on different alert types
- Also ensures that the component defaults to displaying the correct title if not provided.

Alert.js - Generates alert boxes with customizable titles, messages, and types for displaying notifications in the UI
- The component enhances user experience by providing visual feedback for different scenarios such as errors, warnings, successes, or information messages
- It encapsulates the logic for rendering alerts in a structured manner, contributing to a more user-friendly interface.

index.js Expose Alert component for use in the client-side architecture.

Content

ListMessages

ListMessages.css - Define consistent styling for message components in the content list to ensure a clean and structured display
- Set specific padding, font sizes, colors, and hover effects for message senders, text, and grouped messages
- Maintain readability and visual hierarchy for a user-friendly interface.

ListMessages.js - Render a component to display messages in a chat room, allowing grouping by sender within a specified time frame
- Shows sender's name, avatar, message text, and timestamp
- Supports linking URLs in messages
- Key props include room details, grouping preference, and message data
- Enhances user experience in managing and viewing chat conversations.

index.js Expose ListMessages component for displaying a list of messages in the content section of the project.

ListMessages.test.js Tests the rendering and functionality of the ListMessages component by mounting it with mock data and checking if it renders correctly, displays the message, sender name, and time accurately.

Sidebar

Sidebar.test.js - Manages rendering of sidebar components, including rooms, channels, and user lists
- Ensures correct display of unread messages, user statuses, and triggers relevant actions like logout and channel selection
- Implements logic for styling channel names with unread messages and filtering private chat users
- Maintains consistency between displayed and expected user data.

index.js Enables the export of the Sidebar component from the client/src/components/Sidebar/index.js file, contributing to the project's architecture by providing a reusable and modular UI element.

Sidebar.js - The Sidebar component renders a user's profile, channels, and direct messages in a dark-themed menu
- It displays user avatars, names, and presence status, allowing for easy channel selection and logout functionality
- The component efficiently organizes and presents chat-related information for a seamless user experience within the application.

mockData.js - The `mockData.js` file in the `client/src/components/Sidebar` directory provides static data for rooms in the project
- It includes details such as room names, creation dates, user IDs, and unread message counts
- This data is used to simulate room information and populate the sidebar component with sample room data.

Sidebar.css - Define the styling for the user interface elements in the sidebar component, such as user details, room lists, and channel groups
- Set specific visual properties like padding, colors, font weights, and margins to enhance the overall appearance and user experience of the application.

AddChannel

index.js Expose AddChannel component for Sidebar to enable users to add new channels seamlessly within the project architecture.

AddChannel.css Defines styling for form items and modal body in the Sidebar component to ensure consistent spacing and padding throughout the user interface.

AddChannel.js - Enables adding new channels with specified users and privacy settings in the React application
- The component renders a modal form for creating channels, validating input, and managing user selections
- It integrates with the Ant Design library for UI components and handles user interactions for channel creation.

AddChannel.test.js - Implements tests for the AddChannel component, ensuring proper rendering and functionality of input fields, dropdowns, checkboxes, and error alerts
- Validates user input handling and event functions like hideModal, onSubmit, onInputChange, handleDropdownChange, and onCheckboxChange.

ListChannels

ListChannels.test.js - Manages rendering, searching, and interaction with channels in a modal
- Displays joinable and existing rooms, allows searching, handles errors, and triggers actions to join or create rooms
- Enables users to interact with channels seamlessly within the application.

ListChannels.css - Define the styling for channel lists in the sidebar component, ensuring a consistent and user-friendly layout
- Set specific dimensions, hover effects, and visual cues for selected items to enhance the overall user experience.

index.js Expose ListChannels component for Sidebar to display and manage channels efficiently within the project architecture.

mockData.js - The code file `mockData.js` in the `client/src/components/Sidebar/ListChannels` directory provides mock user and room data for the sidebar component in the project
- It defines a sample user with a name and image URL, as well as a room with various attributes such as creation date, name, user IDs, and unread message count
- This mock data is used to simulate user and room information within the sidebar, enhancing the user interface and experience of the application.

ListChannels.js - ListChannels component displays and manages channels in a modal, allowing users to search, join, and create channels
- It filters channels based on search text, shows joinable and existing channels, and provides actions to join or navigate to channels
- The component handles user interactions and displays channel information elegantly.

Footer

SendMessage

SendMessage.css - Define the styling for the message box container and Slack messages in the footer component
- Customize the appearance of emojis and Slack messages for a visually appealing user interface.

index.js Facilitates exporting the 'SendMessage' component from the Footer directory in the client-side codebase.

SendMessage.js - Enables users to compose and send messages within a chat interface
- Handles message input, emoji selection, and offline status detection
- Dynamically adjusts room name based on chat context
- Facilitates a seamless messaging experience by integrating with various libraries and utilities.

SendMessage.test.js Tests the rendering and functionality of the SendMessage component, ensuring it displays the message correctly in a textarea and triggers the onChange event.

Login

Login.js - Enables user authentication via Google OAuth in the client-side login component
- Handles successful and failed login attempts, displaying any errors
- The component integrates with the React framework and utilizes environment variables for configuration
- This functionality enhances the project's user experience by providing a seamless login process.

index.js Facilitates exporting the Login component from the client-side codebase.

ChannelInfoDrawer

ChannelInfoDrawer.test.js - Tests the rendering and visibility of the Channel Info Drawer component based on the channel's visibility status
- Verifies that the drawer is displayed correctly with the appropriate title when visible and hidden when not
- The tests ensure the component behaves as expected in showing channel information to users.

index.js Expose ChannelInfoDrawer component for easy access and integration within the project's client-side architecture.

ChannelInfoDrawer.css - Define styling rules for the Channel Info Drawer component, ensuring a consistent and visually appealing layout
- Set padding, font size, and alignment properties for various elements within the Channel Info Drawer to enhance user experience and maintain design coherence across the application.

ChannelInfoDrawer.js - ChannelInfoDrawer component displays information about a chat channel or conversation
- It shows details like channel creator, creation date, and members
- It adapts its content based on whether the channel is private or public
- The component enhances user experience by providing relevant context within the application.

store

SlackActions.js - Define Redux actions for managing Slack chat features like updating rooms, setting messages, and showing/hiding various UI elements
- These actions facilitate seamless communication between the frontend and backend, ensuring smooth user interactions within the Slack chat application.

SlackReducer.js - Manages state for Slack chat features, including room and message handling, user details, and UI modals
- Controls visibility and data updates based on dispatched actions
- Maintains loading indicators and modal states for adding/removing channels and people
- Facilitates smooth user interactions within the Slack application.

mockData.js - The code file `mockData.js` in the `client/src/store` directory provides mock user and room data for the project
- It serves the purpose of simulating user and room information, such as user ID, name, image URL, room creation details, and privacy status
- This mock data aids in testing and development by mimicking real user and room data within the codebase architecture.

store.js - Creates a Redux store for managing state in the client-side application, using the SlackReducer to handle actions and updates
- This file plays a crucial role in maintaining the application's global state and facilitating communication between different components.

containers

SlackHeader

index.js Facilitates the export of SlackHeaderContainer from the client/src/containers/SlackHeader/index.js file, contributing to the project's architecture by organizing container components efficiently.

SlackHeaderContainer.js - Manages Slack header display based on room and user data, triggering updates when users are added or removed
- Connects Redux state to SlackHeader component for seamless data flow and interaction
- Maintains user count and facilitates channel info drawer display.

HeaderOptions

index.js Facilitates header options functionality by exporting the HeaderOptionsContainer component.

HeaderOptionsContainer.js - Facilitates user interactions within Slack channels by providing options such as adding/removing users, viewing channel details, and deleting channels
- Utilizes React components and Redux for state management
- Implements lazy loading for improved performance
- Enhances user experience by offering a seamless interface for managing channel settings.

RemovePeople

RemovePeopleContainer.js - Manages the removal of users from a Slack room, ensuring the logged-in user remains
- Handles user selection, updates room data, and triggers notifications
- Integrates with Redux for state management and dispatches actions to hide the removal modal
- Maintains a clean and organized UI for a seamless user experience.

index.js Enables removing people from Slack channels within the project's architecture.

DeleteChannelConfirm

index.js Enables deletion confirmation for Slack channels in the client-side container, enhancing user experience and data integrity within the project's architecture.

DeleteChannelConfirmContainer.js - Manages deletion confirmation for Slack channels, ensuring safe removal and user feedback
- Coordinates with Redux store to handle state changes and dispatch actions accordingly
- Integrates with ChatKitUtil for room deletion and SlackUtils for room selection
- Enhances user experience by providing clear notifications and seamless transitions.

AddPeople

index.js Facilitates adding people to Slack channels by exporting the AddPeopleContainer component.

AddPeopleContainer.js - Manages adding people to a Slack channel, notifying members of new additions, and handling user interactions in the Add People modal
- Coordinates user selection, room updates, and messaging functionalities seamlessly within the Slack application.

ChatHome

ChatHomeContainer.js - Manages chat functionality by connecting users, updating rooms, setting messages, and handling user presence
- Subscribes users to rooms, removes users, and updates room lists
- Renders chat interface components based on user and room data
- Handles user authentication and redirects to login if needed.

ChatHomeContainer.test_.js Verifies rendering and redirects based on user authentication status in the ChatHomeContainer.test.js file within the ChatHome container.

index.js Facilitates exporting the ChatHomeContainer from the ChatHome directory in the client-side containers, contributing to the project's modular architecture.

Contents

ListMessages

ListMessagesContainer.js - Renders and groups chat messages by day, enhancing user experience by providing a more organized view
- Automatically sets read cursor for unread messages and scrolls to the bottom for seamless navigation
- Integrates with Redux for state management and React for dynamic UI updates.

index.js - Exports the ListMessagesContainer component from the ListMessages directory within the client's containers
- This component likely handles the display and management of a list of messages within the application's user interface.

Sidebar

SidebarContainer.test_.js - The SidebarContainer.test_ file in the client/src/containers/Sidebar directory tests the rendering of the SidebarContainer component with specific user and room data
- It ensures that the component renders successfully, setting up the foundation for testing the logout functionality in future development.

index.js - Exports the Sidebar component from the SidebarContainer file in the client-side containers directory
- This component likely serves as a key element in the user interface, contributing to the overall structure and functionality of the application.

SidebarContainer.js - Manages the sidebar interactions in the Slack application, handling user selection, room creation, and channel display
- Connects with Redux to manage state and dispatch actions for showing channels, adding channels, and loading indicators
- Ensures a seamless user experience by redirecting to the login page if not authenticated.

AddChannel

AddChannelContainer.js - Manages the creation of new channels in the Slack application, including handling form submissions, user input, and channel validation
- Utilizes Redux for state management and integrates with ChatKit for real-time messaging functionality
- Supports adding users to channels and setting channel privacy settings.

index.js Facilitates adding new channels to the sidebar in the project architecture.

ListChannels

ListChannelsContainer.js - Manages the list of joinable chat rooms, allowing users to filter and join rooms
- Updates the list dynamically and handles room joining operations
- Interfaces with Redux to manage state and dispatch actions for showing, hiding, and joining rooms.

index.js Facilitates exporting the ListChannelsContainer from the Sidebar component, contributing to the project's modular architecture.

Footer

SendMessage

SendMessageContainer.js - Manages sending messages in a chat room, including handling emojis and sending notifications on errors
- Integrates with the chat service to send messages from the user to the specified room
- Handles user input events like typing, key presses, and emoji selection.

index.js Exports the SendMessageContainer component from the Footer container, facilitating the sending of messages within the project architecture.

Login

LoginContainer.js - Manages user authentication and login flow by handling Google login responses
- Posts user profile data to the server, sets login success state, and displays appropriate error messages
- Renders the login component with error handling and redirects on successful login.

index.js - Exports the LoginContainer component, a key part of the client-side login functionality in the project architecture
- This component plays a crucial role in managing user authentication and access control within the application.

LoginContainer.test.js - Implements login functionality and authentication redirection for the React application
- Manages rendering of the login screen based on user login status and sets up routing for the application
- The code ensures proper display of the login screen and redirects authenticated users to the chat home.

utils

SlackUtils.js - The code file in `SlackUtils.js` provides functions to manage user interactions within chat rooms
- It facilitates tasks such as retrieving joinable and room users, creating messages for channel updates, and handling room-specific functionalities like checking for private chats and admin privileges
- These utilities enhance user experience and streamline communication within the chat application.

ChatKitUtil.js - Provides functions for managing chat rooms and messages, including adding/removing users, sending messages, creating rooms, subscribing to rooms, and more
- Handles user interactions with the chat system, enabling seamless communication within the application.

build

service-worker.js - Registers a Workbox-powered service worker in the web app to efficiently cache and respond to URL requests based on the provided manifest
- It ensures proper handling of service worker activation and navigation routes, enhancing the app's offline capabilities
- Avoid direct modifications to this auto-generated file; instead, adjust the Workbox build configuration and rebuild the project.

precache-manifest.a3c53c807652b9a709b570d2413ca3ae.js Consolidates cached assets for the project, including HTML, CSS, and JavaScript files, optimizing loading times.

asset-manifest.json - Manages asset paths for the project's static resources, such as JavaScript and CSS files, along with other assets like images and service workers
- This file plays a crucial role in mapping the file paths to their corresponding URLs, ensuring proper resource loading and functionality within the application.

index.html - Generates the main HTML file for the Slack project's client build, defining the structure and content of the web application
- Includes essential metadata, links to stylesheets and scripts, and sets up the root element for rendering the app
- This file serves as the entry point for the frontend user interface.

manifest.json - Defines the manifest for the Slack Clone web app, specifying its name, icons, start URL, display mode, theme color, and background color
- This file plays a crucial role in configuring the app's appearance and behavior when added to a user's device.

public

index.html - Defines the structure and content of the index.html file in the client/public directory
- Sets up the basic layout and initial content for the Slack web application, including metadata, viewport settings, theme color, fonts, and root element
- Ensures proper display and functionality of the app in web browsers.

manifest.json - Defines the manifest.json file for the Slack Clone project, specifying essential details like the app's name, icons, start URL, display mode, theme color, and background color
- This file plays a crucial role in configuring how the web application appears and behaves when added to a user's device.

🚀 Getting Started

☑️ Prerequisites

Before getting started with React-slack-clone, ensure your runtime environment meets the following requirements:

Programming Language: JavaScript
Package Manager: Npm

⚙️ Installation

Install React-slack-clone using one of the following methods:

Build from source:

Clone the React-slack-clone repository:

❯ git clone https://github.com/amitpatil321/React-slack-clone

Navigate to the project directory:

❯ cd React-slack-clone

Install the project dependencies:

Using npm

❯ npm install

🤖 Usage

Run React-slack-clone using the following command: Using npm

❯ npm start

🧪 Testing

Run the test suite using the following command: Using npm

❯ npm test

🔰 Contributing

💬 Join the Discussions: Share your insights, provide feedback, or ask questions.
🐛 Report Issues: Submit bugs found or log feature requests for the React-slack-clone project.
💡 Submit Pull Requests: Review open PRs, and submit your own PRs.

Contributing Guidelines

Fork the Repository: Start by forking the project repository to your github account.
Clone Locally: Clone the forked repository to your local machine using a git client.
```
git clone https://github.com/amitpatil321/React-slack-clone
```
Create a New Branch: Always work on a new branch, giving it a descriptive name.
```
git checkout -b new-feature-x
```
Make Your Changes: Develop and test your changes locally.
Commit Your Changes: Commit with a clear message describing your updates.
```
git commit -m 'Implemented new feature x.'
```
Push to github: Push the changes to your forked repository.
```
git push origin new-feature-x
```
Submit a Pull Request: Create a PR against the original project repository. Clearly describe the changes and their motivations.
Review: Once your PR is reviewed and approved, it will be merged into the main branch. Congratulations on your contribution!

Contributor Graph

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Repository files navigation

REACT SLACK CLONE

Notice

Preview

🔗 Table of Contents

📍 Overview

👾 Features

📁 Project Structure

📂 Project Index

🚀 Getting Started

☑️ Prerequisites

⚙️ Installation

🤖 Usage

🧪 Testing

🔰 Contributing

About

Uh oh!

Releases

Packages

Uh oh!

Languages

Name		Name	Last commit message	Last commit date
Latest commit History 211 Commits
client		client
.gitignore		.gitignore
README.md		README.md
package-lock.json		package-lock.json
package.json		package.json
server.js		server.js
slack.png		slack.png
slack2.png		slack2.png

package-lock.json	- The code file provided in the package-lock.json within the project structure is essential for managing dependencies and ensuring version consistency in the overall codebase architecture - It plays a crucial role in specifying the required dependencies, such as "@pusher/chatkit-server" version 1.3.0, and locking them to prevent unintended updates - This file acts as a cornerstone for maintaining a stable and reliable project by accurately defining the dependencies needed for the application to function correctly.
package.json	- Facilitates real-time chat functionality using Pusher Chatkit server, Express, and other dependencies - Handles server-side logic for the chat application, enabling seamless communication between users - The file defines essential configurations and dependencies for the project, ensuring smooth operation of the chat feature within the overall architecture.
server.js	- Implements a server using Express to handle user authentication and role assignment in a chat application - It utilizes Chatkit for managing users and rooms, serving static files from a React app, and authenticating users - The server listens on a specified port for incoming requests.

package-lock.json	- The `client/package-lock.json` file in the project structure is crucial for managing dependencies in the Slack2 project - It ensures that the correct versions of dependencies, such as "@ant-design/colors", are locked in place to maintain stability and consistency across the codebase - This file plays a key role in guaranteeing that the project can be built and run reliably by resolving and securing the necessary dependencies.
jsconfig.json	Defines project's base URL and path mappings for source files in the codebase architecture.
.bablerc	- Enables hot reloading for React components in the client-side codebase by configuring the Babel plugin 'react-hot-loader' - This setup enhances the development experience by automatically refreshing the UI when code changes are made, improving productivity and facilitating rapid iteration during frontend development.
package.json	- Manages dependencies and scripts for the React-based Slack2 client, facilitating development, testing, and deployment - Key dependencies include React, Redux, Axios, and Ant Design - Scripts for starting, building, testing, and deploying the application are defined - Additionally, it includes configurations for ESLint and Browserslist.

index.css	- Define global styling for the project, ensuring consistent typography and font rendering across the application - The code in the provided file sets the base styles for the body and code elements, enhancing readability and visual appeal.
App.css	Define consistent styling for the project's layout and components, ensuring a cohesive user interface experience.
serviceWorker.js	- Enables service worker registration for offline capabilities and faster subsequent visits in production - Handles updating cached resources in the background and provides callbacks for update and success scenarios - Supports checking for valid service worker existence and unregistering if needed.
Chatkit.js	- Facilitates real-time chat functionality by connecting users to Chatkit service, handling room subscriptions, and managing user interactions - Utilizes Chatkit SDK and Ant Design for notifications - Implements event handlers for room updates, user presence, and typing indicators - Handles errors gracefully with user-friendly notifications and local storage management.
config.js	- Define global constants for the Slack Clone project, including the app name, server URL, group message duration, and emoji codes - These constants are crucial for maintaining consistency and ease of configuration across the codebase.
setupTests.js	Enables configuration of Enzyme for React component testing in the client-side codebase.
App.js	- Defines routing for the React application using React Router, connecting components to specific paths - Integrates Redux state management and hot module reloading.
index.js	- Render the main application component using Redux store for state management, enhancing the app's functionality - Integrate React components with the store to provide a seamless user experience - Optimize app performance by enabling offline capabilities through service workers.

Notification.js	- Defines a reusable notification component for displaying messages in the application - The component takes parameters for type, title, and description to customize the notification appearance - It integrates with the 'antd' library for consistent UI feedback across the project.
index.js	Exports the Notification component from the client/src/components/Notification directory, facilitating easy access and integration of notifications within the project architecture.

SlackHeader.css	- Define styling for SlackHeader component, including room title and settings menu - Set font size and weight for room title, adjust menu layout and styling for a clean interface.
SlackHeader.js	- Enhances Slack interface by displaying room details and user information dynamically - Determines room type and user status to render appropriate header content - Supports both channel and private chat headers, adapting based on the context - Integrates with user data and room settings for a personalized user experience.
index.js	- Exports the SlackHeader component from the client/src/components/SlackHeader/index.js file - This component plays a crucial role in the project's frontend architecture, contributing to the user interface and overall user experience.

HeaderOptions.js	Expose a React component for Slack header options, facilitating channel information display and user interaction.
index.js	Expose HeaderOptions component for SlackHeader to enhance user interaction and navigation within the project's frontend architecture.

RemovePeople.js	- Implements a modal component for removing users from a Slack room - Displays a selection dropdown of existing room users, allowing multiple selections for removal - Handles user interactions for removing selected users and closing the modal.
index.js	Facilitates removing people from Slack channels by exporting the 'RemovePeople' component.

DeleteChannelConfirm.js	- Implements a modal component for confirming channel deletion in the SlackHeader section - Displays a confirmation message with the channel name and an option to delete - Provides visual cues and actions for users to confirm or cancel the deletion process.
index.js	Enables exporting of the DeleteChannelConfirm component from the SlackHeader directory.

index.js	Enables exporting the 'AddPeople' component from the SlackHeader module to facilitate adding new members to a Slack channel.
AddPeople.js	- Facilitates adding people to a Slack room - Displays a modal to select users from a list, with options for submission and closure - Ensures a seamless user experience by providing a user-friendly interface for managing room members.

ChatHome.test_.js	- Verifies rendering and structure of ChatHome component with Sidebar, Header, Content, and Footer sections - Tests presence of Sidebar component with user data and room details - Ensures proper integration and display within the overall chat application layout.
index.js	Exports the ChatHome component from the client/src/components/ChatHome directory, facilitating seamless integration of the chat functionality within the project architecture.
ChatHome.js	- ChatHome component renders the main chat interface, handling user and room data to display messages and manage channels - It dynamically adjusts UI based on data availability, showing loaders when needed - It also includes offline handling and modals for adding channels - This component plays a crucial role in providing a seamless chat experience within the application.

Alert.test.js	- Tests the rendering and functionality of the Alert component by verifying correct display of title, message, and icon based on different alert types - Also ensures that the component defaults to displaying the correct title if not provided.
Alert.js	- Generates alert boxes with customizable titles, messages, and types for displaying notifications in the UI - The component enhances user experience by providing visual feedback for different scenarios such as errors, warnings, successes, or information messages - It encapsulates the logic for rendering alerts in a structured manner, contributing to a more user-friendly interface.
index.js	Expose Alert component for use in the client-side architecture.

ListMessages.css	- Define consistent styling for message components in the content list to ensure a clean and structured display - Set specific padding, font sizes, colors, and hover effects for message senders, text, and grouped messages - Maintain readability and visual hierarchy for a user-friendly interface.
ListMessages.js	- Render a component to display messages in a chat room, allowing grouping by sender within a specified time frame - Shows sender's name, avatar, message text, and timestamp - Supports linking URLs in messages - Key props include room details, grouping preference, and message data - Enhances user experience in managing and viewing chat conversations.
index.js	Expose ListMessages component for displaying a list of messages in the content section of the project.
ListMessages.test.js	Tests the rendering and functionality of the ListMessages component by mounting it with mock data and checking if it renders correctly, displays the message, sender name, and time accurately.

Sidebar.test.js	- Manages rendering of sidebar components, including rooms, channels, and user lists - Ensures correct display of unread messages, user statuses, and triggers relevant actions like logout and channel selection - Implements logic for styling channel names with unread messages and filtering private chat users - Maintains consistency between displayed and expected user data.
index.js	Enables the export of the Sidebar component from the client/src/components/Sidebar/index.js file, contributing to the project's architecture by providing a reusable and modular UI element.
Sidebar.js	- The Sidebar component renders a user's profile, channels, and direct messages in a dark-themed menu - It displays user avatars, names, and presence status, allowing for easy channel selection and logout functionality - The component efficiently organizes and presents chat-related information for a seamless user experience within the application.
mockData.js	- The `mockData.js` file in the `client/src/components/Sidebar` directory provides static data for rooms in the project - It includes details such as room names, creation dates, user IDs, and unread message counts - This data is used to simulate room information and populate the sidebar component with sample room data.
Sidebar.css	- Define the styling for the user interface elements in the sidebar component, such as user details, room lists, and channel groups - Set specific visual properties like padding, colors, font weights, and margins to enhance the overall appearance and user experience of the application.

index.js	Expose AddChannel component for Sidebar to enable users to add new channels seamlessly within the project architecture.
AddChannel.css	Defines styling for form items and modal body in the Sidebar component to ensure consistent spacing and padding throughout the user interface.
AddChannel.js	- Enables adding new channels with specified users and privacy settings in the React application - The component renders a modal form for creating channels, validating input, and managing user selections - It integrates with the Ant Design library for UI components and handles user interactions for channel creation.
AddChannel.test.js	- Implements tests for the AddChannel component, ensuring proper rendering and functionality of input fields, dropdowns, checkboxes, and error alerts - Validates user input handling and event functions like hideModal, onSubmit, onInputChange, handleDropdownChange, and onCheckboxChange.

ListChannels.test.js	- Manages rendering, searching, and interaction with channels in a modal - Displays joinable and existing rooms, allows searching, handles errors, and triggers actions to join or create rooms - Enables users to interact with channels seamlessly within the application.
ListChannels.css	- Define the styling for channel lists in the sidebar component, ensuring a consistent and user-friendly layout - Set specific dimensions, hover effects, and visual cues for selected items to enhance the overall user experience.
index.js	Expose ListChannels component for Sidebar to display and manage channels efficiently within the project architecture.
mockData.js	- The code file `mockData.js` in the `client/src/components/Sidebar/ListChannels` directory provides mock user and room data for the sidebar component in the project - It defines a sample user with a name and image URL, as well as a room with various attributes such as creation date, name, user IDs, and unread message count - This mock data is used to simulate user and room information within the sidebar, enhancing the user interface and experience of the application.
ListChannels.js	- ListChannels component displays and manages channels in a modal, allowing users to search, join, and create channels - It filters channels based on search text, shows joinable and existing channels, and provides actions to join or navigate to channels - The component handles user interactions and displays channel information elegantly.

SendMessage.css	- Define the styling for the message box container and Slack messages in the footer component - Customize the appearance of emojis and Slack messages for a visually appealing user interface.
index.js	Facilitates exporting the 'SendMessage' component from the Footer directory in the client-side codebase.
SendMessage.js	- Enables users to compose and send messages within a chat interface - Handles message input, emoji selection, and offline status detection - Dynamically adjusts room name based on chat context - Facilitates a seamless messaging experience by integrating with various libraries and utilities.
SendMessage.test.js	Tests the rendering and functionality of the SendMessage component, ensuring it displays the message correctly in a textarea and triggers the onChange event.

Login.js	- Enables user authentication via Google OAuth in the client-side login component - Handles successful and failed login attempts, displaying any errors - The component integrates with the React framework and utilizes environment variables for configuration - This functionality enhances the project's user experience by providing a seamless login process.
index.js	Facilitates exporting the Login component from the client-side codebase.

ChannelInfoDrawer.test.js	- Tests the rendering and visibility of the Channel Info Drawer component based on the channel's visibility status - Verifies that the drawer is displayed correctly with the appropriate title when visible and hidden when not - The tests ensure the component behaves as expected in showing channel information to users.
index.js	Expose ChannelInfoDrawer component for easy access and integration within the project's client-side architecture.
ChannelInfoDrawer.css	- Define styling rules for the Channel Info Drawer component, ensuring a consistent and visually appealing layout - Set padding, font size, and alignment properties for various elements within the Channel Info Drawer to enhance user experience and maintain design coherence across the application.
ChannelInfoDrawer.js	- ChannelInfoDrawer component displays information about a chat channel or conversation - It shows details like channel creator, creation date, and members - It adapts its content based on whether the channel is private or public - The component enhances user experience by providing relevant context within the application.

SlackActions.js	- Define Redux actions for managing Slack chat features like updating rooms, setting messages, and showing/hiding various UI elements - These actions facilitate seamless communication between the frontend and backend, ensuring smooth user interactions within the Slack chat application.
SlackReducer.js	- Manages state for Slack chat features, including room and message handling, user details, and UI modals - Controls visibility and data updates based on dispatched actions - Maintains loading indicators and modal states for adding/removing channels and people - Facilitates smooth user interactions within the Slack application.
mockData.js	- The code file `mockData.js` in the `client/src/store` directory provides mock user and room data for the project - It serves the purpose of simulating user and room information, such as user ID, name, image URL, room creation details, and privacy status - This mock data aids in testing and development by mimicking real user and room data within the codebase architecture.
store.js	- Creates a Redux store for managing state in the client-side application, using the SlackReducer to handle actions and updates - This file plays a crucial role in maintaining the application's global state and facilitating communication between different components.

amitpatil321/React-slack-clone

Folders and files

Latest commit

History

Repository files navigation

REACT SLACK CLONE

Notice

Preview

🔗 Table of Contents

📍 Overview

👾 Features

📁 Project Structure

📂 Project Index

🚀 Getting Started

☑️ Prerequisites

⚙️ Installation

🤖 Usage

🧪 Testing

🔰 Contributing

About

Topics

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Languages

Packages

index.js	Facilitates the export of SlackHeaderContainer from the client/src/containers/SlackHeader/index.js file, contributing to the project's architecture by organizing container components efficiently.
SlackHeaderContainer.js	- Manages Slack header display based on room and user data, triggering updates when users are added or removed - Connects Redux state to SlackHeader component for seamless data flow and interaction - Maintains user count and facilitates channel info drawer display.

index.js	Facilitates header options functionality by exporting the HeaderOptionsContainer component.
HeaderOptionsContainer.js	- Facilitates user interactions within Slack channels by providing options such as adding/removing users, viewing channel details, and deleting channels - Utilizes React components and Redux for state management - Implements lazy loading for improved performance - Enhances user experience by offering a seamless interface for managing channel settings.

RemovePeopleContainer.js	- Manages the removal of users from a Slack room, ensuring the logged-in user remains - Handles user selection, updates room data, and triggers notifications - Integrates with Redux for state management and dispatches actions to hide the removal modal - Maintains a clean and organized UI for a seamless user experience.
index.js	Enables removing people from Slack channels within the project's architecture.

index.js	Enables deletion confirmation for Slack channels in the client-side container, enhancing user experience and data integrity within the project's architecture.
DeleteChannelConfirmContainer.js	- Manages deletion confirmation for Slack channels, ensuring safe removal and user feedback - Coordinates with Redux store to handle state changes and dispatch actions accordingly - Integrates with ChatKitUtil for room deletion and SlackUtils for room selection - Enhances user experience by providing clear notifications and seamless transitions.

index.js	Facilitates adding people to Slack channels by exporting the AddPeopleContainer component.
AddPeopleContainer.js	- Manages adding people to a Slack channel, notifying members of new additions, and handling user interactions in the Add People modal - Coordinates user selection, room updates, and messaging functionalities seamlessly within the Slack application.

ChatHomeContainer.js	- Manages chat functionality by connecting users, updating rooms, setting messages, and handling user presence - Subscribes users to rooms, removes users, and updates room lists - Renders chat interface components based on user and room data - Handles user authentication and redirects to login if needed.
ChatHomeContainer.test_.js	Verifies rendering and redirects based on user authentication status in the ChatHomeContainer.test.js file within the ChatHome container.
index.js	Facilitates exporting the ChatHomeContainer from the ChatHome directory in the client-side containers, contributing to the project's modular architecture.

ListMessagesContainer.js	- Renders and groups chat messages by day, enhancing user experience by providing a more organized view - Automatically sets read cursor for unread messages and scrolls to the bottom for seamless navigation - Integrates with Redux for state management and React for dynamic UI updates.
index.js	- Exports the ListMessagesContainer component from the ListMessages directory within the client's containers - This component likely handles the display and management of a list of messages within the application's user interface.

SidebarContainer.test_.js	- The SidebarContainer.test_ file in the client/src/containers/Sidebar directory tests the rendering of the SidebarContainer component with specific user and room data - It ensures that the component renders successfully, setting up the foundation for testing the logout functionality in future development.
index.js	- Exports the Sidebar component from the SidebarContainer file in the client-side containers directory - This component likely serves as a key element in the user interface, contributing to the overall structure and functionality of the application.
SidebarContainer.js	- Manages the sidebar interactions in the Slack application, handling user selection, room creation, and channel display - Connects with Redux to manage state and dispatch actions for showing channels, adding channels, and loading indicators - Ensures a seamless user experience by redirecting to the login page if not authenticated.

AddChannelContainer.js	- Manages the creation of new channels in the Slack application, including handling form submissions, user input, and channel validation - Utilizes Redux for state management and integrates with ChatKit for real-time messaging functionality - Supports adding users to channels and setting channel privacy settings.
index.js	Facilitates adding new channels to the sidebar in the project architecture.

ListChannelsContainer.js	- Manages the list of joinable chat rooms, allowing users to filter and join rooms - Updates the list dynamically and handles room joining operations - Interfaces with Redux to manage state and dispatch actions for showing, hiding, and joining rooms.
index.js	Facilitates exporting the ListChannelsContainer from the Sidebar component, contributing to the project's modular architecture.