Recipe Website

Overview

Recipe Website is a minimalist, ad-free recipe discovery platform built around a simple principle: show ingredients and instructions, nothing else. No lengthy blog posts, no autoplay videos, no pop-up subscriptions. Users can browse a curated recipe library, submit their own recipes through a moderation workflow, plan weekly meals on a calendar, and generate a consolidated grocery list with fractional quantity handling.

Tech Stack

• React / React Router — Single-page frontend with client-side routing via React Router DOM v6.
• Vite — Fast dev server and build toolchain for the frontend.
• Node.js / Express — REST API backend with middleware-first architecture.
• Prisma — Type-safe ORM with PostgreSQL, handling schema migrations and seeding.
• PostgreSQL — Primary relational database for recipes, users, and meal plans.
• JWT / bcryptjs — Stateless authentication with hashed password storage.
• Upstash Redis — Rate limiting on auth and submission endpoints via @upstash/ratelimit.
• Multer — Multipart file upload handling for recipe images.
• Nodemailer — Transactional email for account verification and password reset.
• Helmet / CORS — HTTP security headers and cross-origin request control.
• Fraction.js — Precise fractional arithmetic for ingredient quantity scaling.
• Jest / Supertest — Unit and integration test coverage across frontend and backend.

Features

• Minimalist recipe display — Ingredients and instructions only; no ads, no embedded video, no bloat.
• Advanced search and filtering — Filter by cuisine, meal type, and dietary restrictions with full-text search.
• User submission workflow — Community-submitted recipes enter a moderation queue before publishing.
• Bookmarks / favorites — Authenticated users can save recipes to a personal collection.
• Weekly meal planner — Calendar interface for scheduling breakfast, lunch, and dinner across the week.
• Grocery list generator — Aggregates ingredients from planned meals, merges duplicates, and handles fractional quantities (e.g., ½ cup + ¾ cup → 1¼ cups).
• Authentication — Registration, login, email verification, and password reset via JWT cookies.
• Rate limiting — Upstash Redis-backed rate limiting on auth and submission endpoints to prevent abuse.

Key Challenges

Fractional ingredient aggregation: Grocery list generation requires merging ingredient quantities across multiple recipes. Fraction.js handles exact rational arithmetic to avoid floating-point rounding errors (e.g., 1/3 + 2/3 = 1 exactly).

Moderation workflow: Submitted recipes need approval before appearing publicly. The backend implements a status state machine (pending → approved / rejected) with admin-only endpoints protected by role-based middleware.

Rate limiting without a persistent server session: Authentication endpoints are protected by Upstash Redis-backed sliding window rate limiters keyed by IP address, keeping abuse prevention stateless and horizontally scalable.

Secure file uploads: Recipe images are validated for MIME type and size before being accepted by Multer, preventing oversized or malformed uploads from reaching storage.

Outcomes

The platform delivers a fast, distraction-free cooking experience. The meal planner and grocery list generator work end-to-end, reducing the friction of weekly cooking prep from multiple browser tabs to a single view.