abstract colorful gradient background

About: this, that, etc...

LilyGem

LilyGem is a personal finance companion that goes beyond simple currency conversion. I built this as a real-world application to solve the problem of tracking international transfers and understanding exchange rate patterns over time.

The app features real-time currency conversion, historical rate analysis, transaction tracking, and a custom WebGL shader background that creates dynamic color gradients. It's designed to help users make informed decisions about when to exchange currencies based on historical trends.

This project gave me hands-on experience with several technologies and concepts I wanted to explore in a production environment:

  • Next.js 15 with React 19 and the new Turbopack dev server
  • Authentication: NextAuth v5 with Google OAuth and Supabase adapter
  • Database: Supabase with Row Level Security (RLS)
  • Overcoming API data limitations: Automated exchange rate fetching with cron jobs and smart caching for historical data
  • Data Visualization: Interactive historical exchange rate charts using Recharts
  • WebGL Shaders: Custom fragment shader background with noise-based color palettes
  • Modern UI: Shadcn/UI components with glassmorphism effects
  • Type Safety: Full TypeScript implementation with Zod schema validation
  • State Management: TanStack Query for server state with optimistic updates