AI Custom - Picture Search Engine with Dynamic Grid Gallery

Hey Everyone! :tada:

I just wanted to share my ongoing experience with testing custom components. So far, only the AI component is fully functional, so I decided to try and create a picture search engine using the free API from Pixabay. Check out the result here: https://aicustom-gallery.glide.page/.

The app is simple to use: based on your input, the search engine retrieves images, and the AI component displays a dynamic grid gallery that you can fully customize. You can, for instance, align the grid with up to 11 columns, using a slider above the gallery that’s connected to the data editor.

You can also tweak the search engine’s settings, such as picture orientation, color preferences, and images per page, etc …

Key Takeaways:

  • You don’t always get the same result from the same query.
  • It’s better to split your requests into smaller parts.
  • Learning Tailwind CSS classes is crucial, just like CSS.
  • Always ensure the component stretches across the entire width of its container.
  • The console is your friend! Use it to check code, especially for Tailwind classes.
  • Use the word “reset” to clear all data.
  • Sometimes, it’s necessary to use a private browsing window (navigation privĂ©e).
  • JSON is by far the best way to bind columns to the component.

It’s been a fun journey! You can download (free) the template for both the starting point and the final version directly from the app.
Marco



6 Likes

Fabulous - lots of fun, and great demonstration of what can be done with the new tools - congrats!

1 Like