Zeno Website
Inspiration: This project was inspired by the difficulty of comparing credit card rewards and benefits across different issuers. Most providers present information in a fragmented or marketing-heavy way. The goal was to build a simple, centralized platform that makes cashback rates, points, and annual fees clear.
What We Learned React.js and Vite for modern frontend development Firebase Authentication for secure user login and signup React hooks (useState, useEffect) for managing state JSON data modeling for organizing credit card information UI/UX practices for building responsive and readable layouts
How We Built It
Set up the frontend with React.js and Vite. Integrated Firebase Authentication for user accounts. Created structured JSON objects for issuers and card details. Implemented React Router for navigation. Built a responsive design with a glass-style navigation bar. Added a wallet feature allowing users to save and compare cards.
Challenges: Learning React and Firebase while integrating authentication and data storage. Managing dynamic data flow across multiple React components. Handling image paths between local assets and Firebase Storage. Debugging deployment issues, including broken asset links and Firebase configuration errors. Setting up the website end-to-end and ensuring it worked correctly after each build and deployment.
Outcome: The result is a functioning prototype of a credit card rewards comparison website. Users can browse, log in, and manage cards while viewing clear information on rewards and fees. The project strengthened my understanding of frontend frameworks, authentication, and practical state management.
Log in or sign up for Devpost to join the conversation.