Inspiration Mobile app development is slow and expensive, creating a massive barrier for brands trying to secure a spot on their customers' phones. I wanted to tackle this real-world problem by creating a tool that completely removes friction allowing any business, startup, or organization to turn their existing web presence into a mobile wallet utility instantly.
What it does Users simply paste a website URL, and the platform automatically scrapes the site to extract its brand colors and logos. It instantly displays a live, editable preview of a branded digital card (such as a loyalty card, ticket, or coupon) on a simulated smartphone screen. Once satisfied, the user can immediately download a functional digital pass ready for Apple or Google Wallet.
How we built it The frontend is built with responsive HTML5, CSS3, and JavaScript, utilizing QRCode.js to handle real-time, dynamic barcode rendering. The backend is entirely powered by a Python and Flask architecture. I used BeautifulSoup to handle the web scraping and automated asset extraction, alongside Python’s native file handling and data packaging utilities to compile the downloadable wallet files.
Challenges we ran into Website layouts vary drastically across the internet, making asset extraction highly unpredictable. However, my absolute biggest challenge was putting all of these moving pieces together the frontend UI, the scraping logic, and the file packaging backend and getting the entire system to actually run seamlessly as a single, cohesive application. Debugging the data flow between Python and JavaScript took deep persistence.
Accomplishments that we're proud of As a first-year student, I am incredibly proud to have built a fully working, end-to-end prototype by myself. Seeing the real-time preview system update seamlessly as a user types without requiring any page refreshes and successfully exporting a functional wallet file felt like a massive milestone.
What we learned This project was a massive accelerator for my technical skills. I learned an incredible amount more about advanced CSS layout design and responsive web development, as well as the nuances of web scraping using Python. I also gained a much deeper understanding of how to bridge a user interface with complex backend server logic.
What's next for Romax Digital Version 2 will transition this tool into an enterprise-ready workspace. I plan to add real-time, Figma-like collaborative design rooms so teams can build passes together live. Furthermore, I will integrate an AI Design Chat assistant that can read the scraped brand assets and instantly generate 3 to 4 sleek, professional card variations based on conversational prompts.
Built With
- beautifulsoup4
- css3
- flask
- html5
- javascript
- python
Log in or sign up for Devpost to join the conversation.