Building an AI Icon Generator using the T3 Stack (Next.js, Prisma, TailwindCSS, Typescript, Dall-E API)

5h 53m 23s
English
Paid

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)

Join premium to watch
Go to premium
# 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)

Build a Microservices app with .Net and NextJS from scratch

Build a Microservices app with .Net and NextJS from scratchudemy

Category: Next.js, C Sharp (C#)
Duration 31 hours 42 minutes 57 seconds
TypeScript Design Patterns And SOLID Principles

TypeScript Design Patterns And SOLID Principlesudemy

Category: TypeScript
Duration 16 hours 58 minutes 54 seconds
Understanding TypeScript - 2023 Edition

Understanding TypeScript - 2023 EditionudemyAcademind Pro

Category: TypeScript
Duration 14 hours 54 minutes 54 seconds
Mastering Next.js 13 with TypeScript

Mastering Next.js 13 with TypeScriptcodewithmosh (Mosh Hamedani)

Category: TypeScript, Next.js
Duration 5 hours 16 minutes 33 seconds
Shadcn UI & Next JS - Build beautiful dashboards with shadcn

Shadcn UI & Next JS - Build beautiful dashboards with shadcnudemy

Category: Next.js
Duration 8 hours 12 minutes 38 seconds
Next40. Master Next.js 14 in 40 days of epic projects

Next40. Master Next.js 14 in 40 days of epic projectsReed Bargernextjs40.com

Category: Next.js
Duration 4 hours 52 minutes 49 seconds
React Simplified - Next.js

React Simplified - Next.jswebdevsimplified.com

Category: Next.js
Duration 9 hours 33 minutes 4 seconds
Ultimate Next.js Course 2024 Edition

Ultimate Next.js Course 2024 Editiondevelopedbyed.com

Category: Next.js
Duration 29 hours 39 minutes 9 seconds
TinyHouse: A Fullstack React Masterclass with TypeScript and GraphQL

TinyHouse: A Fullstack React Masterclass with TypeScript and GraphQLfullstack.io

Category: TypeScript, React.js, GraphQL
Duration 30 hours 50 minutes 42 seconds