Всем привет!
Меня зовут Руслан и я 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-разработки, набирая опыт и оттачивая свои навыки. Конечно, были и неудачные попытки запустить свои проекты, которые не увенчались успехом, но именно они стали ценным уроком на пути к развитию.
Я прекрасно понимаю, что успех любого продукта — это не только качественная разработка, но и грамотный маркетинг. Пока у меня нет опыта в этой области, но именно работа над своими продуктами поможет мне его обрести. Каждый шаг, каждое достижение и каждая ошибка приближают меня к цели — созданию чего-то действительно стоящего и полезного. Впереди еще много работы, но я готов продолжать двигаться вперед, учиться и расти.
Автор: k1ngsterr
