Cafe Passport
The Cafe Passport is a personalized, media-rich web application designed to help coffee and cafe enthusiasts log, track, and discover cafes. It functions as a digital journal for all of a user's cafe experiences.
Tech Stack: Django (Python), JavaScript (AJAX), HTML, CSS, interactjs, Plotly, PostgreSQL
Key Features:
- Visit Logging : Users record detailed visits with date, rating, spending, and personal notes.
- Nested Detail Capture : Users log specific menu items with price and individual rating.
- Photo Documentation : Upload photos for the visit and specific photos for each menu item.
- Wishlist Management : Users add cafes to a Wishlist, which automatically tracks visited status.
- Real-Time Sticker Editor : Users personalize photos by dragging, rotating, and resizing stickers directly onto the image.
- Personalized Theming : Users instantly change the application's look by selecting and saving a custom theme.
- Global Cafe Database : All users can browse and search the complete platform database of cafes.
- Advanced Search & Filtering : Find cafes by text search while simultaneously filtering results using multiple tags.
- Personal Statistics : The Stats page provides visual analysis of spending, ratings, and visited cafe tag breakdown.
Soft Skills:
- User-Centric Design (UCD): Designed the AJAX-driven theme system and seven distinct themes to directly address user preferences for personalization, enhancing comfort and visual satisfaction.
- Cross-Functional Communication: Clearly defined the complex, multi-model feature requirements (e.g., transactional logging and media manipulation) to manage project scope and ensure timely completion.
- Documentation: Authored clean, detailed comments within the Python views and the JavaScript StickerManager class to explain complex logic like nested form validation and coordinate state management, ensuring maintainability.
- Architectural Planning: Strategically structured the application using Django CBVs and planned the database schema to support the atomic creation/update of multiple related models within a single, secure user action.
- System Integration: Seamlessly integrated the Interact.js front-end library with custom AJAX endpoints on the Django backend to manage the persistence of real-time dynamic sticker transformations (position, rotation, scale).
- Debugging Complex State: Successfully debugged critical state issues within nested formset validation and managed the complex, real-time coordinate state for dynamic sticker positioning across different screen sizes.
- Adaptability: Quickly pivoted to implement AJAX-based solutions for themes and stickers to achieve the required real-time interactivity, demonstrating flexibility when traditional form submissions limited the desired UX.