Перейти к основному содержимому

Первый пет-проект в 2024 году - My Password

· 2 мин. чтения
Alex Congritta

Написал небольшой, но удобный генератор паролей. Это полноценное PWA (Progressive Web Application) (веб-приложение), которое запускается в браузере и может быть установлено на Windows, Linux, Android, iOS. Обо всём подробнее в статье

Ссылка на проект: mypwd.org
Исходный код: github.com/congritta/my-password

В двух словах о проекте

Генератор паролей с возможностью выбора длины пароля, наличия букв, цифр и символов. BackEnd-части у проекта нет, поэтому генерация пароля происходит непосредственно в браузере пользователя и сгенерированный пароль никуда не отправляется.

Проект написан на React (язык TypeScript) с использованием библиотек:

  • classnames - для переключения CSS-класов у элементов;
  • mobx - для хранения информации о выбранном языке интерфейса;
  • react-router-dom - для внедрения роутинга (сейчас не используется, разве что для хранения настроек генератора в Search Query браузера);

Что интересного в техническом плане

  • Это PWA, построенное по всем правилам (со сгенерированными apple-touch icons, web manifest и внедрённым Service Worker). Приложение может быть установлено на компьютер и смартфон прямо из-под браузера и работать оффлайн;
  • Есть поддержка тёмной темы (реализована через CSS Media Queries);
  • Адаптивный дизайн (хотя кого им удивишь уже);
  • Надпись "Click to Copy" сменяется на "Tap to Copy", если у пользователя обнаружен сенсорный экран (реализовано через CSS Media Queries);

Итоги

Проект хостится на GitHub Pages на домене (mypwd.org) (странно, что такой домен был свободен на момент его покупки). Исходный код проекта открыт и доступен на github.com/congritta/my-password.

На разработку проекта ушло около 8 часов. Дизайн придуман с нуля самим разработчиком (Alex Congritta)