ساخت کلون اینستاگرام - ری اکت، TailwindCSS و Firebase
✅ سرفصل و جزئیات آموزش
آنچه یاد خواهید گرفت:
- راهاندازی Firebase
- Tailwind CSS
- احراز هویت Firebase
- Firestore
- ReactJS
- Context API
پیش نیازهای دوره
- دانش اولیه از HTML ،CSS و Reactjs
توضیحات دوره
استک مورد استفاده شما - ری اکت (هوکهای سفارشی، useContext و useState و useEffect و useRef)، Firebase (Firestore و احراز هویت) و Tailwind CSS
در این آموزش ری اکت، ما یک کلون اینستاگرام خواهیم ساخت. این پروژه ری اکت چندین صفحه دارد: صفحه لاگین، ثبتنام، داشبورد (برای مشاهده، لایک کردن و کامنت گذاشتن روی عکسها) و پروفایلهای کاربری
صفحه ورود به Firebase زمانی که یک کاربر سعی کند وارد شود متصل میشود و زمانی که یک کاربر ثبتنام میکند، ما از احراز هویت Firebase برای ذخیره کاربر در پایگاه داده احراز هویت Firebase استفاده خواهیم کرد. ما این اپلیکیشن را با استفاده از ری اکت، جاوااسکریپت، Firebase و برای استایلدهی از Tailwind CSS (که فوقالعاده است) ساختهایم.
شما به دانش ری اکت نیاز دارید تا در این آموزش دچار مشکل نشوید (useState و useEffect و useContext) و همچنین به دانش اولیه جاوااسکریپت برای گذراندن دوره نیاز دارید.
باید دانش اولیه از HTML ،CSS و جاوااسکریپت داشته باشید.
هر کس که میخواهد مهارتهای توسعهدهنده فول استک خود را با تجربه کاری در ساخت اپلیکیشنهای واقعی در محیط توسعه پیشرفت دهد باید در این برنامه شرکت کند.
در طول دوره، ما از آخرین نسخه ری اکت - ری اکت 18 استفاده خواهیم کرد.
در مورد مفاهیم، موارد زیر را بررسی خواهیم کرد:
- احراز هویت Firebase
- کامپوننتهای تابعی ری اکت
- هوکهای ری اکت مانند ()useState و ()useEffect
- مدیریت رویدادهای کاربری
- JSX و رندرینگ قالبها
- Props و State
- ایجاد و سازماندهی کامپوننتها
- ساخت اپلیکیشنهای واقعی ری اکت
این دوره برای چه کسانی مناسب است؟
- توسعهدهندگانی که با HTML ،CSS و ری اکت آشنا هستند و میخواهند توسعه فول استک را یاد بگیرند.
ساخت کلون اینستاگرام - ری اکت، TailwindCSS و Firebase
-
مقدمه 02:59
-
ایجاد اپلیکیشن ری اکت و نصب وابستگیها 05:15
-
ریفکتور کردن فایلهای غیرضروری و ریفکتور کردن کد 05:59
-
گسترشهایی که برای این پروژه نیاز است 03:07
-
ایجاد ساختار پوشه برای اپلیکیشن ما 01:36
-
ایجاد فایل seed 03:45
-
راهاندازی Firebase - پایگاه داده Firestore 07:13
-
احراز هویت Firebase 03:43
-
createContext در firebase.js 07:49
-
ایجاد اپلیکیشن در Firebase (SDK در پیکربندی)، مقداردهی اولیه، افزودن seed) 07:58
-
نصب React Router Dom 09:10
-
ایجاد مسیرها 03:13
-
نصب Tailwind CSS 05:00
-
شروع کار روی صفحه لاگین 09:01
-
ادامه کار روی صفحه لاگین - بخش 2 03:49
-
ادامه کار روی صفحه لاگین - بخش 3 16:57
-
ailwind.config - تم (تنظیم رنگها) 09:43
-
قابلیت لاگین با firebase - بخش 4 06:36
-
پیام خطای سفارشی در صفحه لاگین 05:41
-
صفحه ثبتنام 06:10
-
بررسی اینکه آیا کاربر ایجاد شده داپلیکیت است (اگر نام کاربری در firebase وجود داشته باشد) 22:41
-
صفحه not found 06:05
-
ایجاد صفحه داشبورد 05:00
-
ایجاد هوک use-auth-listener.js 08:34
-
ایجاد users.js UserContext 05:51
-
کامپوننت هدر 23:00
-
کار روی صفحه داشبورد 02:27
-
کار روی کامپوننت سایدبار 11:43
-
ایجاد پوشه سایدبار 03:33
-
کار روی کامپوننت کاربر 09:30
-
ایجاد Timeline.js 02:45
-
کار روی suggestion.js 11:05
-
دریافت پروفایلهای پیشنهادی 13:03
-
نمایش پروفایلهای پیشنهادی 12:00
-
قابلیت - حذف کاربر فالوشده از پیشنهادات 09:39
-
قابلیت - بروزرسانی فالوورها و فالو کردن کاربران 15:35
-
ایجاد کامپوننت پست و هوک سفارشی usePhotos 08:10
-
ایجاد تابع getPhotos 08:40
-
رندرینگ عکسها (با استفاده از اسکلتون ری اکت) 09:38
-
شروع کار روی کامپوننت پست 06:47
-
کامپوننتها در پست - کامپوننت هدر 06:54
-
کامپوننت تصویر 03:34
-
اکشنها (فراخوانی سرویس در Firebase) 09:45
-
لایکها 15:28
-
نمایش کامنتها 11:26
-
افزودن کامنتها 18:20
-
افزودن مسیرهای محافظت شده 13:31
-
پروفایل 11:18
-
ادامه کار روی صفحه پروفایل 19:19
-
کامپوننت هدر در صفحه پروفایل 14:29
-
هدر خاص پروفایل 18:46
-
کامپوننت عکسها در صفحه پروفایل 09:37
مشخصات آموزش
ساخت کلون اینستاگرام - ری اکت، TailwindCSS و Firebase
- تاریخ به روز رسانی: 1404/06/14
- سطح دوره:همه سطوح
- تعداد درس:52
- مدت زمان :07:52:57
- حجم :4.99GB
- زبان:دوبله زبان فارسی
- دوره آموزشی:AI Academy