Ping is a modern and sleek chat application that utilizes real-time messaging powered by Socket.IO. It provides users with a seamless chatting experience in a visually appealing interface.
- Frontend: React
- Backend: Node.js, Express
- Database: MongoDB
- Styling: Tailwind CSS
- Real-time Communication: Socket.IO
- Language: TypeScript
HomePage
![](https://private-user-images.githubusercontent.com/62910365/328091503-152059c2-42c6-4da5-8322-b941971fcb93.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTk5MTkyMTcsIm5iZiI6MTcxOTkxODkxNywicGF0aCI6Ii82MjkxMDM2NS8zMjgwOTE1MDMtMTUyMDU5YzItNDJjNi00ZGE1LTgzMjItYjk0MTk3MWZjYjkzLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA3MDIlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNzAyVDExMTUxN1omWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWM0MmMwMjllZDU1ZDRmM2QzZDMxNzQ4ZmQ1ZGQ3MDZmNWEyNWIxZTg4ODgzNGNjZDRiYzRiOGY0YTgyM2E5OWUmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.bVsx-4akRghXnT0MMuh06zxWgtHztS5v5Ttk_qEcIBc)
Signup
![](https://private-user-images.githubusercontent.com/62910365/328091685-f7eabb9c-4c25-4b47-a4b1-f78944381be6.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTk5MTkyMTcsIm5iZiI6MTcxOTkxODkxNywicGF0aCI6Ii82MjkxMDM2NS8zMjgwOTE2ODUtZjdlYWJiOWMtNGMyNS00YjQ3LWE0YjEtZjc4OTQ0MzgxYmU2LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA3MDIlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNzAyVDExMTUxN1omWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTE0MWJmNjY3NmJmNDBkNDA4MTk4MmI4YjVjYzFiZmQ1YjE1NzRhYTJlNTZhNTZmNjBkOTk0YTQ5NDQ2ZmJjMmImWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.bgjr6v5l_gyFpC_KmFPlG9tt6LpxdEhAQ9MxeM33EEU)
Login
![](https://private-user-images.githubusercontent.com/62910365/328091592-2634de21-c462-4525-a6b3-a9a7d57958d3.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTk5MTkyMTcsIm5iZiI6MTcxOTkxODkxNywicGF0aCI6Ii82MjkxMDM2NS8zMjgwOTE1OTItMjYzNGRlMjEtYzQ2Mi00NTI1LWE2YjMtYTlhN2Q1Nzk1OGQzLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA3MDIlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNzAyVDExMTUxN1omWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWVjNTg0MjA0Y2E4ZjhlODAzOGQzZDIzZGU5Nzc2Zjk5MTFkNjI0NjQ0YjM5ZjA2OGM3YmQ0OWE4M2NjOTYyZTAmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.wvvcnqCZTvfqPh1aud4yh7mTcAMT0y4p35GYrYmMwhY)
Chat screen
![](https://private-user-images.githubusercontent.com/62910365/328093227-ca18c24f-6fed-42b9-a7db-3a8a5de6c1c8.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTk5MTkyMTcsIm5iZiI6MTcxOTkxODkxNywicGF0aCI6Ii82MjkxMDM2NS8zMjgwOTMyMjctY2ExOGMyNGYtNmZlZC00MmI5LWE3ZGItM2E4YTVkZTZjMWM4LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA3MDIlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNzAyVDExMTUxN1omWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWJmNzI3NTNjYjU4MjM4Y2MxMDFhNThkM2JjMWNkY2E5ZWE3Njg5ZDE0MTJmMjIwYjY2YTg2NjMxMmIwMTgyYzUmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.bZ2aoc_bbhhsNVGJSkP7YS9EwfNfftjWsxac6JM9vC4)
Make sure you have already installed necessary tools such as Node, TypeScript, Nodemon
Frontend
Run the following commands to run the frontend project
$ cd frontend
$ npm install
$ cd frontend
$ npm run dev
Make sure to add .env file at the root of the frontend directory with environment variables
The application should now be running on http://localhost:5173
Backend
Run the following commands to run the backend project
$ cd backend
$ npm install
$ npx tsc && nodemon dist/index.js
Make sure to add .env file at the root of the project with environment variables
The variables include: MONGO_URI (for your MongoDB connection) and JWT_SECRET (for JWT authentication)
The demo application can be accessed on this URL: Ping DemoNote: The backend is deployed on render free tier, the server might be inactive at the time you access it. Give application a minute to receive first response from the server.