WonderWork is a safe, curated learning platform for children that allows them to view approved video content from YouTube and other platforms. Videos are embedded directly in the application, providing a distraction-free, age-appropriate learning experience.
- Framework: SvelteKit
- Language: TypeScript
- Styling: Tailwind CSS
- Animation: motion-svelte
- Icons: @phosphor-icons/svelte
- Curated video library with pre-approved educational content
- Safe video embedding from YouTube and other platforms
- Custom video player with age-appropriate controls
- Content organized by subject, age level, and learning objectives
- Distraction-free interface (no comments, recommendations, or ads)
- Multi-user support with child profiles
- Progress tracking and learning analytics
- mise (tool version manager)
- pnpm (will be installed via mise)
-
Install mise (if not already installed):
curl https://mise.run | sh -
Install tools and dependencies:
mise install pnpm install
pnpm devOpen http://localhost:3000 with your browser to see the result.
Port Configuration:
- Default port:
3000 - To use a different port, set the
PORTenvironment variable:PORT=4000 pnpm dev
- If the configured port is already in use, the server will automatically try the next available port
pnpm buildpnpm preview- Build Tool: Vite 5.x
- Framework: SvelteKit 2.x
- TypeScript: Enabled with strict mode
- CSS Processing: PostCSS with Tailwind CSS and Autoprefixer
The development and preview servers are configured to use port 3000 by default, avoiding conflicts with pre-allocated system ports.
Configuration:
- Default port:
3000(configured invite.config.ts) - Configurable via
PORTenvironment variable - Auto-fallback: If the configured port is in use, Vite will automatically try the next available port
Usage:
# Use default port 3000
pnpm dev
# Use custom port
PORT=4000 pnpm dev
# Preview with custom port
PORT=5000 pnpm previewPORT- Server port for dev/preview (default:3000)
pnpm dev- Start development server with hot module replacementpnpm build- Build for production (outputs tobuild/directory)pnpm preview- Preview production build locallypnpm check- Run Svelte type checkingpnpm check:watch- Run Svelte type checking in watch modepnpm lint- Lint code with ESLint and Prettierpnpm format- Format code with Prettier
The production build creates an optimized bundle:
- Code splitting and tree-shaking
- Minified JavaScript and CSS
- Optimized assets
- SSR-ready output (via SvelteKit adapter)
Build output is located in the build/ directory (excluded from git).
- Hot Module Replacement (HMR) for instant updates
- Fast refresh for Svelte components
- Source maps for debugging
- Listens on all network interfaces (
host: true) for remote access
wonderWork/
├── src/
│ ├── lib/
│ │ ├── components/ # Svelte components
│ │ ├── stores/ # Svelte stores for state management
│ │ └── utils/ # Utility functions
│ ├── routes/ # SvelteKit routes and API endpoints
│ └── app.html # HTML template
├── static/ # Static assets (images, videos, etc.)
├── .cursor/ # Project documentation
└── agent-os/ # Product planning documents
Product planning documents are available in agent-os/product/:
- Mission:
agent-os/product/mission.md- Product vision and strategy - Roadmap:
agent-os/product/roadmap.md- Development phases and features - Tech Stack:
agent-os/product/tech-stack.md- Technical stack documentation
This project has been migrated from Next.js/React to SvelteKit. See .cursor/MIGRATION_STATUS.md for detailed migration progress.
- Configured development server to use port 3000 (configurable via PORT env var)
- Added port auto-fallback for conflict resolution
- Set up mise and pnpm as required tools
- Updated build configuration documentation
- Added comprehensive build and development server documentation
- Migrated from Next.js/React to SvelteKit/Svelte
- Converted React Context providers to Svelte stores
- Migrated API routes to SvelteKit format
- Created product planning documents
- Set up TypeScript and Tailwind CSS configuration