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

5h 53m 23s
English
Paid

Course description

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

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 32 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing

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

0:00
/
#1: Part 1 - Project Overview

All Course Lessons (32)

#Lesson TitleDurationAccess
1
Part 1 - Project Overview Demo
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

Unlock unlimited learning

Get instant access to all 31 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription

Comments

0 comments

Want to join the conversation?

Sign in to comment

Similar courses

Design Patterns in TypeScript

Design Patterns in TypeScript

Sources: udemy
Learn All of the 23 GoF (Gang of Four) Design Patterns and Implemented them in TypeScript. Design Patterns are descriptions or templates that can be repeatedly
5 hours 6 minutes 3 seconds
Stripe for SaaS

Stripe for SaaS

Sources: fireship.io
You will build a Stock Photography Subscription SaaS Product from scratch where users can sign up for a subscription to access a library of images. Every monetized action is tra...
1 hour 11 minutes 29 seconds
Build A Canva Clone

Build A Canva Clone

Sources: Code With Antonio
In this 18-hour course, we will create a platform for graphic design with numerous features. You will learn how to create an intuitive editor for cust...
17 hours 48 minutes 39 seconds