React JS

💡 Репозиторий, где собрано 100+ проектов с нуля - от веба до ИИ. Всё максимально практично 👇

- 100+ готовых проектов: сайты, игры, нейросети, тулзы

- Современные технологии: ReactJS, NodeJS, VueJS, Flutter, Unity, TensorFlow, OpenCV и другие

- Пошаговые гайды с разными уровнями сложности — подойдёт даже новичку

- У каждого проекта указан технологический стек

Без воды - только практика и понятные объяснения.

🚀 https://github.com/Xtremilicious/projectlearn-project-based-learning

👩‍💻 FullCalendar — библиотека для простого создания календаря с настраиваемым управлением событиями, функцией перетаскивания и представлениями в виде временной шкалы на вашем сайте!

🔗 Ссылка: *клик*

@react_tg

🛠️ Синхронизация Zustand хранилищ

zustand-sync — это легковесное middleware для синхронизации Zustand хранилищ между несколькими клиентами с использованием JSON Patch. Идеально подходит для проектов на React, позволяя передавать изменения состояния через WebSocket.

🚀 Основные моменты:
- Легкая интеграция с Zustand
- Поддержка WebSocket для передачи данных
- Генерация и применение JSON Patch для обновлений
- Планы на расширение с дополнительными транспортными провайдерами
- Поддержка аутентификации и разрешения конфликтов

📌 GitHub: https://github.com/ryanntannn/zustand-sync

#typescript

🛡TypeScript: почему без него не обойтись фронтендеру?

Фронтенд-разработка уже не мыслится без TypeScript. Сегодня это стандарт, который фигурирует почти в каждой вакансии и позволяет писать код, где ошибки ловятся до запуска. На открытом уроке OTUS «TypeScript простым языком: зачем он нужен и как с ним подружиться» вы узнаете:

–  зачем компании требуют TS и какую пользу он даёт;
–  как типизировать примитивы, интерфейсы, функции и компоненты;
–  как добавить типы в рабочий код и сразу увидеть результат.

❗️ Будет полезен разработчикам на JavaScript, React и Vue, а также всем, кто готовится к собеседованиям.

📆 Урок пройдет 8 октября в 20:00 МСК в преддверие старта курса «JavaScript Developer. Professional». Все участники получают скидку на обучение. 👉 Регистрируйтесь и приходите — это ваш шаг к сильному портфолио: *ссылка* https://otus.pw/Loi8/?erid=2W5zFFv2MNx

Реклама. ООО "ОТУС ОНЛАЙН-ОБРАЗОВАНИЕ". ИНН 9705100963.

🚀 Интенсивный курс по JavaScript и веб-разработке

JSCamp — это bootcamp, который охватывает все от основ до продвинутых технологий JavaScript, включая HTML, CSS, Node.js и Docker. Участники создадут полноценный проект, применяя полученные знания, и получат доступ к видео и материалам на платформе JSCamp.dev.

🚀Основные моменты:
- Полный курс по JavaScript и веб-разработке
- Практический проект от начала до конца
- Доступ к видео и материалам на JSCamp.dev
- Опциональный сертификат и поддержка в Discord
- Обратная связь по CV и участие в воркшопах

📌 GitHub: https://github.com/midudev/jscamp

#javascript

FlyCut Caption — это React-компонент для распознавания речи и редактирования субтитров в видео.

🔍 Главное
- Локальное распознавание речи на базе Whisper
- Визуальное редактирование и синхронный предпросмотр
- Экспорт в SRT / JSON
- Кастомизация стилей и поддержка разных языков

👉 Репозиторий: https://github.com/x007xyz/flycut-caption

🚀 Углубленное изучение промисов в JavaScript

Этот репозиторий предлагает практические упражнения для освоения промисов и асинхронного программирования. Он предназначен для разработчиков с базовыми знаниями, желающих углубить свои навыки и научиться решать более сложные задачи.

🚀 Основные моменты:
- Упражнения разделены на категории: графовые, конкретные и базовые.
- Каждое упражнение имеет три уровня сложности: начальный, средний и продвинутый.
- Проект включает объяснения и контекст для каждой задачи.
- Подходит для разработчиков, стремящихся улучшить свои навыки работы с промисами.

📌 GitHub: https://github.com/henriqueinonhe/promises-training

#javascript

🎶 OpenSpot Music - Your Gateway to Limitless Music

OpenSpot Music предлагает возможность стриминга и скачивания музыки без рекламы и входа в систему. Доступно на мобильных и десктопных платформах, приложение обеспечивает высокое качество звука и удобный интерфейс.

🚀 Основные моменты:
- Мобильное приложение на React Native для Android и iOS
- Десктопное приложение на Electron для macOS, Windows и Linux
- Оффлайн-доступ и фоновое воспроизведение
- Поддержка локального хранения и управления окнами

📌 GitHub: https://github.com/BlackHatDevX/openspot-music-app

#javascript

🔥 JSON Crack — это веб-инструмент для визуализации и анализа JSON-данных!

