Card-Racer

• 

  solo-view of video-chat page

• 

• 

• 

• 

  create a flashcard collection page!

Inspiration

We were motivated during the pandemic in which many of our peers and ourselves lost motivation to study for tests and were struggling with school. In order to reinvent the way studying with flashcards worked, we wanted to gamify it in a competitive way that made it feel like a video game and entertaining for those using the app.

What it does

Card Runner allows users to create their own private meeting rooms, voice + video call with their friends, and create/borrow other user's flashcard sets to study for tests through a competition based game in which users must enter the answer to the flashcard to earn points and beat out their opponents.

How we built it

We used Agora, Vue.js, JS, CSS, HTML, and Firebase Firestore.

Challenges we ran into

For the first 4 hours, there was an error in which the camera didn't render out and we had no idea how to fix it.

Accomplishments that we're proud of

We're proud of being able to create a real-time rendering leaderboard, log/chat system, while balancing and creating a seamless video calling platform + flashcard functionality.

What we learned

We learned more on how to use Firebase to create a real-time rendering system.

What's next for Card-Racer

We're looking to expand into more games like Apples to Apples, 20 questions, Charades, and more. Also, we're thinking of open-sourcing the flashcard sets to allow groups to borrow other's flashcard sets and have more fun studying with more random cards.

Built With

• agora
• css
• firebase
• html
• javascript
• vue.js