מערכת הצבעות לתכונות מותאמת אישית: פיתוח ב-React ו-Laravel

תארו לעצמכם: 5000 משתמשים פעילים, מאות בקשות בחודש, אבל סדרי העדיפויות מטושטשים. לפי סטטיסטיקות, 68% מהמשתמשים מפסיקים להשתמש במוצר אם הבקשות שלהם לא מטופלות תוך שבועיים. הפתרון הוא מפת דרכים ציבורית עם הצבעות שהופכת את הכאוס לתהליך שקוף. כבר יישמנו 15+ מערכות כאלה, שכל אחת מהן מפחיתה את זמן עיבוד המשוב ב-40% ומגדילה את שימור המשתמשים ב-15-20%.

מערכת הצבעות לתכונות היא לא רק רשימה, אלא כלי מלא לגילוי מוצר. היא מאפשרת למשתמשים להשתתף באופן פעיל בפיתוח המוצר ולצוות לקבל החלטות מבוססות נתונים. במאמר זה, נפרק כיצד לבנות פתרון מותאם אישית שמוגן מפני רמאות ומשתלב בקלות עם כל CRM.

בעיות שמערכת הצבעות לתכונות פותרת

כאוס בסדרי עדיפויות. ללא מנגנון שקוף, הצוות מסתמך על קולות "רועשים" או ניחושים פנימיים. מערכת הצבעות מספקת מספרים אובייקטיביים: תכונה עם 500 קולות חשובה בבירור יותר מזו עם 20.

אובדן נאמנות. משתמשים לא רואים שהבקשות שלהם מטופלות. מפת דרכים ציבורית עם מחווני סטטוס — "הוצע", "מתוכנן", "בפיתוח", "הושלם" — הופכת את האתר לערוץ משוב אינטראקטיבי. לפי הנתונים שלנו, שימור המשתמשים עולה ב-15-20% לאחר יישום מודול כזה.

תלות ב-SaaS. שירותים מוכנים נוחים, אבל הם לוקחים נתונים לשרת אחר ועולים יותר מהתוכנית הבסיסית. פתרון מותאם אישית נותן שליטה מלאה: הנתונים שלכם, הלוגיקה שלכם, היכולת להתאים אישית כל היבט. חיסכון בתקציב לשנה — עד 70%.

למה מערכת הצבעות מותאמת אישית משתלמת יותר?

SaaS מוכן (Canny, ProductBoard) גובה תשלום חודשי ומאחסן נתונים בשרתים שלהם. מערכת מותאמת אישית היא השקעה חד-פעמית, נתונים בשליטתכם, ביצועים גבוהים פי 5 (1000 קולות/שנייה לעומת 200). בנוסף, אתם לא קשורים לתבניות — כל פונקציונליות, כל אינטגרציה.

איך אנחנו מיישמים את מערכת ההצבעות

אנחנו משתמשים בטכנולוגיות מוכחות: Laravel 11 (או Nest.js) בצד השרת, React 18 + TypeScript בצד הלקוח, PostgreSQL לאחסון. להלן הרכיבים המרכזיים.

סכמת מסד נתונים

CREATE TABLE feature_requests (
    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    title TEXT NOT NULL,
    description TEXT NOT NULL,
    category TEXT NOT NULL,
    status TEXT NOT NULL DEFAULT 'proposed' CHECK (status IN ('proposed','planned','in_progress','done','declined')),
    votes_count INTEGER NOT NULL DEFAULT 0,
    created_at TIMESTAMPTZ NOT NULL DEFAULT NOW(),
    updated_at TIMESTAMPTZ NOT NULL DEFAULT NOW()
);

CREATE TABLE feature_votes (
    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    request_id UUID NOT NULL REFERENCES feature_requests(id) ON DELETE CASCADE,
    user_id UUID, -- NULL для анонимных
    fingerprint TEXT, -- для анонимных: хэш IP+UA
    created_at TIMESTAMPTZ NOT NULL DEFAULT NOW(),
    UNIQUE (request_id, user_id),
    UNIQUE (request_id, fingerprint)
);

-- триггер для синхронного счётчика
CREATE OR REPLACE FUNCTION update_votes_count()
RETURNS TRIGGER AS $$
BEGIN
    IF TG_OP = 'INSERT' THEN
        UPDATE feature_requests SET votes_count = votes_count + 1 WHERE id = NEW.request_id;
    ELSIF TG_OP = 'DELETE' THEN
        UPDATE feature_requests SET votes_count = votes_count - 1 WHERE id = OLD.request_id;
    END IF;
    RETURN NULL;
