Partisyn

A full-stack, image-oriented social media application where PC enthusiasts can post, discover, and discuss their computer setups. The platform features interactive component tagging, a dynamically populated component database, and a lightweight "Particulate" system for creating instantly shareable build summaries.

Live Demo: https://partisyn.com

Technologies: Next.js • Django • MongoDB • GraphQL • Scrapy • JWT • Material-UI • Cloudinary

A screenshot of the main homepage showing a gallery of setup posts with infinite scroll.

A screenshot of the detail page for a specific setup, showing interactive component tags on the image.

A screenshot of a generated "Particulate" page, a lightweight, shareable summary of a build.

Features

• Full-Stack & Decoupled: A robust Django backend serves a GraphQL API to a dynamic, server-rendered Next.js frontend
• User Authentication: Secure user registration and login using JWT (JSON Web Tokens) with a custom MongoEngine authentication backend
• Automated Component Database: Powerful Scrapy web scraping project with multiple spiders that automatically crawl e-commerce sites (IKEA, NZXT, Secretlab, etc.) to populate and update the MongoDB component database
• Interactive Component Tagging: Place interactive tags directly on setup images to identify specific components, with accurate positioning even on responsive images
• Dynamic Component Search: Custom-built search engine with a scoring algorithm allows users to quickly find and add components to their build list
• Image Management: Seamless image uploads to Cloudinary for hosting, optimization, and blurred image placeholders for a better user experience
• "Particulate" Feature: Quickly upload an image, tag components, and generate a unique, shareable link without creating a full post
• Advanced Social Sharing: Dynamically generates Open Graph and Twitter meta tags for setups and Particulates, ensuring rich link previews on platforms like Discord
• Community Interaction: Users can post comments and submit 1-5 star ratings on setups

Tech Stack

Backend

• Language: Python
• Framework: Django
• Database: MongoDB (NoSQL) with MongoEngine ODM
• API: GraphQL (using Graphene-Django)
• Authentication: JWT (JSON Web Tokens)
• Web Scraping: Scrapy
• 3rd Party APIs: Amazon Product Advertising API
• Testing: Pytest
• Deployment: Render / Google Cloud Run

Frontend

• Framework: Next.js (React) with App Router
• Styling: Material-UI (MUI) with Emotion
• API Client: Apollo Client for GraphQL
• State Management: React Context API
• Image Hosting: Cloudinary
• Email Service: Resend (via Next.js Server Actions)
• Analytics: Vercel Analytics, Google Analytics
• Deployment: Vercel

Local Setup and Installation

Follow these instructions to get the project running on your local machine.

Prerequisites

• Python (v3.10 or later) & Pip
• Node.js (v18 or later)
• MongoDB (local instance or MongoDB Atlas)
• A Cloudinary account
• An Amazon Product Advertising API account (optional, the app has a dummy mode)
• A Resend account

1. Clone the Repository

git clone https://github.com/YOUR_USERNAME/YOUR_REPO_NAME.git
cd YOUR_REPO_NAME

2. Backend Setup

# Navigate to the backend directory
cd backend

# Create and activate a Python virtual environment
python -m venv venv
source venv/bin/activate  # On Windows: venv\Scripts\activate

# Install dependencies
pip install -r requirements.txt

# Create a .env.sandbox file in the /backend directory with the variables listed below

# Start the backend server
python manage.py runserver

The backend will be running at http://localhost:8000.

3. Frontend Setup

# Navigate to the frontend directory from the root
cd frontend

# Install dependencies
npm install

# Create a .env.local file in the /frontend directory with the variables listed below

# Start the frontend development server
npm run dev

The frontend will be running at http://localhost:3000.

4. Populating the Database (Scrapy)

The component_scraper project is used to populate the component database. Without this step, the component search will not return any results.

# Navigate to the scraper directory from the project root
cd backend/component_scraper

# Ensure your backend virtual environment is active and the backend/.env.sandbox file 
# is correctly configured with your MONGODB_HOST and CLOUDINARY_* keys

# Run a spider to start scraping (format: scrapy crawl <spider_name>)
# For example, to scrape IKEA:
scrapy crawl ikea

This will start the scraping process. The pipelines will automatically handle uploading images to Cloudinary and saving the data to your MongoDB database.

Available Spiders: ikea, centralcomputer, keychron, mechanicalkeyboards, nzxt, secretlab, steelseries

5. Environment Variables

Backend (backend/.env.sandbox)

# Django Settings
SECRET_KEY=your_django_secret_key
DEBUG=1
DJANGO_ALLOWED_HOSTS=localhost,127.0.0.1
MONGODB_HOST=your_mongodb_atlas_connection_string

# Cloudinary (for Scrapy and Image Placeholders)
CLOUDINARY_CLOUD_NAME=your_cloudinary_cloud_name
CLOUDINARY_API_KEY=your_cloudinary_api_key
CLOUDINARY_API_SECRET=your_cloudinary_api_secret

# Amazon Product Advertising API
AMAZON_ACCESS_KEY=your_amazon_access_key
AMAZON_SECRET_KEY=your_amazon_secret_key
PARTNER_TAG=your_amazon_partner_tag

Frontend (frontend/.env.local)

# API Endpoint
NEXT_PUBLIC_GRAPHQL_ENDPOINT=http://localhost:8000/graphql

# Cloudinary (for client-side uploads)
NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME=your_cloudinary_cloud_name
NEXT_PUBLIC_CLOUDINARY_UPLOAD_PRESET=your_cloudinary_upload_preset

# Other Services
RESEND_API_KEY=your_resend_api_key
NEXT_PUBLIC_GA_ID=your_google_analytics_id

Usage

1. Register/Login: Create an account or log in
2. Create a Setup: Navigate to "Post," upload an image, add components from the database (or create custom ones), and tag their locations on the image
3. Create a Particulate: For a quicker share, use the "Particulate" feature to generate a shareable link with just an image and a component list
4. Browse & Interact: View all setups on the homepage, comment, and rate them
5. View Profiles: Click on a user's name to see all the setups they have posted

GraphQL API

The application uses a single GraphQL endpoint at /graphql.

Main Queries

• allSetups(limit, offset) - Fetches all setups with pagination
• setupById(id: ID!) - Fetches a single setup by its ID
• setupsByAuthor(username: String!) - Fetches all setups by a specific user
• searchComponents(query, category, subcategory) - Searches for components in the database
• particulateById(id: ID!) - Fetches a single Particulate by its ID
• searchAmazon(keywords: String!) - Searches the Amazon Product API

Main Mutations

• createUser(username, email, password) - Registers a new user
• tokenAuth(username, password) - Logs in a user and returns a JWT
• createSetup(...) - Creates a new setup post (authentication required)
• updateSetup(...) - Updates an existing setup (authentication required)
• deleteSetup(setupId: ID!) - Deletes a setup (authentication required)
• createComment(setupId, text) - Adds a comment to a setup (authentication required)
• submitRating(setupId, rating) - Adds a rating to a setup (authentication required)
• createParticulate(...) - Creates a new Particulate

Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

Contact

Zaid Ahmed - zaahme18@gmail.com

Project Link: https://github.com/ZA1815/partisyn