SkillSwap

О проекте

SkillSwap — это инновационная платформа для обмена навыками между пользователями. Проект позволяет людям находить взаимовыгодные возможности для обучения: предлагать свои экспертные знания в обмен на получение новых навыков от других участников сообщества.

Основная функциональность включает:

• Каталог навыков с расширенными фильтрами и поиском
• Систему заявок на обмен навыками
• Личные кабинеты пользователей с управлением навыками и заявками
• Систему избранного для сохранения понравившихся предложений
• Адаптивный интерфейс для всех устройств

Проект разработан с использованием современного стека технологий: React 18, TypeScript, Vite, и реализует лучшие практики фронтенд-разработки.

Технологический стек

• Frontend: React 18 + TypeScript
• Build Tool: Vite
• Styling: CSS Modules с кастомными свойствами
• State Management: Redux Toolkit
• Routing: React Router v6
• Code Quality: ESLint, Prettier, Stylelint
• Testing: Jest + React Testing Library

Мой вклад в проект

Я участвовала в разработке этого командного проекта в качестве фронтенд-разработчика. Мой вклад включал:

1. Анализ и исследование - Провела анализ бесплатных хостингов для JSON-файлов и подготовила сравнительный отчет для команды

2. Система дизайна - Реализовала систему переменных для шрифтов (#70)

3. Работа с данными -

   • Создала структуру данных навыков (skills.json) с 12 первоначальными навыками (#104)
   • Добавила изображения для каждого навыка (#116)
   • Расширила базу данных до 26 навыков с полными описаниями (#119)

4. Функциональность страницы навыка -

   • Реализовала блок "Похожие предложения" (#133)
   • Разработала API функции для получения навыков (#145)
   • Собрала полноценную страницу навыка с хедером, информацией о навыке и футером (#150)

5. Система аутентификации - Участвовала в создании многошаговой формы регистрации с навигацией и обработкой ошибок (#113)

Установка и запуск

Предварительные требования

• Node.js 16+
• npm или yarn

Инструкция по установке

1. Клонируйте репозиторий:

git clone https://github.com/your-username/skillswap.git
cd skillswap

2. Установите зависимости:

npm install

3. Запустите проект в режиме разработки:

npm run dev

Доступные скрипты

Команда	Назначение
npm run dev	Запуск проекта в dev-режиме
npm run build	Сборка проекта
npm run preview	Предпросмотр production-сборки
npm run lint	Проверка ESLint
npm run format	Форматирование кода через Prettier

Структура проекта

src/
├── api/                         # Методы работы с API
├── app/                         # Корневые настройки приложения
├── entities/                    # Доменные модели
├── features/                    # Бизнес-фичи
├── widgets/                     # Готовые UI-блоки
├── pages/                       # Страницы приложения
├── shared/                      # Общие компоненты и утилиты
└── index.tsx                    # Точка входа

Статус проекта

Проект находится в активной разработке. Реализованы основные функции MVP:

• ✅ Каталог навыков с фильтрацией
• ✅ Система аутентификации
• ✅ Страницы навыков с похожими предложениями
• ✅ Система заявок на обмен
• ✅ Адаптивный дизайн

Планы по развитию

• Реализация PWA-функциональности
• Добавление темной темы
• Интеграция с календарем для планирования сессий
• Система уведомлений в реальном времени
• Расширенная система рейтингов и отзывов

Команда разработки

Проект разрабатывается командой опытных фронтенд-разработчиков, каждый из которых внес значительный вклад в создание платформы SkillSwap.

Макет Командный репозиторий