Как я разрабатываю конвертер в 2024 (Frontend часть)
Всем привет!
Меня зовут Руслан и я fullstack разработчик, я работаю над заказами и разрабатываю свои digital продукты. На данный момент я разрабатываю конвертер файлов, например картинок, png в webp, jpg в png и так далее. Итак, я решил поделиться этапами своей разработки, рассказать о своем опыте и показать, как шаг за шагом создаются собственные продукты. Именно в данной статье я буду писать только про frontend часть, так как, к разработке бэкенда еще не приступил.
Spark Converter — это файловый конвертер для разного типа файлов, таких как картинки, word файлы, pdf и другие. Основной целью разработки данного продукта является сделать максимально удобный с точки зрения UX / UI продукт, который будет хорошо выполнять свое предназначение.
На сегодняшний день проект находится в стадии разработки и его еще нет в открытом доступе. Для создания пользовательского интерфейса я использую современный фреймворк Next.js 15 в сочетании с библиотекой компонентов ShadCN, которая обеспечивает стильный и удобный дизайн. Также стоит упомянуть, что зачастую для своих проектов, которые я делаю сам, я не разрабатываю дизайн в Figma, а делаю сразу из головы, в таком случае, очень сильно помогает нейронка от Vercel под названием v0, которая действительно хорошо разрабатывает пользовательские интерфейсы.
Цены пока стоят ненастоящие, просто placeholder.
Полный Стэк технологий
Как уже было описано выше, для за основу я взял NextJS15, рекомендую использовать именно его, вместо обычного React, если вам важна хорошая SEO оптимизация, что как раз и являлось одной из главных причин, по которой я его выбрал.
Также для стилизации здесь используется tailwindcss, раньше я был сильным приверженцем классических модульных стилей через sass, но отказался от этого в угоду скорости разработки.
Я всегда любил интерфейсы с красивыми и плавными анимациями, я считаю это повышает UX, да и вообще распоряжаюсь логикой, что успех вашего продукта как раз-таки складывается из совокупности всех мелочей, поэтому для интерактивных анимаций здесь используется framer-motion. Обычно, я всегда использовал gsap, который тоже могу порекомендовать, но именно здесь мой выбор пал на framer-motion, исключительно из личного интереса.
Для работы с api всегда по стандарту использую tanstack-query и axios, тут оставлю без лишних слов, так как данный продукт сейчас находится на этапе пользовательского интерфейса.
Функционал
Давайте перейдем к функционалу, честно говоря, тут все по классике, вряд ли можно привнести что-то новое в файловый конвертер с точки зрения функционала, поэтому моя цель состоит в том, чтобы сделать его максимально простым и комфортным для пользования. Одной из интересных особенностей стало добавление поддержки трех языков: казахского, русского и английского. Это решение было принято, чтобы обеспечить максимальный комфорт для пользователей и повысить доступность продукта.
Какие функции планируются на начальном этапе:
Конвертер картинок в разные форматы (PNG, AVIF, WEBP, JPEG).
Конвертер аудио в текст.
Конвертер PDF в Word.
Эти три базовые функции будут на самом запуске продукта, в дальнейшем я хочу расширять функционал, например компрессор картинок, конвертер гивок и тд. Проект создается с идеей последующей монетизации, но без продажи API, а просто сделать лимит на бесплатные конвертации. Конкурентноспособность продукта должна быть за счет скорости работы, локализации и удобности использования.
Сроки
Проектом я занимаюсь в свободное время каждый день, планирую запустить данный проект уже в январе 2025-го года и подключить монетизацию на подписочной основе, которая кстати будет реализована через Stripe. На данный момент никаких сложностей в разработке не возникло, поэтому сроки в виде января кажутся мне достаточно реалистичными.
Финал
Это только начало моего пути в создании собственных IT-продуктов. За последние три года я упорно занимался изучением и практикой fullstack-разработки, набирая опыт и оттачивая свои навыки. Конечно, были и неудачные попытки запустить свои проекты, которые не увенчались успехом, но именно они стали ценным уроком на пути к развитию.
Я прекрасно понимаю, что успех любого продукта — это не только качественная разработка, но и грамотный маркетинг. Пока у меня нет опыта в этой области, но именно работа над своими продуктами поможет мне его обрести. Каждый шаг, каждое достижение и каждая ошибка приближают меня к цели — созданию чего-то действительно стоящего и полезного. Впереди еще много работы, но я готов продолжать двигаться вперед, учиться и расти.
