Проект, помогающий упрочнить использование redux в приложении react
Этот пакет из GitHub — рабочий проект, который использует только состояние и свойства для передачи данных. Основная цель проекта — улучшить веб-приложение, которое помогает пользователям заполнить заявку на ипотеку. В ходе проекта будут внесены изменения в компоненты, чтобы они работали с Redux. Также будет изменены файлы в папке src/components и файлы src/router.js, src/index.js и src/App.js для использования Redux.
Github
Этот пакет из GitHub — рабочий проект, который использует только состояние и свойства для передачи данных. Основная цель проекта — улучшить веб-приложение, которое помогает пользователям заполнить заявку на ипотеку. В ходе проекта будут внесены изменения в компоненты, чтобы они работали с Redux. Также будет изменены файлы в папке src/components и файлы src/router.js, src/index.js и src/App.js для использования Redux.
Github
Учебный таймер, написанный в React
Этот пакет из GitHub представляет собой проект по разработке таймера для учебных занятий, выполненного с использованием React. Он был создан в рамках курса Fullstack Allura, предлагаемого программой Desenvolve-Grupo Boticario. Таймер позволяет установить определенное время для изучения и уведомляет пользователя о необходимости сделать перерыв.
Github
Этот пакет из GitHub представляет собой проект по разработке таймера для учебных занятий, выполненного с использованием React. Он был создан в рамках курса Fullstack Allura, предлагаемого программой Desenvolve-Grupo Boticario. Таймер позволяет установить определенное время для изучения и уведомляет пользователя о необходимости сделать перерыв.
Github
Игра Mario Jump, созданная с использованием React и Redux Toolkit
Mario Jump - бесконечная игра, вдохновленная известной игрой Google Chrome's T-Rex Dinosaur Game. Игра полностью построена с использованием ReactJS и Redux Toolkit. Особенности игры включают мобильную адаптивность, красивые анимации, быстрое управление, высокий счет, фоновую музыку Марио и звуковые эффекты прыжков и окончания игры. Автор проекта - Gilbert Hutapea, который предоставляет лицензию MIT License для использования программного обеспечения.
Github
Mario Jump - бесконечная игра, вдохновленная известной игрой Google Chrome's T-Rex Dinosaur Game. Игра полностью построена с использованием ReactJS и Redux Toolkit. Особенности игры включают мобильную адаптивность, красивые анимации, быстрое управление, высокий счет, фоновую музыку Марио и звуковые эффекты прыжков и окончания игры. Автор проекта - Gilbert Hutapea, который предоставляет лицензию MIT License для использования программного обеспечения.
Github
Простой шаблон портфолио для разработчиков / дизайнеров, созданный с помощью React
Этот пакет включает в себя шаблон портфолио для специалистов в области информатики и кибербезопасности, созданный с использованием React. Чтобы начать использование, необходима установка git-репозитория, а затем выполнение команды установки yarn для проверки и сборки веб-сайта. Затем можно вносить изменения в содержимое страниц, указанное в файле src/content_option.js.
Github
Этот пакет включает в себя шаблон портфолио для специалистов в области информатики и кибербезопасности, созданный с использованием React. Чтобы начать использование, необходима установка git-репозитория, а затем выполнение команды установки yarn для проверки и сборки веб-сайта. Затем можно вносить изменения в содержимое страниц, указанное в файле src/content_option.js.
Github
Простое приложение React, которое сохраняет количество кликов в локальном хранилище
Этот пакет на гитхабе - простой проект счетчика на React. Для установки нужно использовать команды git clone для клонирования репозитория, cd для перехода в папку click-counter, npm i для установки зависимостей и npm run start для запуска проекта. Возможно добавление новых функций и обновление интерфейса и логики счетчика, и вклад в развитие проекта будет приветствоваться.
Github
Этот пакет на гитхабе - простой проект счетчика на React. Для установки нужно использовать команды git clone для клонирования репозитория, cd для перехода в папку click-counter, npm i для установки зависимостей и npm run start для запуска проекта. Возможно добавление новых функций и обновление интерфейса и логики счетчика, и вклад в развитие проекта будет приветствоваться.
Github
Клонировать приложение Spotify с помощью Next.js и Супербаза
В данном пакете из GitHub представлено приложение-клон Spotify, которое демонстрирует навыки автора в современной веб-разработке. Оно объединяет передовые технологии, такие как Next.js, React.js, Tailwind CSS, Supabase, Stripe и TypeScript, чтобы предоставить пользователям захватывающий и центрированный на пользователе опыт стриминга музыки. Это приложение является результатом гармоничного сочетания элегантности и мощности, и оно представляет собой цифровую симфонию, которая захватывает пользователей, поднимая их опыт прослушивания музыки на новую высоту.
Github
В данном пакете из GitHub представлено приложение-клон Spotify, которое демонстрирует навыки автора в современной веб-разработке. Оно объединяет передовые технологии, такие как Next.js, React.js, Tailwind CSS, Supabase, Stripe и TypeScript, чтобы предоставить пользователям захватывающий и центрированный на пользователе опыт стриминга музыки. Это приложение является результатом гармоничного сочетания элегантности и мощности, и оно представляет собой цифровую симфонию, которая захватывает пользователей, поднимая их опыт прослушивания музыки на новую высоту.
Github
Полнофункциональное приложение для викторин с открытым исходным кодом
Пакет REACT QUIZ - это полноценное открытое приложение для викторин на стеке MERN. Он предоставляет возможность регистрации и входа пользователей, выбора типа и уровня сложности вопросов, отсчета времени и автоматической остановки по истечении времени, а также отображения результатов ответов. Проект разработан с использованием React.js, React Vite, React Hooks, react-router-dom, Tailwind Css, React Icons, Framer Motion и Firebase для аутентификации и хранения данных. Пакет предоставляет скриншоты приложения и информацию об авторе, а также имеет лицензию MIT.
Github
Пакет REACT QUIZ - это полноценное открытое приложение для викторин на стеке MERN. Он предоставляет возможность регистрации и входа пользователей, выбора типа и уровня сложности вопросов, отсчета времени и автоматической остановки по истечении времени, а также отображения результатов ответов. Проект разработан с использованием React.js, React Vite, React Hooks, react-router-dom, Tailwind Css, React Icons, Framer Motion и Firebase для аутентификации и хранения данных. Пакет предоставляет скриншоты приложения и информацию об авторе, а также имеет лицензию MIT.
Github
Компонент иерархического дерева для 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