🚧 WIP: Stubbed out Lesson 95 - Protecting Server Side

95__PROTECT-SERVER-SIDE/.vscode/settings.json

@@ -0,0 +1,7 @@
+{
+  "workbench.colorCustomizations": {
+    "activityBar.background": "#4713a6",
+    "titleBar.activeBackground": "#fffd41",
+    "titleBar.activeForeground": "#4713a6"
+  }
+}

95__PROTECT-SERVER-SIDE/dollarholler/.eslintignore

@@ -0,0 +1,13 @@
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+
+# Ignore files for PNPM, NPM and YARN
+pnpm-lock.yaml
+package-lock.json
+yarn.lock

95__PROTECT-SERVER-SIDE/dollarholler/.eslintrc.cjs

@@ -0,0 +1,20 @@
+module.exports = {
+  root: true,
+  parser: '@typescript-eslint/parser',
+  extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'prettier'],
+  plugins: ['svelte3', '@typescript-eslint'],
+  ignorePatterns: ['*.cjs'],
+  overrides: [{ files: ['*.svelte'], processor: 'svelte3/svelte3' }],
+  settings: {
+    'svelte3/typescript': () => require('typescript')
+  },
+  parserOptions: {
+    sourceType: 'module',
+    ecmaVersion: 2020
+  },
+  env: {
+    browser: true,
+    es2017: true,
+    node: true
+  }
+};

95__PROTECT-SERVER-SIDE/dollarholler/.gitignore

@@ -0,0 +1,8 @@
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example

95__PROTECT-SERVER-SIDE/dollarholler/.npmrc

@@ -0,0 +1 @@
+engine-strict=true

95__PROTECT-SERVER-SIDE/dollarholler/.prettierignore

@@ -0,0 +1,13 @@
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+
+# Ignore files for PNPM, NPM and YARN
+pnpm-lock.yaml
+package-lock.json
+yarn.lock

95__PROTECT-SERVER-SIDE/dollarholler/.vscode/settings.json

@@ -0,0 +1,17 @@
+{
+  "workbench.colorCustomizations": {
+    "activityBar.background": "#4713a6",
+    "titleBar.activeBackground": "#fffd41",
+    "titleBar.activeForeground": "#4713a6"
+  },
+  "cSpell.words": [
+    "Anywhereville",
+    "Coolville",
+    "dollarholler",
+    "Nowhereville",
+    "Somewhereville",
+    "supabase",
+    "sveltejs",
+    "uuidv"
+  ]
+}

95__PROTECT-SERVER-SIDE/dollarholler/README.md