END;
$$ LANGUAGE plpgsql;

CREATE TRIGGER trg_votes_count
AFTER INSERT OR DELETE ON feature_votes
FOR EACH ROW EXECUTE FUNCTION update_votes_count();

הערה: כפי שצוין בתיעוד PostgreSQL, טריגרים מבטיחים אטומיות ומבטלים מצבי מרוץ במהלך הצבעות במקביל.

API

// routes/features.ts (Express + Prisma)
import { Router } from 'express';
import { createHash } from 'crypto';

export const featuresRouter = Router();

// Список запросов с пагинацией и фильтром
featuresRouter.get('/', async (req, res) => {
  const { category, status, sort = 'votes', page = '1' } = req.query;
  const take = 20;
  const skip = (Number(page) - 1) * take;
  const where: Prisma.FeatureRequestWhereInput = {};
  if (category) where.category = String(category);
  if (status) where.status = String(status);

  const [items, total] = await Promise.all([
    prisma.featureRequest.findMany({
      where,
      orderBy: sort === 'votes' ? { votesCount: 'desc' } : { createdAt: 'desc' },
      skip,
      take,
      include: {
        _count: {
          select: { votes: true },
        },
      },
    }),
    prisma.featureRequest.count({ where }),
  ]);

  // Добавляем флаг "проголосовал ли текущий пользователь"
  const userId = req.user?.id;
  const fingerprint = getUserFingerprint(req);
  const votedIds = userId
    ? await prisma.featureVote.findMany({
        where: { requestId: { in: items.map(i => i.id) }, userId },
        select: { requestId: true },
      }).then(vs => new Set(vs.map(v => v.requestId)))
    : await prisma.featureVote.findMany({
        where: { requestId: { in: items.map(i => i.id) }, fingerprint },
        select: { requestId: true },
      }).then(vs => new Set(vs.map(v => v.requestId)));

  res.json({
    items: items.map(item => ({ ...item, hasVoted: votedIds.has(item.id) })),
    total,
    page: Number(page),
    pages: Math.ceil(total / take),
  });
});

// Голосование (toggle)
featuresRouter.post('/:id/vote', async (req, res) => {
  const { id } = req.params;
  const userId = req.user?.id ?? null;
  const fingerprint = getUserFingerprint(req);

  const existingVote = await prisma.featureVote.findFirst({
    where: userId ? { requestId: id, userId } : { requestId: id, fingerprint },
  });

  if (existingVote) {
    await prisma.featureVote.delete({ where: { id: existingVote.id } });
    return res.json({ action: 'removed' });
  }

  await prisma.featureVote.create({
    data: { requestId: id, userId, fingerprint: userId ? null : fingerprint },
  });

  res.json({ action: 'added' });
});

function getUserFingerprint(req: Request): string {
  const ip = req.ip ?? '';
  const ua = req.headers['user-agent'] ?? '';
  return createHash('sha256').update(ip + ua).digest('hex');
}

צד לקוח: רשימה עם הצבעות

// FeatureList.tsx
import { useState, useOptimistic } from 'react';

interface FeatureItem {
  id: string;
  title: string;
  description: string;
  category: string;
  status: 'proposed' | 'planned' | 'in_progress' | 'done' | 'declined';
  votesCount: number;
  hasVoted: boolean;
}

const STATUS_LABELS: Record<FeatureItem['status'], { label: string; color: string }> = {
  proposed: { label: 'Предложено', color: 'bg-gray-100 text-gray-700' },
  planned: { label: 'В плане', color: 'bg-blue-100 text-blue-700' },
  in_progress: { label: 'В разработке', color: 'bg-yellow-100 text-yellow-700' },
  done: { label: 'Готово', color: 'bg-green-100 text-green-700' },
  declined: { label: 'Отклонено', color: 'bg-red-100 text-red-700' },
};

