VisualLearn

• 

  Home Page

• 

  Dashboard

• 

  Folder

• 

  List of Visuals

• 

  Converter

• 

  Choosing the Best Visual

• 

  Generated Visual (Top)

• 

  Generated Visual (Bottom)

Inspiration

This project was inspired by my friend who has dyslexia and ADHD. Watching them struggle with text-heavy materials but thrive when information was presented visually made me realize how many students are excluded by traditional formats. I wanted to build a tool that breaks those barriers and makes learning accessible for everyone.

What it does

VisualLearn transforms dense text into interactive visual formats like concept maps, flowcharts, or simplified summaries. A student can paste in any text, and the app instantly generates visuals, alternative text versions, or even audio. The goal is to give every learner multiple ways to engage with the same material, tailored to their needs and learning style.

How we built it

I built a mobile app using React Native with Aceternity UI components for a clean and modern interface. I integrated OpenAI's DALL-E image generation model to analyze text structure and generate visual representations, and used Firebase to handle storage and user preferences. Accessibility features like text-to-speech and color customization were baked into the design from the start.

Challenges we ran into

• Designing visuals that are both accurate and simple enough to aid comprehension.
• Making sure the app was fast and lightweight, even when generating complex maps.
• Building with accessibility in mind, from color contrast to font choices to screen reader support.

Accomplishments that we're proud of

• Turning a personal challenge into a tool that could genuinely help millions of students.
• Creating a smooth user experience that adapts content in real time.
• Prototyping a functional app in a short hackathon timeframe.

What we learned

• The importance of designing for inclusivity first, not as an afterthought.
• How accessibility features benefit all learners, not just those with disabilities.
• Technical skills in mapping text structures into interactive visuals and optimizing performance.

What's next for VisualLearn

• Expanding the range of visual outputs (timelines, comics, infographics).
• Adding multi-language support for ESL learners.
• Partnering with schools and accessibility organizations to pilot the tool.
• Turning the prototype into a fully deployable mobile app available on app stores.

Built With

• aceternity-ui
• firebase
• image-generation
• next.js
• openai-api
• tailwindcss