@@ -0,0 +1,38 @@
+# create-svelte
+
+Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte).
+
+## Creating a project
+
+If you're seeing this, you've probably already done this step. Congrats!
+
+```bash
+# create a new project in the current directory
+npm create svelte@latest
+
+# create a new project in my-app
+npm create svelte@latest my-app
+```
+
+## 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
+```
+
+## Building
+
+To create a production version of your app:
+
+```bash
+npm run build
+```
+
+You can preview the production build with `npm run preview`.
+
+> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.

95__PROTECT-SERVER-SIDE/dollarholler/package.json

@@ -0,0 +1,44 @@
+{
+  "dependencies": {
+    "@supabase/supabase-js": "^2.1.3",
+    "@types/uuid": "^8.3.4",
+    "date-fns": "^2.29.3",
+    "svelte-markdown": "^0.2.3",
+    "uuid": "^9.0.0"
+  },
+  "devDependencies": {
+    "@sveltejs/adapter-auto": "^1.0.0",
+    "@sveltejs/kit": "next",
+    "@typescript-eslint/eslint-plugin": "^5.27.0",
+    "@typescript-eslint/parser": "^5.27.0",
+    "autoprefixer": "^10.4.8",
+    "dotenv": "^16.0.3",
+    "eslint": "^8.16.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-svelte3": "^4.0.0",
+    "postcss": "^8.4.16",
+    "prettier": "^2.7.1",
+    "prettier-plugin-tailwindcss": "^0.1.13",
+    "svelte": "^3.44.0",
+    "svelte-check": "^2.7.1",
+    "svelte-preprocess": "^4.10.7",
+    "tailwindcss": "^3.1.8",
+    "tslib": "^2.3.1",
+    "typescript": "^4.7.4",
+    "vite": "^3.0.4"
+  },
+  "name": "dollarholler",
+  "private": true,
+  "scripts": {
+    "build": "vite build",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+    "dev": "vite dev",
+    "format": "prettier --write --plugin-search-dir=. .",
+    "lint": "prettier --check --plugin-search-dir=. . && eslint .",
+    "preview": "vite preview",
+    "seedDb": "node ./seedDb.js"
+  },
+  "type": "module",
+  "version": "0.0.1"
+}

95__PROTECT-SERVER-SIDE/dollarholler/postcss.config.cjs

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {}
+  }
+};

95__PROTECT-SERVER-SIDE/dollarholler/prettier.config.cjs

@@ -0,0 +1,8 @@
+module.exports = {
+  plugins: [require('prettier-plugin-tailwindcss')],
+  tailwindConfig: './tailwind.config.cjs',
+  useTabs: false,
+  singleQuote: true,
+  trailingComma: 'none',
+  printWidth: 100
+};

95__PROTECT-SERVER-SIDE/dollarholler/seedDb.js

@@ -0,0 +1,79 @@
+'use strict';
+
+import fs from 'fs';
+import { createClient } from '@supabase/supabase-js'
+import dotenv from 'dotenv'
+
+dotenv.config()
+const supabaseUrl = process.env.PUBLIC_SUPABASE_URL;
+const supabaseAnonKey = process.env.PUBLIC_SUPABASE_ANON_KEY;
+
+/* ----------- ATTENTION: ADD VARIABLE --------------------------------------- */
+const userId = '34c6d36d-40bd-4613-bf43-23418cd5847a';
+/* --------------------------------------------------------------------------- */
+
+console.log({supabaseUrl, supabaseAnonKey})
+
+// setup supabase
+const supabase = createClient(supabaseUrl, supabaseAnonKey)
+
+// read seed data
+const rawdata = fs.readFileSync('./src/seed.json');
+const data = JSON.parse(rawdata);
+
+const errorMessage = (error) => {
+  console.log('Error inserting settings', error);
+  process.exit(1);
+}
+
+// add settings
+const settingsResult = await supabase
+  .from('settings')
+  .insert({ userId, ...data.settings });
+if (settingsResult.error) errorMessage(settingsResult.error);
+console.log('⚙️ Added Settings');
+
+// add clients
+// cycle through each client
+for (const client of data.clients) {
+  // separate out the invoices and line items
+  const { invoices, id, ...rest } = client;
+
+
+  const clientResult = await supabase
+    .from('client')
+    .insert({ userId, ...rest })
+    .select()
+  if (clientResult.error) errorMessage(clientResult.error);
+  console.log('👤 Added Client', clientResult.data[0].name)
+
+  const clientId = clientResult.data[0].id;
+
+  // loop over invoices and add them to the db
+  for (const invoice of invoices) {
+
+    // separate out the line items
+    const { lineItems, id, client, ...rest } = invoice;
+
+    const invoiceResult = await supabase
+      .from('invoice')
+      .insert({ userId, clientId, ...rest })
+      .select();
+    if (invoiceResult.error) errorMessage(invoiceResult.error);
+    console.log('💰 Added Invoice', invoiceResult.data[0].invoiceNumber);
+
+    const invoiceId = invoiceResult.data[0].id;
+
+    // loop over line items and add them to the db
+    for (const lineItem of lineItems) {
+      const { id, ...rest } = lineItem;
+
+      const lineItemResult = await supabase
+        .from('lineItems')
+        .insert({ userId, invoiceId, ...rest })
+        .select();
+      if (lineItemResult.error) errorMessage(lineItemResult.error);
+      console.log('📝 Added Line Item', lineItemResult.data[0].description);
+    }
+  }
+}

95__PROTECT-SERVER-SIDE/dollarholler/src/app.css

@@ -0,0 +1,123 @@
+@import url('https://fonts.googleapis.com/css2?family=Kalam&family=Source+Code+Pro:wght@400;700&family=Source+Sans+Pro:ital,wght@0,400;0,700;0,900;1,400;1,700&display=swap');
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  body {
+    @apply font-sansSerif
+  }
+
+  label {
+    @apply block font-sansSerif text-base font-bold text-monsoon;
+  }
+
+  input[type="text"]:not(.search):not(.line-item),
+  input[type="number"]:not(.line-item),
+  input[type="date"],
+  input[type="password"],
+  input[type="email"] {
+    @apply h-10 lg:h-14 w-full rounded-lg border-2 border-silver px-4 font-sansSerif text-base;
+  }
+
+  textarea {
+    @apply h-32 w-full rounded-lg border-2 border-silver p-4  font-sansSerif text-base;
+  }
+
+  select {
+    @apply border-silver border-2 rounded-lg w-full px-4 lg:p-4 appearance-none bg-chevronDown bg-no-repeat bg-right-center h-10 lg:h-14
+  }
+
+  select:focus,
+  textarea:focus,
+  input[type="text"]:not(.search):not(.line-item):focus,
+  input[type="number"]:not(.line-item):focus,
+  input[type="date"]:focus,
+  input[type="password"]:focus,
+  input[type="email"]:focus {
+    @apply border-2 border-lavenderIndigo outline-none;
+  }
+
+  input[type=number]:disabled {
+    @apply appearance-none;
+    -moz-appearance: textfield;
+  }
+
+  svg {
+    @apply fill-current
+  }
+}
+
+@layer components {
+  .action-button {
+    @apply flex cursor-pointer flex-col items-center justify-center font-bold text-daisyBush;
+  }
+
+  .swipe-revealed-actions {
+    @apply absolute inset-0 z-rowActions flex h-full w-full items-center justify-around;
+  }
+
+  .invoice-table {
+    @apply  grid grid-cols-invoiceTableMobile lg:grid-cols-invoiceTable gap-x-4 px-4 lg:px-6 mb-3 w-full
+  }
+
+  .invoice-line-item {
+    @apply grid sm:grid-cols-invoiceLineItem gap-5 relative;
+    grid-template-areas: "description description description"
+      "unitPrice qty amount";
+  }
+
+  @media (min-width: 640px) {
+    .invoice-line-item {
+      grid-template-areas: "description unitPrice qty amount trash";
+    }
+  }
+
+  .invoice-line-item .description {
+    grid-area: description;
+  }
+
+  .invoice-line-item .unitPrice {
+    grid-area: unitPrice;
+  }
+
+  .invoice-line-item .qty {
+    grid-area: qty;
+  }
+
+  .invoice-line-item .amount {
+    grid-area: amount;
+  }
+
+  .invoice-line-item .trash {
+    @apply absolute top-0 right-0 sm:relative;;
+    grid-area: trash;
+  }
+
+  .client-table {
+    @apply grid grid-cols-clientTableMobile lg:grid-cols-clientTable mb-3 w-full gap-x-4 px-4 lg:px-6
+  }
+
+  .field {
+    @apply mb-6;
+  }
+
+  .button {
+    @apply relative flex items-center whitespace-nowrap rounded-lg px-5 py-2 font-sansSerif text-base font-black lg:px-10 lg:py-3 lg:text-xl;
+  }
+
+  .auth-heading {
+    @apply mb-4 text-[2.5rem] font-black text-goldenFizz;
+  }
+
+  .auth-button {
+    @apply mt-6 min-h-[3.5rem] w-full rounded-lg bg-robinEggBlue py-3 px-4 text-xl font-bold text-daisyBush transition-all duration-200 hover:-translate-y-1 hover:shadow-lg;
+  }
+}
+
+@layer utilities {
+  .center {
+    @apply flex items-center justify-center
+  }
+}