{"id":28322532,"url":"https://github.com/kerolesnabiel/realtimechatwebapp","last_synced_at":"2026-04-18T06:32:29.856Z","repository":{"id":267008955,"uuid":"899935516","full_name":"kerolesnabiel/RealTimeChatWebApp","owner":"kerolesnabiel","description":"A modern, real-time chat application frontend with a responsive design, allowing users to manage profiles, search for other users, and exchange messages instantly.","archived":false,"fork":false,"pushed_at":"2024-12-26T15:39:44.000Z","size":151,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-23T21:42:40.772Z","etag":null,"topics":["dasiyui","react","react-query","react-router-dom","signalr","tailwindcss","typescript","vite","websocket","websockets"],"latest_commit_sha":null,"homepage":"https://real-time-chat-webapp.vercel.app/","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/kerolesnabiel.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,"zenodo":null}},"created_at":"2024-12-07T12:23:44.000Z","updated_at":"2025-01-15T22:59:33.000Z","dependencies_parsed_at":"2024-12-24T11:38:42.566Z","dependency_job_id":"b7603d36-6851-4de2-af54-2ce91bf9e2f1","html_url":"https://github.com/kerolesnabiel/RealTimeChatWebApp","commit_stats":null,"previous_names":["kerolesnabill/realtimechatwebapp","kerolesnabiel/realtimechatwebapp"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/kerolesnabiel/RealTimeChatWebApp","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kerolesnabiel%2FRealTimeChatWebApp","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kerolesnabiel%2FRealTimeChatWebApp/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kerolesnabiel%2FRealTimeChatWebApp/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kerolesnabiel%2FRealTimeChatWebApp/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kerolesnabiel","download_url":"https://codeload.github.com/kerolesnabiel/RealTimeChatWebApp/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kerolesnabiel%2FRealTimeChatWebApp/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31959879,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-18T00:39:45.007Z","status":"online","status_checked_at":"2026-04-18T02:00:07.018Z","response_time":103,"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":["dasiyui","react","react-query","react-router-dom","signalr","tailwindcss","typescript","vite","websocket","websockets"],"created_at":"2025-05-25T14:10:14.491Z","updated_at":"2026-04-18T06:32:29.843Z","avatar_url":"https://github.com/kerolesnabiel.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# **RealTimeChatWebApp**\n\nA modern, real-time chat application frontend with a responsive design, allowing users to manage profiles, search for other users, and exchange messages instantly.\n\n## **Features**\n\n- **User Authentication**: Secure signup and login functionality.\n- **Real-Time Messaging**: Powered by SignalR for instant updates.\n- **Profile Management**: Edit user profiles and manage profile images.\n- **Inbox Management**: Search for users, create new chats, and view conversations.\n- **Responsive Design**: Fully functional on desktops, tablets, and mobile devices.\n- **Error Handling**: Clear and user-friendly error messages.\n\n## **Technologies Used**\n\n### Frontend:\n\n- Vite - Fast build tool.\n- React with TypeScript.\n- Tailwind CSS \u0026 DaisyUI for styling.\n- React Query for state management and data fetching.\n\n### Backend:\n\nThis project interacts with a separate backend repository built with:\n\n- ASP.NET Core for RESTful APIs.\n- SignalR for real-time communication.\n- SQL Server for data storage.\n\nThe backend repository can be found here: [RealTimeChatAPI](https://github.com/kerolesnabill/RealTimeChatAPI).\n\n## **Live Demo**\n\nExperience the live demo here: [RealTimeChatWebApp](https://real-time-chat-webapp.vercel.app/)\n\n## **Installation**\n\n### Prerequisites\n\n- [Node.js](https://nodejs.org/)\n- Backend API running from [RealTimeChatAPI](https://github.com/kerolesnabill/RealTimeChatAPI).\n\n### Steps\n\n1. **Clone the Repository**:\n\n   ```bash\n   git clone https://github.com/kerolesnabill/RealTimeChatWebApp.git\n   cd chat-web-app\n   ```\n\n2. **Frontend Setup**:\n\n   ```bash\n   cd frontend\n   npm install\n   npm run dev\n   ```\n\n3. **Backend Setup**:\n   Follow the instructions in the [RealTimeChatAPI](https://github.com/kerolesnabill/RealTimeChatAPI) repository to set up the backend.\n\n4. **Open Application**:\n   Navigate to `http://localhost:3000` in your browser.\n\n## **Usage**\n\n- **Login/Signup**: Create an account or log in with existing credentials.\n- **Inbox**: View conversations, search for users, and start new chats.\n- **Chat Window**: Send real-time messages and view chat history.\n- **Profile Management**: Edit profile information and manage images.\n\n## **API Reference**\n\nThe API documentation is available in the [RealTimeChatAPI](https://github.com/kerolesnabill/RealTimeChatAPI) repository.\n\n## **Architecture Overview**\n\n### Components:\n\n- **`Home.tsx`**: Layout containing `Inbox` and `ChatWindow`.\n- **`Inbox.tsx`**: Displays the list of conversations.\n- **`ChatWindow.tsx`**: Manages real-time messaging.\n- **`Profile.tsx`**: Handles profile editing and image management.\n- **`NewChat.tsx`**: Allows starting new conversations by searching usernames.\n\n## **Responsive Design**\n\n- **Small Screens**:\n\n  - Inbox is toggled using a button.\n  - Chat window adapts to fit smaller devices seamlessly.\n\n- **Large Screens**:\n  - Both Inbox and Chat Window are visible side-by-side.\n\n## **License**\n\nThis project is licensed under the [MIT License](LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkerolesnabiel%2Frealtimechatwebapp","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkerolesnabiel%2Frealtimechatwebapp","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkerolesnabiel%2Frealtimechatwebapp/lists"}