🌟 Он позволяет интерактивно просматривать сложные структуры JSON в виде удобных графических диаграмм, что помогает понять взаимосвязи и иерархию данных. Проект с открытым исходным кодом и поддерживает функции импорта, экспорта и редактирования JSON-файлов.

🖥 Github

@react_tg

❓ Как сделать чат в React?
😎 Ответ — на бесплатном вебинаре 29 сентября!

WebSocket — это не сложно. Покажем на практике, как связать React-приложение с сервером для обмена сообщениями в реальном времени.
Соберем работающий прототип мессенджера с авторизацией и интерфейсом. Идеальный проект для портфолио.
Присоединяйтесь к бесплатному вебинару курса «JavaScript Developer. Professional».
👉 Пишите код вместе с экспертом: https://otus.pw/ZmAsd/?erid=2W5zFJgK5xU

Реклама. ООО "ОТУС ОНЛАЙН-ОБРАЗОВАНИЕ". ИНН 9705100963.

📚 AI-ассистенты в Yandex Cloud: автоматизация как сервис

На конференции команда Yandex Cloud представила AI-ассистентов — встроенных помощников для автоматизации облачных задач. Они позволяют отправлять запросы и администрировать базы данных через чат – достаточно написать свою задачу на естественном языке.

Например, в WebSQL через ИИ-ассистента можно сформулировать запрос для Trino, ClickHouse и других баз данных – для этого можно написать в чат, например, “покажи топ-10 клиентов по выручке за прошлый год”. Также можно автоматически разметить метаданные через Data Catalog в MetaData Hub.

В YDB можно автоматизировать администрирование БД с помощью ИИ-ассистента – например, он может предложить более оптимальный запрос или провести диагностику БД. Также можно подключить LLM-модель к YDB через MCP-сервер, чтобы она также могла формировать и исполнять запросы к базе данных.

Совет по CSS 💡

Иногда фавикон отлично смотрится в светлой теме, но выглядит плохо (или вовсе исчезает) в тёмной, и наоборот.

Такие мелкие детали могут портить общее впечатление от сайта.

Вот как это исправить 👆

🛠️ AI SDK Devtools: Инструмент для отладки и мониторинга AI приложений

AI SDK Devtools предоставляет мощные возможности для отслеживания событий, отладки вызовов инструментов и мониторинга производительности в реальном времени. Он позволяет фильтровать события, визуализировать использование токенов и перехватывать потоки данных AI SDK.

🚀Основные моменты:
- Реальное время мониторинга событий AI
- Отладка вызовов инструментов с параметрами и результатами
- Мониторинг производительности (скорость потоков)
- Фильтрация событий по типу и имени инструмента
- Визуализация использования контекста и токенов

📌 GitHub: https://github.com/midday-ai/ai-sdk-devtools

#typescript

👩‍💻 Руководство: Как использовать "use", новый хук React 19!

🔗 Ссылка: *клик*

@react_tg

— Во сколько лет ты узнал об этом?
— В сейчас лет

Крутой плагин для Figma, который конвертирует ваши дизайны сразу в приложения на HTML, CSS или React.

Итоговый результат можно экспортировать Replit, запустить или подредачить код.

И да, это БЕСПЛАТНО.

Совет по CSS 💡

Возможно, ты не знал, что можно задать и min-width, и width всего одной строкой кода в CSS

@react_tg

Свежий опенсорс инструмент, который берёт любой сайт и превращает его в готовое React-приложение за минуту — Open Lovable v2

Построен на базе Firecrawl, поддержка разных LLM, песочницы E2B и Vercel. Короче, идеально для прототипов.

Забираем тут

@react_tg

🚀 GrowChief — open-source инструмент для автоматизации соцсетей

Теперь у вас есть бесплатная альтернатива PhantomBuster и Expandi.

✨ Что умеет:
- Запускать workflow-и: добавления в друзья, сообщения, любые действия в соцсетях
- Поддержка n8n, Zapier, Make
- «Человеческая» автоматизация — имитация движений мыши, чтобы не спалиться
- Enrichment waterfall — находит аккаунт по email или другим данным
- Запуск только в рабочие часы
- Поддержка прокси и headful-режима браузера

🛠 Технический стек: React + NestJS + Prisma + Temporal, база — PostgreSQL.
Лицензия: AGPL-3.0.

📦 Quick Start:

git clone https://github.com/growchief/growchief.git
cd growchief
docker compose up -d

https://github.com/growchief/growchief

📚Gramax: Документация как код

Gramax — это бесплатное приложение для создания, редактирования и публикации документации в формате Markdown. Оно обеспечивает гибкость и доступность оффлайн, а также интеграцию с Git для контроля версий и совместной работы. Идеально подходит для продуктовой документации, внутренних баз знаний и личных заметок.

🚀Основные моменты:
- Интуитивный визуальный редактор для Markdown
- Кроссплатформенное приложение для Windows, Mac и Linux
- Локальное хранение файлов в формате Markdown
- Поддержка 17 языков для создания документации
- Интеграция с Git для коллаборации и контроля версий

📌 GitHub: https://github.com/Gram-ax/gramax