How to Build a Full Stack Meme Generator (ImageKit, Next.js, Auth.js, Drizzle, Neon)
Link to code: https://github.com/webdevcody/meme-generator
Signup for ImageKit’s forever free plan: https://bit.ly/49zmXkt
ImageKit Documentation: https://bit.ly/3VXRK7u
---
00:00:00 Introduction
00:03:57 Initial Setup
00:06:02 Uploading Image
00:07:04 Transformations
00:10:05 Next.js SDK
00:14:14 Uploading Files
00:19:03 ShadCN
00:23:54 Search Bar
00:26:21 Node SDK
00:32:46 Meme Cards
00:35:26 Theme Toggle
00:38:23 Responsive Design
00:41:46 Custom Metadata
00:44:03 Upload Dialog
00:57:12 Image Tags
01:02:12 Customize Page
01:11:14 Position Overlays
01:16:16 Customize Component
01:23:44 Append Overlay
01:27:50 Text Background
01:43:37 Debounce
01:45:31 Image Filters
01:53:14 Download Button
01:59:35 Drizzle ORM
02:02:30 Auth.js
02:07:37 Google Auth Setup
02:12:20 Favoriting Memes
02:24:25 Favorites Page
02:40:30 Authorization Checks
02:44:24 Favorite Counts
02:56:16 Clean up
02:57:13 Other Imagekit Features
---
Become a YT Members to get extra perks!
https://www.youtube.com/@WebDevCody/join
My Products
💀 Scary Story Generator: https://scarystorygenerator.com
🏗️ WDC StarterKit: https://wdcstarterkit.com
📖 ProjectPlannerAI: https://projectplannerai.com
🤖 IconGeneratorAI: https://icongeneratorai.com
Useful Links
💬 Discord: https://discord.gg/4kGbBaa
🔔 Newsletter: https://newsletter.webdevcody.com/
📁 GitHub: https://github.com/webdevcody
📺 Twitch: https://www.twitch.tv/webdevcody
🤖 Website: https://webdevcody.com
🐦 Twitter: https://twitter.com/webdevcody