Picatso is a full-stack wb app that generates 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 like the ones you find cute or interesting. You can also view your own cats.
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.
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.
To run the project locally, follow these steps:
- Clone the repository to your local machine.
- Navigate to the root directory of the project.
- Run
npm installto install the necessary dependencies. - Run
npm run devto start the development server. - Visit
http://localhost:3000in your web browser to view the application.
This is a T3 Stack project bootstrapped with create-t3-app.
We try to keep this project as simple as possible, so you can start with just the scaffolding we set up for you, and add additional things later when they become necessary.
If you are not familiar with the different technologies used in this project, please refer to the respective docs. If you still are in the wind, please join our Discord and ask for help.
To learn more about the T3 Stack, take a look at the following resources:
- Documentation
- Learn the T3 Stack — Check out these awesome tutorials
You can check out the create-t3-app GitHub repository — your feedback and contributions are welcome!
Follow our deployment guides for Vercel, Netlify and Docker for more information.
This is a T3 Stack project bootstrapped with create-t3-app.
We try to keep this project as simple as possible, so you can start with just the scaffolding we set up for you, and add additional things later when they become necessary.
If you are not familiar with the different technologies used in this project, please refer to the respective docs. If you still are in the wind, please join our Discord and ask for help.
To learn more about the T3 Stack, take a look at the following resources:
- Documentation
- Learn the T3 Stack — Check out these awesome tutorials
You can check out the create-t3-app GitHub repository — your feedback and contributions are welcome!
Follow our deployment guides for Vercel, Netlify and Docker for more information.