🐰 Pinterest Clone

1536 × 864 / Vue 3 & FastAPI

Clone for educational purposes only

🐰 Try it right now!

Quick try with test account and get started

📚 API Docs 🔥 GraphQL API 📄 OpenAPI JSON 📖 ReDoc

📊 Prometheus - admin/admin

📈 Grafana - observer/grafana2025!

⚠️ Disclaimer:
This project is an unofficial Pinterest clone created solely for educational purposes.
It is not affiliated with, endorsed by, or sponsored by Pinterest Inc.
Use responsibly and respect copyright and trademark laws.

🔥 Features at a Glance

• 🖼️ Masonry grid feed with infinite scroll
• 🔍 Search by query and tags
• 📌 Detailed pins with comments, likes, related pins
• 📝 Create/edit pins and boards
• 👤 User profiles with followers/following
• 💬 Real-time chat & notifications
• 📡 SSE & WebSocket-powered updates
• 🧠 Smart recommendations based on user activity
• 🔐 JWT & Google OAuth2
• ⚙️ REST & GraphQL APIs
• 📦 Dockerized with GitLab CI/CD
• 🌐 Nginx Reverse Proxy/Security/Optimization

🎯 Use Cases

• Build your own image-sharing platform
• Learn modern full-stack development with Vue + FastAPI
• Use the project as a boilerplate for social media apps
• Practice advanced CI/CD & real-time data techniques

📽 Overview

🌸 Feed

The feed is the main page featuring search and tags, displaying pins in the form of gifs, videos, and images. It shows users who have posted these pins. The layout follows a masonry grid design with infinite scrolling.

📌 Pin + Related

A detailed pin with title, description, href, tags, and the user who created it. Includes comments and likes. Below the pin, related pins are displayed based on connected tags.

🔍 Search

Pin search by query and tags, with a quick search feature available on any page. It also displays popular pins and a list of recent searches.

✨ New Pin

Pin creation — image/gif/video, with the option to add additional information to the pin and assign tags to it.

👤 User Profile

User profile — profile editing by the owner, creation of boards, viewing/editing created/liked/saved pins, viewing/editing pins on boards. Users can also follow/unfollow and message other users.

👥 Followers/Following

View followers/following for any user.

🧷 Boards

Users create boards and add/remove pins on them

⭐ Recommendations

Users receive real-time recommendations based on their recently viewed pins.

🔔 Realtime Updates

Users receive real-time updates from others when their pins are saved, commented on, or liked.

💬 Chats

By messaging another user, you create a chat where you can exchange messages and media in real time. Chats can be customized in terms of size and color. You can also see which users are online on the site or in the chat.

💬🔔 Chats Updates

On any page, you receive real-time updates about new messages from other users.

📝❤️ Comments/Likes

You can comment on, like, and save a pin, as well as comment on and like other comments.

Project Architecture

🛠️ Technologies Used

🧩 Backend

• FastAPI – REST & GraphQL API
• SQLAlchemy – ORM for database interactions
• Pydantic – data validation & environment management
• JWT – access/refresh tokens with revocation support
• OAuth2 – Google authentication
• httpx – interaction with external APIs
• FastAPI-Cache – API-level caching
• FastAPI-Limiter – API-level rate limiting
• FastAPI-Mail – sending emails via FastAPI
• GraphQL (Strawberry) – GraphQL API layer

🗄 Databases

• PostgreSQL, MySQL, MongoDB – relational & non-relational databases
• Redis – caching, token revocation, Celery broker/results, RedBeat

⏱ Async Tasks & Realtime

• Celery – async tasks: email sending, image processing
• Celery Beat – periodic tasks (e.g., promo emails)
• Redis Stream – Consumer Groups, message streaming, background worker processing
• Redis pub/sub – message passing between Celery and FastAPI
• RabbitMQ – task and result passing between Celery and FastAPI
• RabbitMQ pub/sub – message publication to exchange, queue subscription, SSE message transfer
• RabbitMQ stream – message publishing and consumption from RabbitMQ queues
• WebSockets – real-time chat with FastAPI.websockets
• SSE (Server-Sent Events) – real-time notifications
• Asyncio, Aiofiles – asynchronous operations

🧪 Testing & Code Quality

• Pytest – testing framework
• Ruff – linting & formatting
• Alembic – database migrations
• Logging – error logging (client-side, server-side, request logging)
• Sentry – real-time error tracking, exception capturing, and performance monitoring

📦 Deployment

• Docker, Docker Compose – containerization & orchestration
• Nginx – reverse proxy with routing for API, WebSocket, Vue.js, SSE, and Prometheus with basic auth
• SSL – secure HTTPS
• VPS – deployment on virtual server
• GitLab CI/CD – automated build, lint/format, migrations, test, deploy pipeline
• Yandex S3 – media file storage (Yandex Object Storage)
• Prometheus – monitoring & metrics collection for FastAPI, VPS (via node-exporter), and Nginx (via nginx-exporter)
• Grafana – visualization of metrics collected by Prometheus for monitoring system performance and health
• Loki – centralized log aggregation system for collecting logs
• Promtail – agent for gathering and shipping logs to Loki

🎨 Frontend

• Vue 3 – modern JavaScript frontend framework
• Pinia – state management
• Vue Router – routing
• Tailwind CSS – utility-first CSS framework
• Axios – HTTP client

⚙️ CI/CD Pipeline

This project uses GitLab CI/CD to automate the entire delivery process. The pipeline includes the following stages:

• 🧮 Check Disk Space
  Before anything starts, it checks available disk space. If it's less than 3 GB, it automatically runs docker system prune to free space.

• 🐳 Docker Build
  Builds separate Docker images for:

  • FastAPI backend (Dockerfile-fastapi)
  • Vue 3 frontend (Dockerfile-vuejs)

• ✅ Lint & Format

  • Runs ruff check to detect linting issues.
  • Runs ruff format --check to ensure formatting consistency.

• 🛠️ Database Migrations

  • Applies PostgreSQL migrations via alembic upgrade head.
  • Initializes MySQL database via custom script (app.mysql.init_db).

• 🧪 Testing
  Runs pytest inside a container.

• 🚀 Deploy
  Uses docker-compose up -d to start all services after successful testing.

🔒 Secrets & Env Handling:
Before any job runs, the pipeline copies environment variables from a predefined ${ENV} file and exports them for the scripts.

You can view the complete CI/CD configuration in .gitlab-ci.yml.

Discussion

Have suggestions or improvements for the project? Feel free to discuss them in the Discussion section!

License

MIT License – free to use & share!

Contacts

Feel free to reach out if you have any questions, suggestions, or collaboration ideas:

• Email: dankupr21@gmail.com
• Telegram: @daniilkupryianchyk
• Linkedin: daniil-kupryianchyk