🍽️ Remy's - Recipe Sharing Platform

A modern recipe sharing platform where users can discover, create, and share amazing recipes with a vibrant community.

🚀 LIVE NOW - Try the live demo at remy-s.vercel.app

✅ v1.3.0 Production Release - Engineering maturity with CI/CD, Sentry, and E2E tests!

---

✨ Key Features

• 📱 Progressive Web App (PWA) - Install on iOS, Android, or Desktop with offline support
• 🔍 Smart Recipe Discovery - Browse, search, and filter recipes
• 🥘 Pantry Management - Track ingredients and get personalized recipe matches
• 📷 Rich Media Comments - Attach photos to comments to show off cooking results
• 💬 Social Interaction - Follow users, like and comment on recipes
• 👤 Guest Browsing - Browse recipes without an account, sign in when ready to interact
• 🔔 Smart Notifications - Mark as read on click, real-time updates
• 📊 User Profiles - Personal stats, followers, and recipe collections
• ℹ️ About Us Page - Learn about Remy's features and creator
• 📱 Responsive Design - Beautiful UI that works on any device
• 🌙 Modern Dark Mode - Eye-friendly theme with teal accents
• 🔒 Enterprise Security - Rate limiting, JWT auth, security headers
• 📈 98% Test Coverage - All 1,161 tests passing, production-grade reliability
• 🔧 CI/CD Pipeline - GitHub Actions for lint, test, and build on every PR
• 🛡️ Error Tracking - Sentry integration for production monitoring

---

🚀 Quick Start

Prerequisites

• Node.js 18+
• PostgreSQL 14+
• Docker (optional)

Installation (5 minutes)

# 1. Clone and install
git clone https://github.com/yourusername/remys-recipe-app.git
cd remys-recipe-app
npm install

# 2. Set up environment
cp .env.example .env
# Edit .env with your database credentials

# 3. Start database (Docker)
npm run docker:db:start

# 4. Initialize database
npm run db:push
npm run db:seed    # Optional: Add sample data

# 5. Start app
npm run dev

Open http://localhost:3000 🎉

---

📚 Documentation

Document	Description
Production Readiness	Complete deployment guide
V1 Launch Summary	All implemented features
Database Migrations	Database management guide
Docker Setup	Docker configuration
UI Testing	Testing guidelines

---

🏗️ Tech Stack

Frontend: Next.js 16 • TypeScript • Material-UI v6 • Framer Motion Backend: Next.js API Routes • Prisma • PostgreSQL PWA: Serwist • Service Worker • Web App Manifest Media: Cloudinary CDN • Image optimization Auth: JWT • bcrypt • NextAuth Testing: Jest • React Testing Library • Playwright E2E DevOps: Docker • Vercel • GitHub Actions CI/CD Observability: Sentry • Vercel Analytics

---

🧪 Testing

npm test              # All unit/integration tests with coverage
npm run test:watch    # Watch mode
npm run test:e2e      # Playwright E2E tests (starts dev server)
npm run test:e2e:ui   # E2E tests with visual debugger

Coverage: 98% statements | 92% branches | 98% lines | All 1,161 tests passing

---

📦 Available Scripts

# Development
npm run dev                    # Start dev server
npm run build                  # Production build
npm run start                  # Start production

# Code Quality
npm run lint                   # ESLint (TypeScript rules)
npm run lint:fix               # Auto-fix lint issues
npm run format                 # Prettier format all files
npm run typecheck              # TypeScript type checking

# Database
npm run db:migrate:deploy      # Deploy migrations (prod)
npm run db:studio              # Database GUI
npm run db:seed                # Seed test data

# Docker
npm run docker:up              # Start all services
npm run docker:prod            # Production mode

# Testing
npm test                       # Run Jest tests
npm run test:e2e               # Playwright E2E tests
npm run test:all               # Both Jest + E2E

---

🌍 Environment Variables

Required variables (see .env.example for all):

DATABASE_URL="postgresql://..."
JWT_SECRET="min-32-random-chars"
NEXTAUTH_SECRET="min-32-random-chars"
NODE_ENV="production"
NEXT_PUBLIC_APP_URL="https://yourdomain.com"

---

🏛️ Architecture

Clean Architecture with SOLID Principles

