React.js Plugins | To Watch | RU
8 subscribers
317 photos
317 links
Плагины, пакеты и примеры на React.js
Download Telegram
SpotGPT: Ваш идеальный персонализированный генератор плейлистов на базе искусственного интеллекта

SpotGPT - Personalized AI-Powered Playlist Generator - это инновационное приложение, которое помогает пользователям создавать свой идеальный плейлист с помощью искусственного интеллекта. Пользователи могут вводить любой текст, будь то их текущее настроение, чувства или просто описание их предпочтений. Все зависит от воображения! SpotGPT использует модель GPT-3.5-turbo от OpenAI, чтобы интеллектуально анализировать ввод пользователя и создавать плейлист, настроенный под его вкус. С помощью интеграции с Spotify API пользователи могут сохранять и слушать сгенерированный плейлист прямо на своем аккаунте Spotify. SpotGPT - это новый уровень в мире открытия музыки, объединяющий мощность искусственного интеллекта и удобство Spotify. От треков для тренировок до расслабляющих мелодий или исследования новых жанров, SpotGPT поможет вам найти идеальный плейлист.

Github
Приложение для отслеживания рецептов, использующее React

Этот пакет из github содержит проект приложения для отслеживания рецептов, позволяющий пользователям добавлять, отображать и удалять рецепты. Приложение создано с использованием React и стилизовано с помощью CSS. Оно предоставляет функциональность для управления списком рецептов и демонстрирует эффективную организацию компонентов React. Основные функции включают добавление нового рецепта с полями для названия, кухни, URL фотографии, ингредиентов и инструкций по приготовлению, отображение списка рецептов с деталями, включая название, кухню, фотографию, ингредиенты и инструкции по приготовлению, а также удаление рецепта путем нажатия кнопки удаления, связанной с каждым рецептом. Для установки пакета необходимо склонировать репозиторий, перейти в директорию проекта, установить зависимости и запустить сервер разработки. После этого приложение можно просмотреть веб-браузере по адресу http://localhost:3000.

Github
Веб-сайт фитнес-трекера Gym с React

Привет! Этот пакет из GitHub представляет собой онлайн-сайт Gym Fitness Tracker, где любой может изучить различные упражнения для тела, такие как бицепсы, трицепсы, спина, плечи, пресс и т. д. Сайт предоставляет гиф-изображения для каждого упражнения, показывающие правильную технику выполнения. При клике на гиф-изображение также отображаются похожие упражнения с использованием оборудования и ссылки на соответствующие видео на YouTube для более легкого изучения. Технологический стек включает HTML5, CSS3 и React.js. Ссылка на живой демонстрационный проект: https://gym-fitness-tracker.netlify.app/.

Github
Приложение для взаимодействия с домашним помощником в системном трее Windows

Этот пакет представляет собой интеграцию Home Assistant в системный трей Windows. Он позволяет пользователю контролировать сущности Home Assistant непосредственно из системного трея. По сравнению с другими подобными библиотеками, это меню Windows выглядит как естественное (аналогичное тому, которое можно найти в трее звуков). Для удобной настройки сущностей можно использовать графический интерфейс. Для установки следует загрузить файл EXE из раздела "Releases" и запустить его. Во время установки может появиться сообщение "Windows защитил ваш компьютер", в котором нужно нажать "Дополнительно" и затем "Всё равно запустить". После завершения установки в системном трее должна появиться иконка Home Assistant. Щелкните правой кнопкой мыши по иконке, чтобы открыть настройки.

Github
Бесплатный шаблон панели администратора с использованием Daisy UI, React js и Tailwind CSS



Github
Создавайте и просматривайте компоненты React с помощью ChatGPT



Github
Приложение React, которое извлекает и отображает цены на акции в режиме реального времени

Stock Tracker Application - это приложение на React, которое получает и отображает реальные цены на акции в реальном времени, исторические данные по акциям и связанные новостные статьи с использованием API IEX Cloud и API OpenAI. Пользователи могут отслеживать цены на акции для нескольких тикеров, просматривать изменения цен за прошлый месяц в виде линейного графика и читать последние новостные статьи, связанные с определенной акцией. Приложение использует современные практики React, такие как Hooks, функциональные компоненты и библиотеку React Router для маршрутизации.

Github
Личное портфолио, созданное с использованием Next.js , React и TailwindCSS

Этот пакет из GitHub представляет собой пятую итерацию сайта-портфолио автора. Он построен с использованием Next.js, React и Tailwind CSS. Цель автора была создать простой дизайн в стиле "стекло-морфизма" и изучить React и Next.js. Проект включает в себя инструкции по установке и развертыванию, а также список использованных технологий.

Github
Пример создания плагина Figma, который взаимодействует с моделями OpenAI GPT

Этот пакет из GitHub представляет собой шаблон плагина Figma AI, который демонстрирует возможность потоковой передачи ответов LLM внутри плагина Figma. В шаблоне показано, как безопасно хранить ключи/подсказки OpenAI на сервере, как потоково завершать GPT в iframe и документе Figma, а также как развернуть плагин в производство и получать доступ к Figma API непосредственно из iframe.

Github
Войдите в систему аутентификации Firebase с помощью Google

Данный проект находится на платформе Firebase и предлагает удобную функциональность аутентификации и входа в приложение для веб- и мобильных приложений. Прежде чем начать использование, необходимо настроить проект в Firebase и включить аутентификацию. Затем следует установить SDK Firebase в свой проект, используя зависимости, указанные в описании. Для проверки функциональности проекта можно запустить его в VS Code и выполнить процесс входа с использованием аккаунта Google, после чего будет отображено приветственное сообщение с информацией о пользователе. С применением Firebase Authentication вы сможете легко добавлять функционал входа, защиту отдельных маршрутов и контента, а также настраивать пользовательский опыт в зависимости от их аутентификационного статуса.

