Project Info

Storyboarding

This project did not submit a demo video on Devpost.

Inspiration

As writers, we were inspired to streamline the writing process by creating a storyboarding app. We wanted to help people write freely without having to draw their own storyboards by using AI to generate images instead.

What it does

Our application allows users to create a text description by writing or using speech-to-text. The user can then upload an image from their own file system or choose to generate an image based on the text. The scene will then be added to the main screen for the user to peruse while writing their story. Users can also rearrange panels to flexibly adjust the order of their story and plan their plot progression easier.

How we built it

We used React to create the web application. Using Chakra, we were able to render components on the browser. Deepgram's API was used for the text-to-speech. Stable Diffusion was used to generate images based on the text. By utilizing AI, we were able to streamline the process of creating the storyboard.

Challenges we ran into

The most significant challenge we ran into was figuring out the drag and drop component of the application. The panels displayed on the screen should have been able to be moved around by the user. However, the components kept glitching, and it was difficult to debug, as the dnd module's documentation was not complete enough to understand.

Accomplishments we're proud of

We are proud of successfully using Deepgram's API to generate text based on speech and using Stable Diffusion to successfully generate images based on text entered by the user.

What we learned

We learned that we should modularize our code.

What's next

We plan to add combine and split features using Gemini in the future.

Analysis

Compare with all teams

View

Metric

Kaitlyn C
12
Alex
10

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
HTMLIn code
JavaScriptIn code
ReactIn code
Tailwind CSSIn code

5 of 5 appear in the indexed code.

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

25 KB

Source files

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

Feature verification

6 Verified3 Code-supported1 Claimed only

Chakra UI componentsVerified
Using Chakra, we were able to render components on the browser
Claimed on Devposthigh confidence
- storyboard/src/App.js:9 — ChakraProvider wraps the app; Box/Grid/Button/Input/Textarea from @chakra-ui/react are used throughout Home.jsx, SideBar.jsx, SceneCard.jsx, TitleBar.jsx
React web applicationVerified
Built with React
Claimed on Devposthigh confidence
- storyboard/src/App.js:1 — Standard React app with react-router-dom routes to Home and LandingPage
Scene added to main storyboard screenVerified
The scene is added to the main screen for the user to peruse while writing their story
Claimed on Devposthigh confidence
- storyboard/src/components/SideBar.jsx:31 — addScene builds a new scene object and calls setScenes to add it to the list
- storyboard/src/pages/Home.jsx:91 — Home renders scenes.map into a Grid of SceneCard components
Speech-to-text via DeepgramVerified
Users can create a text description using speech-to-text (Deepgram API)
Claimed on Devposthigh confidence
- storyboard/src/components/SideBar.jsx:63 — Opens a WebSocket to wss://api.deepgram.com/v1/listen with REACT_APP_DEEPGRAM_API_KEY, streams MediaRecorder audio, and appends returned transcripts to the description field
Text scene description entryVerified
Users create a text description by writing
Claimed on Devposthigh confidence
- storyboard/src/components/SideBar.jsx:117 — Textarea bound to description state, used to build the scene object in addScene
Upload image from filesystemVerified
The user can upload an image from their own file system
Claimed on Devposthigh confidence
- storyboard/src/components/SideBar.jsx:13 — handleUpload reads a selected file via FileReader and stores a data URL used as the scene image
Edit / delete existing sceneCode-supported
Implied by 'Save'/'Delete' UI for adjusting a created scene
Claimed on readmelow confidence
- storyboard/src/pages/Home.jsx:24 — editScene and toggleDescription in the active Home.jsx are empty stubs ('// ... (keep existing implementation)'), so clicking a card to edit it or toggling its description does nothing in the current code, even though SideBar's Save/Delete buttons and addScene logic exist
Rearrange panels / drag and dropCode-supported
Users can rearrange panels to flexibly adjust the order of their story
Claimed on Devpostmedium confidence
- storyboard/src/pages/Home.jsx:92 — Active implementation uses react-draggable with grid snapping to reposition scene cards freely on a grid, rather than a list-reorder drag-and-drop; several commented-out dnd-kit/hello-pangea/dnd attempts remain above the active code, matching the devpost's stated struggle with the dnd module
Tailwind CSSCode-supported
Built with tailwind-css
Claimed on Devpostmedium confidence
- storyboard/src/index.css:1 — Tailwind directives are imported and tailwind.config.js exists, but no component in src uses Tailwind utility classes (styling is done via Chakra style props instead)
AI image generation from text (Stable Diffusion)Claimed only
User can choose to generate an image based on the text, using Stable Diffusion
Claimed on Devposthigh confidence

An AI agent derived these features from the project’s Devpost page and readme, then searched the code for each one. Verified features are backed by cited code; claimed-only features had no supporting code, which is not by itself proof a feature is missing.