ChatLink is a sleek, real-time messaging web app featuring customizable profiles and secure authentication. Built with Node.js, Express, Socket.io, and PostgreSQL on the backend, and a responsive React frontend with TypeScript.
🌐 Live Demo: chatlink.my.to
- Registration via email 📧 and JWT login 🔑.
- Search users by email or username 🔍.
- Profile Information: Name, email, username, bio, and profile picture 📸.
- Profile Picture: Upload, update, and validate image size/type 🖼️.
- Activity Status: Online/offline display🌐.
- Profile Updates: Edit details like username, email with validation ✏️.
- One-on-One Messaging: Real-time text messaging with timestamps ⏰.
- Typing Indicators: Notify when a user is typing ⌨️.
- Message Status: Delivery status (sent, delivered, read) with optional read receipts ✅.
- Live messaging using Socket.IO ⚡.
- Instant updates for message delivery, read status, and typing indicators 📲.
- Live presence status (online/offline) 🟢🔴.
ChatLink is powered by a modern, scalable, and developer-friendly tech stack! Here's what makes it awesome:
- React: For building dynamic and responsive user interfaces.
- Redux Toolkit: For state management of the app.
- Shadcn: For styled components and elegant UI.
- Tailwind CSS: For fast and flexible styling.
- Node.js: A robust runtime for building the server.
- Express.js: To create a seamless API for communication.
- Socket.io: Enabling real-time chat functionality.
- PostgreSQL: A powerful relational database for secure data storage.
- Supabase: For real-time updates and simplified database management.
- Zod: Ensures reliable and clean data validation.
- AWS EC2: To host the backend for reliable performance.
- AWS S3: To store profile pictures and other user-uploaded content.
- AWS: Cloud computing services, including EC2 and S3 for hosting and storage.
- GitHub Actions: CI/CD automation for continuous integration and deployment pipelines.
- Docker: Containerization for consistent environments across development, testing, and production.
- TypeScript: Ensuring type safety and maintainability throughout the project.
Follow these simple steps to set up ChatLink on your local environment.
Before starting, make sure you have the following installed:
- Node.js (LTS version recommended)
- A working PostgreSQL database (for the backend).
-
Clone the Project
Open your terminal and run the following commands:git clone https://github.com/rahul4019/Chatlink.git cd chatlink -
Set Up Environment Files
-
Inside the root directory, you will see two folders: api and client.
-
Navigate to the api folder:
cd apiCreate a .env file by copying the content from .api.env.example:
cp ..api.env.example .env
-
Obtain your credentials by creating an account on the respective websites.
-
Replace env variables with your credentials
-
Navigate to the client folder:
cd ../clientCreate a .env file here too by copying the content from .client.env.example:
cp .client.env.example .env
-
-
Run the API and Client
-
First, navigate to the api directory to start the backend server:
cd api npm install npm run dev -
Open a new terminal window, navigate to the client directory, and start the frontend:
cd client npm install npm run dev
-
-
Open the Application
- Once both the API and client are running, open your browser and go to: http://localhost:5173
- You should now see the ChatLink web app! 🎉
We welcome contributions to ChatLink! Here's how you can get involved:
-
Fork and clone the repository:
Fork this repo and clone it to your local machine to start working. -
Create a new branch:
Create a branch for your changes (e.g.,feature-add-chat-notifications). -
Submit a Pull Request:
After making your changes, push your branch and create a Pull Request to the main repository.
💡 If you get stuck, feel free to reach out!
- Open an issue for help or tag me (@rahul4019) in your PR.
- You can also contact me at rahuldevstack@gmail.com.
Let's make ChatLink even better together! 🚀