Coder Social home page Coder Social logo

abseas's Introduction

Inspiration

Schooling is expensive. The average private preschool tuition in California is $12,967 per year—a hefty cost not every parent can front. However, a preschool education greatly sets up children to success in elementary school, snowballing to success later on in their academic careers. How can we empower the children of these parents to take these crucial first steps in their educational future?

Music is also shown to enhance recall and enhances brain development in young children. That got us thinking: Is there a way to teach children the knowledge they miss in preschool through song and dance?

What it Does

ABSeas is a web application aimed to teach children about core topics in preschool. These include things like: counting, letters, sharing, and manners. To enhance engagement, we opted to deliver these key topics through music, allowing kids to sing along, as well as adding fun pictures relating to the song to visually solidify the connection between music and ideas.

Crafting use case flows

To help make learning accessible and enjoyable for every child, we focused on three key areas:

Content Synchronization: We've blended essential preschool concepts with catchy songs and engaging visuals, turning a click into a leap towards fun and immersive learning.

Intuitive Interaction: Designed for simplicity, our platform allows kids to easily explore and learn through bold visuals and interactive elements, tapping into their natural curiosity.

Progressive Learning: Our content is capable of growing with the learner, starting with basics like the ABCs and advancing to more complex topics like social skills at the learner's request

Our approach emphasizes ease of use, engaging content, and adaptability, making learning a delightful journey for all children. Use Case Flow 1

Design Process

When designing ABSeas, we aimed for simplicity in learning and integrated preschool knowledge with engaging music and visuals. Our interface is designed with bold colors and large, interactive elements, making it easy for young learners to navigate on tablets or for parents to help on desktops. We've transformed essential preschool concepts into catchy songs and colorful visuals that grab attention and aid memory. Design Process 1

ABSeas offers a personalized learning experience. It subtly guides users—both kids and parents—through its modules, ensuring a smooth flow of content. This approach helps avoid overwhelming choices, making each interaction with ABSeas feel tailored and effortlessly educational, yet natural and fun.

Design Process 2

How we built it (Technical)

Frontend We utilized the current standard tech stack in web development. Frontend Tech Stack

Backend Our backend pipeline utilizes cutting edge artificial intelligence technologies. Backend Tech Stack

These include:

  • Anthropic Claude, a competitor to ChatGPT boasting better written and more creative responses
  • Suno AI, the latest and greatest in AI-generated songs and music
  • OpenAI’s Dalle 3
  • Eleven Labs, one of the leaders in voice cloning and text-to-speech
  • Open AI Whisper

Our song creation pipeline is shown below: Pipeline

Challenges we ran into

Integrating Firebase and various APIs posed a key challenge in our project, requiring tight coordination between frontend interactivity and backend stability. We had to ensure Firebase's real-time database synced flawlessly with many synchronous API calls.

Accomplishments that we're proud of

We’re excited about infusing our product with generative AI, giving a modern twist to learning with visuals and music, just like the ABCs did for us. It feels great to build something innovative with the potential to really make a difference.

What we learned

We learned how to multiprocess, process audio, refine frontend styling, and improve user interaction flow while delivering a professional and intuitive user experience.

Sources

abseas's People

Contributors

idkwhatimd0ing avatar dylanvu avatar jaslavie avatar jotalis avatar

Stargazers

Priyansh Shah avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.