{"id":20675262,"url":"https://github.com/sobakavosne/visualworm","last_synced_at":"2025-05-10T14:32:08.795Z","repository":{"id":155596925,"uuid":"319873794","full_name":"sobakavosne/visualworm","owner":"sobakavosne","description":"Scandiweb test task: implement a carousel component, demonstrate it","archived":true,"fork":false,"pushed_at":"2021-04-13T11:31:06.000Z","size":19563,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-10T18:40:28.423Z","etag":null,"topics":["carousel-component","node","react","slide","swipes","webpack"],"latest_commit_sha":null,"homepage":"https://sobakavosne.github.io/visualworm","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sobakavosne.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2020-12-09T07:14:57.000Z","updated_at":"2024-10-04T14:00:48.000Z","dependencies_parsed_at":"2023-11-25T15:45:26.336Z","dependency_job_id":null,"html_url":"https://github.com/sobakavosne/visualworm","commit_stats":null,"previous_names":["sobakavosne/visualworm","blin-da-sych/visualworm"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sobakavosne%2Fvisualworm","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sobakavosne%2Fvisualworm/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sobakavosne%2Fvisualworm/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sobakavosne%2Fvisualworm/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sobakavosne","download_url":"https://codeload.github.com/sobakavosne/visualworm/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253428388,"owners_count":21906906,"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":["carousel-component","node","react","slide","swipes","webpack"],"created_at":"2024-11-16T21:09:01.160Z","updated_at":"2025-05-10T14:32:07.967Z","avatar_url":"https://github.com/sobakavosne.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"### Scandiweb Test Task (**[full text one's](https://github.com/lenchevskii/visualworm/blob/main/TASK.md)**)\n\n  **To-do list:**\n\n- [x] Manually configure the environment (Webpack, React)\n- [x] Create a carousel component:\n  - [x] Mobile\n  - [x] Desktop\n  - [x] Swipes\n    - [x] Desktop infinite option\n    - [ ] Mobile infinite option\n  - [x] Work with any HTML content\n  - [x] Animated\n- [ ] Multi-picture referenced post usage ability\n  - [x] Server side\n    - [x] Tests (extra-task option)\n  - [ ] Client side\n    - [ ] Popup windows with desired apply\n    - [ ] Interection interface\n- [x] Demonstrate component in [action](https://lenchevskii.github.io/visualworm/)\n- [x] Make the application' setup explanation\n- [x] Keyboard accessibility (extra-task option)\n- [ ] Connect client side with server side\n- [ ] Deploy server side\n\n**App usage:**\n\nClone a repository:\n\n  ```bash\n  git clone https://github.com/lenchevskii/visualworm.git\n  ```\n\nInstall actual node packages:\n\n  ```bash\n  npm ci\n  ```\n\nRun script to build client side via Webpack bundler:\n\n  ```bash\n  npm run build\n  ```\n\nBecause of using a bundler, the client deploy environment has to have only JS engine to run the project.\n\nThe client's build stored at the `/bundle` directory.\n\nSimplified client deploy was implement through the **GitHub Pages** - [Visual Worm](https://lenchevskii.github.io/visualworm/).\n\n\n**Developing scripts:**\n\nDevelop client under `webpack`:\n\n  ```bash\n  npm run client\n  ```\n\nListen server via `nodemon`:\n\n  ```bash\n  npm run server\n  ```\n\nTest server via `jest`:\n\n  ```bash\n  npm run test\n  ```\n\nTo use the server side, you need to create a `.env` file with your own configuration. (`PORT`, `PASSWD`, .. etc. ).\n\nThe following tips can simplify developer's hard life:\n\n- `jq` utility for terminal pretty print JSON\n\n  ```bash\n  curl -s http://localhost:3001/instagram.worm | jq .\n  ```\n\n- `focus-visible` [polyfill](https://github.com/WICG/focus-visible) allow to use **focus-visiable** pseudo-selector properties in any browser\n\n---\n\n*PS:*\n\n*Carousel component was inspired by [this](https://www.youtube.com/watch?v=Tdpq-9XYoNM) video. The aimed component was rewritten by dint of **`useReducer()`** (instead of **`useState()`**), which allows troubleless working with complex logic inside the state in the future.*\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsobakavosne%2Fvisualworm","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsobakavosne%2Fvisualworm","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsobakavosne%2Fvisualworm/lists"}