Building an AI Icon Generator using the T3 Stack (Next.js, Prisma, TailwindCSS, Typescript, Dall-E API)
Are you looking to take your web development skills to the next level? Do you want to learn how to build a fully functional icon generator that integrates with third-party services like Dall-E API, AWS, Stripe, and more? Look no further than Web Dev Cody's online course!
With 6 hours of in-depth instruction spread over 32 videos, you'll learn everything you need to know to build a powerful icon generator using the T3 stack. This includes Next.js (pages directory), TypeScript, Tailwind CSS, Next-Auth, and Prisma. You'll also learn how to set up a PostgreSQL database using Supabase and how to upload and serve images to Amazon S3, and deploy to AWS Amplify.
Read more about the course
But this course isn't for beginners. You should have a solid grasp of JavaScript/TypeScript, React, and coding in general before diving in. However, if you've found Web Dev Cody's other full-stack T3 stack tutorials helpful, then this course is perfect for you. You can find his free t3 stack tutorials on his youtube channel https://www.youtube.com/@webdevcody. I recommend watching through some of my videos to get a feel for how I will walk you through this course.
One thing that sets this course apart is Web Dev Cody's teaching style. If you've watched his YouTube channel, you know that he has a knack for breaking down complex topics into easy-to-understand concepts. And to help you truly understand the system you'll be building, he'll provide a high-level diagram of the entire process.
Don't miss out on this opportunity to level up your web development skills with Web Dev Cody's online course. Sign up today and start building your own icon generator in no time.
The source code for this project can be found https://github.com/webdevcody/icon-generator-course and is public for anyone to read through. My idea for this course was another resource to help you understand how a product like this is built from the ground up using the T3 stack.
Watch Online Building an AI Icon Generator using the T3 Stack (Next.js, Prisma, TailwindCSS, Typescript, Dall-E API)
| # | Title | Duration |
|---|---|---|
| 1 | Part 1 - Project Overview | 05:06 |
| 2 | Part 2 - What is the T3 Stack | 10:06 |
| 3 | Part 3 - High Level Diagram | 10:32 |
| 4 | Part 4 - Setting up a Git Repo | 01:19 |
| 5 | Part 5 - T3 Setup | 07:22 |
| 6 | Part 6 - T3 Stack Directory Overview | 16:14 |
| 7 | Part 7 - The Generate Page | 18:53 |
| 8 | Part 8 - Tracking Form Inputs into State | 08:03 |
| 9 | Part 9 - Our First tRPC Procedure | 12:02 |
| 10 | Part 10 - Adding Authentication | 12:28 |
| 11 | Part 11 - Setting up Credits | 10:34 |
| 12 | Part 12 - Dall-E Integration | 08:44 |
| 13 | Part 13 - Mocking Dall-e | 08:38 |
| 14 | Part 14 - Storing Images in s3 | 17:12 |
| 15 | Part 15 - Storing Icon Metadata | 04:55 |
| 16 | Part 16 - Refactor to send back URLs | 06:26 |
| 17 | Part 17 - Stripe & Credits High Level Design | 08:31 |
| 18 | Part 18 - Integrate with Stripe | 10:29 |
| 19 | Part 19 - Redirect to Checkout | 06:03 |
| 20 | Part 20 - Stripe Webhook | 09:49 |
| 21 | Part 21 - Increment Credits to User | 07:15 |
| 22 | Part 22 - Improve UI + Header | 18:47 |
| 23 | Part 23 - Landing Page | 16:42 |
| 24 | Part 24 - Various UI Improvements | 27:06 |
| 25 | Part 25 - Setup Supabase DB | 06:59 |
| 26 | Part 26 - Deploy to Amplify | 24:06 |
| 27 | Part 27 - Collections Page | 11:22 |
| 28 | Part 28 - Community Page | 05:57 |
| 29 | Part 29 - Display Credits | 04:29 |
| 30 | Part 30 - Quantity Input | 22:13 |
| 31 | Part 31 - Icon Shape, Style, Alert | 11:14 |
| 32 | Part 32 - Final Remarks | 03:47 |
Similar courses to Building an AI Icon Generator using the T3 Stack (Next.js, Prisma, TailwindCSS, Typescript, Dall-E API)
Design Patterns in TypeScriptudemy
Next.js EcommerceBrad Traversy
The Software Architect Mindset (COMPLETE)ArjanCodes
TypeScript with Vue.js 3vueschool.io
NFT Marketplace in React, Typescript & Solidity - Full Guideudemy
TinyHouse: A Fullstack React Masterclass with TypeScript and GraphQLfullstack.io
Nest.js Microservices: Build & Deploy a Scaleable Backendudemy
Next JS & Typescript with Shopify Integration - Full Guideudemy
