GitHub: Ссылка на репозиторий Live Preview: Проект вживую
👋 Привет, Habr!
Вы когда-нибудь пытались найти качественный open-source клон Pinterest — с real-time функционалом, полноценной архитектурой, удобным UI и современной технологической основой? Я — да. И не нашёл. Поэтому решил создать свой.
Представляю вам Pinterest Clone — мой pet-проект, над которым я работал в одиночку 4 месяца, чтобы воссоздать не просто копию, а полнофункциональную платформу с реальным пользовательским опытом, максимально приближённым к оригиналу. Реализация включает:
Полноценный REST API на FastAPI — с чёткой архитектурой, валидацией, пагинацией и фильтрацией.
Современный фронтенд на Vue 3 — с использованием Tailwind CSS для адаптивной стилизации и Axios для взаимодействия с API.
Real-time чаты и уведомления — реализованы через WebSockets и Server-Sent Events (SSE).
Аутентификация — с поддержкой JWT и входом через Google OAuth2.
Фоновая обработка задач и планирование — с помощью Celery и Celery Beat
Кеширование — реализовано через Redis для ускорения работы с наиболее запрашиваемыми данными.
CI/CD, Docker, деплой на VPS — с автоматической сборкой и доставкой, настройкой Nginx и SSL.
Клонирование ключевого функционала Pinterest — пины, доски, подписки, лайки, комментарии, поиск, профили пользователей, загрузка media, система рекомендаций и многое другое.
И всё это — за 4 месяца, полностью в одиночку.
✨ Буду очень благодарен, если поддержите проект звёздочкой на GitHub!
🚀 Live-версия
Я предусмотрел Live Preview, где вы можете протестировать весь функционал без регистрации — достаточно использовать quick login как тестовый пользователь. Всё отлажено и протестировано вручную. Можете смело играться с интерфейсом, создавать пины, чатиться и проверять real-time фичи.
🤝 Зачем эта статья?
Я пишу эту статью не только чтобы поделиться опытом и описать проект, но и чтобы привлечь разработчиков, которым интересна идея. Если вы хотите поучаствовать в open source, внести вклад или просто вдохновиться архитектурой — добро пожаловать в репозиторий! Уверен, вместе мы можем довести проект до нового уровня.
📄 Welcome Page
На странице приветствия пользователю доступны следующие возможности:
🔑 Quick Login — мгновенный вход в систему как тестовый пользователь, чтобы сразу протестировать весь функционал без необходимости регистрации.
📝 Signup — регистрация нового пользователя с созданием собственного профиля.
🔐 Login — вход для ранее зарегистрированных пользователей.
🌍 Google OAuth2 — авторизация через аккаунт Google для удобства.
После входа пользователь попадает в полноценную платформу, где может создавать пины, комментировать, подписываться, лайкать, взаимодействовать с real-time функционалом и многое другое. 🎥 Также на странице доступен Video Overview — видеообзор, демонстрирующий весь ключевой функционал проекта в действии.
🌸 Feed Page
Страница ленты — это главная точка входа в контент платформы. Здесь пользователи могут просматривать пины — изображения, гифки и видео — размещённые другими участниками сообщества. Основные особенности ленты:
🧱 Masonry Grid Layout
Все пины располагаются в формате «кирпичной кладки», повторяя узнаваемый стиль оригинального Pinterest. Это обеспечивает плотное, но визуально гармоничное размещение карточек разной высоты.🔄 Бесконечная прокрутка (Infinite Scrolling)
Новые пины автоматически подгружаются по мере прокрутки страницы вниз, что делает просмотр контента непрерывным и более удобным.🏷️ Поиск по тегам (Tags Search)
Пользователи могут находить интересующие их пины по тегам — реализован быстрый и интуитивный поиск по ключевым темам.🎨 Primary Color при загрузке
Пока изображение пина загружается, отображается его доминирующий цвет (primary color). Это придаёт визуальную завершённость и сглаживает момент загрузки, особенно при медленном интернете.👤 Информация об авторе
Под каждым пином указано имя пользователя, разместившего его. Можно перейти в профиль, чтобы увидеть больше его пинов и досок.
📌 Страница пина + Похожие пины
Каждый пин в приложении имеет свою отдельную страницу с детальной информацией и возможностью взаимодействия. Вот основные возможности этой страницы:
🖼️ Детали пина
Отображается полная информация о пине: изображение, заголовок, описание, ссылка (href), теги и автор пина. Такой подход позволяет пользователям глубже познакомиться с контентом и перейти к его источнику.💬 Комментарии и лайки
Пользователи могут:💖 Лайкать как сам пин, так и отдельные комментарии.
✍️ Оставлять комментарии под пином.
🔁 Отвечать на комментарии других пользователей (вложенные комментарии).
🧠 Похожие пины (Related Pins)
Ниже основного пина отображаются другие пины, связанные по тегам. Это помогает пользователю находить похожий контент и оставаться дольше на платформе.
✨ Создание нового пина
Создание пина — одна из ключевых функций приложения. Пользователь может загрузить изображение, GIF или видео, а также добавить к пину дополнительную информацию:
📝 Название и описание
🔗 Ссылку (href)
🏷 Теги, по которым пин будет легче найти через поиск
Интерфейс реализован удобно и интуитивно: после выбора файла появляется превью, поля для ввода данных, а также выбор подходящих тегов.
💡 Благодаря гибкой архитектуре, пины сразу отображаются в ленте и могут быть найдены другими пользователями через поиск по тегам.
🔍Поиск пинов
🔍 В приложении реализован удобный и быстрый поиск по пинам:
📌 Поиск по текстовому запросу — вы можете искать пины по их названию, описанию и другим параметрам.
🏷 Поиск по тегам — просто кликните на тег, и вы сразу увидите все пины с этим тегом.
⚡ Быстрый поиск доступен на любой странице приложения.
🔥 Популярные пины отображаются как рекомендации.
🕘 История последних поисков сохраняется для быстрого доступа.
💡 Такой подход позволяет пользователям быстро находить нужный контент и возвращаться к интересным пинам без повторного ввода запроса.
👤 Профиль пользователя
Каждый пользователь имеет собственную страницу профиля с множеством функций:
✏️ Редактирование профиля — пользователь может изменить имя, аватар и другую информацию.
📌 Создание досок — для организации пинов по тематикам.
❤️ Просмотр понравившихся пинов, 🧷 сохранённых, а также созданных лично.
🗂 Работа с досками — просмотр пинов на досках, удаление и редактирование содержимого.
➕ Подписки — можно подписаться на других пользователей или отписаться.
💬 Отправка сообщений другим пользователям прямо из профиля.
💡 Профиль — это персональный центр управления, который позволяет не только следить за контентом, но и взаимодействовать с другими участниками платформы.
🧷 Доски (Boards)
Доски — это удобный способ организации пинов по темам, коллекциям или интересам.
➕ Создание досок — пользователь может создать неограниченное количество досок.
📌 Добавление пинов — пины можно сохранять на конкретные доски.
❌ Удаление пинов с доски — если что-то больше не актуально, пин легко убрать.
👁 Просмотр всех досок — как собственных, так и у других пользователей.
📁 Доски позволяют структурировать контент по категориям — например, "Дизайн", "Путешествия", "Рецепты", что делает навигацию и вдохновение намного удобнее.
⭐ Рекомендации
Система рекомендаций помогает пользователям находить интересный контент на основе их активности.
📌 Персональные рекомендации — формируются на основе недавно просмотренных пинов.
⚙️ Фоновая обработка через Celery — задачи по подбору рекомендаций выполняются асинхронно, не нагружая основной поток приложения.
🔄 Реальное время — обновления рекомендаций происходят автоматически, без перезагрузки страницы.
Благодаря использованию Celery и Redis, рекомендации работают быстро и не мешают основной работе приложения, оставаясь всегда актуальными.
🔔 Уведомления в реальном времени
Пользователь получает мгновенные уведомления, когда его пин был:
💾 сохранён другим пользователем
💬 прокомментирован
❤️ понравился (лайкнут)
⚙️ Техническая реализация:
🧵 Celery — формирует уведомления в фоновом режиме после событий (лайк, коммент, сохранение).
🧠 Redis Streams — используется как канал для связи между FastAPI и Celery, обеспечивая надёжную очередь событий.
🌐 SSE (Server-Sent Events) — клиент подписывается на поток уведомлений через FastAPI
StreamingResponse.🔁 Уведомления отображаются без перезагрузки страницы, полностью в реальном времени.
Такой подход обеспечивает масштабируемость и отказоустойчивость, а также разделяет логику работы с событиями между сервисами.
💬 Чаты
При обмене сообщениями с другим пользователем создаётся чат, где можно обмениваться как текстовыми сообщениями, так и медиафайлами в реальном времени.
⚙️ Особенности чатов:
💬 Возможность отправки текстовых сообщений и медиафайлов (изображений, видео, GIF).
🖌️ Настройка — пользователи могут изменять цвет и размер чата для персонализации.
🔵 Статус онлайн — отображается, кто из пользователей в данный момент онлайн на сайте или в чате.
🗣️ Прочитанные сообщения — чаты отображают статус сообщений, показывая, были ли они прочитаны другой стороной, что помогает отслеживать активность в переписке.
Эта система позволяет пользователям обмениваться сообщениями, не переживая о задержках, и видеть, когда собеседник прочитал их сообщение.
💬🔔 Обновления чатов в реальном времени
На любой странице приложения пользователи получают обновления чатов в реальном времени о новых сообщениях от других пользователей. Это позволяет не пропустить важные уведомления, не переключаясь на страницу чата.
⚙️ Особенности обновлений чатов:
📩 Мгновенные уведомления — при получении нового сообщения, пользователи сразу же получают уведомление, которое отображается в интерфейсе.
🔄 Обновление без перезагрузки страницы — чаты и сообщения обновляются в реальном времени без необходимости вручную обновлять страницу.
🔔 Оповещения о новых сообщениях — пользователи получают пуш-уведомления, когда им отправляют сообщение в чате.
Таким образом, вся система чатов и уведомлений настроена так, чтобы вы всегда были в курсе новых событий, не отвлекаясь от работы с приложением.
Архитектура приложения
⚠️ Единственная загвоздка
Так как фронтенда оказалось очень много, и я работал один, самой сложной частью оказался responsive design. Пока клон адаптирован исключительно под разрешение 1536 × 864. В будущем, конечно, планирую расширить поддержку под все устройства — с удовольствием приму помощь, если у кого-то есть опыт в этой части.
🌟 Открытый исходный код
Проект Pinterest Clone является открытым исходным кодом, и я с радостью делюсь им с вами! Если вам понравился проект или вы хотите внести улучшения, вы можете помочь развивать его. Все изменения приветствуются, и я буду рад любому вкладу в развитие!
👉 GitHub репозиторий: Перейти на GitHub и поставить звездочку ⭐ — если проект вам понравился, не забудьте поставить ⭐, чтобы поддержать меня!
🔗 Live Preview: Посмотреть проект вживую — не пропустите возможность попробовать все фичи прямо в браузере с быстрым login как тестовый пользователь или создайте свой личный профиль.
💬 Заключение
Этот проект стал ценным опытом для меня, как для разработчика. Работая над ним, я значительно улучшил свои навыки как в фронтенде, так и в бэкенде. Я освоил интеграцию реальных обновлений через WebSockets, улучшил взаимодействие с Vue 3 и FastAPI, а также научился эффективно работать с фоновыми задачами и кешированием.
Я буду рад услышать ваши замечания, идеи и предложения! Ваши отзывы очень важны для улучшения проекта и его развития. Всегда открыт для конструктивной критики и предложений!
💡 Если у вас есть идеи или пожелания, не стесняйтесь оставлять их в Issues на GitHub или пишите мне напрямую! Ваш вклад и поддержка значат для меня очень много.
🙌 Благодарю за внимание и участие!