Я — фронтендщик, но ради идеи пришлось изучать бэкенд: как я создал аналог популярного за границей сервиса

Highload продолжает публиковать истории о pet-проектах, вошедших в топ-20 лучших по итогам голосования наших читателей. Параллельно эти проекты оценивает жюри из опытных разработчиков и инвесторов. Победителей конкурса мы планируем объявить 10 июля.

Лучшие проекты получат призы от компании Genesis: занявший первое место — Apple iPhone 12 64GB, второе место — наушники Marshall Monitor II ANC Black, третье — набор Arduino.

Дальше — рассказ разработчика Тараса Сенива о его pet-проекте — платформе видеоприветов от звезд Haii-me.

Идея

Тараса Сенив — разработчик платформы видеоприветов от звезд Haii-me

Меня зовут Тарас, мне 22 года. Я получил диплом бакалавра по специальности «Инженерия программного обеспечения». Уже два года работаю фронтенд-программистом.

Листая ленты новостных сайтов, я увидел интересную статью об американском стартапе Cameo, где можно заказать видеопривет от популярного человека (актера, блогера). Решил, что можно попробовать адаптировать ​​идею для нашего украинского окружения. Начал думать над названием проекта — это должно было быть что-то короткое и оригинальное. Haii — это как hi, но с «а» и двумя «i».

Итак, флоу приложения следующий:

• Пользователь открывает приложение и видит список селебрити. Выглядит это вот так:

Приложение Haii-me

• После этого он может открыть страницу с деталями конкретного человека:

В приложении Haii-me можно заказать поздравление от селебрити

• Далее он может заказать видео и указать свои пожелания: цель видеопоздравления — день рождения, свадьба, просто передать привет и так далее.

Реализация и технологии

Для реализации идеи начал изучать ближайшую ко мне бэкенд-технологию — Node.js. Проблемой в разработке было то, что я занят фулл-тайм, соответственно, свободного времени у меня мало. Но старался уделять максимум обучению, одновременно работая над идеей.

Создал макет приложения в программе Figma и описал там большинство необходимых страниц. После этого начал работать над бэкенд-логикой. Решил взять фреймворк Express.js, поскольку он мне показался простым для понимания и быстрым для разработки.

Сразу появилось несколько других проблем:

• Где держать все файлы?
• Как оптимизировать картинки?
• Как оптимизировать видео?

Для этого были использованы AWS S3, AWS Lambda. В приложение был интегрирован S3 API для хранения файлов, а также для оптимизации было решено избегать прямого взаимодействия Node.js-сервера с файлами.

Загрузка файлов в облако работает следующим образом:

Схема загрузки файлов в облако

Загрузки всех файлов происходят напрямую с клиента в хранилище S3.

Для оптимизации картинок была написана AWS Lambda-функция, которая принимает URL S3-картинки, получает ее, оптимизирует и сохраняет снова в S3 в необходимую директорию. Взаимодействие с Lambda-функцией происходит с помощью API Gateway и ее работы с бэкенд-частью.

Загрузка видео работает похожим образом с presigned url, но вместо Lambda-функции был использован сторонний сервис, который загружает видео с S3, оптимизирует его, сохраняет в том же хранилище и вызывает после этого хук с бэкенд-части.

Большинство основного функционала покрыто юнит-тестами. Для написания тестов была использована библиотека Jest.

В какой стадии проект

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

Поскольку я работаю сам, то фронтенд-части на данный момент нет. Планируется разработать мобильное приложение на React Native или Ionic Vue. Также необходимо будет сделать обычное веб-приложение, скорее всего на Vue, поскольку это моя основная технология.

Монетизация

Монетизация приложения будет происходить за счет комиссии с видео — планируется 10-15%. То есть селебрити получит 85-90% от цены видео.

Как будут оценивать проект

В рамках конкурса pet-проектов разработчики и инвесторы оценят проект Haii-me по таким критериям:

1. Оригинальность идеи.

2. Качество кода.

3. Технический уровень.

4. Жизнеспособность идеи.

5. Перспективы проекта как бизнеса.

6. Инвестиционная привлекательность.

Победителей среди 20 кейсов определят на основе оценок инвесторов (45%), разработчиков (45%) и голосов читателей Highload (10%).

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

Проект Haii-me оценивают:

Вячеслав Белый

Mobile Team Lead, Co-Founder iOS Ukraine.

Оценивает проекты на iOS.Mobile Team Lead, co-founder iOS Ukraine, основатель первой в Украине онлайн-конференции по iOS-разработке, ведущий обучающего YouTube-канала, консультант и аудитор мобильных команд.

Марк Олейник

Front-End Developer в YouScan.

Оценивает проекты на React. Марк занимается фронтендом уже больше пяти лет и «очень кайфует» от этой работы с ее особенной ответственностью перед пользователем. Он посмотрел на индустрию с разных сторон: начинал свой путь с фриланса, позже работал в небольшом стартапе, после чего попал в YouScan. Кроме того, с 2017 по 2019 год вместе с командой занимался организацией митапов React Kyiv.

Елена Мажуга

Старший инвестиционный аналитик Genesis Investments.

Роман Бабицкий

Основатель инвесткомпании Babitskyi Investment, глава совета по вопросам иностранных инвестиций и экономического развития Украины.

Дмитрий Томчук

Основатель инвестиционного фонда Fison.