Svelte Cabins Website

From the Udemy project "Ultimate React Course 2024: React, Next.js, Redux & More" by Jonas Schmedtmann. Part 5: Section:33 Lecture:431 Project: "The Wild Oasis Website" built in Svelte Kit.

Reference

• Included tools
• Requirements
• Getting started
  • Installing
  • Building

Included tools

This template contains some preconfigured development tools:

• Svelte Kit
• Typescript
• Tailwind CSS
• Bits-ui
• Convex
• Prettier
• ESLint
• Playwright
• Changesets

Requirements

This template requires the use of pnpm. You can install pnpm with:

npm i -g pnpm

Svelte Kit

Everything you need to build a Svelte project, powered by sv.

TypeScript

A superset of Javascript that adds an additional layer of Typings, bringing more security and efficiency to the written code.

Check TypeScript documentation.

Tailwind CSS

A utility-first CSS framework. Including @tailwindcss/forms and @tailwindcss/typography.

Check Tailwind CSS documentation. pnpm i tailwindcss @tailwindcs/vite

Bits-ui

Headless components for Svelte.

Check Bits-ui introduction. pnpm i bits-ui

Convex

Open-source reactive database for apps.

Check Convex documentation. To install Convex - pnpm i convex convex-svelte Set up Convex dev deployment - pnpx convex dev

In src/+layout.svelte

{@render children()}

Prettier

Code formatting that assures consistency across all projects.

Check Prettier documentation.

ESLint

Code linting that enforces industries' best practices.

Check ESLint documentation. Use Finsweet custom configuration recomended.

Playwright

Fast and reliable end-to-end testing.

Check Playwright documentation.

Changesets

A way to manage your versioning and changelogs.

Check Changesets documantation.

Installing

After creating the new repository, open it in your terminal and install the packages by running:

pnpm install

If this is the first time using Playwright and you want to use it in this project, you'll also have to install the browsers by running:

pnpm playwright install

You can read more about the use of Playwright in the Testing section.

It is also recommended that you install the following extensions in your VSCode editor:

• Prettier - Code formatter
• ESLint

Developing

Once you've created a project and installed dependencies with npm install (or pnpm install or yarn), start a development server:

npm run dev

# or start the server and open the app in a new browser tab
npm run dev -- --open

Building

To create a production version of your app:

npm run build

You can preview the production build with npm run preview.

To deploy your app, you may need to install an adapter for your target environment.

**//