RapidChat is a real-time chat application built using Socket.IO and Next.js 14. It provides users with a seamless chatting experience along with several features to enhance communication.
- CLERK Authentication: Implement CLERK Authentication for sign-up and sign-in.
- User Management: Logged in users can view a list of all registered users in the application.
- Chat Functionality:
- Users can add other users to their chats list to start chatting.
- Support for one-to-one and group chats.
- Profile Management:
- Users can update their profile picture.
- Create and edit groups.
- Unread Messages Count: Users can see the unread messages count in the chats list for every chat.
- Real-Time Communication:
- Integration of Socket.IO for real-time chat functionalities.
- Send and receive messages in real-time.
- Typing Indicators: Recipient users can see the typing animation when a user is typing in the chat.
- Read Receipts: Provides read receipts functionality for messages.
- .eslintrc.json
- .gitignore
- README.md
- next.config.mjs
- package-lock.json
- package.json
- postcss.config.js
- public
- chatlogo.webp
- next.svg
- vercel.svg
- src
- app
- (private)
- _chat-components
- chat-area
- image-selector.tsx
- index.tsx
- message.tsx
- messages.tsx
- new-message.tsx
- recipient-info.tsx
- recipient.tsx
- chats
- chat-card.tsx
- chats-header.tsx
- chats-list.tsx
- index.tsx
- new-chat-modal.tsx
- chat-area
- groups
- _components
- group-form.tsx
- create-group
- loading.tsx
- page.tsx
- edit-group
- [id]
- page.tsx
- loading.tsx
- [id]
- _components
- page.tsx
- _chat-components
- favicon.ico
- globals.css
- layout.tsx
- loading.tsx
- sign-in
- [[...sign-in]]
- page.tsx
- [[...sign-in]]
- sign-up
- [[...sign-up]]
- page.tsx
- [[...sign-up]]
- (private)
- components
- loader.tsx
- config
- db-config.ts
- firebase-config.ts
- socket-config.ts
- helpers
- date-format.ts
- image-upload.ts
- interfaces
- index.ts
- middleware.ts
- models
- chat-model.ts
- message-model.ts
- user-model.ts
- providers
- layout-components
- content.tsx
- current-user-info.tsx
- header.tsx
- layout-provider.tsx
- redux-provider.tsx
- theme-provider.tsx
- layout-components
- redux
- chatSlice.ts
- store.ts
- userSlice.ts
- server-actions
- chat.ts
- messages.ts
- users.ts
- app
- tailwind.config.ts
- tsconfig.json
- Next.js 14: Utilized for building the frontend of the application.
- Socket.IO: Integrated for real-time communication between users.
- Firebase: Used for backend services like authentication and database.
- Redux: Implemented for managing application state.
- Tailwind CSS: Used for styling and UI design.
- Ant Design: Employed for UI components and design elements.
- CLERK: Implemented for authentication purposes.
To run RapidChat locally, follow these steps:
-
Clone the repository:
git clone https://github.com/yourusername/rapidchat.git
-
Install dependencies:
cd rapidchat npm install
-
Configure CLERK authentication by following the instructions in the CLERK.md file.
-
Start the development server:
npm run dev
-
Open your browser and navigate to http://localhost:3000 to access RapidChat.
- Sign up or sign in: Use CLERK authentication to sign up or sign in to the application.
- Explore Users: Once logged in, explore the list of registered users available in the application.
- Start Chatting: Add users to your chats list to start chatting. You can initiate one-to-one or group chats.
- Manage Profile: Update your profile picture and manage groups as needed.
- Real-Time Communication: Enjoy real-time communication with other users. Messages are sent and received instantly.
- Typing Indicators: See typing indicators when another user is typing in the chat.
- Read Receipts: Track message read receipts to know when your message has been seen by the recipient.