{"id":18277066,"url":"https://github.com/kelvinleandro/react-chat-websocket","last_synced_at":"2026-04-07T20:31:47.022Z","repository":{"id":250771290,"uuid":"834824270","full_name":"kelvinleandro/react-chat-websocket","owner":"kelvinleandro","description":"Real-time Chat Application with React (Vite), Socket.IO, and Express","archived":false,"fork":false,"pushed_at":"2024-07-29T19:16:38.000Z","size":1713,"stargazers_count":1,"open_issues_count":0,"forks_count":5,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-23T18:34:55.654Z","etag":null,"topics":["chat-application","chatroom","express","express-js","expressjs","javascript","node","node-js","nodejs","react","reactjs","realtime-chat","socket-io","tailwindcss","typescript","vite","vitejs","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/kelvinleandro.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-07-28T13:28:12.000Z","updated_at":"2024-11-06T00:04:33.000Z","dependencies_parsed_at":null,"dependency_job_id":"d949f229-8f0f-44b9-b3d1-2064db69c45e","html_url":"https://github.com/kelvinleandro/react-chat-websocket","commit_stats":null,"previous_names":["kelvinleandro/react-chat-websocket"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/kelvinleandro/react-chat-websocket","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kelvinleandro%2Freact-chat-websocket","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kelvinleandro%2Freact-chat-websocket/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kelvinleandro%2Freact-chat-websocket/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kelvinleandro%2Freact-chat-websocket/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kelvinleandro","download_url":"https://codeload.github.com/kelvinleandro/react-chat-websocket/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kelvinleandro%2Freact-chat-websocket/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31528311,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-07T16:28:08.000Z","status":"ssl_error","status_checked_at":"2026-04-07T16:28:06.951Z","response_time":105,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":["chat-application","chatroom","express","express-js","expressjs","javascript","node","node-js","nodejs","react","reactjs","realtime-chat","socket-io","tailwindcss","typescript","vite","vitejs","websocket"],"created_at":"2024-11-05T12:18:02.441Z","updated_at":"2026-04-07T20:31:46.994Z","avatar_url":"https://github.com/kelvinleandro.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# SocketGram\n\nSocketGram is a real-time chat application that allows users to join rooms by providing their username and room name. The project leverages modern web technologies to deliver a smooth and responsive chat experience.\n\n## Preview\n\n\u003cimage src=\"login.png\" alt=\"login preview\" width=\"45%\" /\u003e \u003cimage src=\"chat.png\" alt=\"chat preview\" width=\"45%\" /\u003e\n\n## Features\n\n- **Real-time messaging**\n- **Room-based chat**\n- **User-friendly interface**\n\n## Technologies Used\n\n### Frontend\n\n- **Framework**: Vite (React + TypeScript)\n- **Styling**: Tailwind CSS\n\n### Backend\n\n- **Server**: Node.js\n- **Framework**: Express\n- **Real-time Communication**: Socket.IO\n- **Cross-Origin Resource Sharing**: CORS\n\n## Environment Configuration\n\n### Server\n\nIn the `server` folder, there is a `.env` file where you can set the following variables:\n\n- `PORT`: The port on which the server will run (default is `3001`).\n\n- `CORS_ORIGIN`: The origin allowed by CORS (default is `http://localhost:5173`).\n\n### Client\n\nIn the `client` folder, there is a `.env.local` file where you can set the following variables:\n\n- `PORT`: The port where the server is running (default is `3001`).\n- `VITE_SERVER_URL`: The URL of the server if it is deployed somewhere other than the local machine (default is `http://localhost:3001`).\n\n## Setup and Installation\n\n### Installation steps\n\n1. Clone the repository\n    ```bash\n    git clone https://github.com/kelvinleandro/react-chat-websocket.git\n    cd react-chat-websocket\n    ```\n\n2. Install dependencies for the frontend\n    ```bash\n    cd client\n    npm install\n    ```\n\n2. Install dependencies for the backend\n    ```bash\n    cd ../server\n    npm install\n    ```\n\n### Running the Application\n\n1. Start the backend server\n    ```bash\n    cd server\n    npm start\n    ```\n    The server will start on `http://localhost:3001`.\n\n2. Start the frontend development server\n    ```bash\n    cd ../client\n    npm run dev\n    ```\n    The frontend will start on `http://localhost:5173`.\n\n## Usage\n\n1. Open your browser and navigate to http://localhost:5173.\n2. Enter a username and room name to join a chat room.\n3. Start chatting in real-time!","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkelvinleandro%2Freact-chat-websocket","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkelvinleandro%2Freact-chat-websocket","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkelvinleandro%2Freact-chat-websocket/lists"}