{"id":30580058,"url":"https://github.com/stanislavnemch/05-notehub","last_synced_at":"2026-04-16T10:01:47.502Z","repository":{"id":311228718,"uuid":"1042924904","full_name":"stanislavNemch/05-notehub","owner":"stanislavNemch","description":"NoteHub is a web application for managing personal notes","archived":false,"fork":false,"pushed_at":"2026-03-28T23:37:17.000Z","size":108,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-03-29T01:48:40.334Z","etag":null,"topics":["axios","css-modules","formik-yup","modern-normalize","react","react-hot-toast","react-paginate","tanstack-react-query","typescript","vite"],"latest_commit_sha":null,"homepage":"https://05-notehub-five-jade.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-22T20:09:16.000Z","updated_at":"2026-03-28T23:37:20.000Z","dependencies_parsed_at":"2025-08-23T00:14:47.957Z","dependency_job_id":null,"html_url":"https://github.com/stanislavNemch/05-notehub","commit_stats":null,"previous_names":["stanislavnemch/05-notehub"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/stanislavNemch/05-notehub","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stanislavNemch%2F05-notehub","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stanislavNemch%2F05-notehub/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stanislavNemch%2F05-notehub/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stanislavNemch%2F05-notehub/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/stanislavNemch","download_url":"https://codeload.github.com/stanislavNemch/05-notehub/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stanislavNemch%2F05-notehub/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31880882,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-16T09:23:21.276Z","status":"ssl_error","status_checked_at":"2026-04-16T09:23:15.028Z","response_time":69,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6: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":["axios","css-modules","formik-yup","modern-normalize","react","react-hot-toast","react-paginate","tanstack-react-query","typescript","vite"],"created_at":"2025-08-29T05:00:48.919Z","updated_at":"2026-04-16T10:01:47.484Z","avatar_url":"https://github.com/stanislavNemch.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# NoteHub App\n\n## 🇺🇦 Українська версія\n\n**NoteHub** — це веб-додаток для керування особистими нотатками. Він дозволяє користувачам легко створювати, переглядати, шукати та видаляти нотатки, взаємодіючи з реальним REST API. Цей проєкт створений як навчальна платформа для вивчення сучасного стеку веб-розробки.\n\n### ✨ Основні функції\n\n-   **Створення нотаток**: Форма для додавання нових нотаток з валідацією полів.\n-   **Видалення нотаток**: Можливість видаляти нотатки одним кліком.\n-   **Пагінація**: Зручна навігація по сторінках, якщо нотаток багато.\n-   **Пошук у реальному часі**: Фільтрація нотаток за ключовим словом із затримкою (debounce) для оптимізації запитів до API.\n-   **Модальні вікна**: Сучасний підхід до відображення форм та додаткового контенту.\n\n---\n\n### 💻 Технологічний стек\n\n| Призначення          | Технологія / Бібліотека                              |\n| -------------------- | ---------------------------------------------------- |\n| **Основа**           | React, TypeScript, Vite                              |\n| **Керування станом** | TanStack Query (React Query)                         |\n| **HTTP-запити**      | Axios                                                |\n| **Форми**            | Formik (для керування станом) та Yup (для валідації) |\n| **Стилізація**       | CSS Modules, modern-normalize                        |\n| **Компоненти**       | react-paginate, react-hot-toast                      |\n| **Лінтинг**          | ESLint, TypeScript ESLint                            |\n\n---\n\n### 📂 Структура проєкту\n\nПроєкт має чітку компонентну архітектуру, що спрощує його підтримку та масштабування:\n\n```\nsrc/\n├── components/         # Папка з React-компонентами\n│   ├── App/            # Головний компонент-контейнер\n│   ├── Modal/          # Універсальне модальне вікно\n│   ├── NoteForm/       # Форма створення нотатки\n│   ├── NoteList/       # Список нотаток\n│   ├── Pagination/     # Компонент пагінації\n│   └── SearchBox/      # Поле для пошуку\n├── services/           # Логіка для роботи з API\n│   └── noteService.ts\n├── types/              # Загальні типи TypeScript\n│   └── note.ts\n└── main.tsx            # Вхідна точка додатку\n```\n\n---\n\n### 🚀 Навчальні цілі та фокус для новачка\n\nЦей проєкт був чудовою можливістю для мене, як для новачка, зосередитись на ключових аспектах сучасної React-розробки:\n\n1.  **Робота з TypeScript**: Я навчився строго типізувати компоненти, їх пропси та стан. Це допомогло уникнути багатьох помилок ще на етапі написання коду та покращило його читабельність.\n\n2.  **Керування серверним станом**: Замість традиційного `useState` та `useEffect` для роботи з даними з сервера, я використовував **TanStack Query**. Це дозволило ефективно кешувати дані, автоматично оновлювати їх та керувати станами завантаження і помилок.\n\n3.  **Професійна робота з формами**: Завдяки бібліотекам **Formik** та **Yup**, я реалізував складну логіку форм, включаючи валідацію полів та керування станом відправки, що зробило код чистішим та організованішим.\n\n4.  **Декомпозиція та створення перевикористовуваних компонентів**: Я розробив універсальні компоненти, такі як `Modal` та `Pagination`, які можна легко адаптувати для інших проєктів.\n\n5.  **Оптимізація взаємодії з API**: Реалізація відкладеного пошуку за допомогою хука `useDebounce` стала для мене практичним прикладом того, як покращити досвід користувача та зменшити навантаження на сервер.\n\n## 🇬🇧 English Version\n\n**NoteHub** is a web application for managing personal notes. It allows users to easily create, view, search, and delete notes by interacting with a real REST API. This project was built as a learning platform to master the modern web development stack.\n\n### ✨ Key Features\n\n-   **Note Creation**: A form for adding new notes with field validation.\n-   **Note Deletion**: The ability to delete notes with a single click.\n-   **Pagination**: Convenient navigation through pages when there are many notes.\n-   **Real-time Search**: Filtering notes by a keyword with a debounce effect to optimize API requests.\n-   **Modals**: A modern approach to displaying forms and additional content.\n\n---\n\n### 💻 Technology Stack\n\n| Purpose              | Technology / Library                                 |\n| -------------------- | ---------------------------------------------------- |\n| **Core**             | React, TypeScript, Vite                              |\n| **State Management** | TanStack Query (React Query)                         |\n| **HTTP Requests**    | Axios                                                |\n| **Forms**            | Formik (for state management) \u0026 Yup (for validation) |\n| **Styling**          | CSS Modules, modern-normalize                        |\n| **Components**       | react-paginate, react-hot-toast                      |\n| **Linting**          | ESLint, TypeScript ESLint                            |\n\n---\n\n### 📂 Project Structure\n\nThe project has a clear component-based architecture, which simplifies its maintenance and scalability:\n\n```\nsrc/\n├── components/         # Folder with React components\n│   ├── App/            # Main container component\n│   ├── Modal/          # Reusable modal window\n│   ├── NoteForm/       # Note creation form\n│   ├── NoteList/       # List of notes\n│   ├── Pagination/     # Pagination component\n│   └── SearchBox/      # Search input field\n├── services/           # Logic for interacting with the API\n│   └── noteService.ts\n├── types/              # Global TypeScript types\n│   └── note.ts\n└── main.tsx            # Application entry point\n```\n\n---\n\n### 🚀 Learning Goals \u0026 Focus for a Beginner\n\nAs a beginner, this project was an excellent opportunity for me to focus on key aspects of modern React development:\n\n1.  **Working with TypeScript**: I learned to strictly type components, their props, and state. This helped prevent many errors during development and improved code readability.\n\n2.  **Managing Server State**: Instead of using the traditional `useState` and `useEffect` for handling server data, I used **TanStack Query**. This allowed for effective data caching, automatic refetching, and managing loading and error states.\n\n3.  **Professional Form Handling**: Thanks to the **Formik** and **Yup** libraries, I implemented complex form logic, including field validation and submission state management, which made the code cleaner and more organized.\n\n4.  **Decomposition and Reusable Components**: I developed universal components like `Modal` and `Pagination` that can be easily adapted for other projects.\n\n5.  **Optimizing API Interaction**: Implementing a debounced search with the `useDebounce` hook was a practical example for me of how to improve user experience and reduce server load.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstanislavnemch%2F05-notehub","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstanislavnemch%2F05-notehub","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstanislavnemch%2F05-notehub/lists"}