Interactive Storybook
Washington University in St. Louis, Fall 2024
Developed an innovative interactive storytelling platform as part of Washington University in St. Louis’s CSE 503S: Rapid Prototyping and Creative Programming course. The application combines modern web technologies with AI capabilities to create an engaging narrative experience where users can craft and explore branching storylines.
Key Features
- AI-powered content generation
- Dynamic story text generation
- AI-generated contextual images
- Adaptive narrative progression
- Interactive storytelling system
- Branching narrative paths
- Multiple choice story progression
- Visual story path tracking
- Story management capabilities
- Create and edit multiple stories
- Story title and content management
- Persistent story storage
- Visual navigation features
- Depth visualization
- Path tracking interface
- Story progress indicators
Technical Architecture
The application follows a modern web architecture:
- Frontend: Vue.js 3 with Vue Router
- Backend: Node.js/Express.js
- Database: MongoDB
- AI Integration: OpenAI API
- Development Tools: Vite, Vue CLI
Implementation Details
Core components include:
- Story display and interaction system
- AI content generation pipeline
- Database integration for story persistence
- Dynamic routing and state management
- Visual story path visualization
- Interactive choice management
- Story editing interface
Skills/Technologies
- Vue.js 3
- Node.js
- MongoDB
- OpenAI API
- JavaScript/TypeScript
- HTML5/CSS3
- RESTful APIs
- Database Design
- AI Integration
- Version Control (Git)