Chicken Learn

When the homepage loads, text animates into view, and a 3D chicken avatar dances. You can interact by dragging and clicking, producing sound
Play a mini game with Mr. Paw! On load, text animates in, and a 3D cat avatar meows and dances. Interact by dragging and clicking!
Enjoy smooth slide-in/out effects that showcase new words with definitions, pronunciations, parts of speech, and sometimes audio!

Inspiration

The idea for Chicken Learn came from my passion for making learning engaging and fun. I aimed to create a platform that combines educational content with interactive 3D elements and animations to capture users' interest, especially children.

What It Does

Chicken Learn is a fun, interactive website featuring 3D elements and engaging animations designed to help users learn new words. The user-friendly interface allows for an immersive learning experience that makes vocabulary building enjoyable.

How We Built It

The project was developed using Svelte and JavaScript for the front end, enabling efficient component management and reactive programming. We integrated 3D elements through Spline, creating a visually appealing interface. CSS animations were crafted to enhance user experience and make interactions more lively. We sourced random words from the Random Word Generator API provided by API Ninja and obtained their definitions from DictionaryAPI.

Challenges We Ran Into

One of the main challenges was coordinating different components and ensuring seamless transitions, which proved initially complex. Layering elements using z-index was difficult, and mobile integration required significant effort to ensure accessibility across various platforms. Additionally, I dedicated a considerable amount of time to animating the characters, which involved learning the Spline framework.

Accomplishments We're Proud Of

We successfully created an interactive platform that not only looks great but also effectively teaches users new vocabulary. The integration of 3D visuals and animations received positive feedback during testing, showcasing the potential of combining education with entertainment.

What We Learned

Throughout this project, I learned the importance of optimizing web performance when incorporating complex elements like 3D graphics. I gained experience in using Svelte and CSS animations, enhancing my web development skill set. I also deepened my understanding of API integration for efficient data fetching and honed my skills in using the Spline framework for 3D design and animation, creating engaging user experiences.

What's Next for Chicken Learn

In the future, we plan to expand Chicken Learn by adding more interactive lessons, incorporating gamification elements to encourage regular use, and exploring different educational topics beyond vocabulary. We're also considering user feedback to make iterative improvements to the platform.