ساخت کلون اینستاگرام - React TailwindCSS Firebase

سرفصل ها و درس ها

مقدمه Introduction

• مقدمه Introduction

شروع به کار Getting Started

• ایجاد React App و نصب Dependencies Create React App and Installing Dependencies

• Refactoring فایل های غیر ضروری، refactoring کد Refactoring unnecessary files, refactoring code

• الحاقات مورد نیاز برای این پروژه Extensions required for this project

• ساختار پوشه برای برنامه ما ایجاد کنید Create folder structure for our application

راه اندازی Firebase Firebase Setup

• ایجاد فایل seed Creating seed file

• راه اندازی Firebase: پایگاه داده Firestore Firebase Setup: Firestore database

• احراز هویت Firebase Firebase Authentication

• createContext در firebase.js createContext in firebase.js

• ایجاد برنامه در Firebase (SDK در پیکربندی)، Initialize، Add Seed) Creating App in Firebase (SDK in config), Initialize, Add Seed)

شروع کار با FrontEnd Getting started with FrontEnd

• نصب React Router Dom Installing React Router Dom

• ایجاد مسیرها Create Routes

• نصب Tailwind CSS Installing Tailwind CSS

• شروع به کار در صفحه ورود کنید Start working on Login Page

• ادامه کار در صفحه ورود (قسمت 2) Continue working on Login Page (Part 2)

• ادامه کار در صفحه ورود (قسمت 3) Continue working on Login Page (Part 3)

• Tailwind.config - موضوع (تنظیم رنگ ها) Tailwind.config - theme (Set colours)

• عملکرد ورود (با Firebase) (قسمت 4) Login Functionality (with Firebase) (Part 4)

• پیام خطای سفارشی در صفحه ورود Custom error message in login page

• صفحه ثبت نام Signup Page

• بررسی کنید که کاربر ایجاد شده تکراری است (اگر نام کاربری قبلاً در firebase وجود داشته باشد) Check for user created is a duplicate(if username already exist in firebase)

• صفحه یافت نشد Not Found Page

صفحه داشبورد Dashboard Page

• ایجاد صفحه داشبورد Creating Dashboard Page

• ایجاد use-auth-listener.js Hook Creating use-auth-listener.js Hook

• ایجاد UserContext users.js Creating users.js UserContext

• کامپوننت هدر Header Component

• کار بر روی صفحه داشبورد Working on Dashboard Page

• کار بر روی کامپوننت نوار کناری Working on Sidebar Component

• ایجاد پوشه نوار کناری Creating sidebar folder

• کار بر روی کامپوننت کاربر Working on User Component

• Timeline.js را ایجاد کرد Created Timeline.js

جزء پیشنهادات Suggestions Component

• کار بر روی suggestion.js Working on suggestion.js

• پروفایل های پیشنهادی را دریافت کنید Get suggested profiles

• نمایش پروفایل های پیشنهادی Show suggested profiles

• عملکرد: کاربر دنبال شده را از پیشنهاد حذف کنید Functionality: Remove followed user from suggestion

• عملکرد: دنبال کنندگان و دنبال کنندگان کاربر را به روز کنید Functionality: Update user’s following & followers

جدول زمانی Timeline

• ایجاد کامپوننت پست و قلاب سفارشی usePhotos Creating Post Component and custom hook usePhotos

• ایجاد تابع getPhotos Creating getPhotos function

• رندر کردن عکس ها (با استفاده از اسکلت React) Rendering out the photos (using React skeleton)

ارسال کنید Post

• شروع به کار بر روی کامپوننت پست کنید Start Working on Post Component

• اجزای درون پست - کامپوننت سرصفحه Components within Post - Header Component

• کامپوننت تصویر Image Component

• اقدامات (تماس سرویس در Firebase) Actions (Service call in Firebase)

• دوست دارد Likes

• نمایش نظرات Show Comments

• نظرات را اضافه کنید Add Comments

• مسیرهای محافظت شده را اضافه کنید Add Protected Routes

نمایه Profile

• نمایه Profile

• به کار در صفحه نمایه ادامه دهید Continue working on Profile Page

• کامپوننت هدر در صفحه نمایه Header Component in Profile Page

• سربرگ خاص نمایه Profile Specific Header

• جزء عکس ها در صفحه نمایه Photos Component in Profile Page