src/
├── app/                          # Next.js 15 App Router (Presentation Layer)
│   ├── api/                     # API endpoints (28+ routes)
│   │   ├── auth/               # Authentication endpoints
│   │   ├── recipes/            # Recipe CRUD operations
│   │   ├── users/              # User management
│   │   ├── pantry/             # Pantry management
│   │   └── search/             # Search functionality
│   ├── recipe/[id]/            # Dynamic recipe pages
│   ├── profile/[username]/     # User profiles
│   ├── error.tsx               # Global error boundary
│   ├── loading.tsx             # Loading states
│   └── not-found.tsx           # 404 page
│
├── components/                   # React Components (View Layer)
│   ├── recipe/                 # Recipe-related components
│   │   ├── RecipeCard.tsx     # Reusable recipe cards
│   │   ├── RecipeFeed.tsx     # Recipe feed with infinite scroll
│   │   ├── MatchedRecipes.tsx # Pantry-based recipe matching
│   │   ├── EditRecipeModal.tsx # 'Edit recipe' (thin wrapper over the recipe editor)
│   │   ├── form/              # Recipe editor (create + edit): RecipeTextFirstDialog,
│   │   │                      #   the form engine, the shared blocks, draft autosave
│   │   └── display/           # Display blocks shared by the recipe page and the preview
│   ├── auth/                   # Authentication UI
│   ├── settings/               # Settings components
│   └── Navigation.tsx          # Main navigation system
│
├── contexts/                     # React Context (State Management)
│   ├── AuthContext.tsx         # Authentication state
│   ├── CreateRecipeContext.tsx # The one 'New recipe' dialog + openCreate()
│   ├── ThemeContext.tsx        # Dark/light mode theme
│   └── ToastContext.tsx        # Global notifications
│
├── domain/                       # Domain Layer (Business Entities)
│   └── types/                  # TypeScript domain models
│       ├── recipe.ts           # Recipe entity definitions
│       ├── user.ts             # User entity definitions
│       └── pantry.ts           # Pantry entity definitions
│
├── infrastructure/               # Infrastructure Layer (External Services)
│   ├── services/               # Business Logic Services
│   │   ├── RecipeService.ts   # Recipe business logic
│   │   ├── UserService.ts     # User management logic
│   │   ├── PantryService.ts   # Pantry operations
│   │   ├── AuthService.ts     # Authentication logic
│   │   ├── NotificationService.ts
│   │   └── TokenService.ts    # JWT token management
│   │
│   └── repositories/           # Data Access Layer (Repository Pattern)
│       ├── RecipeRepository.ts # Recipe data access
│       ├── UserRepository.ts  # User data access
│       ├── PantryRepository.ts
│       └── NotificationRepository.ts
│
├── lib/                          # Shared Utilities
│   ├── validation/             # Input validation schemas
│   ├── utils.ts                # Helper functions
│   └── prisma.ts               # Database client singleton
│
├── middleware.ts                 # Security & Rate Limiting
└── prisma/
    ├── schema.prisma            # Database schema
    └── migrations/              # Database migrations

Design Patterns

• Repository Pattern: Separates data access logic from business logic
• Dependency Injection: Services receive dependencies through constructors
• Factory Pattern: Used for creating service instances
• Provider Pattern: React Context for global state management
• Singleton Pattern: Database client and service instances

Key Architectural Decisions

1. Clean Architecture: Clear separation between presentation, domain, and infrastructure layers
2. SOLID Principles: Single responsibility, dependency inversion, and interface segregation
3. Type Safety: Full TypeScript coverage with strict mode enabled
4. Error Handling: Centralized error boundaries and validation
5. Security: JWT authentication, rate limiting, and security headers at middleware level

---

🔐 Security Features

✅ JWT Authentication ✅ Password Hashing (bcrypt) ✅ Rate Limiting (100 req/15min) ✅ CORS Configuration ✅ Security Headers (HSTS, CSP, XSS Protection) ✅ Environment Validation ✅ SQL Injection Protection (Prisma)

---

🚀 Deployment

Vercel (Recommended - 2 minutes)

1. Push to GitHub
2. Import in Vercel
3. Add environment variables
4. Deploy ✅

Docker

docker-compose --profile production up -d

Manual

npm ci
npm run db:migrate:deploy
npm run build
npm start

📖 Full Guide: See Production Readiness

---

📈 Monitoring

Health Endpoints:

• /api/health - Application health
• /api/ready - Readiness probe

Observability:

• ✅ Sentry - Error tracking and performance monitoring
• ✅ Error Boundaries - Graceful error handling with user feedback
• ✅ Rate Limiting - Request throttling with tracking
• ✅ Vercel Analytics - Page views and performance metrics

---

🗺️ Roadmap

v1.0.0 - Live in Production ✅

• Recipe CRUD operations
• User authentication & profiles
• Social features (likes, comments, follows)
• Pantry management
• Production-ready security
• Comprehensive testing (1035/1035 tests passing)
• Modern dark mode theme
• Google Translate support
• Internationalization compatibility
• Deployed to Vercel

v1.1.0 - PWA & Media Features ✅

• Progressive Web App (PWA) with Serwist
• Install prompts (iOS, Android, Desktop)
• Offline fallback page
• Image attachments in comments
• Mark notification as read on click
• Enhanced mobile UX (safe areas, touch handling)
• Next.js 16 upgrade

v1.2.0 - About Us & Guest Browsing ✅