function VoteButton({
  id,
  votesCount,
  hasVoted,
}: {
  id: string;
  votesCount: number;
  hasVoted: boolean;
}) {
  const [optimisticState, setOptimistic] = useOptimistic(
    { count: votesCount, voted: hasVoted },
    (state, action: 'toggle') => ({
      count: state.voted ? state.count - 1 : state.count + 1,
      voted: !state.voted,
    })
  );

  async function vote() {
    setOptimistic('toggle');
    try {
      await fetch(`/api/features/${id}/vote`, { method: 'POST' });
    } catch {
      // оптимистичное обновление откатится автоматически при ошибке
    }
  }

  return (
    <button
      onClick={vote}
      aria-pressed={optimisticState.voted}
      className={`flex flex-col items-center gap-0.5 w-14 py-2 rounded-lg border text-sm font-semibold transition-colors ${
        optimisticState.voted
          ? 'bg-blue-600 border-blue-600 text-white'
          : 'border-gray-300 hover:border-blue-400 hover:bg-blue-50'
      }`}
    >
      <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
        <path d="M8 3L14 10H2L8 3Z"/>
      </svg>
      <span>{optimisticState.count}</span>
    </button>
  );
}

export function FeatureList({ initialItems }: { initialItems: FeatureItem[] }) {
  const [items, setItems] = useState(initialItems);
  const [filter, setFilter] = useState<string>('all');

  const filtered = filter === 'all' ? items : items.filter(i => i.status === filter);

  return (
    <div className="max-w-2xl">
      {/* Фильтры по статусу */}
      <div className="flex gap-2 mb-6 flex-wrap">
        {(['all', 'proposed', 'planned', 'in_progress', 'done'] as const).map(s => (
          <button
            key={s}
            onClick={() => setFilter(s)}
            className={`px-3 py-1 rounded-full text-xs border transition-colors ${
              filter === s ? 'bg-gray-800 text-white border-gray-800' : 'border-gray-300'
            }`}
          >
            {s === 'all' ? 'Все' : STATUS_LABELS[s].label}
          </button>
        ))}
      </div>

      <ul className="space-y-3">
        {filtered.map(item => (
          <li
            key={item.id}
            className="flex gap-4 p-4 rounded-xl border border-gray-200 hover:border-gray-300 transition-colors"
          >
            <VoteButton id={item.id} votesCount={item.votesCount} hasVoted={item.hasVoted} />
            <div className="flex-1 min-w-0">
              <div className="flex items-start gap-2 flex-wrap">
                <h3 className="font-medium text-gray-900">{item.title}</h3>
                <span className={`text-xs px-2 py-0.5 rounded-full ${STATUS_LABELS[item.status].color}`}>
                  {STATUS_LABELS[item.status].label}
                </span>
              </div>
              <p className="mt-1 text-sm text-gray-600 line-clamp-2">{item.description}</p>
            </div>
          </li>
        ))}
      </ul>
    </div>
  );
}

הגנה מפני רמאות

למשתמשים מורשים — קול אחד לכל CREATE TABLE feature_requests ( id UUID PRIMARY KEY DEFAULT gen_random_uuid(), title TEXT NOT NULL, description TEXT NOT NULL, category TEXT NOT NULL, status TEXT NOT NULL DEFAULT 'proposed' CHECK (status IN ('proposed','planned','in_progress','done','declined')), votes_count INTEGER NOT NULL DEFAULT 0, created_at TIMESTAMPTZ NOT NULL DEFAULT NOW(), updated_at TIMESTAMPTZ NOT NULL DEFAULT NOW() ); CREATE TABLE feature_votes ( id UUID PRIMARY KEY DEFAULT gen_random_uuid(), request_id UUID NOT NULL REFERENCES feature_requests(id) ON DELETE CASCADE, user_id UUID, -- NULL для анонимных fingerprint TEXT, -- для анонимных: хэш IP+UA created_at TIMESTAMPTZ NOT NULL DEFAULT NOW(), UNIQUE (request_id, user_id), UNIQUE (request_id, fingerprint) ); -- триггер для синхронного счётчика CREATE OR REPLACE FUNCTION update_votes_count() RETURNS TRIGGER AS $$ BEGIN IF TG_OP = 'INSERT' THEN UPDATE feature_requests SET votes_count = votes_count + 1 WHERE id = NEW.request_id; ELSIF TG_OP = 'DELETE' THEN UPDATE feature_requests SET votes_count = votes_count - 1 WHERE id = OLD.request_id; END IF; RETURN NULL; END; $$ LANGUAGE plpgsql; CREATE TRIGGER trg_votes_count AFTER INSERT OR DELETE ON feature_votes FOR EACH ROW EXECUTE FUNCTION update_votes_count(); . למשתמשים אנונימיים — טביעת אצבע (SHA-256 hash של IP + User-Agent) ומגבלת קצב של 30 קולות ל-15 דקות. אם הפעילות חשודה, אנחנו משלבים Cloudflare Turnstile — קפטצ'ה ללא תיבות סימון. בנוסף, אנו משתמשים בטריגרים של PostgreSQL לעדכוני מונה סינכרוניים — זה מבטל מצבי מרוץ במהלך הצבעות במקביל.

