# sveltekit-prisma-tailwind

Everything you need to build an awesome full stack application. 
It includes: 
- The [TypeScript](https://www.typescriptlang.org/) programming language
- The [SvelteKit](https://kit.svelte.dev/) app framework 
- The [Prisma](https://www.prisma.io/) database ORM
- The [Tailwind](https://tailwindcss.com/) CSS framework
- [Zod](https://zod.dev/) schema validation
- [Vitest](https://vitest.dev/) for unit testing 
- [Playwright](https://playwright.dev/) for browser testing
- [ESLint](https://eslint.org/) for code linting
- [Prettier](https://prettier.io/) for code formatting

This repository is also preconfigured for continuous integration and continuous deployment. Tests will automatically run on push, and the demo branch will automatically deploy to a staging environment.

## Developing

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

```bash
npm run dev

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

### Working with SvelteKit
- [Svelte docs](https://svelte.dev/docs)
- [SvelteKit docs](https://kit.svelte.dev/docs/introduction)

SvelteKit is a combination of the [Svelte](https://svelte.dev/) component framework and [Vite](https://vitejs.dev/), similar to React's Next or Vue's Nuxt. This repository is preconfigured to use SvelteKit's [node adapter](https://kit.svelte.dev/docs/adapter-node), which will create a production node server on build.

### Working with Prisma
- [Prisma docs](https://www.prisma.io/docs)

Prisma is a Node.js and TypeScript ORM that includes both a [schema](https://www.prisma.io/docs/concepts/components/prisma-schema) for declaring your database tables, and a query builder called the [client](https://www.prisma.io/client) that's tailored to your schema.

Prisma includes a [variety](https://www.prisma.io/docs/concepts/database-connectors) of database connectors. If your database is supported, initialize prisma:

```bash
npx prisma init --datasource-provider [sqlite, postgresql, mysql, sqlserver, mongodb, cockroachdb]
```

Next, edit `prisma/schema.prisma` according to your [data model](https://www.prisma.io/docs/concepts/components/prisma-schema/data-model), and edit the DATABASE_URL in `.env` according to your database [connection URL](https://www.prisma.io/docs/reference/database-reference/connection-urls).

Finally, create your database, tables, migration file, and client:

```bash
npx prisma migrate dev --name init
npx prisma generate
```

You're now ready to send queries to the database! Refer to the Prisma Client documentation for [CRUD operations](https://www.prisma.io/docs/concepts/components/prisma-client/crud), [relation queries](https://www.prisma.io/docs/concepts/components/prisma-client/relation-queries), [filtering and sorting](https://www.prisma.io/docs/concepts/components/prisma-client/filtering-and-sorting), etc.

If you make any changes to the schema, prototype them with:

```bash
npx prisma db push
npx prisma generate
```

When ready, migrate the changes like you would commit them with git, and regenerate the prisma client:

```bash
npx prisma migrate dev --name (commit message)
npx prisma generate
```

### Working with Tailwind
- [Tailwind docs](https://tailwindcss.com/)

Tailwind is a utility-first CSS framework, similar to bootstrap, that can be composed to build any design, directly in your markup.

To speed up your development process, you might want to use a component library. Some popular options are:
- [Flowbite-Svelte](https://flowbite-svelte.com/)
- [Skeleton](https://www.skeleton.dev/)
- [daisyUI](https://daisyui.com/)
- [Carbon Components](https://carbon-components-svelte.onrender.com/)

Other useful UI libraries include:
- [HeroIcons](https://heroicons.com/) SVG icons
- [Hero Patterns](https://heropatterns.com/) SVG background patterns
- [Chart.js](https://www.chartjs.org/) charting library

## Testing

### Browser Tests

Add browser tests to `tests/test.ts`, and run them with:

```bash
npm run test
```

### Unit Tests

Add unit tests to `src/index.test.ts`, and run them with:

```bash
npm run test:unit
```

## Building

To create a production version of your app:

```bash
npm run build
```

You can preview the production build with `npm run preview`.