Project Info

Dootle

Inspiration

Our team grew up around adventure, creativity, and curiosity. Just as the textbooks we studied contributed to our learning, the novels that we read kept us entertained and shaped who we are. With technology now being introduced to younger ages, and advancements in AI being made at a rapid pace, we wanted to bring our current studies and passions to those of the past. Through Dootle, we hope to provide a tech-forward avenue to greater empower children and parents to channel their creativity and storytelling abilities.

What it does

Dootle is an interactive children’s storybook maker. Kids (or kids-at-heart) draw a character in the browser, describe the character and a theme, and Dootle generates a 16‑page picture book with consistent illustrations and optional narration. Some of our Features: Drawing canvas and tools Audio narration User account and authentication Storybook bookshelving and downloading

How we built it

Our frontend was built using React, Tailwind CSS, and NextJS. Our backend was built on Flask and MongoDB, with calls to Gemini, Claude, and ElevenLabs models through OpenRouter. To optimize our process, we used a combination of latency budgeting, prompt engineering, exponential backoff, and parallel computing.

Challenges we ran into

Something incredibly important to us was the child's ability to see an EXACT copy of their character in our story. It took some clever prompt engineering, extraction, and structuring to achieve this.

Accomplishments we're proud of

While our team is experienced, we still leveraged this opportunity to learn more about the software development process, and working with generative models. We really love some of the stories our brains created at 2am, and we'd love to share them with you. Additionally, one of our teammates managed to finish two Popeyes chicken sandwiches in one sitting.

What's next

There are so many paths to build on this project. But first, we want to bring a demo to IOS and collect user feedback to see what features parents and children most desire, and work on those next.

dootle

Installation

Backend

Using `uv`

Install uv if you haven't already by running curl -LsSf https://astral.sh/uv/install.sh | sh in your terminal if you're on macOS (otherwise, follow the instructions for your OS here); you will need to restart your terminal after doing this
Copy .env.example and name the copy .env, then fill it in with your environment variables
Open the backend folder in your terminal
Run uv run main.py to start the server

Frontend

Open the frontend folder in your terminal
Install Node.js and npm if you haven't already
Run npm install to install all packages
Run npm run start to start the Next.js development server

Analysis

Compare with all teams

View

Metric

Figures cover GitHub contributors during the hackathon window. A co-authored commit counts in full for each author, so per-member totals add up to more than the whole-team figures.

Technology

Found in codeClaimed only

CSSIn code
FlaskIn code
Next.jsIn code
OpenAIIn code
PythonIn code
ReactIn code
Tailwind CSSIn code
TypeScriptIn code
Google GeminiClaimed

8 of 9 appear in the indexed code. 1 claimed on Devpost could not be matched to code, which may simply mean the tool leaves no trace in the repository.

AI coding agents

No AI coding agent signals were found in this repository.

Detected from committed agent config files and commit authorship. Absence of a signal is not proof an agent was unused.

Codebase size

Source size

132 KB

Source files

Counts recognized source files only; vendored directories, binaries and lockfiles are excluded, so this is smaller than the repository on disk.