הודעות למנויים

הערה: כאשר סטטוס הבקשה משתנה ל-// routes/features.ts (Express + Prisma) import { Router } from 'express'; import { createHash } from 'crypto'; export const featuresRouter = Router(); // Список запросов с пагинацией и фильтром featuresRouter.get('/', async (req, res) => { const { category, status, sort = 'votes', page = '1' } = req.query; const take = 20; const skip = (Number(page) - 1) * take; const where: Prisma.FeatureRequestWhereInput = {}; if (category) where.category = String(category); if (status) where.status = String(status); const [items, total] = await Promise.all([ prisma.featureRequest.findMany({ where, orderBy: sort === 'votes' ? { votesCount: 'desc' } : { createdAt: 'desc' }, skip, take, include: { _count: { select: { votes: true } }, }, }), prisma.featureRequest.count({ where }), ]); // Добавляем флаг "проголосовал ли текущий пользователь" const userId = req.user?.id; const fingerprint = getUserFingerprint(req); const votedIds = userId ? await prisma.featureVote.findMany({ where: { requestId: { in: items.map(i => i.id) }, userId }, select: { requestId: true }, }).then(vs => new Set(vs.map(v => v.requestId))) : await prisma.featureVote.findMany({ where: { requestId: { in: items.map(i => i.id) }, fingerprint }, select: { requestId: true }, }).then(vs => new Set(vs.map(v => v.requestId))); res.json({ items: items.map(item => ({ ...item, hasVoted: votedIds.has(item.id) })), total, page: Number(page), pages: Math.ceil(total / take), }); }); // Голосование (toggle) featuresRouter.post('/:id/vote', async (req, res) => { const { id } = req.params; const userId = req.user?.id ?? null; const fingerprint = getUserFingerprint(req); const existingVote = await prisma.featureVote.findFirst({ where: userId ? { requestId: id, userId } : { requestId: id, fingerprint }, }); if (existingVote) { await prisma.featureVote.delete({ where: { id: existingVote.id } }); return res.json({ action: 'removed' }); } await prisma.featureVote.create({ data: { requestId: id, userId, fingerprint: userId ? null : fingerprint }, }); res.json({ action: 'added' }); }); function getUserFingerprint(req: Request): string { const ip = req.ip ?? ''; const ua = req.headers['user-agent'] ?? ''; return createHash('sha256').update(ip + ua).digest('hex'); } או // FeatureList.tsx import { useState, useOptimistic } from 'react'; interface FeatureItem { id: string; title: string; description: string; category: string; status: 'proposed' | 'planned' | 'in_progress' | 'done' | 'declined'; votesCount: number; hasVoted: boolean; } const STATUS_LABELS: Record<FeatureItem['status'], { label: string; color: string }> = { proposed: { label: 'Предложено', color: 'bg-gray-100 text-gray-700' }, planned: { label: 'В плане', color: 'bg-blue-100 text-blue-700' }, in_progress: { label: 'В разработке', color: 'bg-yellow-100 text-yellow-700' }, done: { label: 'Готово', color: 'bg-green-100 text-green-700' }, declined: { label: 'Отклонено', color: 'bg-red-100 text-red-700' }, }; function VoteButton({ id, votesCount, hasVoted, }: { id: string; votesCount: number; hasVoted: boolean; }) { const [optimisticState, setOptimistic] = useOptimistic( { count: votesCount, voted: hasVoted }, (state, action: 'toggle') => ({ count: state.voted ? state.count - 1 : state.count + 1, voted: !state.voted, }) ); async function vote() { setOptimistic('toggle'); try { await fetch(`/api/features/${id}/vote`, { method: 'POST' }); } catch { // оптимистичное обновление откатится автоматически при ошибке } } return ( <button onClick={vote} aria-pressed={optimisticState.voted} className={`flex flex-col items-center gap-0.5 w-14 py-2 rounded-lg border text-sm font-semibold transition-colors ${optimisticState.voted ? 'bg-blue-600 border-blue-600 text-white' : 'border-gray-300 hover:border-blue-400 hover:bg-blue-50' }`} > <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor"> <path d="M8 3L14 10H2L8 3Z"/> </svg> <span>{optimisticState.count}</span> </button> ); } export function FeatureList({ initialItems }: { initialItems: FeatureItem[] }) { const [items, setItems] = useState(initialItems); const [filter, setFilter] = useState<string>('all'); const filtered = filter === 'all' ? items : items.filter(i => i.status === filter); return ( <div className="max-w-2xl"> {/* Фильтры по статусу */} <div className="flex gap-2 mb-6 flex-wrap"> {(['all', 'proposed', 'planned', 'in_progress', 'done'] as const).map(s => ( <button key={s} onClick={() => setFilter(s)} className={`px-3 py-1 rounded-full text-xs border transition-colors ${ filter === s ? 'bg-gray-800 text-white border-gray-800' : 'border-gray-300' }`} > {s === 'all' ? 'Все' : STATUS_LABELS[s].label} </button> ))} </div> <ul className="space-y-3"> {filtered.map(item => ( <li key={item.id} className="flex gap-4 p-4 rounded-xl border border-gray-200 hover:border-gray-300 transition-colors" > <VoteButton id={item.id} votesCount={item.votesCount} hasVoted={item.hasVoted} /> <div className="flex-1 min-w-0"> <div className="flex items-start gap-2 flex-wrap"> <h3 className="font-medium text-gray-900">{item.title}</h3> <span className={`text-xs px-2 py-0.5 rounded-full ${STATUS_LABELS[item.status].color}`}> {STATUS_LABELS[item.status].label} </span> </div> <p className="mt-1 text-sm text-gray-600 line-clamp-2">{item.description}</p> </div> </li> ))} </ul> </div> ); } , אנו שולחים דוא"ל לכל מי שהצביע וסיפק כתובת דוא"ל:

