Objective
A personal guide to capture and share my NYC experiences before my time in the city runs out. Helps me remember the places I loved, track what I still want to try, and gives friends an easy way to see what I'm into so we can plan hangouts or they can explore spots that match our vibe.
Role
Front-End Development
UX Design
Tools
HTML/CSS/Javascript
Figma
Cursor (Vibe-coding)
The Problem
Disorganized Bucket Lists, Limited Time in NYC
I keep saving places I want to visit in random notes, screenshots, and Instagram saves, only to never look at them again. With limited time left in NYC (unless I get a job! Woop woop), I needed a centralized way to track where I've been and what I still want to experience. Friends kept asking for recommendations or wanting to explore together, but I had no easy way to share my curated list.
The Opportunity
From HTML/CSS Hand-Coding Assignment to Real Solution for Saving Recommendations
When my technology course required building a website with "one table, one ordered list, and a nested list," I saw a chance to solve my actual problem. Instead of making another practice site, I could create something I'd genuinely use—turning rigid requirements into design constraints that pushed creative solutions.
I chose to hand-code everything first (no AI assistance) to truly understand the fundamentals before enhancing with modern tools.
The Solution
A Living Guide to my NYC Adventures
A responsive, modular website that I can share with friends, family, and keep track of what I loved doing.
Interactive Website: Gallery of My NYC Bucket List
Explore Activities, Sightseeing Places, Museums, and Work Spots with Personal Commentary
Places I want to go with citations, links, and more information.
Personal commentary as to why I want to try somewhere, or why I loved it, with visual filters (blue for loved, grey for to-do).
Filter by To-Do or Loved Items, As Well as Boroughs/Neighbourhoods
Filter easily with "All," "To-do," and "Loved", and select boroughs so you can easily see where you might want to go for the day.
Responsive to Different Screen Widths
The responsive design adapts seamlessly across desktop, tablet, and mobile.
Explore the live site to see my recommendations and discover somewhere new.
Sketching and Hand-Coding
Planning and Designing with Figma, Coding with Phoenix Code
Overall Process at a Glance
Planning the Overall Vibe and Brainstorming Maintainable Solutions
Planning a Grid Layout for Modularity and Easy Maintenance
The idea was that I would update this list semi-frequently whenever I finish an activity, or discover one that I really want to do. This meant that I didn't want to fuss around with placing elements: I needed a quick way to enter information and populate it in place without further thought.
Initial Inspirations
Hand-Coding: Fleshing Out Details
Creating Figma Mock Screens
I created several mock up screens on Figma to better understand what I would be trying to code, so I could focus on technical implementation instead of figuring out the design as I go.
Mock Screens on Figma
Hand-Coding
Through experimentation, peer consultation, and self-directed learning, I translated my Figma designs into semantic HTML/CSS:
Set up a modular CSS architecture with root variables for colours, spacing, and typography
Created reusable card components with consistent styling
Implemented responsive grid layouts
Established a type scale and font hierarchy
Built semantic HTML structure with data attributes for future filtering
Ensured mobile responsiveness across breakpoints
Added subtle hover states and micro-interactions
Coding and Annotating With Comments
During the process of transferring the design from mock-up to reality, I learned a lot new CSS tips along the way. In instances where I referenced a tutorial, I clearly annotated this on my file as comments so that I could give proper credit to where I learned the information from. I also annotated the code with comments of my own, to better explain what lines of code are doing for my own reference, and for others to understand too.
Citing Resources I Used to Code Certain Elements
Considering Table Responsiveness in Narrow Width Screens
The real challenge? Making tables not look terrible on phones. I decided to hide columns strategically—keeping only what you'd need while walking around: name, location, and that all-important "to-try" or "loved" status.
Work Spots Table Responsiveness, Demonstrated with Tablet and Mobile Resizing
Experimenting with AI Code
Adding Javascript Filtering and JSON Data Management with AI-Coding Tools
AI Coding as a Tool for Productivity and Experimentation
After completing the hand-coded foundation, I identified opportunities to improve maintainability and user experience. Managing 50+ entries directly in HTML was becoming inefficient: each update required careful code navigation and risk of syntax errors.
I chose Cursor for AI-assisted development to accelerate feature implementation while maintaining control over the codebase.
Visual-First Development
Cursor's strength lay in translating visual requirements into functional code. My workflow consisted of:
Creating detailed mockups in Figma
Providing Cursor with specific implementation requirements
Iterating through screenshot-based feedback for precise adjustments
Javascript Filtering By Status and Borough for User Experience
Building on the data attributes established during hand-coding ("to-try" and "loved" status), I implemented JavaScript filtering that allows users to quickly sort content by status and borough—important for on-the-go decisions.
JSON Data Management for Easier Entry Addition/Removal/Editing
The most significant improvement was migrating from HTML-embedded content to a JSON-based data structure. This transformation:
Reduced update time from ~5 minutes minutes to under 2 minute per entry
Eliminated risk of breaking site functionality during content updates
Created a scalable foundation for future features
Cursor completed the migration of 50+ entries in under 5 minutes, demonstrating the efficiency gains of AI-assisted development when paired with clear technical requirements.
Before: Must Find the Proper Code to Edit, Or Else Risk Breaking the Code
After: Formatted Text to Edit, Easier to Maintain
Key Takeaways & Next Steps
Key Takeaways
The Power of Personal Projects
Solving your own problem keeps you motivated through technical challenges
Hand-coding first gave me the foundation to direct AI effectively
Real usage drives continuous improvement (I actually maintain this!)
Technical Growth
AI tools accelerate development when you understand the goal
JSON structure makes updates sustainable
What's Next
Exploring more complex state management
Building tools that solve bigger user problems
Continuing to blend manual coding with AI assistance