124 lines
2.8 KiB
Markdown
124 lines
2.8 KiB
Markdown
# PRD: Full-Stack Demo App
|
|
|
|
## Overview
|
|
A complete full-stack application demonstrating Loki Mode's end-to-end capabilities. A simple bookmark manager with tags.
|
|
|
|
## Target Users
|
|
Users who want to save and organize bookmarks.
|
|
|
|
## Features
|
|
|
|
### Core Features
|
|
1. **Add Bookmark** - Save URL with title and optional tags
|
|
2. **View Bookmarks** - List all bookmarks with search/filter
|
|
3. **Edit Bookmark** - Update title, URL, or tags
|
|
4. **Delete Bookmark** - Remove bookmark
|
|
5. **Tag Management** - Create, view, and filter by tags
|
|
|
|
### User Flow
|
|
1. User opens app → sees bookmark list
|
|
2. Clicks "Add Bookmark" → form appears
|
|
3. Enters URL, title, tags → submits
|
|
4. Bookmark appears in list
|
|
5. Can filter by tag or search by title
|
|
6. Can edit or delete any bookmark
|
|
|
|
## Tech Stack
|
|
|
|
### Frontend
|
|
- React 18 with TypeScript
|
|
- Vite for bundling
|
|
- TailwindCSS for styling
|
|
- React Query for data fetching
|
|
|
|
### Backend
|
|
- Node.js 18+
|
|
- Express.js
|
|
- SQLite with better-sqlite3
|
|
- zod for validation
|
|
|
|
### Structure
|
|
```
|
|
/
|
|
├── frontend/
|
|
│ ├── src/
|
|
│ │ ├── components/
|
|
│ │ ├── hooks/
|
|
│ │ ├── types/
|
|
│ │ └── App.tsx
|
|
│ ├── package.json
|
|
│ └── vite.config.ts
|
|
├── backend/
|
|
│ ├── src/
|
|
│ │ ├── routes/
|
|
│ │ ├── db/
|
|
│ │ └── index.ts
|
|
│ ├── package.json
|
|
│ └── tsconfig.json
|
|
└── README.md
|
|
```
|
|
|
|
## API Endpoints
|
|
|
|
### Bookmarks
|
|
- `GET /api/bookmarks` - List all (query: `?tag=`, `?search=`)
|
|
- `POST /api/bookmarks` - Create new
|
|
- `PUT /api/bookmarks/:id` - Update
|
|
- `DELETE /api/bookmarks/:id` - Delete
|
|
|
|
### Tags
|
|
- `GET /api/tags` - List all tags with counts
|
|
|
|
## Database Schema
|
|
```sql
|
|
CREATE TABLE bookmarks (
|
|
id INTEGER PRIMARY KEY,
|
|
url TEXT NOT NULL,
|
|
title TEXT NOT NULL,
|
|
created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
|
|
updated_at DATETIME DEFAULT CURRENT_TIMESTAMP
|
|
);
|
|
|
|
CREATE TABLE tags (
|
|
id INTEGER PRIMARY KEY,
|
|
name TEXT UNIQUE NOT NULL
|
|
);
|
|
|
|
CREATE TABLE bookmark_tags (
|
|
bookmark_id INTEGER REFERENCES bookmarks(id),
|
|
tag_id INTEGER REFERENCES tags(id),
|
|
PRIMARY KEY (bookmark_id, tag_id)
|
|
);
|
|
```
|
|
|
|
## Requirements
|
|
- TypeScript throughout
|
|
- Input validation (frontend + backend)
|
|
- Error handling with user feedback
|
|
- Loading states
|
|
- Empty states
|
|
- Responsive design
|
|
|
|
## Testing
|
|
- Backend: Jest + supertest for API tests
|
|
- Frontend: Basic component tests (optional)
|
|
- E2E: Manual testing checklist
|
|
|
|
## Out of Scope
|
|
- User authentication
|
|
- Import/export
|
|
- Browser extension
|
|
- Cloud deployment
|
|
- Real-time sync
|
|
|
|
## Success Criteria
|
|
- All CRUD operations work
|
|
- Search and filter work
|
|
- No console errors
|
|
- Tests pass
|
|
- Code review passes (all 3 reviewers)
|
|
|
|
---
|
|
|
|
**Purpose:** Comprehensive test of Loki Mode's full capabilities including frontend, backend, database, and code review agents. Expect ~30-60 minutes for full execution.
|