CF

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.

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.

Additional

https://github.com/webdevcody/icon-generator-course

About the Author: WebDevCody

WebDevCody thumbnail

WebDevCody is the YouTube and paid-course brand of Cody Seibert, a US developer focused on practical full-stack tutorials covering Next.js, React, and the surrounding modern web stack. The channel is known for end-to-end project builds rather than isolated framework tours.

His CourseFlix listing carries two WebDevCody courses on the modern Next.js / full-stack JavaScript stack. Material is paid and aimed at intermediate JavaScript developers building real applications.

Watch Online 32 lessons

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
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

Related courses

Frequently asked questions

What prerequisites are needed for this course?
Before starting this course, you should have a fundamental understanding of web development and programming concepts. Familiarity with JavaScript is essential, as the course uses Next.js and TypeScript. Basic knowledge of web authentication and databases will also be beneficial, given the course's use of Next-Auth and Supabase.
What project will I build in this course?
The course guides you through building a fully functional AI Icon Generator. This includes integrating third-party services like the Dall-E API for image generation and AWS for image storage. You'll also implement features like user authentication, credit management with Stripe, and a PostgreSQL database setup using Supabase.
Who is the target audience for this course?
This course is designed for web developers who want to advance their skills in full-stack development using the T3 Stack. It's ideal for those interested in integrating third-party APIs and deploying applications using AWS services. Developers looking to learn about modern web technologies like Next.js and Prisma will find this course particularly useful.
What specific tools and platforms are taught in the course?
The course covers several tools and platforms including Next.js for building the application, TypeScript for type-safe programming, Tailwind CSS for styling, and Prisma for database interactions. Additionally, it teaches the use of Supabase for PostgreSQL database management, AWS S3 for image storage, and AWS Amplify for deployment.
What topics are not covered in this course?
This course does not cover the basics of JavaScript or general programming. It also does not delve into machine learning or in-depth database management outside the scope of what's needed for the icon generator project. The focus is on integrating existing APIs and using the T3 Stack for application development.
How much time will I need to complete the course?
The course consists of 32 lessons, totaling 6 hours of video instruction. Depending on the time you spend on exercises and implementing the project, you might need additional hours for practice. It's feasible to complete it in a few weeks if you dedicate a couple of hours each day.
How does this course help in advancing my career?
By completing this course, you'll gain practical experience in building and deploying a full-stack application using modern technologies like the T3 Stack. Skills acquired here are transferable to other web development projects, especially those involving API integration and cloud services. This could be a valuable addition to your portfolio, demonstrating your ability to manage complex web development tasks.