Internal AI Storybook Generator Prototype
Please Note: This is purely an evaluation exercise. We will not be using the code you produce directly in our production systems. We are interested in your thought process, architectural choices, and how you strategically leverage AI as a development partner to build efficiently and effectively.
Company Context:
Giant is building AI-powered apps and content for kids, starting with storybooks. We heavily leverage AI not only in our products but also integrate it deeply into our development workflows to accelerate innovation.
Purpose of this Test:
This take-home exercise is designed to evaluate your approach to building software, particularly how you:
- Architect systems with future AI integration and modification in mind.
- Utilize AI tools (like LLMs, Cursor, Copilot, etc.) strategically to enhance your development speed and quality.
- Implement using our core technologies (React, TypeScript).
- Clearly document your key decisions, process highlights, and AI usage within the project's README.
Project Goal:
Build a functional web-based prototype of an internal tool that assists our creative team in generating draft storybooks. A typical storybook is around 10 pages, each with text and an accompanying image prompt.
Time Commitment & AI Leverage:
- Duration: You have 1 week to complete the task.
- Expected Effort: We estimate a traditional approach might take 8-16 hours. However, we strongly encourage and expect you to leverage AI development tools effectively. Our target is for you to complete a solid submission within approximately 4-6 hours of focused work by using AI assistance strategically.
- Focus: Prioritize thoughtful architecture, clean implementation of core features, and clear documentation of your process and decisions within the README. Depth over excessive features is key. If you find yourself approaching the higher end of the target time, focus on documenting what you've achieved and your architectural thinking rather than adding more features.
Core Requirements:
-
Technology Stack:
- Frontend: React, TypeScript
- Backend/API: Your choice (Node.js w/ TypeScript recommended for consistency, but Python/Flask, Go, etc., are acceptable if justified).
- Persistence (Optional but Recommended): Use Supabase (free tier ok) or simple local storage/file storage to allow saving/loading drafts. Demonstrates handling state/data.
- AI APIs: Use a suitable LLM API (e.g., OpenAI, Anthropic, Google Gemini) for text and image prompt generation (free tiers or keys provided upon request).
-
Functionality:
- Input Interface: Simple UI for user inputs: Target Age Range, Main Character Description, Core Theme/Plot Idea.
- AI Story Generation: Backend logic using an LLM to generate story text structured into approx. 10 logical pages/sections based on inputs.
- AI Image Prompt Generation: For each text page, use an LLM to generate a descriptive image prompt suitable for a text-to-image model, considering page text, character, and style.
- Display/Output: Present the generated story page-by-page with its corresponding image prompt.
- (If persistence implemented): Basic save/load functionality for drafts.
-
Architectural Focus (CRITICAL):
- Design with modularity and future AI enhancements in mind. Consider: How easily could you swap LLM providers? How would you integrate new AI checks (e.g., consistency)? How might non-technical users eventually tweak AI behavior via configuration?
- Document your key architectural decisions and their rationale in the
README.md
.
-
Code Quality & Foundation:
- Clean, readable, well-organized React/TS code.
- Clear separation of concerns (frontend, backend, AI services).
Deliverables:
- Source Code: Link to a private Git repository (e.g., GitHub).
- Comprehensive
README.md
: This file is crucial and should include:- Setup & Running Instructions: Clear steps to get the application running locally (Dockerization is a plus but not required).
- Key Architectural Decisions: Explain your overall structure (frontend/backend/AI layer). Justify choices, focusing on how the design supports AI modularity and future extensibility. Mention trade-offs.
- Technology Choices (Brief): Note any choices beyond the core stack (e.g., state management, backend framework) and why.
- AI Development Assistant Usage (Summary & Reflection):
- List the primary AI tools you used (e.g., Copilot, ChatGPT, Cursor).
- Summarize how you used them (e.g., boilerplate, debugging, refactoring, generating prompts, explaining concepts, writing docs). Include 1-2 specific examples if illustrative.
- Briefly reflect on how AI impacted your workflow, speed, and the final result. How did you ensure the quality/correctness of AI-assisted output?
- Ideas for Non-Engineer Extensibility: Outline initial thoughts (even if not implemented) on architectural approaches that could allow non-engineers (writers, designers) to adjust AI parameters or story elements via configuration in the future.
Follow-up Session: Demo & Discussion (1 hour)
After submission, we'll schedule a 1-hour video call:
- (Approx 15-20 min) Demo: Briefly walk us through the running application.
- (Approx 30-35 min) Architecture, Process & AI Usage Discussion:
- We will use your
README.md
as a starting point to discuss your architectural choices, rationale (especially regarding AI modularity), and key technical decisions. - We will discuss your summarized experience using AI tools during development – we're interested in your workflow and critical assessment. Be ready to share your screen and reference code/README sections.
- We will use your
- (Approx 10 min) Non-Engineer Extensibility Discussion: We'll explore your ideas outlined in the README about making the AI aspects configurable by non-technical users.
We're excited to see your approach and how you leverage AI to tackle this challenge efficiently! Good luck.