Pawblo Picatso

Home
Generating an image
Result
Gallery of all user photos
Your photos

Create cat art with DALLE-2 and share them. Explore a gallery of cat art created by the community.

Inspiration

I am a dog person and dog owner, but I have to admit that cats are pretty cute. I've wanted to use some form of API from OpenAI, and I decided that this week's theme could be worked with generating some feline art.

What it does

The primary function of this web app is to generate picture of adjective cats doing verbs. You must be logged in to generate new feline friends, but when you are logged in, you can also view the cats produced by other users, and heart the ones you find cute or interesting. You can also view your own cats.

How we built it

I built this project using the t3-stack. If you don't know what t3-app is, it is kind of like create-react-app, just designed for Next.js. You can do it too by running npm create t3-app@latest (I used pnpm). The specific parts I used were Next.js, Tailwind, and TRPC. t3 also comes pre-configured with Zod and React Query.

I used Cloudinary to host the generated images. To store meaningful data and the links to the images, I used Supabase's database. I let Auth0 handle the authentication layer. I used a .tech domain from domain.com, picatso.tech.

Challenges we ran into

This was my first project using the t3-stack, which is a type-safe and DX focused stack using Next.js, Prisma, Tailwind, TRPC, and Next Auth. I spent a lot of time watching videos on TRPC and how the parts matched together, burning a lot of time considering I started with around 24 hours left.

I ran into a lot of issues with Prisma, as I haven't used since October and the ESLint rules that t3-stack introduced to me made me rethink a lot of things. I eventually pivoted off Prisma and Next Auth to Supabase and Auth0, but I will make a project with the former in the future.

I also ran into issues with Supabase's realtime. It just seems not as developed or able to respond to updates as well as Firebase's realtime snapshots.

Accomplishments that we're proud of

I decided to start doing the hackathon with around 24 hours left, so completing it shows that when focused, I can create a finished product in a short amount of time, especially when I'm not spending days afflicted with decision fatigue.

What we learned

This was my first project using the t3-stack, and more specifically, TRPC. TRPC has really made me reanalyze my old way of setting up RESTFUL routes with Next, as the typesafety and autocompletion is very handy and makes my code feel more stable. I also set up a project with Auth0 for the first time, as well as used an OpenAI endpoint in DALL-E 2 for the first time.