Как я создавал фриланс биржу на WebApp Telegram

Всем привет! Давно была идея разработать WebApp приложение с классным UI сопровождением. Но не было самой идеи. Но вот свершилось, пришла идея, пришли силы и я сел за реализацию.

Это первая часть статьи.

Ссылка на WebApp внизу 👇

Я хочу реализовать Фриланс Биржу в WebApp внутри Telegram. Будет доступна возможность как откликаться на задачи так и создавать эти задачи. А так же оставлять отзыв.

У Фрилансера будет возможность добавить описание к своему профилю, добавить портфолио.

У Заказчика будет возможность создавать задачи, просматривать отклики на нее и выбирать исполнителя.

Авторизация будет работать на основе самого Telegram.

Я не дизайнер. Я пытался им быть, вышло не очень. Но интерфейс надо реализовать. Но как? Я научился использовать UI KIT'ы от различных компаний.

На этот раз я остановился на VKUI. Их UI KIT как раз создан для мобильных приложений, это то что мне нужно! Тем более есть поддержка светлой и темной темы, просто шикарно.

Вот ссылка на Figma если кому интересно: Figma

При разработке буду использовать Next.js, а так же Prizma. Prizma - это ORM для взаимодействия с базами данных, она как раз поддерживает Next.js напрямую, не придется поднимать свой сервер ( наверное ). Полная FullStack разработка.

Так же я буду использовать библиотеку UI от VK для реализации наших интерфейсов в едином дизайне. Так же ознакомится можно здесь: Docs

Накидать интерфейс не такая простая задача, даже не смотря на то что у нас есть готовые компоненты.

Для начала пришлось изучить почти каждый компонент, разобраться как его использовать, потыкать по кнопкам а уже потом начать встраивать их.

Тем более зачастую ты сам не понимаешь "А как надо?". На картинке вы видите примеры пары макетов, возможно они не финальные но они и не первые.

Telegram WebApp сама по себе интересная возможность до конца не изученная, например как только я сделал первые три экрана приложения, я решил их протестировать в телеграм. И вот что вышло: Цветовые схемы сбивались постоянно, потому что VK UI имеют свою схему а телеграм подсовывает свою.

p.s Разработчики Telegram, если вы это читаете, разрешите выключать вашу цветовую схему одним параметром.

Так же я решил отказаться от так называемой "Шапки" так как ее сама WebApp предоставляет, я думаю профиль вы вынесем в настройки внутри WebApp.

Факт 1: А вы знали что WebApp работает через Edge браузер? Вот и я не знал, этот момент тоже нужно учитывать. Почему именно был выбран этот браузер не понятно.

Факт 2: Вы можете сделать WebApp как в своей цветовой схеме, так и использовать цветовую схему которую настроил сам пользователь Telegram.

В итоге полученный результат вы можете увидеть по ссылке:

На это у меня все! Спасибо что дочитали статью до конца, еще предстоит много работы, много времени занимает изменение цветовой схемы.

Многие детали могут отличаться от тех что есть на скриншоте.

Следующий этап, это доработать компоненты и цветовую схему, доделать компонент добавления заказов. А так же прикрутить бекенд часть.

Подписывайтесь на мой канал, я там часто рассказываю о ходе разработки и об открытиях при ней, нас целых 18 человек уже! Будет здорово если ты поддержишь:) Это мотивирует!

#telegram #webapp #разработка #кейс