Партизанский краудсорсинг: как без бэкенда и бюджетов запустить 3 полезных микро-сервиса для города
Привет, vc.ru! Меня зовут Станислав. Пока в сети спорят о преимуществах тяжелых фреймворков и серверов, я решил пойти по пути экстремального MVP и собрать несколько локальных городских проектов на чистом фронтенде, которые реально решают бытовые боли людей.
В этой статье — кейс о том, как выжать максимум из статического хостинга, организовать сбор данных от пользователей через обычную почту и запустить рабочие краудсорсинг-платформы абсолютно бесплатно.
В чем идея?
Все проекты родились из простых бытовых ситуаций, с которыми ежедневно сталкиваются горожане и туристы.
- Yerevan Pulpulak Status. Летом в жару всех спасают пулпулаки (питьевые фонтанчики). Но они часто ломаются или пересыхают. Идея простая: интерактивный список фонтанчиков с их актуальным состоянием, чтобы не идти к источнику впустую.
- Yerevan Toilet Codes. Найти общественный туалет в городе — квест. В кафе они есть, но двери закрыты на кодовые замки, а код печатают на чеках. Я подумал: почему бы не объединить людей и не сделать общую открытую базу актуальных кодов?
Главная цель была — запуститься моментально, без трат на сервера, базы данных и сложные бэкенд-архитектуры.
Архитектура на коленке: База данных в Git
Разворачивать полноценную серверную инфраструктуру на этапе проверки гипотезы — избыточно. Я решил полностью доверить хранение и сбор данных фронтенду.
- База данных внутри JS-массива: Пока проекты только стартовали, данные хранятся прямо в JavaScript-файле в виде массива объектов.
- Сбор данных через FormSubmit: На сайтах есть простая форма обратной связи («Нашли новый код?» / «Фонтанчик сломался?»). Данные из формы улетают через бесплатный сервис FormSubmit мне на почту. Я вручную вношу изменения в массив на GitHub, делаю git commit — и через минуту GitHub Pages автоматически обновляет сайт для всех.
Да, это ручной труд на старте, но это позволило запуститься за считанные дни и протестировать концепт без единого цента вложений.
Продуктовые фишки интерфейса
Я намеренно отказался от React или Vue. Vanilla JS обеспечивает мгновенную загрузку на смартфонах в условиях нестабильного мобильного интернета. Вот что удалось реализовать:
- Живой поиск: Карточки фильтруются на лету по ключевым словам (улица, ориентир, статус) с динамической перерисовкой DOM.
- Мультиязычность на лету: Интерфейс мгновенно переключается между тремя языками (RU / EN / AM) без перезагрузки страницы через языковой словарь в JS.
- Кастомный UI-фидбек: Вместо стандартных браузерных алертов при ошибках ввода срабатывает CSS-анимация shake effect — инпуты формы физически трясутся, привлекая внимание.
- Генерация QR-кодов: Библиотека QRCode.js генерирует QR-код со ссылкой на сайт прямо в браузере — его можно скачать в PNG или показать с экрана смартфона, чтобы быстро поделиться проектом.
Проекты только развиваются: Нужен ваш тест!
Самый большой вызов для любого краудсорсинг-продукта на старте — это наполнение базы контентом. Без активных пользователей любой самый красивый интерфейс останется пустым шаблоном.
Мне очень нужна помощь людей, которые прямо сейчас находятся в Ереване или просто готовы потестить интерфейс. Если вы наткнулись на неработающий питьевой фонтанчик или узнали актуальный код от туалета в кафе — отправьте его через форму на сайте. Давайте соберем актуальную базу вместе!
Экосистема проектов и исходники
Все проекты и исходный код полностью открыты. Посмотреть, как это устроено и работает, можно по ссылкам:
- 💧 Yerevan Pulpulak Status — Интерактивный список городских питьевых фонтанчиков.
- 🚽 Yerevan Toilet Codes — База кодов от дверей туалетов в заведениях.
- 🍽 Restaurant Menu & QR — Сайт-меню для кафе с быстрым шерингом.
- 🚚 Transport Landing — Адаптивный тренировочный лендинг для логистической компании.
Мои маркетинговые No-code кейсы на Tilda:
В планах — дождаться первых стабильных объемов данных и автоматизировать процесс, подключив бессерверную базу (Firebase или Supabase) с простой панелью премодерации.
Буду рад вашему фидбеку, продуктовым советам в комментариях и звёздочкам на гитхабе!
📂 Репозиторий проекта: github.com/misha12333211-ctrl