{"id":25838113,"url":"https://github.com/alok-x0s1/learning-ws","last_synced_at":"2026-05-07T01:04:11.176Z","repository":{"id":268454565,"uuid":"872414872","full_name":"alok-x0s1/Learning-ws","owner":"alok-x0s1","description":"In the path of learning about Websocket, I build a real time chat application named ChatNexus. It supports instant messaging with efficient connection management for multiple users. Helped me gain hands-on experience with WebSocket for real-time communication.","archived":false,"fork":false,"pushed_at":"2024-10-14T11:58:32.000Z","size":1841,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-01T03:41:19.256Z","etag":null,"topics":["express","react","typescript","websocket"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/alok-x0s1.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":"2024-10-14T11:56:45.000Z","updated_at":"2024-10-15T14:20:44.000Z","dependencies_parsed_at":"2024-12-18T05:10:08.531Z","dependency_job_id":null,"html_url":"https://github.com/alok-x0s1/Learning-ws","commit_stats":null,"previous_names":["alok-x0s1/learning-ws"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/alok-x0s1/Learning-ws","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alok-x0s1%2FLearning-ws","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alok-x0s1%2FLearning-ws/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alok-x0s1%2FLearning-ws/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alok-x0s1%2FLearning-ws/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/alok-x0s1","download_url":"https://codeload.github.com/alok-x0s1/Learning-ws/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alok-x0s1%2FLearning-ws/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":273423227,"owners_count":25103140,"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","status":"online","status_checked_at":"2025-09-03T02:00:09.631Z","response_time":76,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["express","react","typescript","websocket"],"created_at":"2025-03-01T03:40:40.123Z","updated_at":"2026-05-07T01:04:11.123Z","avatar_url":"https://github.com/alok-x0s1.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Chat Nexus\n\n**Chat Nexus** is a real-time chatting application built using WebSocket. This project is divided into two main sections: the frontend and the backend. The frontend provides a user-friendly interface for creating chat rooms and sending messages, while the backend handles the real-time communication between multiple users.\n\n## Tech Stack\n\n-   **Frontend**: React Js, Vite, Tailwind CSS\n-   **Backend**: Node Js, Express Js, TypeScript, WebSocket\n-   **Database**: MongoDB\n\n## Features\n\n-   Create chat rooms with unique links.\n-   Custom username support.\n-   Real-time communication using WebSocket.\n-   Responsive UI with testimonials, headers, and contact sections.\n-   Dynamic room creation and user management.\n\n## Project Structure\n\nThe project is divided into two main folders:\n\n1. `frontend`: Contains the React-based user interface.\n2. `backend`: Handles the server logic and WebSocket communication.\n\nAnd a `Readme.md` for guidance.\n\n## ⚡ Getting Started\n\n### Prerequisites\n\n-   Node.js\n-   npm / yarn\n\n### 1. Clone the Repository\n\n```bash\ngit clone https://github.com/alok-x0s1/Learning-ws.git\ncd Learning-ws\n```\n\n### 2. Backend Setup\n\n1. Navigate to the `backend` folder:\n    ```bash\n    cd backend\n    ```\n2. Install dependencies:\n    ```bash\n    npm install\n    ```\n3. Create a `.env` file in the `backend` directory and add the following environment variables:\n    ```\n    PORT=8000\n    DB_URL=\u003cYOUR_MONGODB_CONNECTION_STRING\u003e\n    FRONTEND_URL=http://localhost:5173\n    ```\n4. Configure `package.json` scripts to build and run the backend:\n    ```json\n    \"scripts\": {\n      \"build\": \"tsc -b\",\n      \"dev\": \"node dist/index.js\"\n    }\n    ```\n5. Start the backend server:\n    ```bash\n    npm run build\n    npm run dev\n    ```\n\n### 3. Frontend Setup\n\n1. Navigate to the `frontend` folder:\n    ```bash\n    cd ../frontend\n    ```\n2. Install dependencies:\n    ```bash\n    npm install\n    ```\n3. Create a `.env` file in the `frontend` directory and add the following environment variables:\n    ```\n    VITE_BACKEND_URL=http://localhost:8000\n    VITE_BACKEND_WS_URL=ws://localhost:8000\n    VITE_FRONTEND_URL=http://localhost:5173\n    ```\n4. Start the frontend server:\n    ```bash\n    npm run dev\n    ```\n\n### 4. Running the Application\n\n1. Open your browser and go to `http://localhost:5173`\n2. You will see a homepage with the following sections -\n\n    - **Header and Footer**: Navigation and contact details.\n    - **Featured**: Special highlights and features of Chat Nexus.\n    - **Testimonials**: User feedback and app highlights.\n    - **Contact Section**: Ways to reach out.\n\n![Home Page](./frontend/public/home.png)\n\n1. Click on **\"Create Room\"** to create a room for chatting.\n    - Then you will be directed to this page to create a room.\n    - You can either give a unique name for chat room or click on create room, a unique id will be generated if you don't give any custom URL.\n\n![Create room](./frontend/public/create-room.png)\n\n-   Provide a **custom name** (optional) and copy the generated room link.\n\n![Created room](./frontend/public/room-created.png)\n\n-   Share the link with others or enter the room to start chatting in real time.\n-   After Click on `Go to room` You have to enter you name. Then click on `Enter Chat Room`\n\n![Enter username](./frontend/public/name.png)\n\n-   Then the final chat room look like this 👇\n\n![Create room](./frontend/public/chat.png)\n\n## 📁 Folder Structure\n\n```\nchat-nexus/\n│\n├── backend/\n│   ├── dist/          # Compiled JS files\n│   ├── src/           # TypeScript source code\n│   ├── package.json   # Backend dependencies and scripts\n│   └── README.md      # Backend documentation\n│\n├── frontend/\n│   ├── public/        # Public assets\n│   ├── src/           # React components and pages\n│   ├── package.json   # Frontend dependencies and scripts\n│   └── README.md      # Frontend documentation\n│\n└── README.md          # Project-level documentation\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falok-x0s1%2Flearning-ws","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falok-x0s1%2Flearning-ws","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falok-x0s1%2Flearning-ws/lists"}