https://font-joy-studio.lovable.app/

so i'm trying to make a font pairing tool that allows you to look at font pairings in a more intuitive way. it's lowkey referencing this site https://fontjoy.com/, but i want the ui to be a bit more natural. so it's kinda gonna be like pinterest too, where if i look up fonts, i can see how they may be paired, and by clicking into them, i can see who designed the font, see the font designer's own page, and see the other fonts that they also made + can font pair them as well.

the ux for font pairing is also similar to https://coolors.co/, if you wanna check it out to understand what i'm going for. but ya basically you can lock, drag, edit the text and hit the space bar to generate pairings.

this is a React project and i'm using Supabase for the backend/database.

so right now this is just using google fonts (bc it's open source), but when i tried to scale the product so that it updates with more recent font drops on google, or has the entire database, the whole thing seemed to break.

here's what i need:

1. first, look at the current codebase to understand what's there
2. set up a Supabase table to store the full Google Fonts catalog
3. write a script that fetches all fonts from the Google Fonts API and populates the Supabase database
4. update the React app to pull fonts from Supabase instead of however it's currently doing it
5. make sure the font pairing, locking, and spacebar generation still work with the new setup