{"id":21989289,"url":"https://github.com/truptigaonkar/mandatory-advanced-js1","last_synced_at":"2026-04-15T13:32:22.428Z","repository":{"id":39191425,"uuid":"173700004","full_name":"truptigaonkar/mandatory-advanced-js1","owner":"truptigaonkar","description":"Simple chat application using React and backend server Socket.io (Styling with Reactstrap, Google fonts, Font Awesome)","archived":false,"fork":false,"pushed_at":"2023-01-04T14:37:53.000Z","size":3569,"stargazers_count":0,"open_issues_count":24,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-10-18T19:59:45.562Z","etag":null,"topics":["reactjs","reactstrap","socket-io"],"latest_commit_sha":null,"homepage":"http://truptigaonkar.github.io/mandatory-advanced-js1","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/truptigaonkar.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}},"created_at":"2019-03-04T08:01:07.000Z","updated_at":"2020-04-18T20:42:45.000Z","dependencies_parsed_at":"2023-02-02T16:04:50.605Z","dependency_job_id":null,"html_url":"https://github.com/truptigaonkar/mandatory-advanced-js1","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/truptigaonkar/mandatory-advanced-js1","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/truptigaonkar%2Fmandatory-advanced-js1","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/truptigaonkar%2Fmandatory-advanced-js1/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/truptigaonkar%2Fmandatory-advanced-js1/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/truptigaonkar%2Fmandatory-advanced-js1/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/truptigaonkar","download_url":"https://codeload.github.com/truptigaonkar/mandatory-advanced-js1/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/truptigaonkar%2Fmandatory-advanced-js1/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31842867,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-15T13:28:40.153Z","status":"ssl_error","status_checked_at":"2026-04-15T13:28:29.396Z","response_time":63,"last_error":"SSL_read: 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":["reactjs","reactstrap","socket-io"],"created_at":"2024-11-29T19:28:44.540Z","updated_at":"2026-04-15T13:32:22.412Z","avatar_url":"https://github.com/truptigaonkar.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## Simple Chat Application - Advanced JavaScript with React  - [Live Demo]( http://truptigaonkar.github.io/mandatory-advanced-js1/)\n\n![mandatory-advanced-js1](https://user-images.githubusercontent.com/14937374/79670724-5acac500-81c5-11ea-9dc5-a875e24d6d8c.gif)\n\n### Instructions\n* Create a simple chat application using React and backend server - Socket.io server is provided http://mandatory-advanced-js1.devspace.host/.\n* Socket.io is a library that enables real-time communication between a client and a server. The client and server communicates by sending and receiving events. Please refer to the documentation for more information. https://socket.io/docs/\n\n#### Technologies\n- Node\n- React\n- Backend: Socket.io library (https://socket.io/docs/ )\n- reactstrap (https://reactstrap.github.io/)\n\n#### Installation\n**REACT**\n```\n  $ git clone git@github.com:truptigaonkar/mandatory-advanced-js1.git\n  $ cd mandatory-advanced-js1.git\n  $ npm install\n  $ npm start\n```\n**Express**\n```\n  $ node server/server.js\n  $ npm start\n```\n#### Events\nThe server sends the following events\n* messages - This event is sent automatically when a client connects and will give a list of all messages on the server\n* new_message - This event is sent to all clients (except the sender) when a new message is sent to the server\n* A message sent from the server has the following structure\n```\n{\n    username: “A username”,\n    content: “A message”,\n    timestamp: 1551191228686, // A timestamp in milliseconds\n    id: “message-120”, // A unique ID\n}\n```\n* To send a new message to the server an event called “message” is sent from the client. The message should have the following form: \n```\n{\n    username: “A username”,\n    content: “A message”,\n}\n```\n#### The client\n* Your task is to implement a client for this server. The client should be implemented using React and contain two views:\n    * A “login” screen where the user inputs a username\n    * A “chat” screen that shows all the messages and contains a text input field where the user can add new messages\n* When sending a new message to the server it will not be returned to the sender (it’s only sent to all other connected clients) but it must still be shown in the client.\n#### Validation\n* The server has some limitations on the username and content\n    * The username can only contain alphanumeric characters, “-”, “_” and spaces and must be between 1 and 12 characters long\n    * The content must be between 1 and 200 characters long\n* This validation should be added to the client.\n#### Emojis\nThe client should handle emojis, similar to how it works in Slack.\n    * E.g. if the message contains the string “:heart:” it should be replaced with a heart emoji. You are required to support at least three different emojis.\n#### Links\nIf a message contains a URL it should be automatically converted to a link.\n#### Requirements\n* If a message contains a URL it should be automatically converted to a link.\n* It should contain a “login” screen with a text input and a button. This screen is shown when the app is opened. \n* When a username is submitted the user is shown a “chat” screen with a text input for sending messages and a list of messages.\n* The message list should be populated with the messages received from the server and new messages should be added automatically (including messages sent from the client) \n* The chat screen should contain a “close” button so the user can return to the “login” screen. \n* Support for emojis. \n* Automatically convert URLs into links \n#### My Contribution:\n- [x] styling\n    - [x]  reactstrap\n    - [x]  Google Font\n    - [x]  Font Awesome\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftruptigaonkar%2Fmandatory-advanced-js1","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftruptigaonkar%2Fmandatory-advanced-js1","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftruptigaonkar%2Fmandatory-advanced-js1/lists"}