InfiBook

• GIF

  Mockup

Inspiration

Despite the proven benefits of reading, literacy rates have dropped significantly in recent years. Currently, 40% of fourth graders fail to meet literacy standards, and child literacy has decreased by 29% over the past decade. InfiBook aims to address this issue by making reading more engaging and interactive. Research shows that many children tend to read the same book repeatedly. Why not provide a more diverse experience by offering interactive stories that change based on the choices they make? With InfiBook, kids can explore endless possibilities with every story, making reading a more dynamic and enjoyable.

How it's different

Although many applications aim to boost engagement, stands out with its distinctive value proposition: infinite content for each story. Unlike traditional approaches, which often rely on a static collection of books, InfiBook offers interactive stories that evolve based on the choices children make. This dynamic approach not only keeps kids engaged but also encourages continuous exploration and learning. Given the significant decline in child literacy rates, particularly pronounced among low-income students, affording multiple physical books can be a challenge. InfiBook addresses this by providing a cost-effective solution that requires only one device per household.This model reduces the need for purchasing and disposing of numerous books, making it a more sustainable and accessible option. By offering endless interactive content at a lower price point, InfiBook ensures that children have ongoing access to engaging and educational reading experiences without financial barriers. (reference: according to Statistics Canada, Internet use among Canadians aged 15 years and older reaching 95%)

What it does

For kids, InfiBook provides two main options:

1. Recreate Stories: Children can use their imagination to recreate and interact with stories, bringing their favourite tales to life in new ways.

2. Engage with Learning Materials: Kids can access educational content customized by their parents. Their responses influence the outcomes of their interactive stories, which keeps them motivated and engaged while enhancing their overall learning experience.

For parents, InfiBook offers tools to personalize their child's learning experience. They can adjust levels, create custom flashcards, and set quiz types.

How we built it

Figma for design, React bootstrapped with next.js, tailwindcss and shadcn ui for the components, and lucide-react and google materials for icons. I focused more on UI/UX during the hackathon (6-70%) and making a fully functioning prototype.

For the system architecture, I am envisioning something like this: Midjourney for image generation, ChatGPT-4V for OCR and text-based generation (maybe Upstage API or Azure API for OCR), Deepgram for speech to text, and maybe Whisper for text to speech to complement the visual and interactive elements (and MongoDB for database)

Challenges we ran into

Mostly from solo hacking and lack of sleep. I had less time to focus on the UIUX since I tried to make a PoC for the backend & frontend (I usually don't take these roles in hackathons). I tried to test if the concept is feasible by prompting and exploring OCR and image generative models, but some did not offer API keys/was paid, which complicated the process. The scope was pretty big to handle, especially for a solo person who usually don't take front or back-end roles in hackathons. While there were additional screens I would have included—such as a dashboard screen—if I hadn’t been working alone, it was a learning experience. Despite the time constraints, I managed to prototype around 40 screens and include micro animation, in a style I never tried, so I am overall proud of myself

Accomplishments that we're proud of & What we learned

Gamification/Child-centric ui. My previous ui were mostly clean/industry style, so it was different from my usual style. Making the illustrations assets (book, cookie, snow globe, shapes) was also pretty fun, although time consuming. I experimented with micro animation. I also learned a lot front-end during this hackathon and how the GitHub structure works.

Built With

• figma
• genai
• next.js
• tailwind