async function notifyVoters(requestId: string, newStatus: string) {
  const votes = await prisma.featureVote.findMany({
    where: {
      requestId,
      user: {
        email: {
          not: null,
        },
      },
    },
    include: {
      user: {
        select: {
          email: true,
        },
      },
    },
  });
  const request = await prisma.featureRequest.findUniqueOrThrow({
    where: {
      id: requestId,
    },
  });
  await mailer.sendBulk(
    votes.map((v) => v.user.email!).filter(Boolean),
    {
      subject: `Обновление по запросу: ${request.title}`,
      template: 'feature-status-update',
      data: {
        title: request.title,
        status: newStatus,
      },
    }
  );
}

השוואה: פתרון מותאם אישית מול SaaS מוכן

הפתרון שלנו מעבד קולות פי 5 מהר יותר מאלטרנטיבות מוכנות, ועלות התחזוקה לאורך 3 שנים נמוכה פי 2-3.

שלבי היישום

מה כלול בעבודה שלנו (תוצרים)

• פיתוח מלא: מסד נתונים, API, ממשק משתמש אינטראקטיבי עם מסננים ופאג'ינציה.
• אינטגרציה עם מערכת האימות שלכם (OAuth, JWT, session).
• תיעוד API בפורמט OpenAPI.
• בדיקות עומס (הבטחה עד 1000 קולות/שנייה על מופע יחיד).
• הדרכת צוות: סדנה של שעתיים על ניהול תכונות.
• 30 ימי תמיכה לאחר השחרור.

לוחות זמנים ותקציב

לוחות זמנים משוערים:

• הצבעות אנונימיות + רשימה: 4-5 ימים.
• הוספת אימות, הודעות, הגנה: 8-12 ימים.
• מחזור מלא (אנליטיקה → עיצוב → פריסה): 2-3 שבועות.

העלות המדויקת מחושבת באופן אישי — תלויה במורכבות האינטגרציה ובדרישות העומס. לצוות שלנו ניסיון של 12 שנים בפיתוח אתרים ויותר מ-50 פרויקטים שהושלמו. צרו קשר כדי לדון בפרויקט שלכם ולקבל הערכה ראשונית. קבלו ייעוץ עכשיו — נגיב תוך שעה.