📸 Fakegram Frontend

Instagram-клон на React + TypeScript + Redux Toolkit

Современное клиентское приложение для социальной сети, вдохновлённое Instagram. Построено с использованием React 19, TypeScript, Redux Toolkit и Vite.

🚀 Возможности

• ✅ Аутентификация: Регистрация и вход с JWT токенами
• ✅ Управление профилем: Редактирование информации, загрузка аватара
• ✅ Публикация постов: Создание постов и историй с изображениями
• ✅ Лента постов: Просмотр постов с лайками и комментариями
• ✅ Система уведомлений: Панель уведомлений с фильтрами и счётчиком
• ✅ Подписки: Подписка на пользователей, просмотр подписчиков
• ✅ Поиск: Панель поиска пользователей с историей
• ✅ Интересное: Панель с рекомендованными постами
• ✅ Защищённые маршруты: Авторизация для доступа к страницам
• ✅ Responsive дизайн: Адаптивный интерфейс для всех устройств

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

• React 19.2 - UI библиотека
• TypeScript - Типизация
• Redux Toolkit - Управление состоянием
• React Router DOM - Маршрутизация
• Axios - HTTP клиент
• Vite - Сборщик и dev-сервер
• CSS Modules - Стилизация компонентов

📦 Установка

# Клонирование репозитория
git clone https://github.com/IPodymov/fakegram-frontend.git
cd fakegram-frontend

# Установка зависимостей
npm install

⚙️ Настройка окружения

Создайте файл .env в корне проекта:

VITE_API_URL=https://fakegram-backend-production.up.railway.app

Для локальной разработки создайте .env.local:

VITE_API_URL=http://localhost:3000

🏃 Запуск проекта

# Development режим
npm run dev

# Production сборка
npm run build

# Предварительный просмотр production сборки
npm run preview

# Линтинг кода
npm run lint

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

fakegram-frontend/
├── public/              # Статические файлы
├── src/
│   ├── api/            # API клиент и endpoints
│   ├── assets/         # Иконки, изображения
│   ├── components/     # React компоненты
│   │   ├── Header/
│   │   ├── Sidebar/
│   │   ├── LoginForm/
│   │   ├── RegisterForm/
│   │   ├── PostCard/
│   │   ├── CreateModal/
│   │   ├── NotificationsPanel/
│   │   ├── NotificationsButton/
│   │   ├── NotificationsDropdown/
│   │   └── ...
│   ├── pages/          # Страницы приложения
│   │   ├── HomePage/
│   │   ├── LoginPage/
│   │   ├── RegisterPage/
│   │   ├── ProfilePage/
│   │   ├── UserProfilePage/
│   │   ├── SettingsPage/
│   │   └── ShortsPage/
│   ├── store/          # Redux store
│   │   ├── slices/     # Redux slices
│   │   ├── thunks/     # Async actions
│   │   └── hooks.ts    # Типизированные хуки
│   ├── types/          # TypeScript типы
│   ├── utils/          # Утилиты (imageUtils)
│   ├── App.tsx         # Главный компонент
│   └── main.tsx        # Entry point
├── .env                # Переменные окружения
├── LICENSE.md          # MIT лицензия
├── TERMS_OF_SERVICE.md # Пользовательское соглашение
└── README.md

🌐 API Integration

Приложение интегрируется с Fakegram Backend:

• Production API: https://fakegram-backend-production.up.railway.app
• Local API: http://localhost:3000

Основные endpoints:

• POST /auth/register - Регистрация
• POST /auth/login - Вход
• GET /posts - Получение постов
• POST /posts - Создание поста
• POST /stories - Создание истории
• GET /users/:id - Профиль пользователя
• PUT /users/:id - Обновление профиля
• POST /users/:id/follow - Подписка на пользователя
• DELETE /users/:id/follow - Отписка от пользователя
• GET /notifications - Получение уведомлений
• PATCH /notifications/:id/read - Отметить уведомление как прочитанное

🎨 Особенности UI

• Instagram-inspired дизайн
• CSS Modules для изолированных стилей
• Иконки из Material Design
• Плавные анимации и переходы
• Адаптивная вёрстка (мобильные и десктоп)

🔐 Безопасность

• JWT токены хранятся в localStorage
• Автоматическое добавление токена к запросам (Axios interceptors)
• Защищённые маршруты с редиректом
• Валидация форм на клиенте
• HTTPS для production API

📝 Основные компоненты

Аутентификация

• LoginForm - Форма входа
• RegisterForm - Форма регистрации с загрузкой аватара
• Валидация username (только английские символы)

Посты и Истории

• PostCard - Карточка поста с лайками и комментариями
• PostFeed - Лента постов
• CreatePublicationForm - Форма создания постов и историй с изображениями
• CreateModal - Модальное окно для создания контента

Профиль

• ProfilePage - Страница профиля с редактированием
• UserProfilePage - Страница профиля другого пользователя
• AvatarUpload - Загрузка аватара с превью
• FollowersModal - Модальное окно подписчиков/подписок
• Сетка постов пользователя

Уведомления

• NotificationsPanel - Боковая панель уведомлений с фильтрами
• NotificationsButton - Кнопка с бейджем непрочитанных уведомлений
• NotificationsDropdown - Выпадающее меню уведомлений (Header)

Навигация и Поиск

• Header - Верхняя навигационная панель
• Sidebar - Боковая панель навигации
• MobileNavigation - Нижняя панель для мобильных устройств
• SearchPanel - Панель поиска пользователей
• ExplorePanel - Панель интересного контента
• Layout - Общий layout приложения
• ProtectedRoute - Защита маршрутов

🤝 Вклад в проект

Мы приветствуем вклад в развитие проекта! Пожалуйста:

1. Сделайте Fork репозитория
2. Создайте feature ветку (git checkout -b feature/AmazingFeature)
3. Закоммитьте изменения (git commit -m 'feat: add some feature')
4. Запушьте в ветку (git push origin feature/AmazingFeature)
5. Откройте Pull Request

📄 Лицензия

Этот проект распространяется под лицензией MIT. Подробности в LICENSE.md.

📜 Пользовательское соглашение

Используя это приложение, вы соглашаетесь с условиями, изложенными в TERMS_OF_SERVICE.md.

👨‍💻 Автор

Ivan Podymov

• GitHub: @IPodymov
• Frontend: fakegram-frontend
• Backend: fakegram-backend

🔗 Связанные проекты

• Fakegram Backend - NestJS API сервер

---

⭐️ Если проект был полезен, поставьте звёздочку!