{"id":30580049,"url":"https://github.com/stanislavnemch/02-ts-basics","last_synced_at":"2025-10-13T19:39:42.612Z","repository":{"id":310365325,"uuid":"1039568073","full_name":"stanislavNemch/02-ts-basics","owner":"stanislavNemch","description":"Feedback Widget (Віджет відгуків)","archived":false,"fork":false,"pushed_at":"2025-08-17T15:57:50.000Z","size":40,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-08-17T17:33:15.108Z","etag":null,"topics":["app","css-modules","react","typescript","vite"],"latest_commit_sha":null,"homepage":"https://02-ts-basics-alpha.vercel.app","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/stanislavNemch.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,"zenodo":null}},"created_at":"2025-08-17T14:19:19.000Z","updated_at":"2025-08-17T16:01:44.000Z","dependencies_parsed_at":"2025-08-17T17:33:21.793Z","dependency_job_id":"f33c151f-3c00-4e2b-b671-476b5fabc220","html_url":"https://github.com/stanislavNemch/02-ts-basics","commit_stats":null,"previous_names":["stanislavnemch/02-ts-basics"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/stanislavNemch/02-ts-basics","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stanislavNemch%2F02-ts-basics","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stanislavNemch%2F02-ts-basics/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stanislavNemch%2F02-ts-basics/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stanislavNemch%2F02-ts-basics/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/stanislavNemch","download_url":"https://codeload.github.com/stanislavNemch/02-ts-basics/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stanislavNemch%2F02-ts-basics/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":272631632,"owners_count":24967104,"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-08-29T02:00:10.610Z","response_time":87,"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":["app","css-modules","react","typescript","vite"],"created_at":"2025-08-29T05:00:47.591Z","updated_at":"2025-10-13T19:39:37.583Z","avatar_url":"https://github.com/stanislavNemch.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Feedback Widget (Віджет відгуків)\n\nЦе простий, але функціональний віджет для збору відгуків, створений за допомогою React та TypeScript. Користувачі можуть оцінити сервіс, обравши один із трьох варіантів (\"Добре\", \"Нейтрально\", \"Погано\"), і миттєво побачити оновлену статистику.\n\nЦей проєкт є чудовою практикою для початківців, щоб зрозуміти ключові концепції React, такі як керування станом, передача пропсів та умовний рендеринг, а також основи типізації в TypeScript.\n\n---\n\n## 🇺🇦 Українська версія\n\n### ✨ Технології та стек\n\n-   **React**: бібліотека для створення динамічних користувацьких інтерфейсів.\n-   **TypeScript**: додає статичну типізацію до JavaScript, що робить код надійнішим.\n-   **Vite**: сучасний та швидкий інструмент для збирання проєктів.\n-   **CSS Modules**: для локальної стилізації компонентів, що запобігає конфліктам імен класів.\n-   **Modern-normalize**: для скидання та нормалізації стилів браузера.\n\n### 📂 Структура проєкту\n\nПроєкт має чітку компонентну структуру, що полегшує його розуміння та масштабування.\n\n```\n/src\n|-- /components     # Директорія з усіма компонентами\n|   |-- /App        # Головний компонент-контейнер\n|   |-- /CafeInfo   # Компонент з інформацією про кафе\n|   |-- /Notification # Компонент для сповіщень\n|   |-- /VoteOptions  # Компонент з кнопками для голосування\n|   |-- /VoteStats    # Компонент для відображення статистики\n|-- /types          # Директорія для загальних типів TypeScript\n|   |-- votes.ts    # Типи, пов'язані з голосуванням\n|-- main.tsx        # Вхідна точка додатку\n```\n\n\\#\\#\\#🎯 Основні моменти для початківця\n\nПри розробці цього проєкту основний фокус був на наступних аспектах:\n\n1.  **Керування станом**: використання хука `useState` для зберігання та оновлення кількості голосів. Стан централізовано в головному компоненті `App`.\n2.  **Композиція компонентів**: додаток зібрано з невеликих, незалежних компонентів (`CafeInfo`, `VoteOptions`, `VoteStats`), що робить код чистішим і легшим для підтримки.\n3.  **Передача даних через пропси**: дочірні компоненти отримують дані та функції для керування станом від батьківського компонента `App`.\n4.  **Умовний рендеринг**: компонент `VoteStats` відображається, лише якщо є хоча б один відгук. В іншому випадку показується `Notification`. Кнопка \"Reset\" також з'являється за умовою.\n5.  **Основи TypeScript**: застосування інтерфейсів (`interface`) та типів (`type`) для типізації пропсів та стану, що підвищує надійність коду.\n\n---\n\n## 🇬🇧 English Version\n\n### ✨ Technologies \u0026 Stack\n\n-   **React**: A library for building dynamic user interfaces.\n-   **TypeScript**: Adds static typing to JavaScript, making the code more robust.\n-   **Vite**: A modern and fast build tool for web projects.\n-   **CSS Modules**: For locally scoped component styling to prevent class name conflicts.\n-   **Modern-normalize**: For resetting and normalizing browser styles.\n\n### 📂 Project Structure\n\nThe project has a clear component-based structure, making it easy to understand and scale.\n\n```\n/src\n|-- /components     # Directory for all components\n|   |-- /App        # Main container component\n|   |-- /CafeInfo   # Component with cafe information\n|   |-- /Notification # Component for notifications\n|   |-- /VoteOptions  # Component with voting buttons\n|   |-- /VoteStats    # Component for displaying statistics\n|-- /types          # Directory for shared TypeScript types\n|   |-- votes.ts    # Types related to votes\n|-- main.tsx        # Application entry point\n```\n\n### 🎯 Key Focus Points for a Beginner\n\nWhile developing this project, the main focus was on the following aspects:\n\n1.  **State Management**: Using the `useState` hook to store and update the vote counts. The state is centralized in the main `App` component.\n2.  **Component Composition**: The application is built from small, independent components (`CafeInfo`, `VoteOptions`, `VoteStats`), which makes the code cleaner and easier to maintain.\n3.  **Passing Data via Props**: Child components receive data and state management functions from the parent `App` component.\n4.  **Conditional Rendering**: The `VoteStats` component is rendered only if there is at least one vote. Otherwise, the `Notification` component is displayed. The \"Reset\" button also appears conditionally.\n5.  **TypeScript Basics**: Applying interfaces and types to type-check props and state, which improves code reliability.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstanislavnemch%2F02-ts-basics","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstanislavnemch%2F02-ts-basics","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstanislavnemch%2F02-ts-basics/lists"}