Компонент иерархического дерева для React в Typescript
React Tree - это компонент древовидной структуры для React, написанный на TypeScript. Он поддерживает тематизацию для почти всех частей компонентов и может быть использован как в качестве неконтролируемого компонента, так и контролируемого компонента. Также он обладает большим набором функций, таких как стилизация контейнера, поддержка многоуровневого выбора, настраиваемые строки сообщений и рабочий API для контроля состояния. Он также поддерживает пользовательский рендеринг узлов и иконок, и имеет возможность кастомизации темы.
Github
React Tree - это компонент древовидной структуры для React, написанный на TypeScript. Он поддерживает тематизацию для почти всех частей компонентов и может быть использован как в качестве неконтролируемого компонента, так и контролируемого компонента. Также он обладает большим набором функций, таких как стилизация контейнера, поддержка многоуровневого выбора, настраиваемые строки сообщений и рабочий API для контроля состояния. Он также поддерживает пользовательский рендеринг узлов и иконок, и имеет возможность кастомизации темы.
Github
Приложение со списком дел, использующее React
React-Todo-list - это приложение ToDo-список, разработанное мной для изучения и улучшения навыков работы с React. В технологическом стеке использовались React, HTML, CSS и JavaScript. В процессе работы над проектом я освоил применение React hooks, работу с пропсами, функциями обработки состояния данных и устранение ошибок. В приложении имеются скриншоты для наглядности.
Github
React-Todo-list - это приложение ToDo-список, разработанное мной для изучения и улучшения навыков работы с React. В технологическом стеке использовались React, HTML, CSS и JavaScript. В процессе работы над проектом я освоил применение React hooks, работу с пропсами, функциями обработки состояния данных и устранение ошибок. В приложении имеются скриншоты для наглядности.
Github
Приложение Todo, созданное с использованием React и Redux
Пакет "Todo App" - это приложение для управления списком дел. Для установки и запуска нужно воспользоваться командами "yarn install" или "yarn start". Проект можно легко задеплоить на Netlify или github-pages. В качестве инструментов использованы React, React Hooks Redux, Redux Persistent, Sass, что обеспечивает улучшенный интерфейс, сохранение состояния приложения и возможность расширения функционала. Проект размещен под лицензией MIT, и вы можете внести свой вклад, оставив комментарий или создав новый пулл-реквест.
Github
Пакет "Todo App" - это приложение для управления списком дел. Для установки и запуска нужно воспользоваться командами "yarn install" или "yarn start". Проект можно легко задеплоить на Netlify или github-pages. В качестве инструментов использованы React, React Hooks Redux, Redux Persistent, Sass, что обеспечивает улучшенный интерфейс, сохранение состояния приложения и возможность расширения функционала. Проект размещен под лицензией MIT, и вы можете внести свой вклад, оставив комментарий или создав новый пулл-реквест.
Github
Веб-приложение для продуктов питания, использующее React JS и Tailwind CSS
Этот пакет из GitHub - веб-приложение для заказа еды, написанное на React JS и стилизованное с использованием Tailwind CSS. Для установки необходимых зависимостей следует выполнить команду npm install. Данные и изображения, используемые для имитации ответов API, находятся в файле src/data/data.js. В процессе создания данного приложения было использовано сочетание React и Tailwind, позволяющее быстро создавать веб-сайты. Также было добавлено немного дополнительного JavaScript с использованием метода фильтрации массива для фильтрации определенных типов продуктов и категорий цен.
Github
Этот пакет из GitHub - веб-приложение для заказа еды, написанное на React JS и стилизованное с использованием Tailwind CSS. Для установки необходимых зависимостей следует выполнить команду npm install. Данные и изображения, используемые для имитации ответов API, находятся в файле src/data/data.js. В процессе создания данного приложения было использовано сочетание React и Tailwind, позволяющее быстро создавать веб-сайты. Также было добавлено немного дополнительного JavaScript с использованием метода фильтрации массива для фильтрации определенных типов продуктов и категорий цен.
Github
Веб-сайт, на котором вы можете сохранить просмотренное аниме, используя React и Postgresql
Проект AnimeSaver является веб-приложением, которое позволяет искать аниме и добавлять их в список. Вы также можете оставить комментарий и оценить аниме, а также редактировать или удалить их. Для запуска проекта необходимо установить Node.js, NPM и Docker, а затем клонировать репозиторий и выполнить команду "docker-compose up" в терминале. Приложение использует фреймворки NestJS и React, базу данных PostgreSQL, аутентификацию с помощью JWT, а также другие технологии и API.
Github
Проект AnimeSaver является веб-приложением, которое позволяет искать аниме и добавлять их в список. Вы также можете оставить комментарий и оценить аниме, а также редактировать или удалить их. Для запуска проекта необходимо установить Node.js, NPM и Docker, а затем клонировать репозиторий и выполнить команду "docker-compose up" в терминале. Приложение использует фреймворки NestJS и React, базу данных PostgreSQL, аутентификацию с помощью JWT, а также другие технологии и API.
Github
Платформа React share отслеживает или разделяет счета
TruPaid - это автоматизированная система для совместного использования расходов. С ее помощью согласовывать или разделять счета могут сожители, арендаторы и собственники жилья, а также пары. В проектной директории доступны следующие скрипты: yarn lint - запускает проверку типов файлов проекта на соответствие линтеру; yarn format - пытается исправить типы файлов проекта с использованием prettier; yarn start - запускает приложение в режиме разработки на http://localhost:3000; yarn test - запускает тестовый раннер в интерактивном режиме; yarn build - собирает приложение для развертывания в папку build. В пакете также присутствуют различные папки: api, assets, components, features, hooks, store, types и utils. Проект использует TypeScript, Redux Toolkit для управления состоянием, React Router для маршрутизации, Material-UI для стилизации, axios для выполнения HTTP-запросов и Storybook для визуализации и взаимодействия с пользовательскими компонентами.
Github
TruPaid - это автоматизированная система для совместного использования расходов. С ее помощью согласовывать или разделять счета могут сожители, арендаторы и собственники жилья, а также пары. В проектной директории доступны следующие скрипты: yarn lint - запускает проверку типов файлов проекта на соответствие линтеру; yarn format - пытается исправить типы файлов проекта с использованием prettier; yarn start - запускает приложение в режиме разработки на http://localhost:3000; yarn test - запускает тестовый раннер в интерактивном режиме; yarn build - собирает приложение для развертывания в папку build. В пакете также присутствуют различные папки: api, assets, components, features, hooks, store, types и utils. Проект использует TypeScript, Redux Toolkit для управления состоянием, React Router для маршрутизации, Material-UI для стилизации, axios для выполнения HTTP-запросов и Storybook для визуализации и взаимодействия с пользовательскими компонентами.
Github
Невероятно простая система всплывающих уведомлений для React
Пакет "buttered-toast" представляет собой простую систему уведомлений (toast) для React. Размер пакета всего 894 байта (сжатый), без зависимостей и конфигурации. Для использования достаточно импортировать компоненты "ToastContextProvider" и "useToast", и затем вызвать функцию "show" с необходимым содержимым тоста. Пакет также предлагает настройку параметров по умолчанию и возможность создания собственного стиля для тостов.
Github
Пакет "buttered-toast" представляет собой простую систему уведомлений (toast) для React. Размер пакета всего 894 байта (сжатый), без зависимостей и конфигурации. Для использования достаточно импортировать компоненты "ToastContextProvider" и "useToast", и затем вызвать функцию "show" с необходимым содержимым тоста. Пакет также предлагает настройку параметров по умолчанию и возможность создания собственного стиля для тостов.
Github
Пример проекта, показывающий, что ElysiaJS работает как следующий.Пользовательский сервер JS
Этот пакет включает в себя Bun, ElysiaJS и NextJS. В демонстрационном проекте показано, как ElysiaJS работает в качестве пользовательского сервера Next.JS с полной типовой безопасностью, подобной tRPC и ts-rest. Вы можете определять пути маршрутов (в отличие от tRPC), и не требуется дополнительный шаблонный код (в отличие от ts-rest контрактов). Все это работает на быстром рантайме bun, и достигается с помощью реактивных компонентов сервера (React Server Components), где вы можете получить доступ к глобальным объектам Bun (например, Bun.password, Bun.file). Поддерживается горячая перезагрузка модулей. Проект также может быть развернут на платформе Railway (nixpacks), где с помощью Nixpacks builder вы можете развернуть проект своим хэшем репозитория на GitHub всего одним щелчком. В будущем также планируется добавить поддержку Docker.
Github
Этот пакет включает в себя Bun, ElysiaJS и NextJS. В демонстрационном проекте показано, как ElysiaJS работает в качестве пользовательского сервера Next.JS с полной типовой безопасностью, подобной tRPC и ts-rest. Вы можете определять пути маршрутов (в отличие от tRPC), и не требуется дополнительный шаблонный код (в отличие от ts-rest контрактов). Все это работает на быстром рантайме bun, и достигается с помощью реактивных компонентов сервера (React Server Components), где вы можете получить доступ к глобальным объектам Bun (например, Bun.password, Bun.file). Поддерживается горячая перезагрузка модулей. Проект также может быть развернут на платформе Railway (nixpacks), где с помощью Nixpacks builder вы можете развернуть проект своим хэшем репозитория на GitHub всего одним щелчком. В будущем также планируется добавить поддержку Docker.
Github
Инструмент интерфейса командной строки, предназначенный для упрощения настройки проекта
StartEase - это инструмент командной строки (CLI), предназначенный для упрощения настройки проекта. С помощью StartEase вы можете быстро и легко создавать проекты с выбранными технологиями. Он предлагает множество шаблонов для фронтенд, бэкенд и полного стека разработки, а также поддерживает различные базы данных. Если вы хотите внести вклад в проект, вы можете сообщить об ошибках, предложить улучшения или внести свой код, следуя руководству по внесению изменений. Проект лицензирован по лицензии MIT.
Github
StartEase - это инструмент командной строки (CLI), предназначенный для упрощения настройки проекта. С помощью StartEase вы можете быстро и легко создавать проекты с выбранными технологиями. Он предлагает множество шаблонов для фронтенд, бэкенд и полного стека разработки, а также поддерживает различные базы данных. Если вы хотите внести вклад в проект, вы можете сообщить об ошибках, предложить улучшения или внести свой код, следуя руководству по внесению изменений. Проект лицензирован по лицензии MIT.
Github
Веб-сайт-портфолио, созданный с использованием React.js и интегрирован с Email.js для работы с электронной почтой
Этот пакет представляет собой портфолио-сайт, построенный с использованием React.js и интегрированный с Email.js для функционала отправки электронной почты. Файл README содержит информацию о настройке, настраивании и развертывании сайта. Возможности включают возможность показать свое портфолио с помощью удобного интерфейса, разрешить посетителям связаться с вами по электронной почте, а также простой и отзывчивый дизайн. Для работы необходимо установить Node.js и npm (Node Package Manager).
Github
Этот пакет представляет собой портфолио-сайт, построенный с использованием React.js и интегрированный с Email.js для функционала отправки электронной почты. Файл README содержит информацию о настройке, настраивании и развертывании сайта. Возможности включают возможность показать свое портфолио с помощью удобного интерфейса, разрешить посетителям связаться с вами по электронной почте, а также простой и отзывчивый дизайн. Для работы необходимо установить Node.js и npm (Node Package Manager).
Github
Для начала покажу решение для написания резюме в react и простого экспорта в формате pdf
Этот пакет на GitHub представляет собой шаблон для создания резюме с использованием React. Возможности пакета включают: возможность однократной записи, чтобы получить веб-сайт и PDF-версию резюме; адаптивность и интерактивность для работы на мобильных устройствах; возможность получать данные в режиме реального времени через API-запросы, например, количество звезд на GitHub ваших репозиториев; поддержка режима светлой и темной темы, а также анимаций; в будущем планируется добавить интеграцию с GPT-моделью для ответов на вопросы о вас. Пакет также предоставляет возможность просмотра и загрузки PDF-версии резюме, а также простые инструкции по запуску и дальнейшей настройке проекта.
Github
Этот пакет на GitHub представляет собой шаблон для создания резюме с использованием React. Возможности пакета включают: возможность однократной записи, чтобы получить веб-сайт и PDF-версию резюме; адаптивность и интерактивность для работы на мобильных устройствах; возможность получать данные в режиме реального времени через API-запросы, например, количество звезд на GitHub ваших репозиториев; поддержка режима светлой и темной темы, а также анимаций; в будущем планируется добавить интеграцию с GPT-моделью для ответов на вопросы о вас. Пакет также предоставляет возможность просмотра и загрузки PDF-версии резюме, а также простые инструкции по запуску и дальнейшей настройке проекта.
Github
В проекте React можно узнать текущую погоду в любом городе, независимо от местоположения
Этот пакет на GitHub, ReactToWeather, представляет собой проект, пригодный для начинающих. В нем можно получить погоду по названию города и переключать температуру между шкалами Фаренгейта, Кельвина и Цельсия. Проект открыт для новых функций и приветствует вклады от сообщества. Он использует API OpenWeatherMap, имеет несколько предварительных требований и распространяется под лицензией MIT, с соблюдением кодекса поведения.
Github
Этот пакет на GitHub, ReactToWeather, представляет собой проект, пригодный для начинающих. В нем можно получить погоду по названию города и переключать температуру между шкалами Фаренгейта, Кельвина и Цельсия. Проект открыт для новых функций и приветствует вклады от сообщества. Он использует API OpenWeatherMap, имеет несколько предварительных требований и распространяется под лицензией MIT, с соблюдением кодекса поведения.
Github
Веб-сайт электронной коммерции ProShop, созданный с использованием MERN и Redux Toolkit
Платформа электронной коммерции ProShop (версия 2) - это платформа электронной коммерции, построенная с использованием стека MERN (MongoDB, Express, React, Node.js ) и Redux. Это полнофункциональная корзина покупок с интеграцией PayPal и кредитных / дебетовых платежей. Платформа включает в себя такие функции, как поиск продукта, профили пользователей, администрирование продукта и управление пользователями, детали заказа и процесс оформления заказа. Он также предоставляет функциональность для заполнения базы данных и включает исправления ошибок и исправление кода. Проект является частью курса по платформе электронной коммерции MERN Stack и лицензирован по лицензии MIT.
Github
Платформа электронной коммерции ProShop (версия 2) - это платформа электронной коммерции, построенная с использованием стека MERN (MongoDB, Express, React, Node.js ) и Redux. Это полнофункциональная корзина покупок с интеграцией PayPal и кредитных / дебетовых платежей. Платформа включает в себя такие функции, как поиск продукта, профили пользователей, администрирование продукта и управление пользователями, детали заказа и процесс оформления заказа. Он также предоставляет функциональность для заполнения базы данных и включает исправления ошибок и исправление кода. Проект является частью курса по платформе электронной коммерции MERN Stack и лицензирован по лицензии MIT.
Github
Молниеносный React.js редактор кода с предварительным просмотром HTML, CSS и JS в режиме реального времени
React Code Editor - это веб-приложение для редактирования кода, построенное с использованием фреймворка React.js, которое позволяет пользователям писать и запускать код на HTML, CSS и JavaScript. В нем присутствуют такие возможности, как реальное время редактирования, запуск и предварительный просмотр кода в браузере, а также подсветка синтаксиса для улучшения ясности кода. Установка очень простая и он легко интегрируется с проектами на React.
Github
React Code Editor - это веб-приложение для редактирования кода, построенное с использованием фреймворка React.js, которое позволяет пользователям писать и запускать код на HTML, CSS и JavaScript. В нем присутствуют такие возможности, как реальное время редактирования, запуск и предварительный просмотр кода в браузере, а также подсветка синтаксиса для улучшения ясности кода. Установка очень простая и он легко интегрируется с проектами на React.
Github
Создание сайта для личного портфолио в React
Этот пакет включает личный портфолио и блог Prasad Chavan, доступный по ссылке https://prasadchavan.vercel.app/. Он имеет отзывчивый дизайн для различных размеров экранов и устройств. Внутри сайта есть разделы для отображения личной информации, резюме, проектов и контактных данных. Есть динамическая маршрутизация и оптимизация для SEO с помощью Next.js. Проект разработан с использованием следующих технологий: React JS, Next JS, MarkDown, HTML/CSS/JS, Tailwind CSS, Node JS. Вносить свой вклад в проект приветствуется! Если у вас есть предложения, сообщения об ошибках или запросы на добавление функций, пожалуйста, откройте проблему или отправьте запрос на объединение изменений. Авторские права © Prasad Chavan 2023.
Github
Этот пакет включает личный портфолио и блог Prasad Chavan, доступный по ссылке https://prasadchavan.vercel.app/. Он имеет отзывчивый дизайн для различных размеров экранов и устройств. Внутри сайта есть разделы для отображения личной информации, резюме, проектов и контактных данных. Есть динамическая маршрутизация и оптимизация для SEO с помощью Next.js. Проект разработан с использованием следующих технологий: React JS, Next JS, MarkDown, HTML/CSS/JS, Tailwind CSS, Node JS. Вносить свой вклад в проект приветствуется! Если у вас есть предложения, сообщения об ошибках или запросы на добавление функций, пожалуйста, откройте проблему или отправьте запрос на объединение изменений. Авторские права © Prasad Chavan 2023.
Github
Простой и полезный диспетчер задач с React
Taskman - это простое приложение для управления задачами, ориентированное на то, чтобы помочь пользователям управлять своей рабочей нагрузкой в течение дня. Он имеет элегантный и минималистичный дизайн, без каких-либо отвлекающих факторов или рекламы. Приложение позволяет пользователям создавать, читать, обновлять и удалять задачи. Он построен с использованием MongoDB, ExpressJS, React и NodeJS, что делает его надежным и полнофункциональным. Разработчики постоянно совершенствуют приложение, включая функцию перетаскивания, несколько списков задач на каждый день недели, функцию мягкого будильника и темный режим.
Github
Taskman - это простое приложение для управления задачами, ориентированное на то, чтобы помочь пользователям управлять своей рабочей нагрузкой в течение дня. Он имеет элегантный и минималистичный дизайн, без каких-либо отвлекающих факторов или рекламы. Приложение позволяет пользователям создавать, читать, обновлять и удалять задачи. Он построен с использованием MongoDB, ExpressJS, React и NodeJS, что делает его надежным и полнофункциональным. Разработчики постоянно совершенствуют приложение, включая функцию перетаскивания, несколько списков задач на каждый день недели, функцию мягкого будильника и темный режим.
Github
Сайт-портфолио, который выглядит и ощущается как терминал, созданный с помощью React и Tailwind
Этот пакет из GitHub представляет собой шаблон сайта-портфолио, имитирующего терминал. Он использует различные технологии, включая Vite, React, React Hook Form, TypeScript, ESLint, Tailwind CSS и Vercel Analytics. Для установки и использования пакета необходимо выполнить указанные команды. Кроме того, предоставляется информация о развертывании проекта на платформе Vercel и возможности внести свой вклад в проект. Пользователям рекомендуется ознакомиться с руководством по внесению изменений и правилами перед открытием запроса на слияние.
Github
Этот пакет из GitHub представляет собой шаблон сайта-портфолио, имитирующего терминал. Он использует различные технологии, включая Vite, React, React Hook Form, TypeScript, ESLint, Tailwind CSS и Vercel Analytics. Для установки и использования пакета необходимо выполнить указанные команды. Кроме того, предоставляется информация о развертывании проекта на платформе Vercel и возможности внести свой вклад в проект. Пользователям рекомендуется ознакомиться с руководством по внесению изменений и правилами перед открытием запроса на слияние.
Github
Набор инструментов для просмотра, поиска и создания архивов Reddit
Redarc - это самостоятельное решение для поиска, просмотра и создания собственных архивов Reddit. Он позволяет просматривать и искать потоки и комментарии, загружать изображения и архивировать потоки через API. Архивы доступны для загрузки, а также есть поддержка автоматического получения новых и популярных потоков из указанных сабреддитов. Установка осуществляется через Docker или вручную, предоставляется также документация API для выполнения поиска и запросов к архиву. Лицензия MIT.
Github
Redarc - это самостоятельное решение для поиска, просмотра и создания собственных архивов Reddit. Он позволяет просматривать и искать потоки и комментарии, загружать изображения и архивировать потоки через API. Архивы доступны для загрузки, а также есть поддержка автоматического получения новых и популярных потоков из указанных сабреддитов. Установка осуществляется через Docker или вручную, предоставляется также документация API для выполнения поиска и запросов к архиву. Лицензия MIT.
Github
Приложение 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