Inspiration
We were inspired by the growing youth loneliness crisis and the lack of meaningful tools that help students connect with their community. We wanted to create something that encourages real-life engagement, reflection, and celebration of small but powerful moments.
What it does
Cardami is a digital card collection game where students complete themed community challenges centered on courage, kindness, exploration, and sustainability. After completing a challenge, users write a short reflection and unlock a custom memory card. The result is a personal, visual collection of experiences that fosters a sense of belonging and growth.
How we built it
We built Cardami using React and JavaScript for the frontend, styled with Tailwind CSS and Mantine UI for consistent, responsive design. Smooth card animations were powered by React Spring. For backend functionality, we used Firebase for authentication and Firestore for real-time data storage, managing user data and card entries efficiently.
Challenges we ran into
We faced challenges with syncing user card data between the global card collection and individual user entries, especially when handling image uploads and reflections. Designing a UI that was both playful and clean also required careful iteration.
Accomplishments that we're proud of
We’re proud of creating a fully functional prototype within the hackathon timeframe that blends design, interactivity, and reflection. The card categories and lore added a unique storytelling layer that resonated with testers, and we’re especially proud of how engaging the overall experience feels.
What we learned
We learned how to work more efficiently with Firebase’s data structure, how to combine multiple component libraries effectively, and how to design an experience that balances fun with purpose. We also deepened our understanding of user-centered design principles.
What's next for Cardami
Next, we plan to introduce social features like card trading and group challenges, expand the card set, and explore partnerships with student organizations and campus events. We also hope to pilot Cardami with real students to gather feedback and continue building a tool that helps young people connect more meaningfully.
Built With
- firebase
- javascript
- mantine
- react
- react-spring
- tailwind
Log in or sign up for Devpost to join the conversation.