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 ChatBot with Nuxt, TypeScript and the OpenAI Assistants API

Build a ChatBot with Nuxt, TypeScript and the OpenAI Assistants APIzerotomastery.io

Category: TypeScript, ChatGPT, Nuxt
Duration 2 hours 41 minutes
TypeScript Fundamentals: Learn TypeScript from Scratch

TypeScript Fundamentals: Learn TypeScript from Scratchvueschool.io

Category: TypeScript
Duration 1 hour 19 minutes 15 seconds
Next JS: The Complete Developer's Guide

Next JS: The Complete Developer's GuideudemyStephen Grider

Category: Next.js
Duration 15 hours 35 minutes 12 seconds
Testing Next.js Apps with Jest, Testing Library and Cypress

Testing Next.js Apps with Jest, Testing Library and Cypressudemy

Category: Next.js, Cypress
Duration 7 hours 35 minutes 24 seconds
MERN React Node Next.js Multi User SEO Blogging Platform

MERN React Node Next.js Multi User SEO Blogging Platformudemy

Category: React.js, Next.js, Node.js
Duration 20 hours 25 minutes 13 seconds
TypeScript course

TypeScript courseui.dev (ex. Tyler McGinnis)

Category: TypeScript
Duration 6 hours 27 minutes 32 seconds
Magic UI Pro

Magic UI ProDillion Verma

Category: React.js, Next.js, Other (Mobile Apps Development)
Duration
React Query: Server State Management in React

React Query: Server State Management in Reactudemy

Category: TypeScript, React.js
Duration 7 hours 39 minutes 49 seconds
Design Patterns in TypeScript

Design Patterns in TypeScriptudemy

Category: TypeScript
Duration 5 hours 6 minutes 3 seconds