• About Us page with features, creator info, and tech stack
• Guest Browsing mode - browse without logging in
• "Continue as Guest" link on auth page
• Sign-in prompts for protected actions (like, follow, create)
• Pantry shows sign-in card for guests
• Likes API returns real counts for guests

v1.3 - Engineering Maturity ✅

• CI/CD Pipeline with GitHub Actions (lint, test, build)
• ESLint with TypeScript strict rules
• Prettier + Husky pre-commit hooks
• Sentry error tracking integration
• Playwright E2E tests for critical paths

v1.4 - Planned

• System for users to report errors manually
• Suggestion system
• Email notifications
• Password reset flow
• Recipe collections
• Advanced search filters

v1.5 - Future

• Mobile apps
• Meal planning
• Shopping lists
• Video recipes
• Social authentication

---

🙏 Acknowledgments

Built with:

• Next.js - React Framework
• Prisma - Database ORM
• Material-UI - Component Library
• Framer Motion - Animation Library

---

🎉 Status

✅ v1.3.0 - LIVE IN PRODUCTION

Live URL: remy-recipes.com

• 1,161/1,161 tests passing (100% pass rate)
• 98% statement coverage
• 92% branch coverage
• 0 failing tests
• CI/CD pipeline with GitHub Actions
• Sentry error tracking
• Security hardened
• Performance optimized
• PWA enabled (installable)
• Pre-commit hooks (Prettier + ESLint)
• Deployed to Vercel
• Production database (Neon)
• Cloudinary CDN for images

Fully operational and serving users! 🚀

---

Built with ❤️ - Share • Discover • Create Amazing Recipes 🍽️

---

📝 Changelog

v1.1.0 - PWA & Media Features (2025-12-11) 📱

New Features:

• ✅ Progressive Web App (PWA): Full PWA support with Serwist service worker
• ✅ Install Prompts: Custom install UI for iOS (Share → Add to Home Screen), Android, and Desktop
• ✅ Offline Support: Graceful offline fallback page with retry functionality
• ✅ Image Comments: Users can attach photos to recipe comments with camera integration
• ✅ Smart Notifications: Click to mark as read and navigate to content
• ✅ Open App: Deep linking to open installed PWA from browser

Technical Upgrades:

• ✅ Next.js 16: Upgraded from Next.js 15 to 16.0
• ✅ Serwist Integration: Modern PWA toolkit replacing next-pwa
• ✅ Database Schema: Added imageUrl field to Comment model
• ✅ API Endpoints: Added PATCH /api/notifications/[id] for single notification updates

UX Improvements:

• ✅ Mobile Safe Areas: Proper handling of iOS notches and home indicators
• ✅ Theme Color: Pure black (#000000) status bar for dark mode
• ✅ Auth Loading States: Fixed protected page redirects during auth loading

---

v1.0.0 - Production Release (2025-12-05) 🚀

🌐 Live at: remy-s.vercel.app

Core Features

• ✅ Recipe Management: Full CRUD operations for recipes with images
• ✅ User System: Authentication, profiles, followers, and social features
• ✅ Pantry Management: Track ingredients and get matched recipe suggestions
• ✅ Social Features: Likes, comments, follows, and user interactions
• ✅ Search & Discovery: Advanced recipe search and filtering

UI/UX Improvements

• ✅ Modern Dark Mode: "Modern Neutral" theme with teal accents (#26A69A)
• ✅ Theme Consistency: Unified navigation bar colors across all pages
• ✅ Responsive Design: Optimized layouts for mobile, tablet, and desktop
• ✅ Image Viewer: Fullscreen image viewer for recipe and instruction images
• ✅ Recipe Cards: Proper visual hierarchy (Image → Header → Content → Actions)
• ✅ Form Labels: Fixed label overlap in number input fields
• ✅ Hydration Fixes: Eliminated theme flash on page reload

Internationalization & Accessibility

• ✅ Google Translate Support: DOM mutation patch prevents crashes during translation
• ✅ Translation-Safe Components: Auth toggle buttons remain functional in all languages
• ✅ Structural Isolation: Interactive elements protected from translation DOM mutations

Testing & Quality

• ✅ 910/910 Tests Passing: 100% pass rate with 0 failures
• ✅ 97.28% Coverage: Statements coverage across all layers
• ✅ 98.16% Line Coverage: Comprehensive line-level testing
• ✅ 0 Flaky Tests: Deterministic, reliable test suite

Production Infrastructure

• ✅ Vercel Deployment: Auto-deploy from main branch
• ✅ Vercel Postgres: Production database (Neon)
• ✅ Cloudinary CDN: Image storage and delivery
• ✅ Security Hardened: JWT auth, rate limiting, security headers
• ✅ Performance Optimized: Fast page loads and smooth interactions

---

Status: Live in Production ✅