{"id":20078729,"url":"https://github.com/wpdas/tech_task_docler","last_synced_at":"2025-10-06T00:55:45.255Z","repository":{"id":77498470,"uuid":"177342098","full_name":"wpdas/tech_task_docler","owner":"wpdas","description":"This is a project that is part of Docler's internal recruitment process.","archived":false,"fork":false,"pushed_at":"2019-03-28T03:52:16.000Z","size":887,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-06-03T16:26:48.843Z","etag":null,"topics":[],"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/wpdas.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":"2019-03-23T21:31:34.000Z","updated_at":"2019-03-28T03:55:18.000Z","dependencies_parsed_at":null,"dependency_job_id":"629e5176-3f85-4b7d-ad42-e48bb5aaace3","html_url":"https://github.com/wpdas/tech_task_docler","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/wpdas/tech_task_docler","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wpdas%2Ftech_task_docler","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wpdas%2Ftech_task_docler/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wpdas%2Ftech_task_docler/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wpdas%2Ftech_task_docler/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wpdas","download_url":"https://codeload.github.com/wpdas/tech_task_docler/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wpdas%2Ftech_task_docler/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":278542671,"owners_count":26004061,"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-10-05T02:00:06.059Z","response_time":54,"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":[],"created_at":"2024-11-13T15:16:22.737Z","updated_at":"2025-10-06T00:55:45.223Z","avatar_url":"https://github.com/wpdas.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Tech Task Docler (Docler Chat)\n\nThis is a project that is part of Docler's internal recruitment process.\n\nYou can see the app working for Desktop and Mobile here (video): [Docler Chat (Desktop Mobile)](https://drive.google.com/file/d/1rtgmL86sVZhs93N8G962sEvZlNT-UI8F/view?usp=sharing)\n\n## How it works\n\nThe technology chosen to develop the interface of this application was React and Redux for state management using ES6. As mentioned in the task, the [SocketIO](https://socket.io/) was used in the Backend to create simultaneous connection between several user using socket.\n\nIn the application on the React side, two HOCs were created to help the project serve one to handle the internationalization of the app (i18Provider) and another to handle the connection of the application to the server (socketIOProvider). The `lazy` loader feature from React was also used. This feature was used to enhance the user experience by reducing the time the first content is rendered on the screen.\n\nThe organization chosen for the structure of React and Redux was this:\n\n```\nsrc/\n├── components/\n├── containers/\n└── store/\n    └── chat/\n        ├── actions.js\n        ├── reducer.js\n    └── settings/\n        ├── actions.js\n        ├── reducer.js\n    └── user/\n        ├── actions.js\n        ├── reducer.js\n\n```\n\nAll statefull components were placed inside the container folder while the stateless components were placed in the components folder. Some of the stateless componenes have some treatment within themselves that have been solved using [Hooks](https://reactjs.org/docs/hooks-intro.html) for internal state management.\n\nA service has also been created to handle socketIO events throughout the application, that is, the socketService.js file. Through this service, it is possible to easily register listeners for the events returned from the server and also send data.\n\nEvents of this service: \u003cbr/\u003e\n`onConnect` - After user connect to the server \u003cbr/\u003e\n`onFriendEnter` - When a friend enter to the chat \u003cbr/\u003e\n`onFriendSendMessage` - When receive message from some friend into the chat \u003cbr/\u003e\n`onFriendChangeName` - When someone in the chat change his/her name \u003cbr/\u003e\n`onReceiveBackgroundMessage` - Dispatched when user is not in the Chat screen \u003cbr/\u003e\n\n### Class Style and Theme\n\nSASS was used as a class style preprocessor. Using some of its features, it was possible to abstract some help files into the `theme` folder. Basically we have within the theme the default values that are used throughout the project, then a separate file for the Dark theme (\\_theme_dark.scss). The Ligh theme is the default theme of the application.\n\n## Setup\n\nBefore running the application, it is worthwhile first to look at the `.env.local` file that is at the root of the project. There you find 4 environment variables (at this time was not separated what goes into production or development). The variables are:\n\n```bash\n# Default Socket Port\nSOCKET_PORT=5001\n# HOST ip (optional)\nREACT_APP_SOCKET_HOST=10.0.0.2\n# Default Socket Port - React Side\nREACT_APP_SOCKET_PORT=5001\n# Activates DEBUG on server\nDEBUG=docler_chat, docler_chat:new_user, docler_chat:new_message, docler_chat:user_change_name\n```\n\nThe server's default port is 5001 and it must be entered for the `SOCKET_PORT` variable, so it must also be informed to the variable that goes to React `REACT_APP_SOCKET_PORT`. Because the server can be run elsewhere, a variable has been created that is responsible for informing the host, this is `REACT_APP_SOCKET_HOST`. The `DEBUG` variable is used to enable debugging on the server.\n\nIf you want to run the application on your local network and let others access the application, simply insert the IP of your machine into `REACT_APP_SOCKET_HOST` and everyone on the same network will be able to access the app. If `REACT_APP_SOCKET_HOST` is undefined, the`localhost` value will be used instead.\n\n## Running the Application\n\nOpen the terminal in the project's root directory and type `yarn` to install the dependencies. If you do not have yarn installed, you can run the `npm i -g yarn` command on the terminal. After this step, just run the command `yarn run run_app`. This command will simultaneously execute both the server and the web application.\n\nThe app will be runnig on port 5000. Example: http://localhost:5000 or http://10.0.0.2:5000\n\n## Font Awesome Pro License\n\nThis project is using Font Awesome svg icons. [See this license to know more.](https://fontawesome.com/license)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwpdas%2Ftech_task_docler","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwpdas%2Ftech_task_docler","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwpdas%2Ftech_task_docler/lists"}