update readme

Author: alexanderop

README.md

@@ -1,140 +1,120 @@
-# Vue.js Starter Template
+# Vue 3 SQLite Playground
 
-A modern Vue.js starter template with TypeScript, Pinia, Vue Router, TailwindCSS, and comprehensive testing setup. This template provides a robust foundation for building scalable Vue.js applications using the latest best practices.
+A modern Vue.js application demonstrating how to use SQLite in the browser through WebAssembly. This project showcases building offline-capable applications with a real SQL database running entirely in the browser.
 
 ## Features
 
+- 🗄️ Full SQLite database in the browser via WebAssembly
 - 🚀 [Vue 3.5](https://vuejs.org/) with Composition API
-- ⚡️ [Vite 5](https://vitejs.dev/) for fast development and building
+- ⚡️ [Vite 5](https://vitejs.dev/) for development
 - 🎯 [TypeScript 5.6](https://www.typescriptlang.org/) for type safety
-- 📦 [Pinia](https://pinia.vuejs.org/) for state management
-- 🛣️ [Vue Router](https://router.vuejs.org/) with automatic route generation
-- 🎨 [TailwindCSS 3](https://tailwindcss.com/) for utility-first styling
-- ✅ Testing Setup:
-  - [Vitest](https://vitest.dev/) for unit testing
-  - [Playwright](https://playwright.dev/) for end-to-end testing
-- 📝 [ESLint](https://eslint.org/) with [@antfu/eslint-config](https://github.com/antfu/eslint-config)
-- 🔧 Vue DevTools integration
+- 💾 Persistent storage using Origin Private File System (OPFS)
+- 🧵 Background processing with Web Workers
+- 🎨 [TailwindCSS 3](https://tailwindcss.com/) for styling
+
+## Key Technologies
+
+- **SQLite Wasm**: SQLite compiled to WebAssembly for browser execution
+- **Web Workers**: Background thread for database operations
+- **OPFS**: Persistent storage for database files
+- **@sqlite.org/sqlite-wasm**: Official SQLite WebAssembly package
 
 ## Prerequisites
 
-- Node.js (version 20.x or higher recommended)
+- Node.js (version 20.x or higher)
+- Modern browser with WebAssembly and OPFS support
 - npm (comes with Node.js)
 
 ## Getting Started
 
-1. Use this template by clicking the "Use this template" button above
-2. Clone your new repository:
-
+1. Clone the repository:
    ```bash
-   git clone https://github.com/your-username/your-repo-name.git
-   cd your-repo-name
+   git clone https://github.com/your-username/vue-sqlite-playground.git
+   cd vue-sqlite-playground
    ```
 
-3. Install dependencies:
-
+2. Install dependencies:
    ```bash
    npm install
    ```
 
-4. Start the development server:
-
+3. Start the development server:
    ```bash
    npm run dev
    ```
 
-5. Open your browser and visit `http://localhost:5173`
-
-## Available Scripts
-
-- `npm run dev` - Start development server
-- `npm run build` - Build for production
-- `npm run preview` - Preview production build
-- `npm run lint` - Lint and fix files
-- `npm run test:unit` - Run unit tests
-- `npm run test:e2e` - Run end-to-end tests
-- `npm run type-check` - Check TypeScript types
+4. Open your browser and visit `http://localhost:5173`
 
 ## Project Structure
 
 ```
-├── .github/           # GitHub configuration files
-├── e2e/              # End-to-end tests
-├── public/           # Public static assets
 ├── src/
-│   ├── assets/       # Project assets
-│   ├── components/   # Vue components
-│   ├── composables/  # Composable functions
-│   ├── layouts/      # Layout components
-│   ├── pages/        # Route pages
-│   ├── stores/       # Pinia stores
-│   ├── App.vue       # Root component
-│   └── main.ts       # Application entry point
-├── test/             # Test utilities and setup
-└── vite.config.ts    # Vite configuration
+│   ├── components/     # Vue components
+│   ├── composables/    # SQLite-related composables
+│   ├── config/         # Database configuration
+│   ├── services/       # SQLite service layer
+│   ├── repositories/   # Data access layer
+│   ├── types/         # TypeScript definitions
+│   └── utils/         # Helper utilities
 ```
 
-## TypeScript Support
-
-This template is fully typed with TypeScript. Configuration files can be found in:
-
-- `tsconfig.json`
-- `tsconfig.node.json`
-- `tsconfig.app.json`
+## Features Demo
 
-## Testing
+- Create and manage SQLite databases in the browser
+- Execute SQL queries directly in the UI
+- View query results in real-time
+- Persistent storage across browser sessions
+- Example CRUD operations
 
-### Unit Tests
-
-Unit tests are powered by Vitest. Run them with:
-
-```bash
-npm run test:unit
-```
-
-### E2E Tests
-
-End-to-end tests use Playwright. Run them with:
+## Available Scripts
 
-```bash
-npm run test:e2e
-```
+- `npm run dev` - Start development server
+- `npm run build` - Build for production
+- `npm run preview` - Preview production build
+- `npm run lint` - Lint and fix files
+- `npm run type-check` - Check TypeScript types
 
-## ESLint Configuration
+## Browser Support
 
-This template uses [@antfu/eslint-config](https://github.com/antfu/eslint-config) for consistent code style. Customize the rules in `.eslintrc` if needed.
+This application requires a modern browser with support for:
+- WebAssembly
+- Web Workers
+- Origin Private File System (OPFS)
+- SharedArrayBuffer
 
-## Customization
+## Technical Details
 
-### TailwindCSS
+### Database Configuration
 
-Customize your TailwindCSS configuration in `tailwind.config.js`:
+The SQLite database is configured with a sample table structure:
 
-```js
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  content: ['./src/**/*.{vue,js,ts}'],
-  theme: {
-    extend: {
-      // Add your customizations here
-    },
-  },
-  plugins: [],
-}
+```sql
+CREATE TABLE IF NOT EXISTS test_table (
+  id INTEGER PRIMARY KEY AUTOINCREMENT,
+  name TEXT NOT NULL,
+  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
+);
 ```
 
-### Vite Configuration
+### Architecture
 
-Modify the Vite configuration in `vite.config.ts` to add plugins or adjust build settings.
+The application uses a layered architecture:
+- Service Layer: Handles SQLite initialization and core operations
+- Repository Layer: Provides data access methods
+- Composables: Vue-specific database interaction hooks
 
 ## Contributing
 
 1. Fork the repository
-2. Create a new branch: `git checkout -b feature/your-feature`
-3. Commit your changes: `git commit -m 'Add some feature'`
+2. Create a feature branch: `git checkout -b feature/your-feature`
+3. Commit changes: `git commit -m 'Add some feature'`
 4. Push to the branch: `git push origin feature/your-feature`
 5. Submit a pull request
 
 ## License
 
 [MIT](./LICENSE)
+
+## Learn More
+
+For a detailed explanation of how this works, check out our [blog post](https://your-blog-post-url) about implementing SQLite in Vue 3 applications.