Jom Quick
& Kiro TechJam

Hi Kiro! I need you to help me set up my development environment from scratch. Please follow these instructions step by step:

## 1. Save the Steering File

First, create a steering file in my workspace so you always know how to work on this project. Create the folder `.kiro/steering/` if it doesn't exist, then save the following content into `.kiro/steering/tech-stack.md`:

```
---
inclusion: auto
---

# Tech Stack and Project Guidelines

## Project Structure

This project uses a flat structure with frontend and backend folders at the root of the workspace:

frontend/ # React + Tailwind CSS (built with Vite)
backend/ # Node.js + Express + SQLite
db/ # SQLite database file and migrations
package.json # Root-level scripts to run everything
```

## Tech Stack

| Layer | Technology | Notes |
|-------|-----------|-------|
| Frontend framework | React | Component-based UI |
| Frontend styling | Tailwind CSS | Utility-first, no custom CSS files unless necessary |
| Frontend build tool | Vite | Fast builds, hot module replacement |
| Backend runtime | Node.js | JavaScript/TypeScript |
| Backend framework | Express | Lightweight HTTP server |
| Database | SQLite (via better-sqlite3) | File-based, zero-config, no Docker needed |
| Backend auto-reload | nodemon | Restarts server on file changes |

## Development Guidelines

When writing code for this project, always follow these rules:

- Use `fetch` or a lightweight HTTP client for API calls (no heavy libraries like Axios)
- Prefer REST APIs over GraphQL for simplicity
- Keep API responses flat and predictable
- Use Tailwind utility classes directly in JSX (avoid separate CSS files unless necessary)
- SQLite migrations should be plain SQL files in `db/migrations/`, applied in order
- Keep dependencies minimal and avoid heavy abstractions
- No Docker or containerization is needed for local development
- No external services are required; everything runs locally
- Prioritize speed of iteration over production-readiness
- No global npm packages are required; all tools are project dev dependencies
- Frontend lives in `frontend/` at the workspace root
- Backend lives in `backend/` at the workspace root
- Database files live in `db/` at the workspace root

## Important Notes

- **No Docker required** - SQLite is file-based, no database server needed
- **No external services** - Everything runs on the user's machine
- **Single command startup** - `npm run dev` at the root starts the full stack
- **Hot reload everywhere** - Frontend uses Vite HMR, backend uses nodemon

## 2. Install Prerequisites

Check and install the following tools on my machine. Detect my operating system and adapt commands accordingly.

**Node.js (v18 or higher, LTS recommended)**
- Check: run `node --version`
- If missing or below v18, install it:
  - macOS/Linux: Install nvm first, then use it to install Node.js:
    ```
    curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
    source ~/.bashrc   # or ~/.zshrc on macOS
    nvm install --lts
    ```
  - Windows: Download from https://nodejs.org/ (LTS version), or use `winget install OpenJS.NodeJS.LTS`

**npm (v9 or higher)**
- npm comes with Node.js. Verify with `npm --version`
- If below v9, run: `npm install -g npm@latest`

**Git (v2.30 or higher)**
- Check: run `git --version`
- If missing or outdated:
  - macOS: `brew install git` or `xcode-select --install`
  - Linux (Ubuntu/Debian): `sudo apt update && sudo apt install git`
  - Windows: `winget install Git.Git` or download from https://git-scm.com/downloads

Verify everything:
```
node --version    # Must show v18.x or higher
npm --version     # Must show v9.x or higher
git --version     # Must show v2.30 or higher
```

## 3. Create the Project Structure

Create the project directly in the current workspace directory (do NOT create a nested project/ folder). The structure should be:

```
./frontend/        # React + Tailwind CSS (built with Vite)
./backend/         # Node.js + Express + SQLite
./db/              # SQLite database file and migrations
./package.json     # Root-level scripts
```

Initialize the root project in the current directory:
```
npm init -y
```

## 4. Set Up the Frontend

The frontend uses React with Tailwind CSS, built with Vite.
```
npm create vite@latest frontend -- --template react
cd frontend
npm install
npm install -D tailwindcss @tailwindcss/vite
```

Configure Tailwind CSS with Vite by adding the Tailwind plugin to `vite.config.js` and adding `@import "tailwindcss"` to the main CSS file.

Verify it works by running `npm run dev`, then stop the dev server and move on.

## 5. Set Up the Backend

```
cd ..
mkdir backend && cd backend
npm init -y
npm install express better-sqlite3
npm install -D nodemon
```

Create a basic `index.js` with:
- Express server on port 3001
- Health-check endpoint at `GET /api/health` returning `{ "status": "ok" }`
- SQLite database initialization (creates a file in `../db/` folder)

Add a dev script to `package.json`:
```
"scripts": {
  "dev": "nodemon index.js"
}
```

Verify it works, then stop and move on.

## 6. Set Up the Database Folder

```
cd ..
mkdir -p db/migrations
```

SQLite is file-based, so no database server is needed. The database file will be created automatically at `db/app.db` when the backend starts.

## 7. Configure Root-Level Scripts

In the root `package.json`, add these scripts:
```
"scripts": {
  "dev": "concurrently \"npm run dev --prefix frontend\" \"npm run dev --prefix backend\"",
  "dev:frontend": "npm run dev --prefix frontend",
  "dev:backend": "npm run dev --prefix backend",
  "install:all": "cd frontend && npm install && cd ../backend && npm install"
}
```

Install concurrently:
```
npm install -D concurrently
```

## 8. Final Verification

Run `npm run dev` from the root and confirm:
- Frontend is accessible (usually http://localhost:5173)
- Backend health check works (http://localhost:3001/api/health)
- No errors in the terminal

Tell me when everything is ready!