BubbleMathics

Links

https://github.com/JustinScitech/BubbleMathics

Inspiration

BubbleMathics is inspired by the desire to make learning math fun and engaging for young students. We wanted to create a competitive and interactive platform that motivates kids to learn through play and competition.

What it Does

BubbleMathics is a cute, educational app designed for young students. It offers a competitive platform where kids can compete against each other in math challenges. The app includes:

Math problems in addition, subtraction, and multiplication.

A leaderboard to track who has the most points in the session, with different ranks.

A waiting room where students can wait for others to join before starting a game (minimum of 3 students required).

A competitive, Kahoot-like platform where kids can answer questions and earn points.

User authentication using PropelAuth for secure login and account management. 

How We Built It

We built BubbleMathics using a combination of modern web technologies and services:

Frontend: Developed with React.js, using components from libraries like Framer Motion for animations.

Backend: Built with Express.js and MongoDB Atlas for the database.

Authentication: Integrated PropelAuth for user authentication and account management.

Hosting: Deployed on Netlify for the frontend and a Node.js server hosted on Vercel for the backend.

Real-time Communication: Used Socket.io for real-time updates and multiplayer functionality.

Other Tools: Utilized SauceLabs for testing, and Neurolo to connect to our database.

Challenges We Ran Into

Real-time Multiplayer Functionality: Implementing and synchronizing real-time updates for multiple users was challenging. Ensuring that the waiting room and game state were accurately reflected for all players required careful handling of Socket.io events.

User Authentication: Integrating PropelAuth and managing user sessions securely was complex but crucial for providing a smooth user experience.

Database Management: Designing a schema that efficiently handled game data, user information, and leaderboard statistics in MongoDB required careful planning.

Accomplishments That We're Proud Of

Interactive and Fun Design: We successfully created a visually appealing and engaging interface that captures the fun while making learning enjoyable.

Real-time Updates: Implemented a real-time multiplayer system that works smoothly, allowing kids to join games, compete, and see live updates on the leaderboard.

Secure Authentication: Integrated PropelAuth to ensure secure user login and account management, providing a safe environment for young students. 

What We Learned

Real-time Web Applications: Gained a deeper understanding of building real-time applications using Socket.io and handling synchronization across multiple clients.

User Authentication: Learned about integrating third-party authentication services and managing user sessions securely.

Engaging UI/UX Design: Improved our skills in designing engaging and user-friendly interfaces that appeal to young audiences.

What's Next?

Expanding Content: Adding more types of math problems and introducing coding challenges to broaden the educational scope of the app.

Enhanced Leaderboards: Implementing more detailed and dynamic leaderboards that track long-term progress and achievements.

Mobile App: Developing a mobile version of BubbleMathics to reach a wider audience and provide a more accessible learning platform.

Community Features: Adding features like friend lists, chat, and group challenges to foster a sense of community among users.

Parental Controls: Introducing features that allow parents to monitor their child's progress and control their interaction within the app.