Валерія Стратулат
Рейтинг
Рівень володіння мовами
Резюме
Fullstack Developer (Node.js / Next.js)
Вітаю! Я розробляю комплексні вебрішення, поєднуючи сучасний фронтенд на React/Next.js із надійним бекендом на Node.js. Створюю продукти, де важлива не лише гарна картинка, а й стабільна логіка та безпека даних.
Мій технологічний стек:
Frontend: Next.js (App Router), React, TypeScript, Tailwind CSS.
Backend: Node.js, Express.
Бази даних: Робота з SQL/NoSQL рішеннями.
Автентифікація: JWT, захист роутів, управління сесіями користувачів.
Чим я можу бути корисна вашому бізнесу:
Розробка з нуля: Від архітектури бази даних до фінальної верстки інтерфейсу.
Створення складних систем: Реєстри з фільтрацією, пошуком та сортуванням (приклад — «Реєстр документів»).
Інтеграція та API: Проєктування та підключення REST API для обміну даними між сервером та клієнтом.
Досвід командної роботи: Розумію цикл розробки в команді, працюю з Git/GitHub (Pull Requests, Code Review).
Навички та вміння
Портфоліо
-
Landing Page для освітньої конференції "EduConf"
HTML та CSS верстанняРозробка адаптивної сторінки-візитки для міжнародної освітньої конференції. Проєкт демонструє класичний підхід до створення чистих та семантичних вебсторінок.
Технічні особливості та реалізація:
… Семантична верстка: Використання сучасних стандартів HTML5 для кращої індексації пошуковими системами (SEO).
Стилізація: Робота з CSS3 (Flexbox/Grid), що забезпечує чітку структуру блоків та елементів.
Адаптивність: Сторінка коректно відображається на різних типах пристроїв (десктоп, планшет, мобільний) завдяки медіа-запитам.
Інтерактивність: Реалізація плавної навігації (Smooth Scroll) та стилізованих ховер-ефектів для кнопок і карток.
Структура: Проєкт включає блоки "Hero", "About", "Schedule" та контактну форму, що робить його готовим рішенням для подібних івентів.
Інструменти: HTML5, CSS3
-
Expense Tracker —платформа для фінансового обліку
Веб-програмуванняКатегорія: Веб-програмування
Технологічний стек: Next.js 15 (App Router), TypeScript, Zustand, React Query, Formik, Axios.
Опис:
… Це високопродуктивний вебдодаток для контролю особистих фінансів із фокусом на архітектуру production-ready. Проєкт реалізує повний цикл взаємодії користувача з даними в реальному часі через адаптивний інтерфейс.
Ключовий функціонал та реалізовані задачі:
Комплексна авторизація: Впровадила систему захищених маршрутів (auth та private layout'и), що забезпечує безпеку персональних даних користувачів.
Управління станом (State Management): Використала Zustand для легкого та швидкого керування глобальним станом додатку та React Query для ефективної синхронізації з API.
Інтерактивний Dashboard: Розробила панель керування для візуального моніторингу балансу та історії операцій.
Робота з формами: Налаштувала складну валідацію фінансових транзакцій за допомогою Formik та Yup.
Адаптивна верстка: Реалізувала mobile-first підхід, що гарантує зручність використання на смартфонах і планшетах.
Технічні переваги:
Чиста архітектура: Чіткий поділ логіки на компоненти, сервіси API (lib/) та централізовані типи TypeScript.
Типізація: 100% покриття коду типами для мінімізації помилок та легкого масштабування проєкту.
Оптимізація: Швидке завантаження сторінок завдяки перевагам Next.js App Router.
#Next.js #TypeScript #zustand #React Query #Axios
-
Туристична платформа "Природні мандри" (Fullstack-розробка)
Веб-програмуванняКомандний проєкт, спрямований на створення зручного сервісу для пошуку та планування екологічних маршрутів Україною. Проєкт реалізовано на сучасному стеку технологій із розділенням на клієнтську та серверну частини.
Мій внесок та технічні рішення:
… Архітектура авторизації (Next.js):
Розробила та впровадила систему безпечної автентифікації користувачів.
Налаштувала управління станом сесії за допомогою React Context (AuthContext), що дозволило централізовано зберігати дані про користувача.
Реалізувала механізм роботи з JWT-токенами (збереження, перевірка терміну дії та автоматичне логінування).
Frontend-розробка:
Створила інтерактивні форми реєстрації та входу з клієнтською валідацією даних.
Впровадила захист приватних роутів (Protected Routes), що обмежує доступ неавторизованих користувачів до особистих кабінетів та створення контенту.
Інтегрувала фронтенд із REST API для динамічного відображення маршрутів.
Backend-інтеграція:
Працювала з серверною частиною на Node.js/Express для обробки запитів авторизації та валідації даних на стороні сервера.
Налаштовувала взаємодію з базою даних для збереження профілів користувачів та їхніх маршрутів.
Технічний стек:
Frontend: Next.js, TypeScript, Tailwind CSS, React Context API.
Backend: Node.js, Express, REST API.
Колаборація: Git (командна робота через Pull Requests).
Посилання на бекенд: https://github.com/StratulatValeria/pryrodni-mandry-back
#Next.js #Node.js #React/TypeScript
-
Реєстр документів міської ради (Desktop-first)
Javascript та TypescriptРозробка функціонального модуля для перегляду та пошуку офіційних документів. Проєкт демонструє навички побудови логіки фільтрації великих масивів даних та роботи з сучасними фреймворками.
Технічні особливості та рішення:
… Стек: Next.js 15 (App Router), TypeScript, CSS Modules.
Динамічна фільтрація: Реалізовано багаторівневий пошук за типом документа (рішення, розпорядження, накази), сферою діяльності та статусом.
Управління станом: Використання URLSearchParams для синхронізації фільтрів із посиланням, що дозволяє зберігати результати пошуку при перезавантаженні сторінки.
Типізація: Повна підтримка TypeScript для забезпечення стабільності коду та запобігання помилкам при роботі з об'єктами даних.
Архітектура: Desktop-орієнтований інтерфейс з акцентом на зручність обробки великих таблиць даних.
#Next.js #TypeScript
-
RentalCar — Сервіс бронювання та оренди автомобілів
Javascript та TypescriptСучасна Fullstack-платформа для пошуку та оренди транспортних засобів. Проєкт реалізовано як SPA (Single Page Application) з акцентом на високу швидкість роботи та інтуїтивно зрозумілий UX/UI інтерфейс.
Технічні особливості та архітектурні рішення:
… Фреймворк: Побудовано на Next.js 15 із використанням App Router. Це забезпечує ефективну маршрутизацію (динамічні роути /catalog/:id) та швидке завантаження контенту.
State Management: Глобальне управління станом додатку реалізовано через Zustand. Це дозволило створити зручну систему фільтрації авто та функціонал «Обране».
Persistence: Завдяки інтеграції Middleware Persist, обрані користувачем автомобілі зберігаються у LocalStorage, що дозволяє не втрачати дані навіть після закриття вкладки або оновлення сторінки.
Типізація: Код повністю написаний на TypeScript, що гарантує стабільність додатку та полегшує подальшу підтримку.
Оптимізація: Впроваджено сучасні методи завантаження зображень та даних для мінімізації затримок при роботі з великим каталогом.