DishCraft

A recipe-sharing platform built for developers.

Technologies Used

• Next.js
• TypeScript
• Tailwind CSS
• Shadcn UI
• Radix UI
• Auth.js
• Zod (for validations)
• Drizzle ORM
• Neon Postgres (serverless postgres)
• Vercel KV Database (for rate limiting)
• Vercel Blob Store (for image storage)

PageSpeed Insights

Mobile Speed Insights on Moto G Power with Slow 4G Throttling

Desktop Speed Insights

Used Partial Pre-Rendering, App Router, Server Actions, and React Server Components in Next.js.

Development

• Fork and clone the repo using git clone
• Install the packages using npm i
• Add environment variables as specified in the .env.example file.
• Make sure ?sslmode=required is at the end of the POSTGRES_URL env variable.
• For database migrations, use npx drizzle-kit generate:pg and npx drizzle-kit push:pg
• Run these migrations manually by using npx drizzle-kit generate:pg --custom: CREATE EXTENSION IF NOT EXISTS pg_trgm;, CREATE INDEX IF NOT EXISTS trgm_idx ON recipes USING GIN (title gin_trgm_ops, cuisine gin_trgm_ops, category gin_trgm_ops);

Deployment

• Make sure the Vercel project is connected to a Vercel Postgres (Neon) database.
• Connect the project to a Vercel Blob store.
• For rate limiting, add a Vercel KV (Upstash) database.
• Run npx drizzle-kit push:pg to push changes to your database.
• Update metadataBase in app/layout.tsx to match your target domain.

Contributing

• Open an issue if you believe you've encountered a bug.
• Make a pull request to add new features/make quality-of-life improvements/fix bugs.