Откликайтесь
на вакансии с ИИ
Подготовка Nuxt 3 фронтенда к интеграции с реальным API
Оценка ИИИнтересный проект с четко поставленными техническими задачами и современной архитектурой (FSD, Nuxt 3). Отсутствие фиксированной цены дает пространство для маневра, но объем работы достаточно велик.
Сложность вакансии
Оценка ИИПроект требует уверенного владения Nuxt 3 и понимания архитектуры FSD. Основная сложность заключается в большом объеме компонентов (110 штук) и необходимости аккуратного рефакторинга существующей логики без нарушения верстки.
Анализ зарплаты
Оценка ИИДля проектной работы такого объема (рефакторинг 110 компонентов и настройка инфраструктуры) рыночная стоимость обычно варьируется от 80 000 до 150 000 рублей в зависимости от сроков. Указанная 'договорная цена' позволяет претендовать на верхнюю границу рынка при наличии релевантного опыта.
Сопроводительное письмо
Здравствуйте! Меня заинтересовала ваша задача по подготовке Nuxt 3 проекта к интеграции с API. У меня есть значительный опыт работы с Vue 3 (Composition API), Pinia и TypeScript, а также глубокое понимание архитектуры FSD, что позволит мне быстро погрузиться в ваш проект.
Я неоднократно реализовывал сетевые слои с использованием $fetch и Axios, настраивал интерсепторы для обработки JWT и Refresh Token, а также решал проблемы SSR, связанные с использованием localStorage. Мой подход гарантирует строгую типизацию DTO и чистоту кода, что обеспечит бесшовное переключение между моками и реальным бэкендом через переменные окружения. Буду рад обсудить детали и приступить к работе.
Составьте идеальное письмо к вакансии с ИИ-агентом
Откликнитесь уже сейчас
Откликнитесь на проект, чтобы помочь крупному приложению перейти на реальные данные и выстроить надежную архитектуру сетевого слоя!
Описание вакансии
ОткликнутьсяЧто нужно сделать?Добрый день! Есть крупный Nuxt 3/Vue 3/Composition API/Pinia/TS проект с полностью готовой FSD-архитектурой и UI-версткой.
Проблема сейчас проект функционирует на жестко вшитых mock-данных внутри Pinia stores и не имеет единого сетевого слоя.
Необходимо подготовить кодовую базу к бесшовной интеграции с бэкендом.
Задачи:
1) Разработка сетевого слоя (API Client). Создать централизованный инстанс $fetch или Axios с интерсепторами для:
- Прикрепления JWT-токенов авторизации;
- Логики Refresh Token;
- Глобальной обработки ошибок (редирект при 401, вызов toast-нотификаций при 500+).
2) Редизайн Mock-системы.
Изолировать все хардкоженные данные. Переписать логику сторов так, чтобы они обращались к API-клиенту. Переключение Mock / Реальный сервер должно работать через .env переменную.
3) Синхронизация контрактов (TypeScript DTOs). Привести типы данных фронтенда и моковые ответы к строгому формату (1:1), ожидаемому от REST/WebSocket API бэкенда (документацию/контракты предоставим). Убрать использование any там, где ожидаются данные с сервера.
4) Исправление SSR и Security edge-cases:
Убрать прямые вызовы localStorage без проверок, чтобы исключить падения Nuxt при Server-Side Rendering.
5) Настроить базовые Nuxt Route Middleware для защиты приватных страниц (Route Guards).
6) Расставить все скелетоны загрузки (есть примеры реализации в проекте, но сделаны не везде, подключить состояние загрузок/ошибок к реальному состоянию бека
Объём проекта около 110 Vue компонентов (15 разделов).
Цена: договорнаяОткликнуться#верстка #фриланс
Создайте идеальное резюме с помощью ИИ-агента
Навыки
- Nuxt 3
- Vue 3
- Composition API
- Pinia
- TypeScript
- Axios
- REST API
- WebSocket
- SSR
- FSD Architecture
Возможные вопросы на собеседовании
Важно понимать, как кандидат будет обрабатывать асинхронные запросы на стороне сервера и клиента.
Как вы планируете реализовать проверку наличия window/localStorage в Nuxt 3, чтобы избежать ошибок при SSR?
Проверка навыков работы с авторизацией и жизненным циклом токенов.
Опишите ваш подход к реализации логики Refresh Token в интерсепторах, чтобы избежать бесконечного цикла запросов при 401 ошибке.
Проект использует FSD, важно соблюдать правила этой архитектуры.
В каком слое FSD (shared, entities, features) вы бы разместили API-клиент и почему?
Проверка умения работать с типами данных.
Как вы организуете синхронизацию TypeScript интерфейсов между фронтендом и бэкендом, чтобы минимизировать использование any?
Оптимизация пользовательского опыта.
Как лучше всего связать состояние загрузки (pending) из Nuxt useFetch с глобальными скелетонами в Pinia сторах?
Похожие вакансии
Angular разработчик (Senior)
Frontend-разработчик (Middle)
Frontend Developer
Frontend-разработчик (React / TypeScript)
Руководитель группы frontend (Team Lead)
Frontend-разработчик Senior (Vue.js)
1000+ офферов получено
Устали искать работу? Мы найдём её за вас
Quick Offer улучшит ваше резюме, подберёт лучшие вакансии и откликнется за вас. Результат — в 3 раза больше приглашений на собеседования и никакой рутины!