cookbook

About the stack

This application is built using the following technologies:

• Frontend: SvelteKit
• CSS: TailwindCSS with DaisyUI components
• Backend: tRPC
• Database: PostgreSQL with Prisma as the ORM.
• Deploy: Vercel for the frontend, and Supabase for the PostgreSQL provider.

Developing

1. Install the dependencies using npm i or your preferred package manager.
2. Run cp .env.example .env to create the environment file.
3. Define the required environment variables, such as VITE_JWT_SECRET_KEY and DATABASE_URL.

Environment variables description

VITE_JWT_SECRET_KEY: Secret key used to generate JWT's.

Recommended value: the output of the openssl rand -hex 32 command.

DATABASE_URL: PostgreSQL connection string.

Features

• Manage items to use on recipes.
• Manage recipes.
• Browse through other user's recipes.
• Sharing link for recipes.
• Create copy of recipes to your own account.
• Like/dislike recipes.
• Enchanced app navigation with drawers, tabs, back buttons, and bottom navigation.
• Different layouts built specifically for mobile and desktop environments.
• Enchanced form experience by allowing to create items without leaving the recipe page.

Known Issues

• Dropdowns won't close when clicking outise in iOS (daisyui issue)

Possible improvements

• Use a modal instead of native js confirm to confirm delete and other critical actions.

• Manage environment variables the SvelteKit way (with $env/ modules).

My personal experience with this stack

TODO