SvelteKit, TailwindCSS & Vercel - Build and Deploy a Static Salary Calculator (Remote vs. In-Office)

☕️ 𝗕𝘂𝘆 𝗺𝗲 𝗮 𝗰𝗼𝗳𝗳𝗲𝗲:
To support the channel and encourage new videos, please consider buying me a coffee here:
ko-fi.com/bugbytes

⭐Top resource to learn Python - datacamp.pxf.io/kOjKkV ⭐

In this video, we'll build a static webapp using SvelteKit and TailwindCSS, and deploy that app to the Vercel cloud. The app will allow workers to calculate the amount of money that is lost when moving from fully-remote, to X number of days in-office. For styling, the app will make use of TailwindCSS and DaisyUI, and will showcase DaisyUI themes for adjusting the look and feel of the app.

📌 𝗖𝗵𝗮𝗽𝘁𝗲𝗿𝘀:
00:00 Intro
04:51 Setting up SvelteKit project
09:41 Create WorkInformation component
15:17 Extracting a NumberInput component
21:14 Styling with TailwindCSS and DaisyUI
38:22 Stepper form with DaisyUI and Svelte
44:21 Adding Expense Information Form
51:18 Adding Results page with calculations
01:00:16 Creating MetricCard component
01:20:44 Changing DaisyUI theme
01:23:36 Deploying SvelteKit app to Vercel

𝗦𝗼𝗰𝗶𝗮𝗹 𝗠𝗲𝗱𝗶𝗮:
📖 Blog: bugbytes.io/posts/
👾 Github: github.com/bugbytes-io/
🐦 Twitter: twitter.com/bugbytesio

📚 𝗙𝘂𝗿𝘁𝗵𝗲𝗿 𝗿𝗲𝗮𝗱𝗶𝗻𝗴 𝗮𝗻𝗱 𝗶𝗻𝗳𝗼𝗿𝗺𝗮𝘁𝗶𝗼𝗻:
Create SvelteKit project: kit.svelte.dev/docs/creating-a-project
Svelte cross-component communication: codechips.me/svelte-cross-component-communication/
DaisyUI & Tailwind Installation: daisyui.com/docs/install/
Tailwind Typography plugin: github.com/tailwindlabs/tailwindcss-typography
Steps component: daisyui.com/components/steps/
DaisyUI Themes: daisyui.com/docs/themes/

#webdevelopment #svelte #sveltekit #tailwind #tailwindcss