Implement Pejla poll creation, voting, and explore features

.gitignore

@@ -12,4 +12,12 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 
-package-lock.json
+package-lock.json
+
+# Build output
+frontend/dist
+
+# Presentation files
+*.pptx
+make_pptx.py
+presentation.html

README.md

@@ -1,13 +1,163 @@
-# Final Project
+# Pejla
 
-Replace this readme with your own information about your project.
+A full-stack design feedback platform where users create polls with design alternatives, vote, comment, remix, and collaborate in teams.
 
-Start by briefly describing the assignment in a sentence or two. Keep it short and to the point.
+**Live:** [Frontend](https://pejla.io) | [Backend API](https://pejla-api.onrender.com)
 
-## The problem
+## The Problem
 
-Describe how you approached to problem, and what tools and techniques you used to solve it. How did you plan? What technologies did you use? If you had more time, what would be next?
+Designers need quick, structured feedback on their work. Existing tools are either too heavyweight (Figma comments) or too generic (Google Forms). Pejla makes it simple: upload designs, share a link, get votes.
+
+I built this as my final project for the Technigo Fullstack JavaScript programme. It started with basic poll CRUD and grew into a platform with embeds, media upload, remix trees, teams, and anonymous voting.
+
+## Features
+
+- **Create polls** with images, video, audio, or embedded content (Figma, YouTube, CodePen, etc.)
+- **Vote** on design alternatives with fullscreen swipe UI
+- **Comment** on polls with inline discussion
+- **Remix** existing polls to create variations (shown as a tree, not duplicates)
+- **Teams & Projects** backend infrastructure (Figma-inspired collaboration)
+- **Anonymous voting** — poll creators can allow votes without login
+- **Password protection** — restrict access to specific polls
+- **Poll lifecycle** — open/close polls, set deadlines, show/hide winner
+- **Report system** — flag inappropriate content for admin review
+- **Responsive** — works on mobile (320px) to desktop (1600px+)
+
+## Tech Stack
+
+### Frontend
+- **React 18** with TypeScript
+- **React Router 7** — client-side navigation
+- **Zustand** — global state management for polls (store)
+- **Context API** — authentication state (AuthContext)
+- **Tailwind CSS 4** + **shadcn/ui** (Radix UI primitives)
+- **Framer Motion** — animations
+- **Sonner** — toast notifications
+- **Lucide React** — icon library
+- **React Dropzone** — drag-and-drop file upload
+- **Storybook** — component development and testing
+
+### Backend
+- **Node.js** with **Express**
+- **MongoDB** via **Mongoose**
+- **bcrypt** — password hashing
+- **Cloudinary** + **Multer** — image/video/audio upload
+- **RESTful API** with token-based authentication
+
+## React Hooks Used
+
+### Standard hooks
+- `useState` — local component state
+- `useEffect` — side effects (data fetching, event listeners)
+- `useContext` — consuming AuthContext
+
+### React Router hooks
+- `useParams` — reading URL parameters (shareId, pollId)
+- `useNavigate` — programmatic navigation
+- `useLocation` — reading current path (deep link login)
+- `useSearchParams` — reading query params (remix flow)
+
+### Custom hooks (outside curriculum)
+- **`useDebounce(value, delay)`** — delays updates until user stops typing. Used for embed URL preview so the iframe doesn't reload on every keystroke.
+- **`useMediaQuery(query)`** — tracks CSS media query state. Enables responsive logic in JavaScript (e.g. mobile vs desktop layout decisions).
+- **`useAuth()`** — wraps `useContext(AuthContext)` with error boundary.
+
+### Zustand store
+- **`usePollStore()`** — global poll state with `fetchPolls`, `deletePoll`, `reset`. Used in Home and Dashboard to share poll data without prop drilling.
+
+## External Libraries (beyond React/Express/MongoDB)
+
+| Library | Purpose |
+|---------|---------|
+| **zustand** | Global state management (poll store) |
+| **framer-motion** | Animations and transitions |
+| **sonner** | Toast notifications |
+| **lucide-react** | SVG icon components |
+| **react-dropzone** | Drag-and-drop file uploads |
+| **cloudinary** + **multer-storage-cloudinary** | Cloud media storage |
+| **bcrypt** | Secure password hashing |
+| **shadcn/ui** (radix-ui, class-variance-authority, tailwind-merge) | Accessible UI components |
+
+## API Endpoints
+
+### Auth
+| Method | Path | Description |
+|--------|------|-------------|
+| POST | `/users` | Register |
+| POST | `/sessions` | Login |
+| GET | `/users/me` | Get profile (auth) |
+| PATCH | `/users/me` | Update profile (auth) |
+| DELETE | `/users/me` | Delete account (auth) |
+
+### Polls
+| Method | Path | Description |
+|--------|------|-------------|
+| GET | `/polls` | List public polls |
+| GET | `/polls/:shareId` | Get specific poll (password check) |
+| POST | `/polls` | Create poll (auth) |
+| PATCH | `/polls/:id` | Update poll (auth, owner) |
+| DELETE | `/polls/:id` | Delete poll (auth, owner) |
+| POST | `/polls/:id/vote` | Vote (auth) |
+| POST | `/polls/:id/vote-anonymous` | Anonymous vote |
+| POST | `/polls/:id/unvote` | Remove vote (auth) |
+| POST | `/polls/:id/remix` | Remix poll (auth) |
+
+### Comments
+| Method | Path | Description |
+|--------|------|-------------|
+| GET | `/polls/:id/comments` | Get comments |
+| POST | `/polls/:id/comments` | Add comment (auth) |
+| DELETE | `/comments/:id` | Delete comment (auth, owner) |
+
+### Teams & Projects
+| Method | Path | Description |
+|--------|------|-------------|
+| POST | `/teams` | Create team (auth) |
+| GET | `/teams` | Get my teams (auth) |
+| POST | `/teams/join` | Join via invite code (auth) |
+| POST | `/teams/:id/invite` | Invite by username (admin) |
+| POST | `/teams/:teamId/projects` | Create project (auth) |
+| POST | `/projects/:id/polls` | Add poll to project (auth) |
+
+### Admin
+| Method | Path | Description |
+|--------|------|-------------|
+| GET | `/admin/reports` | View reports (admin) |
+| PATCH | `/admin/reports/:id` | Update report status (admin) |
+
+## Getting Started
+
+### Backend
+```bash
+cd backend
+npm install
+# Create .env with MONGO_URL, CLOUDINARY_CLOUD_NAME, CLOUDINARY_API_KEY, CLOUDINARY_API_SECRET
+npm run dev
+```
+
+### Frontend
+```bash
+cd frontend
+npm install
+# Create .env with VITE_API_URL=http://localhost:8080
+npm run dev
+```
+
+### Storybook
+```bash
+cd frontend
+npm run storybook
+```
+
+## Architecture Decisions
+
+- **Zustand + Context API**: Zustand handles poll data (global, shared between pages), Context handles auth (needs to wrap the entire app with Provider pattern).
+- **Embed URL utility**: Many sites block iframes (X-Frame-Options). The `toEmbedUrl()` utility converts known services to embed format, and shows a "open in new tab" fallback for unsupported sites.
+- **Remix tree**: Remixes are hidden from the main feed (`remixedFrom: null` filter) and shown as a tree on the original poll. This prevents feed pollution.
+- **Anonymous voting**: Uses a browser fingerprint stored in localStorage for duplicate prevention.
+- **Media upload**: Cloudinary with dynamic `resource_type` (image/video/audio). File type detected from mimetype.
 
 ## View it live
 
-Every project should be deployed somewhere. Be sure to include the link to the deployed project so that the viewer can click around and see what it's all about.
+- **Frontend:** https://pejla.io
+- **Backend API:** https://pejla-api.onrender.com

backend/README.md

@@ -1,8 +1,48 @@
-# Backend part of Final Project
+# Pejla Backend
 
-This project includes the packages and babel setup for an express server, and is just meant to make things a little simpler to get up and running with.
+Express + MongoDB REST API for the Pejla platform.
 
-## Getting Started
+## Setup
 
-1.  Install the required dependencies using `npm install`.
-2.  Start the development server using `npm run dev`.
+```bash
+npm install
+cp .env.example .env  # fill in your values
+npm run dev
+```
+
+### Environment variables
+
+| Variable | Description |
+|----------|-------------|
+| `MONGO_URL` | MongoDB Atlas connection string |
+| `CLOUDINARY_CLOUD_NAME` | Cloudinary cloud name |
+| `CLOUDINARY_API_KEY` | Cloudinary API key |
+| `CLOUDINARY_API_SECRET` | Cloudinary API secret |
+
+## Models
+
+- **User** — username, email, hashed password, role
+- **Poll** — title, description, options (image/video/audio/embed), votes, visibility, password, deadline, remix tree
+- **Comment** — text, user, poll reference
+- **Team** — name, members, invite codes
+- **Project** — name, team, polls collection
+- **Report** — flagged content for admin review
+
+## API routes
+
+| Area | Example endpoints |
+|------|-------------------|
+| Auth | `POST /users`, `POST /sessions`, `GET /users/me` |
+| Polls | `GET /polls`, `POST /polls`, `PATCH /polls/:id`, `DELETE /polls/:id` |
+| Voting | `POST /polls/:id/vote`, `POST /polls/:id/vote-anonymous` |
+| Comments | `GET /polls/:id/comments`, `POST /polls/:id/comments` |
+| Teams | `POST /teams`, `POST /teams/join`, `POST /teams/:id/invite` |
+| Upload | `POST /upload` (image, video, audio via Cloudinary) |
+
+## Tech
+
+- **Express** — routing and middleware
+- **Mongoose** — MongoDB ODM
+- **bcrypt** — password hashing
+- **Cloudinary + Multer** — media upload and storage
+- **Babel** — ES module support

backend/middleware/upload.js

@@ -0,0 +1,44 @@
+import { v2 as cloudinary } from "cloudinary";
+import { CloudinaryStorage } from "multer-storage-cloudinary";
+import multer from "multer";
+
+cloudinary.config({
+  cloud_name: process.env.CLOUDINARY_CLOUD_NAME,
+  api_key: process.env.CLOUDINARY_API_KEY,
+  api_secret: process.env.CLOUDINARY_API_SECRET,
+});
+
+const storage = new CloudinaryStorage({
+  cloudinary,
+  params: async (req, file) => {
+    const isVideo = file.mimetype.startsWith("video/");
+    const isAudio = file.mimetype.startsWith("audio/");
+    const isImage = file.mimetype.startsWith("image/");
+    const isSvg = file.mimetype === "image/svg+xml";
+    const isGif = file.mimetype === "image/gif";
+
+    const resourceType = isVideo || isAudio ? "video" : isImage ? "image" : "raw";
+    const transform = isImage && !isSvg && !isGif ? [{ width: 2400, crop: "limit" }] : [];
+
+    return {
+      folder: "pejla",
+      resource_type: resourceType,
+      allowed_formats: [
+        "jpg", "jpeg", "png", "gif", "webp", "svg", "bmp", "tiff", "ico", "heic", "heif", "avif",
+        "mp4", "mov", "webm", "avi", "mkv", "m4v",
+        "mp3", "wav", "ogg", "m4a", "flac", "aac",
+        "pdf", "doc", "docx", "xls", "xlsx", "ppt", "pptx",
+        "md", "txt", "csv", "json", "html", "css", "js", "ts", "jsx", "tsx",
+        "zip", "sketch", "fig",
+      ],
+      transformation: transform,
+    };
+  },
+});
+
+const upload = multer({
+  storage,
+  limits: { fileSize: 100 * 1024 * 1024 },
+});
+
+export default upload;

backend/models/Comment.js

@@ -0,0 +1,39 @@
+import mongoose from "mongoose";
+
+const commentSchema = new mongoose.Schema({
+  text: {
+    type: String,
+    required: true,
+    minlength: 1,
+    maxlength: 500
+  },
+  user: {
+    type: mongoose.Schema.Types.ObjectId,
+    ref: "User",
+    required: true
+  },
+  username: {
+    type: String,
+    required: true
+  },
+  poll: {
+    type: mongoose.Schema.Types.ObjectId,
+    ref: "Poll",
+    required: true
+  },
+  optionIndex: {
+    type: Number,
+    default: null
+  },
+  imageUrl: {
+    type: String,
+    default: ""
+  },
+  createdAt: {
+    type: Date,
+    default: Date.now
+  }
+});
+
+const Comment = mongoose.model("Comment", commentSchema);
+export default Comment;

backend/models/Notification.js

@@ -0,0 +1,15 @@
+import mongoose from "mongoose";
+
+const notificationSchema = new mongoose.Schema({
+  user: { type: mongoose.Schema.Types.ObjectId, ref: "User", required: true, index: true },
+  type: { type: String, enum: ["vote", "comment", "remix", "mention"], required: true },
+  poll: { type: mongoose.Schema.Types.ObjectId, ref: "Poll" },
+  fromUser: { type: mongoose.Schema.Types.ObjectId, ref: "User" },
+  fromUsername: { type: String, default: "" },
+  message: { type: String, required: true },
+  read: { type: Boolean, default: false },
+  createdAt: { type: Date, default: Date.now }
+});
+
+const Notification = mongoose.model("Notification", notificationSchema);
+export default Notification;