์ ์๋ง ๊ธฐ๋ค๋ ค ์ฃผ์ธ์.
ByteGrad
2024. 7. 8.
๐ IMPORTANT: Sign up for Kinde authentication here: https://bit.ly/3QOe1Bh (paid sponsorship). Disclaimer: this is a sponsored video (paid). It's your responsibility to evaluate safety, accuracy and other relevant parts of the reviewed product. ๐ NEW React & Next.js Course: https://bytegrad.com/courses/professional-react-nextjs Final code: https://github.com/ByteGrad/todo-app Hi, I'm Wesley. I'm a brand ambassador for Kinde (paid sponsorship). ๐ NEW React & Next.js Course: https://bytegrad.com/courses/professional-react-nextjs ๐ Professional JavaScript Course: https://bytegrad.com/courses/professional-javascript ๐ Professional CSS Course: https://bytegrad.com/courses/professional-css ๐ Web development roadmap 2024 & 2025: https://email.bytegrad.com ๐ Email newsletter (BIG update soon): https://email.bytegrad.com ๐ Discord: all my courses have a private Discord โฑ๏ธ Timestamps: 00:00 Intro 02:10 Project setup 04:12 Fresh React app look-around 12:25 Tailwind CSS setup 16:52 Google font 19:54 Kinde setup 21:33 Creating components + styling with Tailwind 59:43 Reusable button component 1:03:50 Props 1:15:15 List / map (initial todos) 1:31:05 Manipulate styling (line-through) 1:33:25 useState hook (toggle, delete) 2:10:18 Event bubbling 2:13:45 Counter (prop drilling) 2:27:07 Add todo 2:29:08 Controlled input 2:35:38 Conditional rendering (empty state) 2:39:15 Restrict functionality for guest users 2:42:05 Better app structure 2:56:43 TypeScript in React 3:26:00 State management: State / derived state / event handlers 3:33:40 Folder structure: lib folder (types) 3:35:15 Context API for state management 4:03:45 Custom hook (for Todos Context) 4:10:02 useEffect: Data fetching in React 4:17:20 useEffect: Persist data in localStorage 4:32:12 Add authentication 4:50:21 Deploy to Vercel 4:54:07 Build (npm run build) 5:02:49 Outro #webdevelopment #reactjs #nextjs
Let's build an application that generates forms using AI! Tech Stack: - Next-auth - authentication - Shadcn ui - ui library - Open Al - AI Integration - Drizzle - Orm - PostgreSQL - database - Stripe - payments - Tanstack -Table - Typescript - Type Checking - Plausible - Analytics - Vercel - Deployment - Stripe - Payments - Zod - Schema Validation # Features - Authentication โ - AI Form Generation โ - Form Publish and Submissions โ - View your forms โ - Admin Panel โ - View Results โ - Settings & Upgrade Subscription โ - Analytics โ - Landing page โ โ๏ธSign up for my newsletter: http://eepurl.com/h4X959 ๐ค๏ธHost your DB on Railway: https://railway.app/?referralCode=rHmMH3 ๐พJoin my Discord: https://discord.gg/VGTVNvwReW โ๏ธFull-Stack Roadmap: https://webdecoded.gumroad.com/l/full-stack ๐งโ๐Deploy a custom AI agent: https://customgpt.ai/?fpr=webdecoded23 ๐GitHub URL: https://github.com/judygab/ai-form-builder-tutorial ๐ฅFollow me on X: https://twitter.com/webdecoded_g ๐ฅFirebase: CRUD - https://www.youtube.com/watch?v=fz3w2m4F_K8 Authentication - https://www.youtube.com/watch?v=Vv_Oi7zPPTw โ๏ธMore on React: Build a Portfolio Website - https://youtu.be/hYv6BM2fWd8 MERN Stack Project: Food Ordering App - https://youtu.be/x4dIga_3S4I โSupport the channel: buymeacoff.ee/webdecoded5 - 00:00:00 - Demo & Project Setup - 00:06:38 - Generate a Form - 00:29:25 - Authentication - 00:48:28 - Connect to Database - 01:06:40 - List All Forms - 02:28:00 - Admin Menu Navigation & Layout - 03:18:00 - Results Page & Table - 03:53:51 - Landing Page - 04:08:46 - Payments Integration - 05:25:34 - Deployment - 05:30:03 - Analytics - 05:35:00 - Thank you for watching
2024. 2. 14.
2024. 9. 27.
๊น์งํ์ ์ํ!๋ชจ๋จผํธ'๋ ๊ฐ์น์๋ ์์ ๋ค์ ์จ๊ฒจ์ง ๋ฉ์ด์ปค๋ค์ ๊ณ ๋ฏผ๊ณผ ๋ ธ๋ ฅ์ ๋ค๋ฃน๋๋ค. ๋์์ด๋์ด์ IT ๋์์ด๋๋ค์ ์ปค๋ฎค๋ํฐ '๋์์ธ ์คํํธ๋ผ'์ ํ์ด๋ '๊น์งํ'. ์ด๋ฒ์๋ EO์ ํจ๊ป ๊ฐ ๋ถ์ผ์์ ํ์ฝ ์ค์ธ ๋ฉ์ด์ปค๋ค์ ๋ชจ์๊ณ ์ฐ์ ์ ๋ํด ํํค์นฉ๋๋ค! ์ ๋ฒ ํ์ฐจ์ ์ด์ด ๋นํธ์์คํ์ด์ค ๊น์ ๊ณค ์์ฅ๋ & ์ํค๋ชจ์คํผ์ด ๋ฐ๊ฒฝ์ ์์ฅ๋๊ป์ ๊ณต๊ฐ์ ๋ํ ์ธ์ฌ์ดํธ๋ฅผ ์ด์ด๊ฐ๋๋ค. ์ฃผ๊ฑฐ์ ๋ํ ๋์ค๋ค์ ๊ด์ฌ๋๊ฐ ๋์์ง๋ฉฐ ์ค์ค๋ก ๊ณต๊ฐ๊ณผ ๊ฐ๊ตฌ๋ฅผ ํ๋ ์ด์ ํ๋ ์ทจํฅ์ ๋ฐ์ ์ฌ๊ฐ ์์๋๋ฐ์. ์ด๋ฅผ '๋ฉํฐ ํ๋ฅด์๋๋ก'๋ก ์ ์ํ์ฌ ์ด ์๋์ ์ฃผ๊ฑฐ ๊ณต๊ฐ ๋์์ธ์ ๋ฐฉํฅ์ฑ์ ๋ง์ํด ์ฃผ์ จ๊ณ , ์ธ๊ฐ์ด ์ ์์ ์ธ ๋๋ฌผ์์ ์ธ์ ํ๊ณ ์คํผ์ค ๊ณต๊ฐ์์๋ ์ง์ฅ์ธ๋ค์ ๋ค์ํ ๊ฐ์ ์ ์ดํ ์ ์๋ ๋ค์ธต์ ์ธ ์ ๋ต์ ๋ํด ์์ ๋ฌผ๊ณผ ํจ๊ป ์ด์ผ๊ธฐ ํด์ฃผ์ จ์ต๋๋ค. '๊น์งํ์ ์ํ!๋ชจ๋จผํธ'๋ ๋งค์ฃผ ๋ชฉ์์ผ์ ์ ๋ก๋๋ฉ๋๋ค. ๋ง์ ๊ธฐ๋์ ๊ด์ฌ ๋ถํ๋๋ฆฝ๋๋ค. #๊ฑด์ถ #์ธํ ๋ฆฌ์ด #๊ฐ๊ตฌ ๐ EO ๊ธ๋ก๋ฒ ์ฑ๋ ๊ตฌ๋ ํ๊ธฐ ๐๐ป๐๐ป https://bit.ly/3S0Pacc ๐ฝ eo PLANET ๋ด์ค๋ ํฐ ๊ตฌ๋ ํ๊ธฐ ๐๐ป๐๐ป https://bit.ly/3cIKLuL
2024. 8. 8.
์ฃผ๋์ด๋ ์ด๋ฐ๊ฑธ ๋ค ์์๋๋ผ๋ฉด...
2023. 5. 7.
Get a Free System Design PDF with 158 pages by subscribing to our weekly newsletter: https://bit.ly/bytebytegoytTopic Animation tools: Adobe Illustrator and After Effects. Checkout our bestselling System Design Interview books: Volume 1: https://amzn.to/3Ou7gkd Volume 2: https://amzn.to/3HqGozy The digital version of System Design Interview books: https://bit.ly/3mlDSk9 ABOUT US: Covering topics and trends in large-scale system design, from the authors of the best-selling System Design Interview series.
2024. 6. 11.
๋์ปค ์ปดํฌ์ฆ๊ฐ ๋ฌด์์ด๋ฉฐ ๊ฐ๋ฐ ์ํฌํ๋ก์ฐ๋ฅผ ๊ฐํธํ๊ฒ ๋ง๋๋ ๋ฐฉ๋ฒ์ ๋ฐฐ์ฐ์ธ์. ๊ฒฝํ์ด ํ๋ถํ ๊ฐ๋ฐ์์ด๋ ์ด๋ณด์์ด๋ , ์ด ๋น๋์ค๋ ์ค์น๋ถํฐ ์ฒ์์ผ๋ก ๋ฉํฐ ์ปจํ ์ด๋ ์์ฉ ํ๋ก๊ทธ๋จ์ ์์ฑํ๋ ๊ณผ์ ๊น์ง ๋์ปค ์ปดํฌ์ฆ์ ๊ธฐ๋ณธ์ ์ธ ์ฌ์ฉ๋ฒ์ ์๋ดํฉ๋๋ค. ๋์ปค ์ปดํฌ์ฆ๋ก ์์ฐ์ฑ์ ๋์ด๊ณ ํ๋ก์ ํธ๋ฅผ ๋ค์ ์์ค์ผ๋ก ์ด๋์ด ๋ณด์ธ์! ๐ ๏ธ๐ป
2024. 5. 19.