Музыкальное веб-приложение, созданное с использованием React и Deezer API
Этот пакет на GitHub представляет музыкальное веб-приложение, которое позволяет воспроизводить, сохранять и исследовать песни, артистов, альбомы, плейлисты и радио на основе Deezer API. Оно построено с использованием Next.js, Redux & Redux Persist, SWR и Wavesurfer.js. Приложение имеет красивый адаптивный интерфейс, вдохновленный работой Max Dobzhansky и доступно по адресу http://localhost:3000 после установки и запуска.
Github | Демо
Этот пакет на GitHub представляет музыкальное веб-приложение, которое позволяет воспроизводить, сохранять и исследовать песни, артистов, альбомы, плейлисты и радио на основе Deezer API. Оно построено с использованием Next.js, Redux & Redux Persist, SWR и Wavesurfer.js. Приложение имеет красивый адаптивный интерфейс, вдохновленный работой Max Dobzhansky и доступно по адресу http://localhost:3000 после установки и запуска.
Github | Демо
Веб-приложение, которое предоставляет информацию о погоде в режиме реального времени для данного местоположения
Этот пакет на GitHub представляет собой простое приложение погоды, созданное с использованием React. Оно предоставляет информацию о погоде в режиме реального времени для заданного местоположения. Основные функции включают получение данных о погоде из API, отображение текущих погодных условий, настройку поиска по местоположению и поддержку различных единиц измерения. В разработке использовались следующие технологии: React, Axios, Bootstrap, OpenWeather API, Material UI, I18next, Gsap, Antd, React-icons и react-player.
Github
Этот пакет на GitHub представляет собой простое приложение погоды, созданное с использованием React. Оно предоставляет информацию о погоде в режиме реального времени для заданного местоположения. Основные функции включают получение данных о погоде из API, отображение текущих погодных условий, настройку поиска по местоположению и поддержку различных единиц измерения. В разработке использовались следующие технологии: React, Axios, Bootstrap, OpenWeather API, Material UI, I18next, Gsap, Antd, React-icons и react-player.
Github
Космический веб-сайт, созданный с использованием React и Tailwind CSS
Этот проект Space Website - одностраничное приложение, созданное с использованием React и Tailwind CSS. Оно представляет собой информацию о космосе и позволяет пользователям исследовать его чудеса. В пакете предоставляется возможность ознакомиться с демонстрационной версией приложения, а также описываются его ключевые особенности, включая адаптивный дизайн, космическую тематику, информацию о ракетах и космической эксплуатации, интерактивное меню навигации и футер с космическим фоном. Открытые для вклада предложения по улучшению проекта приветствуются, а сам проект распространяется под лицензией MIT.
Github
Этот проект Space Website - одностраничное приложение, созданное с использованием React и Tailwind CSS. Оно представляет собой информацию о космосе и позволяет пользователям исследовать его чудеса. В пакете предоставляется возможность ознакомиться с демонстрационной версией приложения, а также описываются его ключевые особенности, включая адаптивный дизайн, космическую тематику, информацию о ракетах и космической эксплуатации, интерактивное меню навигации и футер с космическим фоном. Открытые для вклада предложения по улучшению проекта приветствуются, а сам проект распространяется под лицензией MIT.
Github
Приложение React QR Code с флажком
Данный пакет из GitHub включает в себя три основных компонента: checkbox-qr, Stack и Vite. Checkbox-qr - это библиотека для создания и использования элементов с помощью флажка QR-кодов. Stack - это инструмент для построения и разработки современных веб-приложений, который включает в себя Vite - инструмент для сборки кода и локального сервера. Также в пакет входят React - библиотека для разработки пользовательских интерфейсов и styled-components - библиотека для стилизации компонентов React.
Github | Демо
Данный пакет из GitHub включает в себя три основных компонента: checkbox-qr, Stack и Vite. Checkbox-qr - это библиотека для создания и использования элементов с помощью флажка QR-кодов. Stack - это инструмент для построения и разработки современных веб-приложений, который включает в себя Vite - инструмент для сборки кода и локального сервера. Также в пакет входят React - библиотека для разработки пользовательских интерфейсов и styled-components - библиотека для стилизации компонентов React.
Github | Демо
Демонстрационное приложение с предлагаемым автозаполнением в React
Этот проект - демонстрация использования "suggest pattern" в React. В нем используются следующие технологии: Vite v4.3.9, React v18.2.0, TypeScript v5.0.2 и ESLint v8.38.0. Чтобы начать работу с проектом, необходимо выполнить команду "npm install" и запустить проект с помощью команды "npm run dev". Проект распространяется под лицензией MIT до 2023 года.
Github
Этот проект - демонстрация использования "suggest pattern" в React. В нем используются следующие технологии: Vite v4.3.9, React v18.2.0, TypeScript v5.0.2 и ESLint v8.38.0. Чтобы начать работу с проектом, необходимо выполнить команду "npm install" и запустить проект с помощью команды "npm run dev". Проект распространяется под лицензией MIT до 2023 года.
Github
Все мета-теги SEO, которые могут вам понадобиться, в одном компоненте React
Пакет "metadatah" представляет собой компонент React, в котором собраны все необходимые метатеги для поисковой оптимизации (SEO). Основная мотивация создания этого пакета заключается в том, чтобы избежать необходимости копировать метатеги из одного компонента в другой при публикации статьи в интернете, особенно в социальных сетях.
Github
Пакет "metadatah" представляет собой компонент React, в котором собраны все необходимые метатеги для поисковой оптимизации (SEO). Основная мотивация создания этого пакета заключается в том, чтобы избежать необходимости копировать метатеги из одного компонента в другой при публикации статьи в интернете, особенно в социальных сетях.
Github
Приложение для электронной коммерции, которое предоставляет продавцам веганских продуктов питания уникальную платформу
PaymentHealthyMe - это веб-приложение электронной коммерции, предоставляющее продавцам веганской пищи уникальную платформу для продажи их здорового и эстетичного питания своим целевым потребителям. Приложение построено с использованием ReactJS, Nodejs, expressjs, Mongodb-atlas, аутентификации auth0 и платежного шлюза Razorpay, что обеспечивает плавный и безопасный опыт электронной коммерции. Вместе с такими функциями, как поиск, фильтрация, сортировка, списки продуктов, корзина и отслеживание заказов, HealthyMe предоставляет комплексное решение для продавцов пищи, чтобы продавать свои здоровые и привлекательные продукты своим целевым потребителям. Это приложение также мобильно отзывчиво, полностью масштабируемо и настраиваемо, позволяя удовлетворить уникальные потребности продавцов и их целевой аудитории.
Github
PaymentHealthyMe - это веб-приложение электронной коммерции, предоставляющее продавцам веганской пищи уникальную платформу для продажи их здорового и эстетичного питания своим целевым потребителям. Приложение построено с использованием ReactJS, Nodejs, expressjs, Mongodb-atlas, аутентификации auth0 и платежного шлюза Razorpay, что обеспечивает плавный и безопасный опыт электронной коммерции. Вместе с такими функциями, как поиск, фильтрация, сортировка, списки продуктов, корзина и отслеживание заказов, HealthyMe предоставляет комплексное решение для продавцов пищи, чтобы продавать свои здоровые и привлекательные продукты своим целевым потребителям. Это приложение также мобильно отзывчиво, полностью масштабируемо и настраиваемо, позволяя удовлетворить уникальные потребности продавцов и их целевой аудитории.
Github
Приложение с коротким URL-адресом, созданное с использованием Next.js
Пакет из GitHub представляет собой приложение для создания коротких URL-адресов на основе Next.js. Пользователи могут вводить длинные веб-адреса и генерировать короткие URL-адреса, что делает их более удобными для передачи ссылок. В приложении доступны такие функции, как укорачивание URL-адресов, перенаправление на первоначальные веб-адреса, просмотр базовой аналитики и регистрация и аутентификация пользователей. Для запуска приложения локально необходимо склонировать репозиторий, установить зависимости и перейти по указанной ссылке. Контрибьюторы также приветствуются и могут вносить свои предложения и правки в репозиторий.
Github
Пакет из GitHub представляет собой приложение для создания коротких URL-адресов на основе Next.js. Пользователи могут вводить длинные веб-адреса и генерировать короткие URL-адреса, что делает их более удобными для передачи ссылок. В приложении доступны такие функции, как укорачивание URL-адресов, перенаправление на первоначальные веб-адреса, просмотр базовой аналитики и регистрация и аутентификация пользователей. Для запуска приложения локально необходимо склонировать репозиторий, установить зависимости и перейти по указанной ссылке. Контрибьюторы также приветствуются и могут вносить свои предложения и правки в репозиторий.
Github
Клон пользовательского интерфейса TikTok, созданный с использованием React
Этот пакет Github - TikTok UI Clone - является веб-приложением, разработанным для воссоздания пользовательского интерфейса приложения TikTok. Он создан с использованием React.js, CSS и JSX и позволяет пользователям просматривать и просматривать видео в стиле TikTok в знакомом и интерактивном интерфейсе. Основные функции включают просмотр видео в стиле TikTok, плавное и отзывчивое воспроизведение видео, простой и понятный интерфейс с интуитивной навигацией, бесконечную прокрутку для плавного обнаружения видео и возможность ставить лайки, оставлять комментарии и делиться видео. Для установки и использования клонированного интерфейса TikTok UI следуйте инструкциям в репозитории.
Github
Этот пакет Github - TikTok UI Clone - является веб-приложением, разработанным для воссоздания пользовательского интерфейса приложения TikTok. Он создан с использованием React.js, CSS и JSX и позволяет пользователям просматривать и просматривать видео в стиле TikTok в знакомом и интерактивном интерфейсе. Основные функции включают просмотр видео в стиле TikTok, плавное и отзывчивое воспроизведение видео, простой и понятный интерфейс с интуитивной навигацией, бесконечную прокрутку для плавного обнаружения видео и возможность ставить лайки, оставлять комментарии и делиться видео. Для установки и использования клонированного интерфейса TikTok UI следуйте инструкциям в репозитории.
Github
Реагируйте на приложение Todo с помощью localStorage
React Todo App - это приложение для создания списка задач с использованием React. В приложении можно добавлять задачи и удалять их по клику на кнопку. Кроме того, все задачи автоматически сохраняются в локальное хранилище при изменении состояния приложения. Доступна демонстрация приложения по [ссылке](https://arberlisaj.github.io/react-todo-app/).
Github
React Todo App - это приложение для создания списка задач с использованием React. В приложении можно добавлять задачи и удалять их по клику на кнопку. Кроме того, все задачи автоматически сохраняются в локальное хранилище при изменении состояния приложения. Доступна демонстрация приложения по [ссылке](https://arberlisaj.github.io/react-todo-app/).
Github
Список расходов, созданный с помощью React и TypeScript
Пакет "React Expense List" представляет собой приложение для учета расходов. Оно позволяет добавлять расходы, удалять их и фильтровать по категориям. В приложении также реализовано валидация формы с использованием Zod. На странице проекта доступен скриншот работы приложения и демонстрация в реальном времени.
Github
Пакет "React Expense List" представляет собой приложение для учета расходов. Оно позволяет добавлять расходы, удалять их и фильтровать по категориям. В приложении также реализовано валидация формы с использованием Zod. На странице проекта доступен скриншот работы приложения и демонстрация в реальном времени.
Github
Универсальный компонент React, обеспечивающий функциональность нижнего листа
React Stateful Bottom Sheet - это универсальный пакет npm, который предоставляет компонент нижнего списка со состоянием для ваших приложений React. Он легко вписывается в ваш проект, повышая взаимодействие и отзывчивость пользователей. Он поддерживает различные настройки и может изменяться в размере в зависимости от интерактивного перемещения пользователя вверх и вниз. Встроенное управление состоянием позволяет открывать или закрывать нижний список, обеспечивая гладкую работу. Компонент также поддерживает плавные анимации и переходы с помощью библиотеки framer-motion, а интеграция с TypeScript улучшает безопасность типов и опыт разработчика.
Github
React Stateful Bottom Sheet - это универсальный пакет npm, который предоставляет компонент нижнего списка со состоянием для ваших приложений React. Он легко вписывается в ваш проект, повышая взаимодействие и отзывчивость пользователей. Он поддерживает различные настройки и может изменяться в размере в зависимости от интерактивного перемещения пользователя вверх и вниз. Встроенное управление состоянием позволяет открывать или закрывать нижний список, обеспечивая гладкую работу. Компонент также поддерживает плавные анимации и переходы с помощью библиотеки framer-motion, а интеграция с TypeScript улучшает безопасность типов и опыт разработчика.
Github
Быстрый анализ и отладка кода с помощью ChatGPT в вашем браузере
Пакет CodeSage — это программный инструмент, разработанный для значительного сокращения времени, затрачиваемого разработчиками на кодирование и отладку. Он включает в себя встроенный редактор и компилятор, позволяющие разработчикам анализировать и оптимизировать код, отлавливать ошибки, проверять безопасность и оценивать качество и сложность кода. Он также охватывает различные сегменты рынка, включая крупные технологические компании, стартапы с ограниченными ресурсами и учебные заведения, и предлагает ряд улучшений и инноваций, таких как интеграция с пакетными менеджерами и возможность предварительного просмотра HTML и React-кода.
Github
Пакет CodeSage — это программный инструмент, разработанный для значительного сокращения времени, затрачиваемого разработчиками на кодирование и отладку. Он включает в себя встроенный редактор и компилятор, позволяющие разработчикам анализировать и оптимизировать код, отлавливать ошибки, проверять безопасность и оценивать качество и сложность кода. Он также охватывает различные сегменты рынка, включая крупные технологические компании, стартапы с ограниченными ресурсами и учебные заведения, и предлагает ряд улучшений и инноваций, таких как интеграция с пакетными менеджерами и возможность предварительного просмотра HTML и React-кода.
Github
Приложение для бронирования, созданное с помощью React
Booking_Application - это пакет, доступный на GitHub, который позволяет пользователям регистрироваться и создавать учетную запись, указывая свое имя, адрес электронной почты и пароль, причем пароли надежно зашифрованы. Существующие пользователи могут войти в систему и просмотреть доступные места, включая такие сведения, как название, адрес, описание, цена и фотографии. Пользователи могут бронировать жилье, указывать даты заезда/отъезда и просматривать данные о своем бронировании, а также управлять своим профилем, обновляя такую информацию, как имя, адрес электронной почты и контактные данные. Используемый технологический стек включает React, Node.js , MongoDB и CSS для стилизации.
Github
Booking_Application - это пакет, доступный на GitHub, который позволяет пользователям регистрироваться и создавать учетную запись, указывая свое имя, адрес электронной почты и пароль, причем пароли надежно зашифрованы. Существующие пользователи могут войти в систему и просмотреть доступные места, включая такие сведения, как название, адрес, описание, цена и фотографии. Пользователи могут бронировать жилье, указывать даты заезда/отъезда и просматривать данные о своем бронировании, а также управлять своим профилем, обновляя такую информацию, как имя, адрес электронной почты и контактные данные. Используемый технологический стек включает React, Node.js , MongoDB и CSS для стилизации.
Github
Адаптивный дизайн веб-сайта портфолио с использованием React.Js CSS и HTML
Этот пакет Portfolio-Website (React.Js) представляет собой адаптивный дизайн портфолио-сайта, разработанный с использованием React.Js, CSS и HTML. Он обладает плавной прокруткой в каждом разделе и полностью совместим с мобильными устройствами. Сайт имеет красивый и приятный пользовательский интерфейс и построен с использованием технологий React.js, JavaScript, CSS3, VSCode и Vercel. Для установки и настройки необходимо клонировать репозиторий, установить node.js и git, выполнить команду npm install для установки зависимостей и запустить команду npm start для запуска приложения в режиме разработки. Для настройки информации на сайте необходимо открыть папку проекта и перейти в /src/components/, где находятся все использованные компоненты. Если вам нравится этот сайт, не забудьте поставить звезду на GitHub.
Github | Демо
Этот пакет Portfolio-Website (React.Js) представляет собой адаптивный дизайн портфолио-сайта, разработанный с использованием React.Js, CSS и HTML. Он обладает плавной прокруткой в каждом разделе и полностью совместим с мобильными устройствами. Сайт имеет красивый и приятный пользовательский интерфейс и построен с использованием технологий React.js, JavaScript, CSS3, VSCode и Vercel. Для установки и настройки необходимо клонировать репозиторий, установить node.js и git, выполнить команду npm install для установки зависимостей и запустить команду npm start для запуска приложения в режиме разработки. Для настройки информации на сайте необходимо открыть папку проекта и перейти в /src/components/, где находятся все использованные компоненты. Если вам нравится этот сайт, не забудьте поставить звезду на GitHub.
Github | Демо
Веб-приложение для социальных сетей с базовым функционалом
Пакет на GitHub представляет собой социальное медиа веб-приложение с основными функциональными возможностями, созданное в соответствии с инструкциями из видео на YouTube. В приложении есть функции регистрации, входа и выхода из аккаунта, создания постов, лайков и дизлайков, а также переключение между темной и светлой темой. Для запуска приложения локально необходимо клонировать код, создать файл .env с переменными MONGO_URL, JWT_SECRET и PORT, установить необходимые зависимости, запустить сервер и клиентскую часть с помощью команды "npm run start".
Github
Пакет на GitHub представляет собой социальное медиа веб-приложение с основными функциональными возможностями, созданное в соответствии с инструкциями из видео на YouTube. В приложении есть функции регистрации, входа и выхода из аккаунта, создания постов, лайков и дизлайков, а также переключение между темной и светлой темой. Для запуска приложения локально необходимо клонировать код, создать файл .env с переменными MONGO_URL, JWT_SECRET и PORT, установить необходимые зависимости, запустить сервер и клиентскую часть с помощью команды "npm run start".
Github
Next.js приложение, визуализирующее погодные тенденции для любого геолокационного местоположения
Данный пакет из Github представляет собой веб-приложение, которое позволяет визуализировать и сравнивать погодные и климатические тенденции для любого местоположения. Вы можете изучить исторические данные для любой указанной даты, недели или месяца в период с 1940 года по настоящее время. Приложение создано на базе Next.js, использует библиотеки React-Vis, Pigeon Maps и API Open Meteo. Вы можете попробовать приложение в песочнице или запустить его локально, склонировав репозиторий и установив зависимости.
Github
Данный пакет из Github представляет собой веб-приложение, которое позволяет визуализировать и сравнивать погодные и климатические тенденции для любого местоположения. Вы можете изучить исторические данные для любой указанной даты, недели или месяца в период с 1940 года по настоящее время. Приложение создано на базе Next.js, использует библиотеки React-Vis, Pigeon Maps и API Open Meteo. Вы можете попробовать приложение в песочнице или запустить его локально, склонировав репозиторий и установив зависимости.
Github
Ювелирный веб-сайт, созданный с использованием React
Данный пакет на GitHub представляет собой проект по созданию интернет-магазина ювелирных изделий. Фронтэнд разработан с использованием React, а бэкэнд - Node Express. Для стилизации используются CSS и React Bootstrap, а функциональность сайта осуществляется при помощи JSX. Сайт будет обладать удобным интерфейсом для клиентов: они смогут регистрироваться/авторизовываться при помощи Google-аккаунта или по электронной почте и паролю. Клиенты также смогут легко совершать покупки, проверять свои заказы, получать обратную связь и другие функции. Администратор сможет управлять товарами, заказами и добавлять других администраторов. Дизайн сайта простой и понятный для пользователя.
Github
Данный пакет на GitHub представляет собой проект по созданию интернет-магазина ювелирных изделий. Фронтэнд разработан с использованием React, а бэкэнд - Node Express. Для стилизации используются CSS и React Bootstrap, а функциональность сайта осуществляется при помощи JSX. Сайт будет обладать удобным интерфейсом для клиентов: они смогут регистрироваться/авторизовываться при помощи Google-аккаунта или по электронной почте и паролю. Клиенты также смогут легко совершать покупки, проверять свои заказы, получать обратную связь и другие функции. Администратор сможет управлять товарами, заказами и добавлять других администраторов. Дизайн сайта простой и понятный для пользователя.
Github
Минималистичное приложение для тестирования скорости набора текста, созданное с использованием React и TailwindCSS
OpenType - это приложение на базе React и TailwindCSS, которое позволяет пользователям тестировать и улучшать скорость и точность набора текста. Он обеспечивает удобный интерфейс и интуитивно понятную обратную связь по производительности набора текста. Приложение включает в себя такие функции, как тесты набора текста, регулируемая продолжительность набора текста, отображение статистики, история набора текста, настройка темы и адаптивный дизайн. Планы на будущее для приложения включают добавление большего количества языков, тем, виртуальной клавиатуры, уровней сложности и отслеживание истории набора текста пользователем. Проект отдает должное MonkeyType за вдохновение и дизайнерские идеи.
Github
OpenType - это приложение на базе React и TailwindCSS, которое позволяет пользователям тестировать и улучшать скорость и точность набора текста. Он обеспечивает удобный интерфейс и интуитивно понятную обратную связь по производительности набора текста. Приложение включает в себя такие функции, как тесты набора текста, регулируемая продолжительность набора текста, отображение статистики, история набора текста, настройка темы и адаптивный дизайн. Планы на будущее для приложения включают добавление большего количества языков, тем, виртуальной клавиатуры, уровней сложности и отслеживание истории набора текста пользователем. Проект отдает должное MonkeyType за вдохновение и дизайнерские идеи.
Github
Утилита оболочки для интерактивного выбора строк из стандартного ввода
Утилита LineSelect представляет собой командную оболочку, которая позволяет выбрать строки из ввода и вывести их в вывод. Это позволяет пользователям прерывать выполнение командного потока и вручную выбирать нужные строки перед продолжением выполнения командного потока или другой составной команды. Программа может быть использована для выбора файлов для удаления, выбора контейнеров Docker для остановки или отбора определенных строк из лог-файлов. Утилита построена на основе библиотеки React-for-CLI Ink и использует уникальный метод отображения пользовательского интерфейса, обеспечивающий корректную работу с выводом в консоль.
Github
Утилита LineSelect представляет собой командную оболочку, которая позволяет выбрать строки из ввода и вывести их в вывод. Это позволяет пользователям прерывать выполнение командного потока и вручную выбирать нужные строки перед продолжением выполнения командного потока или другой составной команды. Программа может быть использована для выбора файлов для удаления, выбора контейнеров Docker для остановки или отбора определенных строк из лог-файлов. Утилита построена на основе библиотеки React-for-CLI Ink и использует уникальный метод отображения пользовательского интерфейса, обеспечивающий корректную работу с выводом в консоль.
Github