MagiStory: Interactive Storybook Builder for Children

• 

  Title Card

• 

  Dashboard

• 

  Prompter

• 

  Gen AI Storybook

• 

  Flashcard

• 

  Flashcard Mockup

• 

  Audio Toggle

• 

  Visual and Mic Options

• 

  UX Writing for Children

Inspiration

Second generation children living in English-speaking countries are losing touch with their parents’ mother tongues due to a lack of accessible resources, leading to a loss in cultural connection and communication with family.

What it does

MagiStory delivers interactive and engaging storybooks to children to accelerate language learning, enhance accessible education, and promote social representation.

How we built it

Front-End HTML, CSS, JavaScript with React and Vite for UI development React Router DOM for client-side routing Node Fetch for making API calls React Hooks: useState, useEffect, useContext for state management

Back-End Node.js with Express.js framework for server-side dotenv for secure environment variable management body-parser for handling JSON request parsing

AI Integration OpenAI API: GPT-4o-mini for generating story content DALL-E for creating images based on stories

What's next for MagiStory: Interactive Storybook Builder for Children

Diagnostic tool to see child's level, more language options, flashcards.

Built With

• dall-e
• express.js
• figma
• gpt-4o-mini
• node.js
• react