Github
Ползунок React Round с несколькими указателями

Пакет React Round Slider представляет собой библиотеку для создания доступных и мобильно-дружественных круглых слайдеров в React, написанную на TypeScript и использующую SVG. Он включает в себя такие функции, как возможность использовать любое количество указателей, поддержку мобильных устройств, настраиваемые отметки и стили, поддержку дрэга, поддержку сенсорного ввода и клавиатуры, анимацию и даже взаимодействие с CSS-фреймворками. Пакет также предлагает документацию и имеет MIT-лицензию, позволяющую его использование в коммерческих и личных проектах бесплатно.

Github
Сайт по аренде автомобилей Morent, созданный с использованием React

Сайт аренды автомобилей Morent - это ультрасовременная онлайн-платформа, цель которой - революционизировать процесс аренды автомобилей, обеспечив плавный и приятный процесс. Приведенный в действие Next.js , Tailwind CSS и React Query, он обеспечивает молниеносную производительность и адаптивный интерфейс как для арендаторов, так и для владельцев автомобилей. Благодаря таким функциям, как простая аренда автомобилей и интеллектуальная фильтрация автомобилей, пользователи могут легко найти и забронировать автомобиль своей мечты. Веб-сайт также использует React.js , Next.js , Tailwind CSS и технологии запросов React для обеспечения превосходной производительности и эффективного рендеринга на стороне сервера. По любым вопросам или отзывам пользователи могут связаться с командой по электронной почте и принять участие в формировании будущего проката автомобилей.

Github
Встроенные элементы управления окнами для Tauri 2

Библиотека Tauri Controls предоставляет нативные элементы управления окнами для приложений Tauri 2, позволяя улучшить пользовательский опыт и создать внешний вид, идентичный нативным элементам на текущей системе. Она использует API js/ts Tauri для обработки событий окна и предоставляет элементы html/react, имеющие внешний вид нативных элементов (разработанных в соответствии с официальными прототипами дизайна системы), но не использует нативные API. В библиотеке использованы дизайны Windows UI 3 от Microsoft и Apple Design Resources для macOS.


Github
Впечатляющий клон Spotify с React

Этот пакет в GitHub - SignUp PageMusicMix - является впечатляющим клоном Spotify, разработанным для предоставления отличного пользовательского опыта и превосходных музыкальных впечатлений для пользователей. Проект был создан группой из четырех участников всего за пять дней, с целью практики и проверки своих навыков в стеке MERN. Используемые технологии включают React, Tailwind CSS, Chakra UI, Styled Components, Redux, NodeJS, ExpressJS, MongoDB и Mongoose. Ключевые функции включают аутентификацию и авторизацию пользователей, главную страницу и возможность прослушивания песен.

Github
Простой пример проверки формы reactjs с использованием formik и yup validator

Этот пакет из GitHub представляет собой пример простой формы регистрации пользователя для валидации в React-приложении с использованием библиотек Formik и Yup. Форма разработана в bootstrap и включает в себя функционал валидации и обработки данных с помощью Formik. Yup используется для парсинга и валидации значений формы. В репозитории также доступен живой пример на StackBlitz, а для запуска приложения можно воспользоваться командами npm install и npm start.

Github
Веб-сайт-витрина для рисования, созданный с использованием Next.js

Этот пакет из GitHub представляет собой личный веб-сайт, на котором автор выставляет свои художественные работы и эскизы. Веб-сайт создан с использованием Next.js и включает в себя галерею работ, возможность получить обратную связь от пользователей и любителей искусства, а также связаться с автором через социальные сети. Веб-сайт оптимизирован для использования на больших экранах, таких как ноутбуки и настольные компьютеры, и разработан с использованием технологий Next.js, React и Framer Motion. Лицензия проекта - MIT License.

Github
Состояние сети Web3 с использованием React

React Web3 Network Status - это компонент, вдохновленный MetaMask, который показывает пользователям состояние подключения их сети. Он официально поддерживается. Для установки нужны npm или yarn. Компонент можно использовать как с состоянием, так и без него, и даже передавать явно идентификатор сети. Демонстрационное приложение также доступно для локального запуска.

Github
Привлекательное портфолио разработчиков, созданное с помощью NextJS

Репозиторий devfoliodevfolio - это портфолио разработчика, построенное на базе NextJS, GSAP, Tailwind и React. В нем представлены живой демонстрационный пример и инструкции по запуску приложения в режиме разработки. Дизайн портфолио вдохновлен работой Ayush Singh. Автор приветствует использование кода для создания своего веб-сайта, но просит сохранить подвал без изменений и указать авторство.

Github
Форма входа в систему и регистрации с помощью MERN stack

Этот пакет из GitHub представляет собой форму регистрации и входа пользователя, которая реализована с использованием MERN-стека (MongoDB, Express, React, Node.js). Веб-приложение поддерживает адаптивный дизайн, использует библиотеку Bootstrap для стилизации. Для запуска проекта требуется установить Node.js и выполнить несколько команд в терминале. Проект использует React и React Router для фронтенда, Express и Node для бэкенда, MongoDB для базы данных. Рекомендуется поставить звезду на репозитории проекта.

Github
Библиотека React для создания простых диалоговых окон

Этот пакет react-simple-dialogs предоставляет компоненты для создания простых диалоговых окон в React-приложениях. Он имеет простой и интуитивно понятный интерфейс, без необходимости настройки и с использованием привычных функций диалоговых окон (alert, confirm и prompt). При использовании любой функции диалогового окна будет возвращён Promise, который разрешается только после взаимодействия пользователя с окном, так что вы можете дождаться этого взаимодействия, чтобы продолжить выполнение кода.

Github