Как я разрабатываю конвертер в 2024 (Frontend часть)

Всем привет!

Меня зовут Руслан и я fullstack разработчик, я работаю над заказами и разрабатываю свои digital продукты. На данный момент я разрабатываю конвертер файлов, например картинок, png в webp, jpg в png и так далее. Итак, я решил поделиться этапами своей разработки, рассказать о своем опыте и показать, как шаг за шагом создаются собственные продукты. Именно в данной статье я буду писать только про frontend часть, так как, к разработке бэкенда еще не приступил.

Spark Converter — это файловый конвертер для разного типа файлов, таких как картинки, word файлы, pdf и другие. Основной целью разработки данного продукта является сделать максимально удобный с точки зрения UX / UI продукт, который будет хорошо выполнять свое предназначение.

На сегодняшний день проект находится в стадии разработки и его еще нет в открытом доступе. Для создания пользовательского интерфейса я использую современный фреймворк Next.js 15 в сочетании с библиотекой компонентов ShadCN, которая обеспечивает стильный и удобный дизайн. Также стоит упомянуть, что зачастую для своих проектов, которые я делаю сам, я не разрабатываю дизайн в Figma, а делаю сразу из головы, в таком случае, очень сильно помогает нейронка от Vercel под названием v0, которая действительно хорошо разрабатывает пользовательские интерфейсы.

Полный Стэк технологий

Как уже было описано выше, для за основу я взял 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-разработки, набирая опыт и оттачивая свои навыки. Конечно, были и неудачные попытки запустить свои проекты, которые не увенчались успехом, но именно они стали ценным уроком на пути к развитию.

Я прекрасно понимаю, что успех любого продукта — это не только качественная разработка, но и грамотный маркетинг. Пока у меня нет опыта в этой области, но именно работа над своими продуктами поможет мне его обрести. Каждый шаг, каждое достижение и каждая ошибка приближают меня к цели — созданию чего-то действительно стоящего и полезного. Впереди еще много работы, но я готов продолжать двигаться вперед, учиться и расти.