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)

TypeScript Interview Questions - Coding Interview 2023

TypeScript Interview Questions - Coding Interview 2023udemy

Category: TypeScript, Preparing for an interview
Duration 2 hours 56 minutes 26 seconds
Server side rendering with Next + React

Server side rendering with Next + Reactudemy

Category: React.js, Next.js, MongoDB, OpenGL Shading Language (GLSL)
Duration 29 hours 43 minutes 19 seconds
Microservices with NodeJS, React, Typescript and Kubernetes

Microservices with NodeJS, React, Typescript and Kubernetesudemy

Category: TypeScript, React.js, Node.js, Kubernetes
Duration 95 hours 13 minutes 4 seconds
The Road to Next

The Road to NextRobin Wieruch

Category: React.js, Next.js
Duration 30 hours 40 minutes 42 seconds
Understanding TypeScript - 2023 Edition

Understanding TypeScript - 2023 EditionudemyAcademind Pro

Category: TypeScript
Duration 14 hours 54 minutes 54 seconds
TypeScript Bootcamp: Zero to Mastery

TypeScript Bootcamp: Zero to Masteryzerotomastery.io

Category: TypeScript
Duration 9 hours 31 minutes 59 seconds
React and Typescript: Build a Portfolio Project

React and Typescript: Build a Portfolio ProjectudemyStephen Grider

Category: TypeScript, React.js
Duration 29 hours 21 minutes 48 seconds
TypeScript Fundamentals: Learn TypeScript from Scratch

TypeScript Fundamentals: Learn TypeScript from Scratchvueschool.io

Category: TypeScript
Duration 1 hour 19 minutes 15 seconds
React and NodeJS: A Practical Guide with Typescript

React and NodeJS: A Practical Guide with Typescriptudemy

Category: TypeScript, React.js, Node.js
Duration 6 hours 54 minutes 59 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