{"id":26548584,"url":"https://github.com/bogdusik/real-time-chat-application","last_synced_at":"2026-04-12T11:38:06.901Z","repository":{"id":283431279,"uuid":"951740832","full_name":"Bogdusik/Real-time-Chat-Application","owner":"Bogdusik","description":"A simple real-time chat application built with Spring Boot, WebSocket (STOMP), PostgreSQL, and React. Allows users to send and receive messages instantly via WebSocket connection. Perfect for learning WebSocket-based communication between frontend and backend.","archived":false,"fork":false,"pushed_at":"2025-03-20T07:07:56.000Z","size":200,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-20T08:22:47.096Z","etag":null,"topics":["postgresql","react","real-time-chat","spring-boot","stomp","websocket"],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Bogdusik.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-03-20T07:02:48.000Z","updated_at":"2025-03-20T07:10:51.000Z","dependencies_parsed_at":"2025-03-21T13:15:27.863Z","dependency_job_id":null,"html_url":"https://github.com/Bogdusik/Real-time-Chat-Application","commit_stats":null,"previous_names":["bogdusik/-real-time-chat-application"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Bogdusik%2FReal-time-Chat-Application","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Bogdusik%2FReal-time-Chat-Application/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Bogdusik%2FReal-time-Chat-Application/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Bogdusik%2FReal-time-Chat-Application/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Bogdusik","download_url":"https://codeload.github.com/Bogdusik/Real-time-Chat-Application/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244914139,"owners_count":20530961,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["postgresql","react","real-time-chat","spring-boot","stomp","websocket"],"created_at":"2025-03-22T06:19:28.429Z","updated_at":"2026-04-12T11:38:06.895Z","avatar_url":"https://github.com/Bogdusik.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Real-Time Chat Application\n\nA full-stack real-time chat application built with Node.js, Express, and React. Features instant messaging via WebSocket (STOMP protocol via SockJS), message persistence in PostgreSQL, and a responsive Material-UI interface. Perfect for learning WebSocket-based communication in a full JavaScript stack.\n\n## Why It's Cool\n\n- **Real-Time Communication**: Instant messaging without page reloads using WebSocket (STOMP via SockJS) for bidirectional communication\n- **Full JavaScript Stack**: Complete full-stack application using Node.js/Express backend and React frontend\n- **Message Persistence**: All messages stored in PostgreSQL database with REST API for fetching message history\n- **Auto-Scroll \u0026 UX**: Smooth user experience with auto-scroll to newest messages and Material-UI components\n- **Comprehensive Testing**: Full test coverage for both backend (Jest/Supertest) and frontend (React Testing Library)\n- **Docker Ready**: Complete Docker Compose setup for easy deployment with PostgreSQL, backend, and frontend services\n\n## Tech Stack\n\n- **Backend**: Node.js 18, Express.js, WebSocket (ws), SockJS, STOMP protocol, PostgreSQL (node-postgres)\n- **Frontend**: React 19, Material-UI (MUI), Stomp.js, SockJS-client\n- **Testing**: Jest, Supertest, React Testing Library\n- **DevOps**: Docker, Docker Compose, Nginx, GitHub Actions (CI/CD)\n\n## How to Run Locally\n\n1. **Clone the repository:**\n   ```bash\n   git clone https://github.com/Bogdusik/Real-Time-Chat-Application.git\n   cd Real-Time-Chat-Application\n   ```\n\n2. **Start with Docker Compose (Recommended):**\n   ```bash\n   docker-compose up -d\n   ```\n   Application will be available at:\n   - Frontend: `http://localhost:3000`\n   - Backend API: `http://localhost:8080`\n\n   **Alternative (Manual Setup):**\n   ```bash\n   # Backend\n   cd server\n   npm install\n   npm start\n   \n   # Frontend (in new terminal)\n   cd chat-frontend\n   npm install\n   npm start\n   ```\n\n3. **Configure environment variables:**\n   Create `.env` file in `server/` directory:\n   ```\n   PORT=8080\n   DB_HOST=localhost\n   DB_PORT=5432\n   DB_NAME=chatdb\n   DB_USER=chatuser\n   DB_PASSWORD=chatpass\n   CORS_ORIGIN=http://localhost:3000\n   ```\n\n\u003e **Important**: Never hardcode secrets. Always use `.env` file for sensitive data.\n\n## Project Structure\n\n```\nReal-Time-Chat-Application/\n├── server/                       # Node.js/Express Backend\n│   ├── src/\n│   │   ├── index.js             # Express server entry point\n│   │   ├── controllers/         # Request handlers\n│   │   │   └── chatController.js\n│   │   ├── database/            # Database connection\n│   │   │   └── db.js\n│   │   ├── models/               # Data models\n│   │   │   └── Message.js\n│   │   └── websocket/           # WebSocket handling\n│   │       └── websocketHandler.js\n│   ├── tests/                   # Backend tests\n│   │   ├── chatController.test.js\n│   │   └── message.test.js\n│   └── package.json\n│\n├── chat-frontend/                # React Frontend\n│   ├── src/\n│   │   ├── App.js               # Main app component\n│   │   ├── Chat.js              # Chat component\n│   │   ├── __tests__/           # Frontend tests\n│   │   │   └── Chat.test.js\n│   │   └── __mocks__/           # Test mocks\n│   │       ├── @stomp/stompjs.js\n│   │       └── sockjs-client.js\n│   ├── public/                  # Static assets\n│   ├── Dockerfile               # Frontend Docker config\n│   └── package.json\n│\n├── src/                          # Spring Boot (legacy/alternative)\n│   └── main/java/                # Java backend code\n│\n├── .github/workflows/            # CI/CD pipelines\n│   └── ci.yml\n│\n├── docker-compose.yml            # Docker Compose configuration\n├── Dockerfile                    # Backend Docker config\n└── package.json                  # Root package.json\n```\n\n## What I Learned\n\n- **WebSocket Communication**: Implemented real-time bidirectional communication using WebSocket with STOMP protocol and SockJS for browser compatibility\n- **Full-Stack JavaScript**: Built complete application with Node.js/Express backend and React frontend, understanding the full request-response cycle\n- **Real-Time Architecture**: Designed system architecture for instant message delivery, broadcasting, and persistence\n- **Database Integration**: Integrated PostgreSQL with Node.js using node-postgres, implementing message storage and retrieval\n- **Testing Strategies**: Wrote comprehensive tests for both backend (API endpoints, WebSocket handlers) and frontend (React components, user interactions)\n- **Docker Deployment**: Containerized full-stack application with Docker Compose, including database, backend, and frontend services\n\nFork it, use it, improve it - open to PRs!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbogdusik%2Freal-time-chat-application","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbogdusik%2Freal-time-chat-application","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbogdusik%2Freal-time-chat-application/lists"}