🍽️ 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
🏗️ 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
- Clean Architecture: Clear separation between presentation, domain, and infrastructure layers
- SOLID Principles: Single responsibility, dependency inversion, and interface segregation
- Type Safety: Full TypeScript coverage with strict mode enabled
- Error Handling: Centralized error boundaries and validation
- 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)
- Push to GitHub
- Import in Vercel
- Add environment variables
- 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 ✅
v1.1.0 - PWA & Media Features ✅
v1.2.0 - About Us & Guest Browsing ✅
v1.3 - Engineering Maturity ✅
v1.4 - Planned
v1.5 - Future
🙏 Acknowledgments
Built with:
🎉 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 ✅
