{"id":19280482,"url":"https://github.com/shubhamsinha21/chatapp-interface","last_synced_at":"2026-04-16T05:03:40.060Z","repository":{"id":211055171,"uuid":"727939753","full_name":"shubhamsinha21/chatApp-interface","owner":"shubhamsinha21","description":"Chat Application Interface with Responsiveness","archived":false,"fork":false,"pushed_at":"2023-12-06T10:06:29.000Z","size":100,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-01-05T16:40:11.494Z","etag":null,"topics":["chakraui","nextjs","reacticons","reactjs","reactrouterdom"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/shubhamsinha21.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}},"created_at":"2023-12-05T22:19:51.000Z","updated_at":"2024-12-15T12:10:56.000Z","dependencies_parsed_at":"2023-12-06T11:13:08.558Z","dependency_job_id":null,"html_url":"https://github.com/shubhamsinha21/chatApp-interface","commit_stats":null,"previous_names":["shubhamsinha21/chat-interface","shubhamsinha21/chatapp-interface"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shubhamsinha21%2FchatApp-interface","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shubhamsinha21%2FchatApp-interface/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shubhamsinha21%2FchatApp-interface/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shubhamsinha21%2FchatApp-interface/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/shubhamsinha21","download_url":"https://codeload.github.com/shubhamsinha21/chatApp-interface/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240385235,"owners_count":19792980,"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":["chakraui","nextjs","reacticons","reactjs","reactrouterdom"],"created_at":"2024-11-09T21:18:43.938Z","updated_at":"2026-04-16T05:03:40.032Z","avatar_url":"https://github.com/shubhamsinha21.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## Chat Interface App\n\n# This is a chat interface 💻 web application built using Next.js 🌟 and Chakra UI. The combination of Next.js and Chakra UI provides a powerful and efficient framework for building React applications with enhanced developer experience and responsive design.\n\n\n Lets have a look of the ChatApp Interface 🙂 - \n \n\n![chat-interface](https://github.com/shubhamsinha21/chatApp-interface/assets/84564814/45a23249-9c6c-464a-8620-5b96ba53f517)\n\n\nDeployed Link - https://chatinterfaceapp.netlify.app/\n\n## Main Components 🤔\n\n1. NavBar:\n -  Displays a navigation bar with a logo, explore, create, edit, and login button.\n\n2. ChatList:\n - Lists all chats on the left side.\n - Each chat entry includes the sender's image and name.\n   \n3. ChatWindow:\n - Displays selected chat details on the right side.\n - Sender's image and name appear on the left side.\n - Messages displayed with alternating background colors for sender and recipient.\n\n## Project Structure \n![fp](https://github.com/shubhamsinha21/chatApp-interface/assets/84564814/6ec5e3d5-d2e7-4de8-90ad-d45b7e01befc)\n\n\n## Features 💁‍♂️\n\n1. Server-Side Rendering (SSR):\n - Utilizes Next.js for server-side rendering, improving performance and SEO.\n   \n2. Chakra UI for Styling:\n - Uses Chakra UI for styling components, providing a customizable and consistent design system.\n\n3. Navbar:\n - Simple navigation with a logo, explore, create, edit, and login button.\n   \n4. Chat List:\n - Displays a list of chats on the left side.\n - Each chat entry includes the sender's image and name.\n - Clicking on a chat opens the corresponding chat window on the right side.\n   \n5. Chat Window:\n - Presents selected chat details with a responsive design.\n - Sender's image and name appear on the left side.\n - Messages displayed with alternating background colors for sender and recipient.\n - Responsive design for both desktop and mobile views.\n   \n6. Responsive Design:\n - Ensures a fully responsive design for a seamless experience on various devices.\n - On desktop, both the chat list and chat window are visible.\n - On mobile, only the chat list is initially visible. Clicking a chat opens the chat window.\n\n## How to Run on your PC 👇🏻\n\n1. Clone the repository: \n\n   ```bash\n   git clone \u003crepository-url\u003e\n   cd \u003crepository-folder\u003e\n\n2. Install Dependencies\n   \n   npm install\n\n4. Run the application\n   \n   npm start\n\n\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshubhamsinha21%2Fchatapp-interface","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fshubhamsinha21%2Fchatapp-interface","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshubhamsinha21%2Fchatapp-interface/lists"}