Feature/ap 4 airtable connection

.vscode/settings.json

@@ -1,5 +1,9 @@
 {
 	"files.associations": {
 		"*.css": "tailwindcss"
+	},
+	"editor.formatOnSave": false,
+	"editor.codeActionsOnSave": {
+		"source.fixAll.eslint": "explicit"
 	}
 }

docs/report.md

@@ -0,0 +1,9 @@
+# Creating the project (Boilerplate)
+I created the boiler plate code, basic CI and deployment at the very beggining off the project (AP-3, AP-2, AP-8).
+The idea is to have as soon as possible a "Hello world". In this context that would be a deployed sveltkit app that can read and write a value on Airtable.
+
+# Testing from the very beginning
+
+I created a test script (`scripts/test-airtable.ts`) to verify read and write access to Airtable before building any features. This script uses dotenv to load credentials from `.env.local` and tests creating and reading records from a dedicated test table.
+
+The project uses Vitest with Playwright for browser-based component testing, with Playwright browsers installed automatically via a postinstall hook. At the moment test is boilerplate, so we are not really testing any real functionality

eslint.config.js

@@ -2,6 +2,7 @@ import { fileURLToPath } from 'node:url';
 import { includeIgnoreFile } from '@eslint/compat';
 import js from '@eslint/js';
 import svelte from 'eslint-plugin-svelte';
+import stylistic from '@stylistic/eslint-plugin';
 import { defineConfig } from 'eslint/config';
 import globals from 'globals';
 import ts from 'typescript-eslint';
@@ -14,6 +15,12 @@ export default defineConfig(
 	js.configs.recommended,
 	...ts.configs.recommended,
 	...svelte.configs.recommended,
+	stylistic.configs.customize({
+		indent: 'tab',
+		quotes: 'single',
+		semi: true,
+		jsx: false,
+	}),
 	{
 		languageOptions: { globals: { ...globals.browser, ...globals.node } },
 

package.json

@@ -18,12 +18,14 @@
 	"devDependencies": {
 		"@eslint/compat": "^1.4.0",
 		"@eslint/js": "^9.39.1",
+		"@stylistic/eslint-plugin": "^5.6.1",
 		"@sveltejs/adapter-auto": "^7.0.0",
 		"@sveltejs/kit": "^2.49.1",
 		"@sveltejs/vite-plugin-svelte": "^6.2.1",
 		"@tailwindcss/vite": "^4.1.17",
 		"@types/node": "^22",
 		"@vitest/browser-playwright": "^4.0.15",
+		"dotenv": "^17.2.3",
 		"eslint": "^9.39.1",
 		"eslint-plugin-svelte": "^3.13.1",
 		"globals": "^16.5.0",
@@ -36,5 +38,8 @@
 		"vite": "^7.2.6",
 		"vitest": "^4.0.15",
 		"vitest-browser-svelte": "^2.0.1"
+	},
+	"dependencies": {
+		"airtable": "^0.12.2"
 	}
 }

scripts/test-airtable.ts

@@ -0,0 +1,39 @@
+import Airtable from 'airtable';
+import dotenv from 'dotenv';
+dotenv.config({ path: '.env.local' });
+
+const apiKey = process.env.AIRTABLE_API_KEY;
+const baseIdLearners = process.env.AIRTABLE_BASE_ID_LEARNERS;
+
+if (!apiKey || !baseIdLearners) {
+	console.error('Missing environment variables');
+	process.exit(1);
+}
+
+Airtable.configure({ apiKey });
+
+async function testConnection() {
+	const base = Airtable.base(baseIdLearners ?? '');
+	const table = base('Test for Apprentice-pulse');
+
+	console.log('Testing write access...');
+	const newRecord = await table.create({
+		Name: 'Test Record',
+	});
+	console.log('Created record:', newRecord.id);
+
+	console.log('\nTesting read access...');
+	const records = await table.select({ maxRecords: 3 }).all();
+	console.log(`Found ${records.length} records:`);
+	records.forEach((record) => {
+		console.log(`  - ${record.id}: ${record.get('Name')}`);
+	});
+
+	// console.log('\nTesting delete...');
+	// await table.destroy(newRecord.id);
+	// console.log('Deleted test record');
+
+	console.log('\n✅ All tests passed!');
+}
+
+testConnection().catch(console.error);

src/routes/page.svelte.spec.ts

@@ -6,7 +6,7 @@ import Page from './+page.svelte';
 describe('/+page.svelte', () => {
 	it('should render h1', async () => {
 		render(Page);
-		
+
 		const heading = page.getByRole('heading', { level: 1 });
 		await expect.element(heading).toBeInTheDocument();
 	});

vite.config.ts

@@ -19,12 +19,12 @@ export default defineConfig({
 					browser: {
 						enabled: true,
 						provider: playwright(),
-						instances: [{ browser: 'chromium', headless: true }]
+						instances: [{ browser: 'chromium', headless: true }],
 					},
 
 					include: ['src/**/*.svelte.{test,spec}.{js,ts}'],
-					exclude: ['src/lib/server/**']
-				}
+					exclude: ['src/lib/server/**'],
+				},
 			},
 
 			{
@@ -34,9 +34,9 @@ export default defineConfig({
 					name: 'server',
 					environment: 'node',
 					include: ['src/**/*.{test,spec}.{js,ts}'],
-					exclude: ['src/**/*.svelte.{test,spec}.{js,ts}']
-				}
-			}
-		]
-	}
+					exclude: ['src/**/*.svelte.{test,spec}.{js,ts}'],
+				},
+			},
+		],
+	},
 });