Gift Spending

Inspiration

Every holiday season, I’d end up overspending on gifts—forgetting budgets, repeating presents, or missing important occasions. I realized I wasn’t alone: friends and family in my circle struggled with the same chaos. I wanted a simple, no-fuss tool to fix this—something without logins, complicated setups, or hidden fees, just focused on keeping gift spending intentional.

What it does

GiftBudget Planner is a lightweight web tool for managing annual gift spending. It lets users set budget limits, track upcoming gift occasions (birthdays, holidays, weddings), store recipient preferences/hobbies, log expenses in real time, and calculate group gift splits—all while visualizing spending through animated charts to stay on track.

How we built it

I started by mapping core user needs: budget tracking, reminders, and organization. Using React for the frontend (with Vite for fast builds) and Tailwind CSS for responsive design, I built out the dashboard, recipient library, and expense log. GSAP handled all animations (parallax hero sections, hover effects, chart transitions), while Chart.js visualized budget vs. actual spending. LocalStorage stored user data for instant access, and Moment.js managed date logic for urgent/upcoming occasion badges.

Challenges we ran into

The biggest hurdle was balancing polished animations with performance—too many effects slowed the app, so I optimized scroll-triggered animations to only load when sections entered the viewport. I also struggled with the group gift split logic (round-up/round-down calculations) and ensuring budget math updated in real time without glitches. Additionally, making the UI intuitive for non-technical users required multiple rounds of testing to simplify input forms.

Accomplishments that we're proud of

We created a tool that’s both functional and visually engaging—animations enhance UX without feeling overwhelming. The real-time budget tracking works flawlessly, and users consistently say the recipient profile library eliminates "gift block" by storing past presents and preferences. Most importantly, beta testers reported staying within their gift budgets for the first time in years.

What we learned

I mastered balancing form and function—animations need to serve a purpose (not just look good) to keep users engaged. I also learned the value of iterative testing: simplifying the expense entry form (e.g., auto-filling recipients from the library) drastically improved user adoption. Finally, I deepened my understanding of client-side data management (LocalStorage) to create a seamless, login-free experience.

What's next for this project

First, I want to add support for recurring occasions (annual birthdays/holidays) to reduce manual entry. Next, I’ll integrate a simple export feature (CSV) so users can save expense logs for tax/personal records. I also plan to add regional holiday datasets for more localized relevance, and test a mobile app version to make on-the-go expense logging even easier.

Built With

• chart.js
• javascript
• react
• tailwind-css