πŸ’• HeartRank β€” Photo Rating Web App

An experimental MVP web app where users rate profiles on a scale of 1–10 and see how they rank on a live leaderboard.

πŸ“… 2025 πŸ§ͺ Experimental MVP πŸ’» Next.js + TypeScript
πŸ’• HeartRank πŸ‘€ Profile Name Swipe or rate 1-10 1 10 πŸ† Leaderboard 1. Profile A 9.2 2. Profile B 8.7 3. Profile C 8.4 πŸ”’ Privacy-First Design

🎯 The Concept

HeartRank is an experimental MVP web app where users can rate profiles on a scale of 1–10 and see how they compare on a live leaderboard. The concept explores how simple interaction patternsβ€”like swiping and scoringβ€”can drive engagement and competition.

The app uses a Tinder-style card system for intuitive voting, combined with a dynamic leaderboard that highlights top-ranked profiles.

βš™οΈ Key Features

🎴 Card-Based Interface

Tinder-style swipeable cards for quick and intuitive profile rating.

πŸ“Š Live Leaderboard

Real-time ranking system showing top-rated profiles.

πŸ”„ Session-Based Voting

Vote deduplication to ensure fair and accurate rankings.

πŸ“± Responsive Design

Smooth experience across both mobile and desktop devices.

πŸ”’ Privacy-First

No authentication, no personal data collection, fictional profiles only.

πŸ—„οΈ Prisma Database

Structured database with clean component-based architecture.

πŸ›‘οΈ Ethical Approach

An important part of this project is its ethical design. The app is designed strictly for:

  • Fictional profiles or fully consenting participants
  • No authentication required
  • No personal data collection
  • Privacy-first setup with no user tracking

🧠 What I Learned

From a technical perspective, I implemented features such as:

  • Session-based vote deduplication
  • Structured database design with Prisma
  • Clean component-based architecture in Next.js
  • Balancing interactivity with simplicity in a small-scale application

πŸ› οΈ Tech Stack

Next.js TypeScript Prisma Tailwind CSS React
← Back to Projects