33eadde671a8b1bcdf555b9651be9025b35008d7
Some checks failed
CI Pipeline / Test Shared Package (pull_request) Has been cancelled
CI Pipeline / Build All Packages (pull_request) Has been cancelled
CI Pipeline / Generate Coverage Report (pull_request) Has been cancelled
CI Pipeline / Lint Code (pull_request) Has been cancelled
CI Pipeline / Test API Package (pull_request) Has been cancelled
CI Pipeline / Test Web Package (pull_request) Has been cancelled
Docker Build & Deploy / Build Docker Images (pull_request) Has been cancelled
Docker Build & Deploy / Push Docker Images (pull_request) Has been cancelled
Docker Build & Deploy / Deploy to Staging (pull_request) Has been cancelled
Docker Build & Deploy / Deploy to Production (pull_request) Has been cancelled
E2E Tests / End-to-End Tests (pull_request) Has been cancelled
E2E Tests / E2E Tests (Mobile) (pull_request) Has been cancelled
Security Scanning / NPM Audit (pull_request) Has been cancelled
Security Scanning / Dependency License Check (pull_request) Has been cancelled
Security Scanning / Code Quality Scan (pull_request) Has been cancelled
Security Scanning / Docker Image Security (pull_request) Has been cancelled
Security Scanning / Security Summary (pull_request) Has been cancelled
Added comprehensive recipe editing functionality with improved image handling and better UX for large file uploads. **Features:** - Recipe editing: Full CRUD support for recipes with edit page - Image management: Upload, replace, and delete recipe images - Upload feedback: Processing and uploading states for better UX - File size increase: Raised limit from 10MB to 20MB for images - Nginx configuration: Added client_max_body_size for large uploads **Changes:** - Created EditRecipe.tsx page for editing existing recipes - Created NewRecipe.tsx page wrapper for recipe creation - Created RecipeForm.tsx comprehensive form component with: - Simple and multi-section recipe modes - Image upload with confirmation dialogs - Processing state feedback during file handling - Smaller, button-style upload controls - Updated recipes.routes.ts: - Increased multer fileSize limit to 20MB - Added file validation for image types - Image upload now updates Recipe.imageUrl field - Added DELETE /recipes/:id/image endpoint - Automatic cleanup of old images when uploading new ones - Updated nginx.conf: Added client_max_body_size 20M for API proxy - Updated App.css: Improved upload button styling (smaller, more compact) - Updated RecipeForm.tsx: Better file processing feedback with setTimeout - Updated help text to reflect 20MB limit and WEBP support **Technical Details:** - Fixed static file serving path in index.ts - Added detailed logging for upload debugging - Improved TypeScript type safety in upload handlers - Better error handling and user feedback 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
Basil 🌿
A modern, full-stack recipe manager with web and mobile support. Import recipes from any URL, manage your recipe collection, and access them from anywhere.
Features
- Recipe Import: Automatically import recipes from URLs using schema.org markup
- Full Recipe Management: Create, read, update, and delete recipes
- Rich Recipe Data: Store ingredients, instructions, prep/cook times, servings, images, and more
- Search & Filter: Find recipes by title, cuisine, category, or tags
- Multiple Images: Add multiple images to each recipe
- Flexible Storage: Local filesystem storage by default, optional S3 support
- Docker Support: Easy deployment with Docker Compose
- API-First Design: RESTful API for web and future mobile apps
Tech Stack
- Backend: Node.js, TypeScript, Express, Prisma ORM, PostgreSQL
- Frontend: React, TypeScript, Vite, React Router
- Infrastructure: Docker, Docker Compose, nginx
- Monorepo: npm workspaces with shared types
Quick Start
Prerequisites
- Node.js 20+
- PostgreSQL 16+ (or use Docker)
- Docker (optional, for containerized deployment)
Development Setup
-
Clone the repository
git clone <repository-url> cd basil -
Install dependencies
npm install -
Set up environment variables
cp packages/api/.env.example packages/api/.env # Edit packages/api/.env with your database credentials -
Start PostgreSQL (if not using Docker)
# Create a database named 'basil' createdb basil -
Run database migrations
cd packages/api npm run prisma:migrate npm run prisma:generate cd ../.. -
Start development servers
npm run devThis starts:
- API server at http://localhost:3001
- Web frontend at http://localhost:5173
Docker Deployment
For production or easy local setup:
# Start all services
docker-compose up -d
# View logs
docker-compose logs -f
# Stop services
docker-compose down
Services will be available at:
- Web: http://localhost:5173
- API: http://localhost:3001
- PostgreSQL: localhost:5432
Project Structure
basil/
├── packages/
│ ├── api/ # Backend API server
│ │ ├── prisma/ # Database schema and migrations
│ │ └── src/ # Express routes, services, config
│ ├── web/ # React web application
│ │ └── src/ # Components, pages, services
│ └── shared/ # Shared TypeScript types
├── docker-compose.yml
└── package.json # Workspace root
Usage
Importing a Recipe
- Navigate to "Import Recipe" in the web app
- Paste a recipe URL (from sites like AllRecipes, Food Network, etc.)
- Preview the imported recipe
- Save to your collection
API Examples
Import recipe from URL:
curl -X POST http://localhost:3001/api/recipes/import \
-H "Content-Type: application/json" \
-d '{"url": "https://example.com/recipe"}'
Get all recipes:
curl http://localhost:3001/api/recipes
Create a recipe:
curl -X POST http://localhost:3001/api/recipes \
-H "Content-Type: application/json" \
-d '{
"title": "Chocolate Chip Cookies",
"ingredients": [
{"name": "flour", "amount": "2", "unit": "cups", "order": 0}
],
"instructions": [
{"step": 1, "text": "Preheat oven to 350°F"}
]
}'
Configuration
Storage Options
Local Storage (Default):
STORAGE_TYPE=local
LOCAL_STORAGE_PATH=./uploads
S3 Storage:
STORAGE_TYPE=s3
S3_BUCKET=your-bucket-name
S3_REGION=us-east-1
S3_ACCESS_KEY_ID=your-access-key
S3_SECRET_ACCESS_KEY=your-secret-key
Database
Default PostgreSQL connection:
DATABASE_URL=postgresql://basil:basil@localhost:5432/basil?schema=public
For external database services (AWS RDS, DigitalOcean, etc.), update the connection string.
Development
Commands
# Install dependencies
npm install
# Start all services in development mode
npm run dev
# Build all packages
npm run build
# Lint all packages
npm run lint
# Docker commands
npm run docker:up
npm run docker:down
npm run docker:build
Database Migrations
cd packages/api
# Create a new migration
npm run prisma:migrate
# Generate Prisma client
npm run prisma:generate
# Open Prisma Studio (GUI for database)
npm run prisma:studio
Future Enhancements
- Mobile apps (React Native for iOS and Android)
- User authentication and multi-user support
- Recipe sharing and social features
- Meal planning and grocery lists
- Nutritional information calculation
- Recipe scaling (adjust servings)
- Print-friendly recipe view
- Recipe collections and cookbooks
License
MIT
Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
Description
Releases
6
Languages
TypeScript
82.6%
CSS
11.8%
Shell
4.1%
JavaScript
0.9%
Python
0.4%
Other
0.2%