{"id":15154530,"url":"https://github.com/goldipl/react-cms-component","last_synced_at":"2026-01-20T15:33:27.364Z","repository":{"id":236930807,"uuid":"791905849","full_name":"goldipl/react-cms-component","owner":"goldipl","description":"React.js CMS component written using React.js, TypeScript, Tailwind CSS.","archived":false,"fork":false,"pushed_at":"2024-05-16T07:26:39.000Z","size":8824,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-07T11:48:02.844Z","etag":null,"topics":["cms-component","react-js","tailwind-css","typescript"],"latest_commit_sha":null,"homepage":"https://goldipl.github.io/react-cms-component/","language":"TypeScript","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/goldipl.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":"2024-04-25T15:45:00.000Z","updated_at":"2024-10-10T11:10:29.000Z","dependencies_parsed_at":"2024-05-16T08:38:49.163Z","dependency_job_id":null,"html_url":"https://github.com/goldipl/react-cms-component","commit_stats":null,"previous_names":["goldipl/react-cms-component"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/goldipl/react-cms-component","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/goldipl%2Freact-cms-component","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/goldipl%2Freact-cms-component/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/goldipl%2Freact-cms-component/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/goldipl%2Freact-cms-component/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/goldipl","download_url":"https://codeload.github.com/goldipl/react-cms-component/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/goldipl%2Freact-cms-component/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28606142,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-20T14:45:23.139Z","status":"ssl_error","status_checked_at":"2026-01-20T14:44:16.929Z","response_time":117,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: 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":["cms-component","react-js","tailwind-css","typescript"],"created_at":"2024-09-26T17:41:10.491Z","updated_at":"2026-01-20T15:33:27.348Z","avatar_url":"https://github.com/goldipl.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React.js CMS component\n\nReact.js CMS component written using React.js, TypeScript, Tailwind CSS.\n\nUsed technlogies:\n\n- React.js\n- TypeScript\n- Tailwind CSS\n\nThere are clickable all of 5 sidebar modals. 4 of them are filled with sample texts but all of them has clickable elements like close icon.\n\nThe full function of the task is included in the `SidebarTagsModal.tsx` component.\n\nYou can use the search input to find the tags you are interested in by typing a particular letter, these tags will be displayed according to the characters you type, after selecting the tags. You click the save button to save the tags, then you will get the information depending on the number of selected tags.\n\nThe component has been styled using Tailwind CSS while maintaining RWD principles, so it displays well on desktop as well as mobile devices.\n\nSample tags were created in the json file located in `/src/data/tags.json`. You can see all of them below:\n\n```json\n[\n  { \"id\": 1, \"name\": \"Gwiazda\", \"checked\": false },\n  { \"id\": 2, \"name\": \"Sejm\", \"checked\": false },\n  { \"id\": 3, \"name\": \"Jarosław Kaczyński\", \"checked\": false },\n  { \"id\": 4, \"name\": \"PiS\", \"checked\": false },\n  { \"id\": 5, \"name\": \"Wybory\", \"checked\": false },\n  { \"id\": 6, \"name\": \"Wakacje\", \"checked\": false },\n  { \"id\": 7, \"name\": \"Majówka\", \"checked\": false },\n  { \"id\": 8, \"name\": \"PO\", \"checked\": false },\n  { \"id\": 9, \"name\": \"Wyjazd\", \"checked\": false },\n  { \"id\": 10, \"name\": \"Kodowanie\", \"checked\": false },\n  { \"id\": 11, \"name\": \"Wybory prezydenckie\", \"checked\": false },\n  { \"id\": 12, \"name\": \"Wybory parlamentarne\", \"checked\": false }\n]\n```\n\nLet's move on to discuss the main functionality.\nThe `\u003cSidebarTagsModal /\u003e` has been divided into 3 minor components that make up the full functionality.\n\n- `\u003cSidebarTagsModal /\u003e` - modal creates a main structure containing a modal template with a title and a hook to hide the modal \u0026 include main tag component named TagsComponent\n- `\u003cTagsComponent /\u003e` - component contains the other 2 components:\n\n  - `\u003cTagsOptions /\u003e` - the component responsible for 3 functions such as: CMS AI (currently unavailable), text analysis \u0026 the most popular tags\n  - `\u003cTagsQuality /\u003e` - component, which is used to evaluate the number of selected tags according to a 5-degree scale.\n\n## How to run locally?\n\nMake sure you are in the project folder `react-cms-component`, if no then go into the project folder\n\n```bash\ncd './react-cms-component'\n```\n\nType:\n\n```bash\nnpm i\nnpm run dev\n```\n\nand open\n\n```bash\nhttp://localhost:5173/\n```\n\n## Live link\n\nhttps://goldipl.github.io/react-cms-component/\n\n## Project preview in `.gif` file - desktop version\n\n\u003cimg src=\"./src/assets/gif/tags-component-desktop.gif\"\u003e\n\n## Project preview in `.gif` file - mobile version\n\n\u003cimg src=\"./src/assets/gif/tags-component-mobile.gif\" width=\"300\"\u003e\n\n### Target functionality to be achieved:\n\n![screenshot](./src/assets/screenshots/component.jpg)\n\n## Configuration info - Expanding the ESLint configuration\n\nIf you are developing a production application, we recommend updating the configuration to enable type aware lint rules:\n\n- Configure the top-level `parserOptions` property like this:\n\n```js\nexport default {\n  // other rules...\n  parserOptions: {\n    ecmaVersion: \"latest\",\n    sourceType: \"module\",\n    project: [\"./tsconfig.json\", \"./tsconfig.node.json\"],\n    tsconfigRootDir: __dirname,\n  },\n};\n```\n\n- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`\n- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`\n- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` \u0026 `plugin:react/jsx-runtime` to the `extends` list\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgoldipl%2Freact-cms-component","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgoldipl%2Freact-cms-component","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgoldipl%2Freact-cms-component/lists"}