Hero – гостьовий стан
Історії подорожей
Повноцінна вебплатформа для публікації історій подорожей з авторизацією, профілями і керуванням контентом.
РольFrontend Developer + backend contribution
ТипКонтент-платформа
ЛокаціяНавчальний проєкт
ФокусПобудова масштабованої контент-платформи з авторизацією, публікацією історій і профільним сценарієм користувача.
СтекNext.js, TypeScript, Node.js, REST API
Тривалість2 тижні
Коротко про проєкт
- Тип проєкту
- Повноцінна вебплатформа
- Ціль
- Створити платформу історій подорожей з акаунтами, профілями і публікацією контенту.
- Ключові функції
- Авторизація
- Профілі користувачів
- Публікація історій
- Backend API
- Інтеграція бази даних
- Моя роль
- Участь у розробці вебплатформи: frontend, backend API, структура даних і реалізація функцій.
- Стек
- React
- Node.js
- MongoDB
- REST API
- Результат
- Повноцінна вебплатформа з акаунтами, публікацією контенту та структурованою backend-інтеграцією.
Проблема
Потрібно було створити повноцінну вебплатформу, де користувачі можуть реєструватися, публікувати історії, керувати профілем і взаємодіяти з контентом.
Рішення
У команді з 12 людей я працював і над frontend, і над backend-частиною. Реалізував ключові UI-компоненти: хедери, модальні вікна, картки історій, редагування профілю, а також працював із загальними структурами даних на backend.
Ефект
Платформа підтримує авторизацію, публікацію і взаємодію користувачів, демонструючи комплексний підхід і командну роботу.
Що я зробив
- Реалізував кілька варіантів header для різних сторінок
- Зібрав компонент модального підтвердження (ConfirmModal)
- Реалізував компоненти карток історій
- Зробив сторінку редагування профілю
- Додав логіку активної навігації за маршрутом
- Інтегрував SVG sprite-систему
- Оптимізував зображення і структуру public-ресурсів
- Допомагав із типізацією backend і спільними структурами даних
- Додав документацію проєкту (README)
Hero – гостьовий стан
Публічний стартовий екран для нових користувачів платформи.
Hero – стан після входу
Вигляд після логіну з розширеною навігацією і додатковими діями.
Hero – стан після входу
Авторизація
Шлях входу, який відкриває персоналізовані функції і публікацію.
Екран авторизації
Адаптивність
Адаптація ключових екранів між desktop і mobile.
Десктопний вигляд
Мобільний вигляд
Стрічка історій
Основна стрічка контенту з блоками відкриття історій за категоріями.
Стрічка і discovery
Мандрівники
Каталог авторів, який полегшує перегляд профілів користувачів.
Каталог мандрівників
Профіль користувача
Персональна зона для роботи з активністю та збереженим контентом.
Екран профілю користувача
Створення історії
Публікація нових історій подорожей у декілька простих кроків.
Екран створення історії
Деталі історії
Повна стаття з даними автора, категорією та комфортним читанням.
Сторінка історії
Потрібен сайт, який спрощує контакт із клієнтами?
Підготую зрозумілий сайт із простим шляхом до заявки, бронювання або розмови.