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

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

Comments

0 comments

Want to join the conversation?

Sign in to comment

Similar courses

Advanced NextJS WooCommerce REST API, TailwindCSS - Part-2

Advanced NextJS WooCommerce REST API, TailwindCSS - Part-2

Sources: udemy
This is part two of the course "Advanced NextJS WooCommerce With REST API And TailwindCSS". If you haven't already please complete the previous part of the cour
8 hours 6 minutes 25 seconds
Next.JS with Sanity CMS - Serverless Blog App (w/ Vercel)

Next.JS with Sanity CMS - Serverless Blog App (w/ Vercel)

Sources: udemy
We will start with integration of a very clean application layout I have prepared for you. We will follow latest practices of React and Next JS, this means we w
13 hours 5 minutes 9 seconds
Complete Next.js Developer in 2023: Zero to Mastery

Complete Next.js Developer in 2023: Zero to Mastery

Sources: zerotomastery.io
Learn Next JS from industry experts using modern best practices. The only Next JS tutorial + projects course you need to learn Next JS, build enterprise-level R
27 hours 12 minutes 37 seconds
Mastering Next.js 13 with TypeScript

Mastering Next.js 13 with TypeScript

Sources: codewithmosh (Mosh Hamedani)
Clear. Concise. Comprehensive. Tired of piecing together disconnected tutorials or dealing with rambling, confusing instructors? This course is for you! It's pe
5 hours 16 minutes 33 seconds
React & TypeScript Chrome Extension Development [2021]

React & TypeScript Chrome Extension Development [2021]

Sources: udemy
Hi! Welcome to the comprehensive Chrome Extension Development course using modern web frameworks in 2021. This is the only course on Udemy that is focused on bu
8 hours 52 minutes 35 seconds