fdbc422c95925766d2a4ade1dda44b6d979b3c78
- Implemented image upload feature in MenuForm with file size validation and preview. - Updated the API response for blocked dates to include block_date and note. - Enhanced booking page to handle URL parameters for date and guests. - Improved date picker component with better styling and functionality. - Added CSS styles for a more user-friendly calendar interface. - Created scripts to alter the image column in the database and embed images as base64.
Warme Catering Website
En moderne hjemmeside for catering og private dining services. Bygget med Next.js 14, TypeScript og Tailwind CSS.
Features
- Moderne og responsivt design
- Online menu oversigt og bestilling
- Admin dashboard for bookings
- Dynamisk prissætning baseret på antal gæster
- Pakke- og menu-konfiguration
Tech Stack
- Next.js 14 med App Router
- TypeScript
- Tailwind CSS
- React Server Components
- date-fns for datohåndtering
- react-day-picker for kalenderbooking
Kom i gang
-
Klon repositoriet:
git clone https://github.com/alexpolo1/kokken.git -
Installer dependencies:
npm install -
Start development server:
npm run dev -
Åbn http://localhost:3000 i din browser
Struktur
/src/app/*- Next.js App Router pages/src/components/*- React komponenter/src/config/*- Konfiguration og sample data/src/lib/*- Utility functions/src/types/*- TypeScript type definitioner
Deployment & database
Environment variables are required and must be set in a local .env file (do NOT commit it).
Required env vars (see .env.example):
OPENAI_KEY- OpenAI API key used by image generation (optional)DB_HOST,DB_USER,DB_PASSWORD,DB_NAME- MariaDB connectionADMIN_USER,ADMIN_PASSWORD- basic-auth for admin area
Run database migrations (builds helper scripts then runs migration):
npm run migrate
Build and start the production server:
npm run build
node server.mjs
Generate images (script will skip images that already exist and uses scripts/image-cache.json):
node scripts/generate-images.mjs
Notes:
- The repo ignores
.env*files. Keep secrets in.envor your deployment environment. - Generated images can be large; a small number of generated images were removed from git and the project ignores
public/img/generated/. If you want generated images checked into the repo, move them intopublic/img/and commit explicitly. - For production process management the project includes PM2 scripts in
package.json(seepm2:*scripts).
Office365 / SMTP (app password)
If you plan to use an Office365 mailbox with SMTP (app password):
- Enable SMTP AUTH for the mailbox (tenant settings may block it by default).
- If the mailbox has MFA enabled, create an app password for the mailbox and use it as
SMTP_PASS.- Microsoft 365: My account -> Security info -> Add method -> App password (or use admin center to manage).
- Set these env vars in your local
.env:
SMTP_HOST=smtp.office365.com
SMTP_PORT=587
SMTP_USER=christian@warme.dk
SMTP_PASS=your-app-password
SENDER_EMAIL=christian@warme.dk
BOOKING_EMAIL=christian@warme.dk
- The contact API will send mail using the authenticated mailbox as the From address and set Reply-To to the visitor's email so replies go to them.
If you prefer a more modern and robust approach we can switch to Microsoft Graph API with OAuth2 (recommended for production).
Description
Languages
HTML
53.9%
TypeScript
35.3%
JavaScript
9.5%
CSS
1.1%
Shell
0.2%