Это приложение я написал полностью самостоятельно с самого нуля, не используя никаких инструкции.
В предверии новогодних праздников у меня возникла идея реализовать собственного Тайного Санту. Для тех кто не знает, это распространенный во всем мире сервис по анонимному обмену подарками, который имеет сотни различных реализаций, написаных на разных языках программирования: сайты, мобильные приложения и телеграм-боты.
Сперва я хотел это сделать на чистом JavaScript просто для себя, из-за интереса, получится у меня это сделать или нет. Потом ко мне пришло осознание, что это в принципе интересная задумка для проекта, который можно реализовать и выпустить в свет, чтобы реальные люди могли им пользоваться.
На фоне отключений света и постоянного отсутствия интернета, некоторый функционал писался из головы, по памяти, методом подбора и не совсем правильно, хотя в интернете можно было найти более изящные решения для той или иной проблемы. Несмотря на это, приложение получилось хорошим, конечно со своими недостатками и некоторыми багами, о которых напишу ниже, но пофикшу я их уже, наверное, ближе к следующему Новому году.
Преимущество приложения перед аналогами:
— Интуитивно понятный интерфейс (Для тех, кто уже сталкивался с Тайным Сантой)
— Не требует абсолютно никакой регистрации
— Не требует e-mail или каких-либо других контактных данных
— Не содержит вишлисты (Как по мне, это реальный абсурд, от которого пропадает вся загадочность самой идеи анонимного обмена подарками)
— Не содержит и никогда не будет содержать никакой рекламы
Интересные фишки приложения:
— На странице приложения в режиме реального времени идет виртуальный снег. Причем, это не анимированная бекграунд-картинка. Снег идет поверх всего контента. Тут я использовал плагин React Snowfall.
— В полной версии сайта (при ширине экрана больше чем 1180px), если вы попытаетесь выбрать русский язык, кнопка будет убегать от курсора мыши. Да, это прикол еще из 2000х годов, но, я считаю он очень уместен и заставляет улыбаться). Кстати, кнопку всё-таки можно поймать.
— Курсор мыши выглядит как новогодняя ёлка, чтобы поднять предновогоднее настроение пользователя.
— Ошибки плавно всплывают из-под верхних границ экрана, отображаются несколько секунд и также плавно заплывают за границы экрана.
— Loader (анимированная картинка, которая отображается, когда пользователь ожидает ответ от сервера) выглядит в виде танцующего Санты.
Интересные факты
— Для взаимодействия с сервером использовалась библиотека Axios
— Приложение содержит в себе 43 файла и состоит из 60 функций
— Насчитывает 1608 строк кода
— 12 компонентов в формате jsx
— 13 файлов css
— 2 файла js
— 1 файл html
— 13 валидаций инпутов и паролей
Минусы и баги приложения в текущей его реализации:
— Если один и тот же человек еще раз захочет стать тайным Сантой по разным причинам, то сервис будет работать некорректно, и кто-то останется без подарка. Я знаю как это пофиксить, но уж очень я хотел выпустить в свет проект перед новым годом, поэтому, чтобы этого не произошло, я написал короткую инструкцию, которую можно прочитать на странице приложения.
— Если ввести два и более одинаковых имени, то сервис это не распознает. Об этом тоже написал в инструкции.
— Пока-что не совсем понятные мне баги при вводе данных в инпуты. Если действовать пошагово, то всё работает отлично, но если при создании новой компании, сперва заполнить все инпуты, а потом какой-то стереть, то кнопка «Далее» не возвращается в режим “disabled”. На следующий шаг приложение, конечно-же не перейдет и выдаст ошибку, типо «Поле не должно быть пустым» или «Пароли не совпадают», но визуально это реально баг. Хотя, исходя из того, что прописано в логике, оно должно работать четко. Не хватает у меня опыта, но сделаю всё, чтобы к следующему Новому году всё работало идеально.
— Сервис mockapi.io, который я использовал, может хранить не более 100 объектов. Когда количество зарегистрированных компаний будет 100, то сервер будет возвращать ошибку и новые компании создаваться не будут. К следующему году я придумаю решение. У меня уже есть идея, чтобы оттуда автоматически удалялись завершенные компании.
— Дизайн. Я не дизайнер, создавал дизайн в режиме реального времени, на глаз, методом проб и ошибок. Мобильная версия, конечно, могла бы выглядеть и лучше, в следующем году постараюсь исправить.
Ссылку на Git – репозиторий этого приложения я выкладывать не буду по причине того, что я написал всё совершенно неправильно касаемо архитектуры проекта и принципа единственной ответственности. Потенциальному работодателю такой код вряд ли понравится, а новички могут ошибочно подумать, что раз оно работает, то это нормально так писать. Что могу сказать, это мой первый, причем очень спонтанный проект на React.js , с очень сжатыми сроками и написанный в условиях отсутствия света и интернета. Сейчас я пишу более масштабный, осознанный проект на Реакте с правильной архитектурой, использованием как функциональных так и классовых компонентов, контейнерных компонентов, с использованием Redux, контекста и самых распространненых хуков. Вот такой пет-проект можно использовать в качестве портфолио. А Тайный Санта – это больше для души 🙂
Всех с наступающим Новым Годом!
Мой путь в IT 