{"id":19921320,"url":"https://github.com/lukasandreano/vkma-boilerplate","last_synced_at":"2025-05-03T06:31:21.458Z","repository":{"id":145998109,"uuid":"486274289","full_name":"LukasAndreano/vkma-boilerplate","owner":"LukasAndreano","description":"Стартовый кит (шаблон) для создания сервиса на платформе VK Mini Apps.","archived":false,"fork":false,"pushed_at":"2024-10-21T06:24:47.000Z","size":683,"stargazers_count":3,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-07T12:49:27.930Z","etag":null,"topics":["react","react-router","recoil","swipeback","vite","vkma","vkminiapps","vkui"],"latest_commit_sha":null,"homepage":"https://lukasandreano.github.io/vkma-boilerplate/","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/LukasAndreano.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","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":"2022-04-27T16:40:44.000Z","updated_at":"2024-10-21T06:24:22.000Z","dependencies_parsed_at":null,"dependency_job_id":"24b77ccf-eb79-40d8-abe7-fc0c0fc4fb02","html_url":"https://github.com/LukasAndreano/vkma-boilerplate","commit_stats":null,"previous_names":[],"tags_count":3,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LukasAndreano%2Fvkma-boilerplate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LukasAndreano%2Fvkma-boilerplate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LukasAndreano%2Fvkma-boilerplate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LukasAndreano%2Fvkma-boilerplate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/LukasAndreano","download_url":"https://codeload.github.com/LukasAndreano/vkma-boilerplate/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252154738,"owners_count":21702983,"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":["react","react-router","recoil","swipeback","vite","vkma","vkminiapps","vkui"],"created_at":"2024-11-12T22:07:15.462Z","updated_at":"2025-05-03T06:31:17.969Z","avatar_url":"https://github.com/LukasAndreano.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Шаблон для создания сервиса на платформе VK Mini Apps\n\n### Краткое описание\n\nЭто стартовый кит (шаблон) для создания сервиса на платформе [VK Mini Apps](https://vk.com/services).  \nЦель этого кита - ускорить создание сервисов, которые не требуют отдельных UI-компонентов.\n\nИспользуемые в технологии / библиотеки / фреймворки:\n\n- [React](https://reactjs.org/)\n- [Recoil](https://recoiljs.org/)\n- [VKMA Router](https://github.com/reyzitwo/react-router-vkminiapps)\n\n### ⚙️ Начало работы\n\nСклонируйте репозиторий в нужную вам директорию:\n\n```bash\ngit clone https://github.com/LukasAndreano/vkma-boilerplate.git \u003cname\u003e\n```\n\nУстановите зависимости и запустите приложение:\n\n```bash\ncd \u003cname\u003e\nyarn\nyarn dev\n```\n\nДалее перейдите в **настройки** сервиса и в адресе разработки (web \u0026 mvk) укажите:\n\n```\nhttp://localhost:3000\n```\n\n### 💡 Принцип работы со стейтом (Recoil)\n\nКаждая группа должна содержать свой атом _(storage/atoms/\u003cname\u003e.js)_, который не будет выходить за рамки этой группы или, в крайнем случае, только для модалок.\n\nПример атома в _(storage/atoms/main.js)_\n\n### 📚 Как работать с группами (панелями/экранами)\n\nУ каждой группы есть своя директория в _panels_, например: _panels/home_.\n\nВ группах присутствует главный экран - _{panelName}.js_ и другие дополнительные: _anyScreenName.js_.\n\nВ каждом компоненте могут присутствовать блоки, которые необходимо вынести в отдельный компонент, чтобы сохранить нормальную логическую структуру и не перегрузить этот самый компонент.\n\nНазвания таких компонентов должно начинаться с маленькой буквы. Например: usersStatistic.js.\n\nТакже присутствуют общие группы _(в components)_ со следующими названиями:\n\n- \\_\\_global\n- \\_\\_navigation\n\nМодалки не привязаны к общим группам и имеют свою собственную директорию в _modals_.\n\nВсе эти разделы содержат в себе основные для работы приложения компоненты: навигация, а также **глобальные компоненты** (компоненты, которые могут быть переиспользованы n-ное количество раз в абсолютно разных частях приложения без привязки к группе компонентов).\n\n### 📺 Модалки\n\nДля создания модальных страниц _(ModalPage)_ используется специальный конструктор: **ModalConstructor**, а для модальных карточек _(ModalCard)_: **CardConstructor**.\n\nПрименение ModalConstructor:\n\n```javascript\n\u003cModalConstructor id=\"start\" title=\"Заголовок\" close={toBack}\u003e\n  Любой children\n\u003c/ModalConstructor\u003e\n```\n\nПрименение CardConstructor:\n\n```javascript\n\u003cCardConstructor\n  id=\"start\"\n  close={toBack}\n  title=\"Заголовок\"\n  icon={\u003cIcon56DonateOutline /\u003e}\n\u003e\n  Любой children\n\u003c/CardConstructor\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flukasandreano%2Fvkma-boilerplate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flukasandreano%2Fvkma-boilerplate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flukasandreano%2Fvkma-boilerplate/lists"}