Приложение React, созданное для любителей игры на фортепиано
Пакет React Piano Player / Visualizer / Analyzer - это веб-приложение, созданное для любителей игры на пианино. Это приложение предоставляет очень простой способ визуализации игры на пианино, считывая его midi-файл. Ссылка на последнюю версию: https://react-piano-player-63qjc9wca-tzmcion.vercel.app/. Это приложение позволяет создавать уроки игры на пианино, предлагает базовые эффекты, звуки, а также возможность записывать midi-файлы. Технологии, используемые в приложении: React, Typescript, HTML/CSS, Sass, Redux, библиотека NPM.
Github
Пакет React Piano Player / Visualizer / Analyzer - это веб-приложение, созданное для любителей игры на пианино. Это приложение предоставляет очень простой способ визуализации игры на пианино, считывая его midi-файл. Ссылка на последнюю версию: https://react-piano-player-63qjc9wca-tzmcion.vercel.app/. Это приложение позволяет создавать уроки игры на пианино, предлагает базовые эффекты, звуки, а также возможность записывать midi-файлы. Технологии, используемые в приложении: React, Typescript, HTML/CSS, Sass, Redux, библиотека NPM.
Github
Гибкая библиотека управления задачами для JavaScript-приложений
Kronash - это мощная, гибкая и простая в использовании библиотека управления задачами для JavaScript-приложений. Она предоставляет высокоуровневый API для планирования задач с различными вариантами и механизмами управления, упрощая работу с таймерами JavaScript и делая код более понятным и интуитивно понятным.
Особенности Kronash включают возможность создания задач с заданными интервалами повторения, а также отложенных операций. Она позволяет приостанавливать, возобновлять, останавливать и очищать задачи по мере необходимости, обеспечивая уровень контроля, который часто сложно осуществить вручную. Кроме того, Kronash совместима со всеми популярными фреймворками и библиотеками JavaScript, такими как React, Vue и Angular, и полностью совместима с TypeScript для поддержки надежной типизации.
Github
Kronash - это мощная, гибкая и простая в использовании библиотека управления задачами для JavaScript-приложений. Она предоставляет высокоуровневый API для планирования задач с различными вариантами и механизмами управления, упрощая работу с таймерами JavaScript и делая код более понятным и интуитивно понятным.
Особенности Kronash включают возможность создания задач с заданными интервалами повторения, а также отложенных операций. Она позволяет приостанавливать, возобновлять, останавливать и очищать задачи по мере необходимости, обеспечивая уровень контроля, который часто сложно осуществить вручную. Кроме того, Kronash совместима со всеми популярными фреймворками и библиотеками JavaScript, такими как React, Vue и Angular, и полностью совместима с TypeScript для поддержки надежной типизации.
Github
Удобный и визуально привлекательный аниме-сайт с React
AnimeHub - это удобный и привлекательный визуально сайт с аниме. Он позволяет пользователям искать аниме по названию, сортировать их по жанру, просматривать популярные, продолжающиеся, лучшие и новые аниме. Кроме того, пользователи могут создавать и управлять своим списком просмотра. Для этого проекта использовались такие технологии, как Tailwind CSS, ReactJS, NodeJS, ExpressJS и MySQL. Для участия в разработке репозитория необходимо создать задачу на добавление функции или исправление ошибки, добавить звезду репозиторию, форкнуть его, клонировать на локальную машину, создать новую ветку, импортировать базу данных anime_hub в MySQL Workbench, создать .env файл и добавить пароль, установить необходимые модули и запустить сервер. После внесения изменений, сделанных в новой ветке, нужно запушить их и создать запрос на включение изменений в основную ветку репозитория.
Github
AnimeHub - это удобный и привлекательный визуально сайт с аниме. Он позволяет пользователям искать аниме по названию, сортировать их по жанру, просматривать популярные, продолжающиеся, лучшие и новые аниме. Кроме того, пользователи могут создавать и управлять своим списком просмотра. Для этого проекта использовались такие технологии, как Tailwind CSS, ReactJS, NodeJS, ExpressJS и MySQL. Для участия в разработке репозитория необходимо создать задачу на добавление функции или исправление ошибки, добавить звезду репозиторию, форкнуть его, клонировать на локальную машину, создать новую ветку, импортировать базу данных anime_hub в MySQL Workbench, создать .env файл и добавить пароль, установить необходимые модули и запустить сервер. После внесения изменений, сделанных в новой ветке, нужно запушить их и создать запрос на включение изменений в основную ветку репозитория.
Github
Фреймворк для многоагентных приложений LLM, построенный с использованием Next.js и FastApi
Автохен UI - экспериментальный пользовательский интерфейс для работы с агентами AutoGen на основе библиотеки AutoGen. Интерфейс разработан с использованием Next.js и веб-API, построенного с использованием FastApi. AutoGen UI разработан для облегчения разработки приложений с использованием нескольких агентов, способных взаимодействовать друг с другом для решения сложных задач. UI позволяет создавать и тестировать агентов, анализировать их поведение и результаты, а также проводить отладку. В пакете также представлен план развития, который включает создание эндпоинта FastApi для работы с AutoGen, реализацию базового UI для общения с агентами, добавление инструментов для отладки и создание платформы для компоновки и запуска агентов.
Github
Автохен UI - экспериментальный пользовательский интерфейс для работы с агентами AutoGen на основе библиотеки AutoGen. Интерфейс разработан с использованием Next.js и веб-API, построенного с использованием FastApi. AutoGen UI разработан для облегчения разработки приложений с использованием нескольких агентов, способных взаимодействовать друг с другом для решения сложных задач. UI позволяет создавать и тестировать агентов, анализировать их поведение и результаты, а также проводить отладку. В пакете также представлен план развития, который включает создание эндпоинта FastApi для работы с AutoGen, реализацию базового UI для общения с агентами, добавление инструментов для отладки и создание платформы для компоновки и запуска агентов.
Github
SaaS-приложение для редактирования изображений с использованием искусственного интеллекта
Pixiemist - это SaaS-приложение для редактирования изображений с использованием искусственного интеллекта. Оно создано на основе Next.js 13 с использованием различных технологий, таких как Prisma для работы с базой данных SQL на PlanetScale, Stripe для оформления подписок, Cloudinary для хранения изображений и NextAuth.js для аутентификации. Приложение написано на TypeScript и использует Zustand для управления состоянием. Для запуска локально необходимо установить зависимости с помощью pnpm, скопировать файл .env.example в файл .env и обновить переменные, а затем запустить сервер разработки с помощью команды pnpm dev. Учтите, что генерация изображений может занимать до 3-5 минут из-за холодного запуска Replicate.
Github
Pixiemist - это SaaS-приложение для редактирования изображений с использованием искусственного интеллекта. Оно создано на основе Next.js 13 с использованием различных технологий, таких как Prisma для работы с базой данных SQL на PlanetScale, Stripe для оформления подписок, Cloudinary для хранения изображений и NextAuth.js для аутентификации. Приложение написано на TypeScript и использует Zustand для управления состоянием. Для запуска локально необходимо установить зависимости с помощью pnpm, скопировать файл .env.example в файл .env и обновить переменные, а затем запустить сервер разработки с помощью команды pnpm dev. Учтите, что генерация изображений может занимать до 3-5 минут из-за холодного запуска Replicate.
Github
Менеджер закладок для совместной работы с открытым исходным кодом, использующий Next.js
Linkwarden - открытый источниковый менеджер закладок для сбора, организации и архивирования веб-страниц. Целью является организация полезных страниц и статей из интернета в одном месте, и так как полезные страницы могут исчезнуть со временем, Linkwarden также сохраняет копию каждой страницы в виде скриншота и PDF, обеспечивая доступность, даже если исходный контент больше не доступен. Кроме того, Linkwarden создан с учетом сотрудничества, позволяя обмениваться ссылками с общественностью и/или позволяя нескольким пользователям совместно работать.
Github
Linkwarden - открытый источниковый менеджер закладок для сбора, организации и архивирования веб-страниц. Целью является организация полезных страниц и статей из интернета в одном месте, и так как полезные страницы могут исчезнуть со временем, Linkwarden также сохраняет копию каждой страницы в виде скриншота и PDF, обеспечивая доступность, даже если исходный контент больше не доступен. Кроме того, Linkwarden создан с учетом сотрудничества, позволяя обмениваться ссылками с общественностью и/или позволяя нескольким пользователям совместно работать.
Github
Одностраничное приложение, позволяющее пользователям присоединяться к социальной сети
В данном проекте представлена социальная сеть, позволяющая пользователям присоединяться к ней и писать посты и комментарии к ним. Проект разделен на два сервера - клиентский и серверный, их можно запустить одновременно с помощью команды npm run dev. Также можно запустить сервера индивидуально, используя команды npm run dev:client для клиентской части и npm run dev:server для серверной части. После запуска серверов проект можно увидеть по адресу localhost:3000. Функциональность проекта включает регистрацию, вход в аккаунт, редактирование биографии, загрузку профильных фотографий, поиск друзей, общий и приватный чаты, создание постов на стене и комментирование постов.
Github
В данном проекте представлена социальная сеть, позволяющая пользователям присоединяться к ней и писать посты и комментарии к ним. Проект разделен на два сервера - клиентский и серверный, их можно запустить одновременно с помощью команды npm run dev. Также можно запустить сервера индивидуально, используя команды npm run dev:client для клиентской части и npm run dev:server для серверной части. После запуска серверов проект можно увидеть по адресу localhost:3000. Функциональность проекта включает регистрацию, вход в аккаунт, редактирование биографии, загрузку профильных фотографий, поиск друзей, общий и приватный чаты, создание постов на стене и комментирование постов.
Github
Прогрессивно улучшается WebGL и преломление хрусталика
Этот пакет из GitHub представляет собой обучающий материал по созданию отзывчивой веб-страницы с использованием WebGL, CSS и React Three Fiber. Автором является David Lindkvist от компании 14islands. В статье на Codrops представлены инструкции по установке и запуску проекта, а также предоставлены ссылки на используемые компоненты и изображения. Один из ключевых элементов этой веб-страницы - это эффект линзового искажения, реализованный на основе работы Paul Henschel под названием "Lens Refraction".
Github
Этот пакет из GitHub представляет собой обучающий материал по созданию отзывчивой веб-страницы с использованием WebGL, CSS и React Three Fiber. Автором является David Lindkvist от компании 14islands. В статье на Codrops представлены инструкции по установке и запуску проекта, а также предоставлены ссылки на используемые компоненты и изображения. Один из ключевых элементов этой веб-страницы - это эффект линзового искажения, реализованный на основе работы Paul Henschel под названием "Lens Refraction".
Github
Платформа социальной сети с автоматической модерацией контента
Проект SocialEcho - это социальная платформа, построенная с использованием стека MERN (MongoDB, Express.js, React.js, Node.js). Он включает в себя две основные особенности: автоматизированную систему модерации контента и контекстную аутентификацию. Платформа также предоставляет обычные функциональности, характерные для социальных сетей, такие как создание профиля, создание и обмен сообщениями, лайки и комментирование сообщений, а также подписка/отписка от пользователей. Автоматизированная система модерации контента использует различные API для обработки естественного языка, такие как Perspective API, TextRazor API и Hugging Face Interface API.
Github
Проект SocialEcho - это социальная платформа, построенная с использованием стека MERN (MongoDB, Express.js, React.js, Node.js). Он включает в себя две основные особенности: автоматизированную систему модерации контента и контекстную аутентификацию. Платформа также предоставляет обычные функциональности, характерные для социальных сетей, такие как создание профиля, создание и обмен сообщениями, лайки и комментирование сообщений, а также подписка/отписка от пользователей. Автоматизированная система модерации контента использует различные API для обработки естественного языка, такие как Perspective API, TextRazor API и Hugging Face Interface API.
Github
Добавьте анимированные кнопки для "нравится", "не нравится" и пользовательских взаимодействий в приложение React
Like-button-celebration - это библиотека, разработанная для добавления анимированных кнопок для лайков, снятия лайков, голосования вверх и настраиваемых взаимодействий на ваши блоги, статьи и веб-контент. С помощью этой библиотеки вы легко можете интегрировать интерактивные кнопки, которые празднующие действия пользователей, добавляя приятные анимации в ваше веб-приложение. Она предоставляет различные параметры настройки, такие как состояние кнопки (активное или неактивное), размер иконки, изображение и др. В пакете также приведены примеры использования компонентов HeartLike, ThumbLike и CustomButton, а также указаны настройки, которые можно использовать для настройки анимации.
Github
Like-button-celebration - это библиотека, разработанная для добавления анимированных кнопок для лайков, снятия лайков, голосования вверх и настраиваемых взаимодействий на ваши блоги, статьи и веб-контент. С помощью этой библиотеки вы легко можете интегрировать интерактивные кнопки, которые празднующие действия пользователей, добавляя приятные анимации в ваше веб-приложение. Она предоставляет различные параметры настройки, такие как состояние кнопки (активное или неактивное), размер иконки, изображение и др. В пакете также приведены примеры использования компонентов HeartLike, ThumbLike и CustomButton, а также указаны настройки, которые можно использовать для настройки анимации.
Github
Настраиваемый компонент toast для React
Этот пакет из GitHub представляет собой настраиваемый компонент для отображения всплывающих сообщений (toast) в React. Для начала работы с библиотекой необходимо установить ее в проект с помощью команды "npm install alert". Затем нужно добавить компонент <Toaster/> в приложение, который будет отображать все ваши сообщения. После этого можно использовать функцию toast() из любого места в приложении. Подробную документацию об API и реализации можно найти в ближайшем будущем.
Github
Этот пакет из GitHub представляет собой настраиваемый компонент для отображения всплывающих сообщений (toast) в React. Для начала работы с библиотекой необходимо установить ее в проект с помощью команды "npm install alert". Затем нужно добавить компонент <Toaster/> в приложение, который будет отображать все ваши сообщения. После этого можно использовать функцию toast() из любого места в приложении. Подробную документацию об API и реализации можно найти в ближайшем будущем.
Github
Приложение для перевода, созданное с помощью React
Данный пакет из GitHub содержит библиотеки для создания переводчика веб-приложения. В его состав входят следующие библиотеки: @reduxjs/toolkit, react-redux, redux, axios и react select. Основным источником для перевода текста является Tranlator App Source, доступный по ссылке https://rapidapi.com/dickyagustin/api/text-translator2.
Github
Данный пакет из GitHub содержит библиотеки для создания переводчика веб-приложения. В его состав входят следующие библиотеки: @reduxjs/toolkit, react-redux, redux, axios и react select. Основным источником для перевода текста является Tranlator App Source, доступный по ссылке https://rapidapi.com/dickyagustin/api/text-translator2.
Github
Карта отслеживания рейсов с React.js
Flight Radar: on Map – это пакет на GitHub, который предоставляет возможность отслеживать полеты в реальном времени на интерактивной карте. В пакете используются следующие библиотеки: reduxjs/toolkit, react-redux, thunk, axios, react-leaflet, leaflet и react-paginate. Пакет уже включает в себя необходимые зависимости, поэтому нет необходимости их отдельно скачивать. Исходные данные о полетах получаются с помощью API с указанными географическими координатами.
Github
Flight Radar: on Map – это пакет на GitHub, который предоставляет возможность отслеживать полеты в реальном времени на интерактивной карте. В пакете используются следующие библиотеки: reduxjs/toolkit, react-redux, thunk, axios, react-leaflet, leaflet и react-paginate. Пакет уже включает в себя необходимые зависимости, поэтому нет необходимости их отдельно скачивать. Исходные данные о полетах получаются с помощью API с указанными географическими координатами.
Github
Следующий шаблон проверки подлинности shadcn firebase
Этот пакет в GitHub представляет собой шаблон (boilerplate) для создания системы аутентификации, использующей технологии NEXTJS, SHADCNUI, REACT HOOK FORM, ZOD и FIREBASE. Для работы необходимо создать проект Firebase и заполнить информацию в файле .env. В системе поддерживаются 3 метода аутентификации: Google, Email/Password и GitHub. Чтобы добавить один из этих методов, необходимо включить его в консоли Firebase и создать приложение на GitHub для получения соответствующей информации.
Github
Этот пакет в GitHub представляет собой шаблон (boilerplate) для создания системы аутентификации, использующей технологии NEXTJS, SHADCNUI, REACT HOOK FORM, ZOD и FIREBASE. Для работы необходимо создать проект Firebase и заполнить информацию в файле .env. В системе поддерживаются 3 метода аутентификации: Google, Email/Password и GitHub. Чтобы добавить один из этих методов, необходимо включить его в консоли Firebase и создать приложение на GitHub для получения соответствующей информации.
Github
Расширение Chrome для предварительного просмотра разметки в chat.openai.com
Данный пакет из GitHub представляет собой расширение для Chrome под названием ChatGPT Markup Preview Extension (PoC), которое позволяет предварительно просматривать разметку HTML в чате на chat.openai.com. Расширение отображает предварительный просмотр HTML-кода в блоках кода. Поддерживается как HTML, так и TSX (TypeScript с расширением JSX) с использованием библиотеки React, а также подгружается стилизация с помощью Tailwind CSS. У расширения также есть возможность копирования предварительного просмотра как изображение для вставки в чат. Для установки необходимо скачать последнюю версию архива chatgpt-markup-preview.zip с GitHub, разархивировать его и загрузить распакованное расширение в Chrome через разработческий режим на странице chrome://extensions.
Github
Данный пакет из GitHub представляет собой расширение для Chrome под названием ChatGPT Markup Preview Extension (PoC), которое позволяет предварительно просматривать разметку HTML в чате на chat.openai.com. Расширение отображает предварительный просмотр HTML-кода в блоках кода. Поддерживается как HTML, так и TSX (TypeScript с расширением JSX) с использованием библиотеки React, а также подгружается стилизация с помощью Tailwind CSS. У расширения также есть возможность копирования предварительного просмотра как изображение для вставки в чат. Для установки необходимо скачать последнюю версию архива chatgpt-markup-preview.zip с GitHub, разархивировать его и загрузить распакованное расширение в Chrome через разработческий режим на странице chrome://extensions.
Github
Интерфейс чата Ollama и OpenAI
Пакет LLM Chatter, версия 0.0.2, представляет собой одно HTML-файловое приложение для общения с локальными моделями большой языковой модели (LLM) Ollama или LLM OpenAI.com. Для установки нужно запустить несколько команд, включая установку Ollama и добавление хотя бы одной модели. Затем необходимо запустить локальный сервер и открыть приложение в веб-браузере. Дополнительно, можно зарегистрировать аккаунт на openai.com и получить API-ключ, который можно использовать при использовании OpenAI Chat. Также предоставляются инструкции по установке дополнительного сервера node.js Express для использования с LangChain URL. Приложение построено с использованием Vite/Bun/React/TailwindCSS/FontAwesome, использует иконки от Font Awesome и делает API-запросы к нескольким ресурсам: http://localhost:11434 (ollama), http://localhost:8080 (сервер langchain-ollama) и https://api.openai.com.
Github
Пакет LLM Chatter, версия 0.0.2, представляет собой одно HTML-файловое приложение для общения с локальными моделями большой языковой модели (LLM) Ollama или LLM OpenAI.com. Для установки нужно запустить несколько команд, включая установку Ollama и добавление хотя бы одной модели. Затем необходимо запустить локальный сервер и открыть приложение в веб-браузере. Дополнительно, можно зарегистрировать аккаунт на openai.com и получить API-ключ, который можно использовать при использовании OpenAI Chat. Также предоставляются инструкции по установке дополнительного сервера node.js Express для использования с LangChain URL. Приложение построено с использованием Vite/Bun/React/TailwindCSS/FontAwesome, использует иконки от Font Awesome и делает API-запросы к нескольким ресурсам: http://localhost:11434 (ollama), http://localhost:8080 (сервер langchain-ollama) и https://api.openai.com.
Github
Многодорожечный веб-аудиоредактор и проигрыватель с предварительным просмотром формы сигнала
React-studio-js - это пакет на GitHub, который предоставляет набор функций для манипулирования звуковыми дорожками в приложении React. Это позволяет пользователям записывать, обрезать, разбивать и сдвигать треки, а также выполнять операции CRUD для аннотаций. Пакет требует корректной работы webaudio в браузере и поддерживает версии браузера, совместимые с Can I Use?. Пакет может быть установлен с помощью npm, и на GitHub доступен демонстрационный пример React.
Github
React-studio-js - это пакет на GitHub, который предоставляет набор функций для манипулирования звуковыми дорожками в приложении React. Это позволяет пользователям записывать, обрезать, разбивать и сдвигать треки, а также выполнять операции CRUD для аннотаций. Пакет требует корректной работы webaudio в браузере и поддерживает версии браузера, совместимые с Can I Use?. Пакет может быть установлен с помощью npm, и на GitHub доступен демонстрационный пример React.
Github
Набор компонентов, связанных с формой, для React
Этот пакет npm предоставляет набор компонентов для форм в React. Вы можете использовать эти компоненты для удобного создания форм. Для всех компонентов доступны CSS-переменные для темизации и классные имена. Есть встроенная поддержка темного режима. В пакете также предоставлены инструкции по установке, документация, примеры и демо-страницы для каждого компонента.
Github
Этот пакет npm предоставляет набор компонентов для форм в React. Вы можете использовать эти компоненты для удобного создания форм. Для всех компонентов доступны CSS-переменные для темизации и классные имена. Есть встроенная поддержка темного режима. В пакете также предоставлены инструкции по установке, документация, примеры и демо-страницы для каждого компонента.
Github
Ваше полное руководство по освоению использования "ref" в React
Этот пакет в GitHub научит вас мастерству работы с ref в React. Вы узнаете о базовых принципах использования ref, таких как строковые и обратные ссылки, а затем перейдете к более сложным темам, таким как хук useRef () и API forwardRef (). В конце вы сможете уверенно использовать ref в своих приложениях React и повысить свои навыки в этом фреймворке до нового уровня! Пакет также включает 6 уроков, в которых вы научитесь доступу к DOM-узлам компонентов, созданию ссылок с помощью функций обратного вызова и использованию функции createRef ().
Github
Этот пакет в GitHub научит вас мастерству работы с ref в React. Вы узнаете о базовых принципах использования ref, таких как строковые и обратные ссылки, а затем перейдете к более сложным темам, таким как хук useRef () и API forwardRef (). В конце вы сможете уверенно использовать ref в своих приложениях React и повысить свои навыки в этом фреймворке до нового уровня! Пакет также включает 6 уроков, в которых вы научитесь доступу к DOM-узлам компонентов, созданию ссылок с помощью функций обратного вызова и использованию функции createRef ().
Github
Продвинутое приложение, сочетающее в себе возможности ChatGPT и DALL.E
ChatGPT-Pro - это продвинутое приложение, объединяющее мощь ChatGPT и DALL.E. С помощью этого приложения вы можете легко переключаться между версиями ChatGPT. Одной из особенностей ChatGPT-Pro является возможность сохранять чат-беседы на локальном устройстве. Вы также можете развернуть это приложение одним нажатием на платформы Netlify или Vercel.
Github
ChatGPT-Pro - это продвинутое приложение, объединяющее мощь ChatGPT и DALL.E. С помощью этого приложения вы можете легко переключаться между версиями ChatGPT. Одной из особенностей ChatGPT-Pro является возможность сохранять чат-беседы на локальном устройстве. Вы также можете развернуть это приложение одним нажатием на платформы Netlify или Vercel.
Github
Веб-сайт магазина материалов Muisc, использующий React
Этот пакет из GitHub представляет собой аудиофильское приложение, которое позволяет пользователям просматривать и заказывать продукты. Пользователи могут просматривать оптимальный макет приложения в зависимости от размера экрана своего устройства, а также видеть интерактивные состояния при наведении на элементы страницы. Они могут добавлять и удалять продукты из корзины, изменять количество товаров в корзине, заполнять все поля во время оформления заказа и получать проверку правильности заполнения полей. Они также могут видеть правильную сумму заказа и получать модальное окно подтверждения заказа после осуществления покупки. Возможным улучшением является использование Zod для более точной типизации данных от API и более простого тестирования функций. Помимо этого, разработчик планирует написать больше модульных тестов для приложения.
Github
Этот пакет из GitHub представляет собой аудиофильское приложение, которое позволяет пользователям просматривать и заказывать продукты. Пользователи могут просматривать оптимальный макет приложения в зависимости от размера экрана своего устройства, а также видеть интерактивные состояния при наведении на элементы страницы. Они могут добавлять и удалять продукты из корзины, изменять количество товаров в корзине, заполнять все поля во время оформления заказа и получать проверку правильности заполнения полей. Они также могут видеть правильную сумму заказа и получать модальное окно подтверждения заказа после осуществления покупки. Возможным улучшением является использование Zod для более точной типизации данных от API и более простого тестирования функций. Помимо этого, разработчик планирует написать больше модульных тестов для приложения.
Github