بوت کمپ حرفه ای آموزش جامع React با 120 پروژه واقعی - آخرین آپدیت

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

معرفی دوره Introduction To The Course

• معرفی دوره Introduction To The Course

پروژه 1: تجسم‌گر الگوریتم مرتب‌سازی با استفاده از ReactJS، مدیریت وضعیت React Project-1: Sorting Algorithm Visualizer Using ReactJS , React State Management

• مقدمه Introduction

• ساخت کامپوننت‌های هدر و فرم Making The Header And Form Components

• ساخت کامپوننت‌های صفحه، میله‌های عمودی و دکمه مرتب‌سازی Making The Screen , Vertical Bars And Sort Button Components

• پیاده‌سازی الگوریتم مرتب‌سازی حبابی Implementing Bubble Sort Algorithm

• پیاده‌سازی الگوریتم مرتب‌سازی شیکر کوکتل Implementing Cocktail Shaker Sort Algorithm

• پیاده‌سازی الگوریتم مرتب‌سازی درجی Implementing Insertion Sort Algorithm

• پیاده‌سازی الگوریتم مرتب‌سازی انتخابی Implementing Selection Sort Algorithm

• دانلود فایل‌های پروژه Download the project files

پروژه 2: بازی تطبیق کارت میوه، انیمیشن‌های فریم کلیدی و React Hooks Project-2: Fruit Card Matching Game key frame animations and react hooks

• مقدمه Introduction

• ساخت کامپوننت هدر Making The Header Component

• ساخت کامپوننت صفحه بازی Making The Game Board Component

• ایجاد میوه‌های تصادفی در صفحه بازی Generating Random Fruits Into The Game Board

• پیاده‌سازی منطق بازی Implementing The Game Logic

• محاسبه زمان صرف شده برای تکمیل بازی Calculating The Time Taken To Complete The Game

• دانلود فایل‌های پروژه Download the project files

پروژه 3: شبیه‌ساز اتوماتای سلولی (شبیه‌سازی بازی زندگی کانوی) Project-3: Cellular Automata Simulator (Conway Game of Life Simulation)

• مقدمه Introduction

• درک بازی زندگی کانوی Understanding Conways Game of Life

• ساخت کامپوننت هدر Making The Header Component

• ساخت کامپوننت صفحه Making The Board Component

• پیاده‌سازی توابع پر کردن و پر کردن سریع Implementing The Fill And The Quickfill Function

• ساختارهای و الگوهای جالب Interesting Structures And Patterns

• ساختارهای و الگوهای جالب Interesting Structures And Patterns

• دانلود فایل‌های پروژه Download the project files

پروژه 4: برنامه بازار سهام با استفاده از ReactJS، Chart.js و Axios Project-4: Stock Market Application using reactjs , chart.js and axios

• مقدمه - برنامه بازار سهام با استفاده از ReactJS، Chart.js و Axios Introduction - Stock Market Application using reactjs , chart.js and axios

• نصب وابستگی‌ها Installing Dependecies

• ساخت کامپوننت هدر Making The Header Component

• دریافت کلید API و ادغام API Getting The API Key And Integrating The API

• تبدیل داده‌های API به مقدار حالت Converting The API Data Into State Value

• رسم و تجسم داده‌های OHLC Plotting And Visualizing The OHLC Data

• دانلود فایل‌های پروژه Download the project files

پروژه 5: شبیه‌سازی تایپ‌ مستر با استفاده از ReactJS Project-5: Typing master clone using reactjs

• مقدمه Introduction

• ساخت کامپوننت هدر Making The Header Component

• ساخت فایل دارایی Word.js Making The Word.js Asset File

• ساخت کامپوننت لیست کلمات صفحه Making Screen Wordlist Component

• ساخت نوار ورودی Making The Input Bar

• پیاده‌سازی منطق بازی Implementing The Game Logic

• محاسبه امتیاز WPM Calculating The WPM Score

• دانلود فایل‌های پروژه Download the project files

پروژه 6: سیستم تابلوی اعلانات با استفاده از ReactJS Project-6: Message board system using reactjs

• مقدمه Introduction

• توضیح نحوه عملکرد مسیریابی Explaining How Routing Works

• ساخت کامپوننت هدر Making The Header Component

• ساخت کامپوننت ایجاد Making The Create Component.

• ایجاد تابلوی علوم و موسیقی Creating The Science And Music Board

• ایجاد تابلوی فیلم و ورزش Creating The Movie And Sports Board

• ایجاد تابلوی همه Creating The All Board

• دانلود فایل‌های پروژه Download the project files

پروژه 7: شبیه‌ساز سیالات با استفاده از ReactJS Project-7: Fluid simulator using reactjs

• مقدمه Introduction

• درک معادله ناویر-استوکس و قانون اول حرکت نیوتن Understanding Navier Stokes Equation And Newtons First Law of Motion

• درک مراحل شبیه‌سازی سیالات Understaing The Fluid Simulation Steps

• ساخت کامپوننت اصلی Creating The Main Component

• ساخت کامپوننت تنظیمات Creating The Settings Component

• ساخت کامپوننت صفحه Creating The Screen Component

• راه‌اندازی اولیه Fluid.js Setup Initialization of Fluid.js

• پیاده‌سازی کلاس سیال Implementing The Fluid Class

• پیاده‌سازی به‌روزرسانی سرعت Implementing Velocity Updation

• پیاده‌سازی محاسبه پروجکشن و واگرایی Implementing Projection And Divergence Calculation

• پیاده‌سازی ادوکشن Implemeting Advection

• پیاده‌سازی رندر و کدگذاری رنگ ذرات سیال . Implementing Render And Color Coding Fluid Particles

• مراحل شبیه‌سازی و درک توابع کمکی Simulation Steps And Understanding Helper Functions

• راهنمای برنامه Application Walkthrough

• دانلود فایل‌های پروژه Download the project files

پروژه 8: برنامه دفتر خاطرات شخصی با استفاده از ReactJS Project-8: Personal dairy application using reactjs

• مقدمه - برنامه دفتر خاطرات شخصی با استفاده از ReactJS Introduction - Personal dairy application using reactjs

• ساخت کامپوننت هدر Making The Header Component

• پیاده‌سازی کامپوننت صفحه Implementing The Page Component

• پیاده‌سازی تنظیمات اندازه فونت Implementing The Font Size Settings

• پیاده‌سازی تنظیمات رنگ صفحه و رنگ فونت Implementing Page Color And Font Color Settings

• ذخیره و بازیابی داده‌های پایدار از حافظه محلی Saving And Retrieving Persistent Data From Local Storage

• دانلود فایل‌های پروژه Download the project files

پروژه 9: برنامه درهم‌سازی و تایمر مکعب روبیک Project-9: Rubiks cube scramble and timmer applicaton

• مقدمه Introduction

• ساخت کامپوننت هدر Making The Header Component.

• پیاده‌سازی الگوریتم درهم‌سازی Implementing The Scramble Algorithm

• درک طرح‌بندی برنامه Understanding The Application Layout

• ایجاد عنصر تایمر Creating The Timer Element

• ایجاد صفحه آمار و کامپوننت نمودار Creating The Statistics Screen And Graph Component

• دانلود فایل‌های پروژه Download the project files

پروژه 10: PiTweet - شبیه‌ساز توییتر با استفاده از ReactJS Project-10: PiTweet - Twitter clone using reactjs

• مقدمه - PiTweet - شبیه‌ساز توییتر با استفاده از ReactJS Introduction - PiTweet - Twitter clone using reactjs

• درک معماری برنامه Understanding The Application Architecture

• ادغام Google OAuth Integrating Google OAuth

• ادغام Firebase Integrating Firebase

• ساخت کامپوننت هدر Making The Header Component

• ایجاد کامپوننت ایجاد پست جدید Creating The Create New Post Component

• ایجاد کامپوننت کارت Creating The Card Component

• خواندن از پایگاه داده ابری Firestore و رندر کامپوننت‌های کارت Reading From Firestore Cloud Database and Rendering The Card Components

• دانلود فایل‌های پروژه Download the project files

پروژه 11: استخراج‌کننده متن تصویر OCR با هوش مصنوعی Project-11: AI OCR image text extractor

• مقدمه - استخراج‌کننده متن تصویر OCR با هوش مصنوعی Introduction - AI OCR image text extractor

• ساخت کامپوننت هدر Making The Header Component

• ساخت کامپوننت ورودی Making The Input Component

• خواندن و بارگذاری تصویر در API Reading And Uploading The Image To The API

• رندر متن خروجی Rendering The Output Text

• بررسی اجمالی API و دریافت کلید API API Overview And Getting The API Key

• دانلود فایل‌های پروژه Download the project files

پروژه 12: برنامه آنتی ویروس Project-12: Anti Virus Application

• مقدمه - برنامه آنتی ویروس Introduction - Anti Virus Application

• ساخت کامپوننت هدر Making The Header Component

• دریافت ورودی فایل از طریق کامپوننت ورودی Taking The File Input Through Input Component

• ایجاد فراخوانی‌های API Making The API Calls

• ساخت کامپوننت نتایج Making The Results Component

• درک فایل‌های CSS Understanding The CSS Files

• دانلود فایل‌های پروژه Download the project files

پروژه 13: برنامه ربات مسابقه هوش مصنوعی Project-13: AI Quizbot Application

• مقدمه Introduction

• ساخت کامپوننت هدر Making The Header Component

• ایجاد منوی سوالات Creating The Question Menu

• ایجاد فراخوانی‌های API به Google Gemini AI Making The API Calls To Google Gemini AI

• ایجاد کامپوننت خروجی Creating The Output Component

• دانلود فایل‌های پروژه Download the project files

پروژه 14: برنامه اعتبارسنجی و ارزیابی ایمیل Project-14: Email Validation And Assessment Application

• مقدمه Introduction

• درک مفاهیم اعتبارسنجی ایمیل Understading The Concepts Of Email Validation

• ساخت کامپوننت هدر Making The Header Component

• ساخت کامپوننت ورودی Making The Input Component

• ایجاد فراخوانی‌های API به Abstract API Making The API Calls To Abstract API

• ساخت کامپوننت‌های نتایج Making The Results Components

• دانلود فایل‌های پروژه Download the project files

پروژه 15: برنامه نمودارسازی و محاسبه علمی Project-15: Scientific Graphing And Calculation Application

• مقدمه Introduction

• ایجاد هدر برنامه Creating The Application Header

• استفاده از API Desmos برای ایجاد نمودار Using The Desmos API For Creating The Graph

• ایجاد کامپوننت ماشین حساب Creating The Calculator Component

• درک قوانین CSS برای ماشین حساب Understanding The CSS Ruleset For Calculator

• تبدیل عبارت میانوندی به پسوندی Converting Infix Expression To Postfix

• پیاده‌سازی الگوریتم لهستانی معکوس برای محاسبه عبارت پسوندی Implementing Reverse Polish Algorithm To Calculate Postfix Expression

• دانلود فایل‌های پروژه Download the project files

پروژه 16: برنامه آنلاین تبدیل پسوند فایل Project-16: Online File Extension Converter Application

• مقدمه Introduction

• ساخت کامپوننت هدر Making The Header Component

• ایجاد کامپوننت ورودی Creating The Input Component

• درک عملکرد کمکی کامپوننت ورودی Understanding The Helper Function of Input Component

• بارگذاری فایل در ConvertAPI و دریافت فایل تبدیل شده Uploading The File To ConvertAPI And Getting The Converted File

• دانلود فایل‌های پروژه Download the project files

پروژه 17: برنامه لیگ فوتبال Project-17: Football League Application

• مقدمه Introduction

• ساخت کامپوننت هدر Making The Header Component

• بررسی اجمالی API-Sports API-Sports Overview

• ایجاد کامپوننت ورودی و ایجاد درخواست API Creating The Input Component And Making The API Request

• پیاده‌سازی ویژگی تغییر وضعیت Implementing The Toggle Feature

• دانلود فایل‌های پروژه Download the project files

پروژه 18: PiReddit شبیه‌ساز برنامه Reddit Project-18: PiReddit Reddit clone application

• مقدمه - PiReddit شبیه‌ساز برنامه Reddit Introduction - PiReddit Reddit clone application

• درک معماری برنامه Understanding The Application Architecture

• ادغام Google OAuth Intergrating Google OAuth

• ادغام سرویس Google Firebase Integrating Google Firebase Service

• ساخت کامپوننت هدر Making The Header Component

• ساخت کامپوننت ایجاد Making The Create Component

• رندر همه پست‌ها Rendering All The Posts

• دانلود فایل‌های پروژه Download the project files

پروژه 19: تشخیص دهنده تصویر هوش مصنوعی Project-19: AI image detector

• مقدمه Introduction

• ساخت کامپوننت هدر Creating The Header Component

• ایجاد کامپوننت ورودی و دریافت ورودی تصویر Creating The Input Component And Taking In The Image Input

• بررسی اجمالی Imagga API Imagga API Overview

• ایجاد سرور محلی Creating The Local Server

• پیوند فرانت‌اند و سرور محلی و ایجاد فراخوانی‌های API Linking The Frontend And Local Server And Making The API Calls

• ایجاد کامپوننت تگ‌ها و رندر خروجی Creating The Tags Component And Rendering The Output

• دانلود فایل‌های پروژه Download the project files

پروژه 20: برنامه تبدیل متن به گفتار هوش مصنوعی Project-20: AI text to speech converter application

• مقدمه Introduction

• ساخت کامپوننت هدر Making The Header Component

• ساخت کامپوننت ورودی Making The Input Component

• ایجاد سرور محلی Node Creating The Local Node Server

• تولید صدا از طریق سرویس PlayHT API Generating Audio Through PlayHT API Service

• دانلود فایل‌های پروژه Download the project files

پروژه 21: LUNA ربات چت هوش مصنوعی ساخته شده با استفاده از React و Node Js Project-21: LUNA AI chat bot built using React and Node Js

• مقدمه 111Introduction

• بک‌اند Backend

• راه‌اندازی فرانت‌اند و توضیح استایل‌دهی FronEnd Setup And Explanation Of Styling

• توضیح کد نهایی و منطق فرانت‌اند Explanation Of Final Code and Frontend Logic

• دانلود فایل‌های پروژه Download the project files

پروژه 22: ساخت بازی Digit Hunt با استفاده از React Js Project-22: Making Digit Hunt Game Using React Js

• مقدمه Introduction

• راه‌اندازی سرور Json و واکشی راه‌حل‌ها Setting Up Json server and fetching Solutions.

• ردیابی و ارسال حدس (توضیح استفاده از Handle Key Up و Use Digit Ho Tracking And Submitting The Guess (Explanation Of Handle Key Up and Use Digit Ho

• اضافه کردن حدس‌های جدید و ردیابی نوبت‌ها و مدیریت تاریخچه Adding New Guesses And Tracking Turns And Handling History

• قالب‌بندی حدس‌ها Formatting Guesses

• توضیح کامپوننت‌های Grid و Row و نحوه ردیابی و نمایش حدس‌ها Explaining The Grid And Row Component And How To Track And Display Guesses.

• ایجاد صفحه کلید و تغییر رنگ Creating Keypad and changing color

• پایان بازی و توضیح کامپوننت Modal Ending The Game And Explaining The Modal Component

• دانلود فایل‌های پروژه Download the project files

پروژه 23: ساخت بازی 2048 با استفاده از React Js Project-23: Making 2048 using react js

• مقدمه Introduction

• راه‌اندازی پروژه و توضیح مفهوم project setup and concept explanation

• راه‌اندازی اولیه Grid و States Initial setup Of the Grid and States

• مقداردهی اولیه بازی و تولید اعداد Initializing the game and genereting numbers

• پیاده‌سازی منطق کشیدن Implementing Swipe Logic

• منطق پایان بازی Game Over Logic

• پیاده‌سازی امتیاز و کد نهایی Score Implementation and Final Code

• دانلود فایل‌های پروژه Download the project files

پروژه 24: ویرایشگر کد با استفاده از React و Chakra UI Project-24: Code editor using react and chakra ui

• مقدمه Introduction

• ساخت NavBar و داشتن یک مشکل Making The NavBar and having an issue

• رفع مشکل NavBar و ساخت کامپوننت ویرایشگر Fixing the NavBar Issue and Making the editor Component

• اضافه کردن انتخابگر زبان با قابلیت Adding Language Selector with Functionality

• کامپوننت خروجی و توضیح مدیریت API Output component and Api handling explanation

• دانلود فایل‌های پروژه Download the project files

پروژه 25: Kryptonite-یک ردیاب ارز دیجیتال با استفاده از React js و CoinGecko Project-25: Kryptonite-A Cryptocurrency Tracker Using React js And CoinGecko

• مقدمه Introduction

• استفاده از هوک Axios و ایجاد بخش Trending Making Use Axios Hook And Creating Trending Section

• تکمیل بخش Trending Completing The Trending Section

• ایجاد کامپوننت Markets Creating Markets component

• ساخت صفحه جزئیات Crypto با نمودارها و توضیحات Making Crypto Detail Page with charts and decription

• دانلود فایل‌های پروژه Download the project files

پروژه 26: تشخیص حرکت دست با استفاده از React, FingerPose & Tensorflow.js Project-26: HandeGesture Recognition Using React,FingerPose & Tensorflow.js

• مقدمه Introduction

• راه‌اندازی وب کم و مواجهه با مشکل cors setting Up web cam and Facing cors issue

• تشخیص حرکت دست Detecting Hand Movement

• تشخیص علامت لایک و پیروزی Detecting Thumbs Up and victory

• اضافه کردن نمادهای سفارشی Adding Custom Symbols

• دانلود فایل‌های پروژه Download the project files

پروژه 27: WALL-E Al تولید کننده تصویر با استفاده از MERN Project-27: WALL-E Al Image Generator Using MERN

• مقدمه Introduction

• شروع با بک‌اند و راه‌اندازی سرور و اتصالات خود Starting With Backend and setting up our server and connections

• ایجاد مسیر Generate Image Making Generate Image Route

• ایجاد مسیرهای Post Making Post routes

• توضیح طرح صفحه Create Post Explanation Of Layout Of Create Post Page

• راه‌اندازی فرانت‌اند و ایجاد صفحات FrontEnd Setup And Creation Of Pages

• توضیح طرح صفحه اصلی Explanation Of Layout Of Home Page

• منطق اشتراک‌گذاری توضیح داده شد Share Logic Explained

• منطق Generate Image توضیح داده شد Generate Image Logic Explained

• دانلود فایل‌های پروژه Download the project files

پروژه 28: AniStream-برنامه وب انیمه با استفاده از React و Jikan Api Project-28: AniStream-Anime Web App Using React And Jikan Api

• مقدمه Introduction

• راه‌اندازی پروژه، مدیریت مسیرها و ایجاد Context API Setting Up Project Handling Routes and Creating Context API

• ساخت نوار کناری Making The Side Bar

• ساخت کامپوننت صفحه اصلی با توابع فیلتر و جستجوی Popular، Airing و سایر موارد Making The HomePage component with Popular,Airing and other filter & Serach func

• توضیح صفحه جزئیات و صفحه گالری Explaing the details Page And Gallery PAge

• دانلود فایل‌های پروژه Download the project files

پروژه 29: برنامه وبلاگ MERN کامل pi chronicle Project-29: The pi chronicle full stack mern blog app

• مقدمه Introduction

• راه‌اندازی بک‌اند و مقداردهی اولیه سرور و پایگاه داده Setting Up Backend And Initializing Server And DataBase

• ایجاد مدل‌ها Creating Models

• ایجاد API برای ثبت نام کاربر Creating API For Register User

• رفع مشکل و ایجاد API برای ورود به سیستم، خروج از سیستم با میان‌افزار برای تأیید Fixing The Issue And Creating API For Login, LogOut With MiddleWare For Veifying

• ایجاد مسیرهای Post و مواجهه با یک مشکل Creating Posts Route And Running Into an issue

• رفع مشکل و تکمیل مسیرهای پست Fixing issue and completing the post routes

• ایجاد مسیرهای نظرات و کاربران و اتمام بک‌اند با آزمایش در Postman Creating Comments and Users Route and Finishing Up with backend with testing On

• راه‌اندازی فرانت‌اند Setting Up Frontend

• توضیح Context API Explaining The Context API

• ساخت پاورقی و نوار ناوبری برای صفحه اصلی Making The Footer And Navbar For Homepage

• توضیح صفحه ورود و ثبت نام و قابلیت Explaining Login And Register Page and Functionality

• توضیح منطق ایجاد، ویرایش پست و نظرات Explaining Create , EditPost and Comeents Logic

• به پایان رساندن پروژه Finishing Up the project

• دانلود فایل‌های پروژه Download the project files

پروژه 30: برنامه وب ردیاب هزینه MERN کامل Project-30: Expense tracker full stack mern web app

• مقدمه Introduction

• راه‌اندازی و اتمام بک‌اند Setting Up And Finishing BAckend

• راه‌اندازی فرانت‌اند Setting Up Front End

• ساخت Context Api Making Context Api

• توضیح کامپوننت‌ها Explaining The Components

• دانلود فایل‌های پروژه Download the project files

پروژه 31: Cricinfo-یک برنامه وب اطلاعات کریکت با استفاده از React js و CricApi Project-31: Cricinfo-A Cricket Information Web App Using React js And CricApi

• مقدمه Introduction

• راه‌اندازی فرانت‌اند و کامپوننت Header Setting Up Frontend And Header Component

• رفع مشکل Header و ساخت Display و Cards Fixing The Header Issue And Making the Display And Cards

• رفع مشکل Api و به پایان رساندن پروژه Fixing Api issue and finishig up the project

• دانلود فایل‌های پروژه Download the project files

پروژه 32: Shroom-برنامه چت ویدیویی با استفاده از Reactjs & Socket io Project-32: Shroom-Video Chat App Using Reactjs & Socket io

• مقدمه Introduction

• نوشتن کد بک‌اند Writting Backend Code

• راه‌اندازی فرانت‌اند و طرح‌بندی اولیه برنامه Setting Up frontend And basic layout of the app

• کد SocketContext SocketContext Code

• مواجهه با یک خطا Running Into an error

• رفع خطا و تکمیل کد Fixing Error and completing The code

• کد را با npx به جای vite برای رفع امتحان کنید Try the code with npx instaed of vite for fix

• دانلود فایل‌های پروژه Download the project files

پروژه 33: خلاصه‌نویس مقاله با استفاده از Reactjs & Rapid API Project-33: Article Summarizer Using Reactjs & Rapid API

• مقدمه Introduction

• ساخت NavBar Making The NavBar

• ساخت کامپوننت‌های UI Making UI Components

• ساخت کامپوننت Header و به پایان رساندن پروژه Making The Header Component And Finishing Up the Project

• دانلود فایل‌های پروژه Download the project files

پروژه 34: Pixels-یک برنامه وب گالری تصویر با استفاده از React js و Pexels Api Project-34: Pixels-An Image Gallery Web App Using React js And Pexels Api

• مقدمه Introduction

• توضیح کامپوننت navbar Explaining the navbar component

• ساخت کامپوننت Home Making Home Component

• ساخت کامپوننت Saved و به پایان رساندن پروژه Making Saved Component And Finishing the project

• دانلود فایل‌های پروژه Download the project files

پروژه 35: سفارشی‌ساز کفش سه‌بعدی با استفاده از react & three js Project-35: 3-D Shoe customizer using react & three js

• مقدمه Introduction

• راه‌اندازی Canvas و مدل کفش Setting Up Canvas And Shoe Model

• رندر پویا رنگ Dynamically Rendering Colour

• دانلود فایل‌های پروژه Download the project files

پروژه 36: برنامه وب NBA با استفاده از React Js و Sports Data API Project-36: NBA Web App Using React Js And Sports Data API

• مقدمه Introduction

• ساخت کامپوننت‌ها و Navbar و راه‌اندازی مسیرها Making Components and Navbar And Setting Up Routes

• صفحه Leauge Leauge Page

• صفحه Standings Standings Page

• صفحه اطلاعات تیم و صفحه اطلاعات بازیکن Team Info Page And Player Info Page

• دانلود فایل‌های پروژه Download the project files

پروژه 37: بازی کوچک ماشین سه‌بعدی با استفاده از React & Three-js Project-37: 3-D Car Mini Game using React & Three-js

• مقدمه Introduction

• رندر راه‌اندازی اولیه نقشه، پیست و ماشین Rendering Initial Setup of Map ,Track and Car

• تعریف موجودیت ماشین خود و پیاده‌سازی موتور فیزیک Defining Our Car Entity and implementing Physics Engine

• ساخت هوک Controls، رندر جعبه برخورد و رمپ Making Controls hook,Rendering Collidor Box and Ramp

• اضافه کردن تغییر وضعیت شخص ثالث Adding Third Person Toggle

• دانلود فایل‌های پروژه Download the project files

پروژه 38: Planet Fitness - وب سایت بدنسازی با استفاده از Reactjs و Tailwind Css Project-38: Planet Fitness - Gym Website Using Reactjs And Tailwind Css

• مقدمه Introduction

• ساخت بخش Hero و Section Wrapper برای کامپوننت Generate Making Hero Section And Section Wrapper For Generate Component

• ساخت کامپوننت Generate تمام منطق Making The Generate Component All the logic

• ساخت کامپوننت Workout و به پایان رساندن Making The Workout Component and Finishing up

• دانلود فایل‌های پروژه Download the project files

پروژه 39: برنامه اجاره ملک با استفاده از Next Js و GraphQL Project-39: Property Rental App Using Next Js And GraphQL

• مقدمه Introduction

• 222 222

• ایجاد Schema در HyGraph CMS Creating Schema In HyGraph CMS

• ایجاد ساختار کلی صفحه اصلی Creating The Overall Structure Of the Home Page

• واکشی داده‌ها از بک‌اند و نمایش ویژگی‌ها در صفحه اصلی Fetching Data from Backend and displaying properties on Home Page

• ساخت کامپوننت نقشه و قابلیت جستجو Making The Map Component and Search Functionality

• دانلود فایل‌های پروژه Download the project files

پروژه 40: MyFitness Dude ردیاب تناسب اندام FullStack MERN Project-40: MyFitness Dude FullStack MERN Fitness Tracker

• مقدمه Introduction

• راه‌اندازی بک‌اند Setting Up Backend

• ایجاد مدل‌های کاربر و تمرین Creating User And Workout Models

• ایجاد MiddleWare و Authentication و آزمایش Creating MiddleWare And Authentication and testing

• ساخت توابع کنترلر باقیمانده و جمع‌بندی بک‌اند Making The remaining Controller Functions and Wrapping Up Backend

• راه‌اندازی FrontEnd و ساختار پوشه Setting Up FrontEnd And Folder Structure

• راه‌اندازی ریداکس و طرح‌بندی اولیه برنامه Setting Up redux and basic layout of the application

• ساخت صفحه Authentication و NavBar Making The Authentication Page And NavBar

• ساخت بقیه صفحات و کامپوننت‌ها Making The Rest Of the Pages and Components

• دانلود فایل‌های پروژه Download the project files

پروژه 41: بازی Hangman با استفاده از ReactJS و React hooks Project-41: Hangman game using ReactJS and React hooks

• مقدمه Introduction

• راه‌اندازی پروژه و نمایش کامپوننت‌های Hangman Project Setup & Displaying Hangman Components

• تعریف اعلان و پیام نهایی Defining the Notification and Final Message

• دانلود فایل‌های پروژه Download the project files

پروژه 42: استخراج‌کننده کلمه کلیدی با استفاده از ReactJs و OpenAI API Project-42: Keyword Extractor using ReactJs and OpenAI API

• مقدمه Introduction

• راه‌اندازی پروژه و طراحی ساختار اولیه Project Setup and Designing the Initial Structure

• استفاده از OpenAI API Using the OpenAI API

• به پایان رساندن Keywords Modal Finishing Up the Keywords Modal

• دانلود فایل‌های پروژه Download the project files

پروژه 43: جستجوگر پروفایل GitHub با استفاده از React و React router Project-43: GitHub profile finder using React and React router.

• مقدمه Introduction

• راه‌اندازی پروژه و واکشی داده‌ها با استفاده از GitHub API Project Setup and Fetching Data using GitHub API

• تعریف صفحه بارگیری و نمایش داده‌ها Defining Loading Page & Displaying the Data

• نمایش داده‌های باقیمانده در کامپوننت Card Displaying the Remaining Data in Card Component

• دانلود فایل‌های پروژه Download the project files

پروژه 44: بازی زندگی کانوی با استفاده از ReactJS Project-44: Conway's Game of Life using ReactJS

• مقدمه Introduction

• راه‌اندازی پروژه و طراحی Grid بازی Project Setup and Designing the Game Grid

• اجرای شبیه‌سازی Running the Simulation

• اضافه کردن قابلیت Reset و Clear Grid Adding Reset and Clear Grid Functionality

• دانلود فایل‌های پروژه Download the project files

پروژه 45: نمونه کار توسعه دهنده با انیمیشن‌های پیشرفته با استفاده از ReactJS و React Project-45: Developer portfolio with Advanced animations using ReactJS and React

• مقدمه Introduction

• راه‌اندازی پروژه و طراحی Navbar Project Setup and Designing Navbar

• استایل‌دهی Navbar و اضافه کردن انیمیشن‌ها به Banner Styling Navbar and Adding Animations to Banner

• طراحی بخش Skills و Projects Designing Skills and Projects Section

• طراحی بخش Contact و Footer Designing Contact and Footer Section

• دانلود فایل‌های پروژه Download the project files

پروژه 46: برنامه Keeper: یک شبیه‌ساز Google Keep Project-46: Keeper App: A Google Keep clone

• مقدمه Introduction

• راه‌اندازی پروژه و اضافه کردن قابلیت Input Project Setup and Adding Input Functionality

• 333 333

• حذف Note و اضافه کردن لمس‌های نهایی Deleting the Note and Adding Final Touches

• دانلود فایل‌های پروژه Download the project files

پروژه 47: طراحی Header وب سایت Project-47: Website Header Design

• مقدمه Introduction

• راه‌اندازی پروژه و راه‌اندازی پس زمینه وب سایت Project Setup and Setting Up the Website Background

• طراحی کامپوننت‌های Navbar و Hero Designing Navbar and Hero Components

• اضافه کردن لمس‌های نهایی Adding Final Touches

• دانلود فایل‌های پروژه Download the project files

پروژه 48: برنامه جستجوی متن ترانه با استفاده از ReactJS و context API Project-48: Lyrics Search App using ReactJS and context API

• مقدمه Introduction

• راه‌اندازی پروژه و دسترسی به API Project Setup and Accessing API

• راه‌اندازی سرور Proxy و واکشی داده‌ها از API Setting Up Proxy Server and Fetching Data from API

• تعریف کامپوننت‌های Search و Tracks Defining the Search and Tracks Components

• کامپوننت Lyrics The Lyrics Component

• تعریف پیوند از Home به Lyrics Defining the Link from Home to Lyrics

• دانلود فایل‌های پروژه Download the project files

پروژه 49: بازی حافظه با استفاده از React Project-49: Memory Game using React

• مقدمه Introduction

• راه‌اندازی پروژه و جابجایی کارت‌ها Project Setup and Shuffle the Cards

• تعریف Grid و مدیریت انتخاب‌های کارت Defining the Grid and Handling Card Choices

• تطبیق کارت‌ها و اضافه کردن استایل‌های تلنگر Matching the Cards and Adding Flipping Styles

• مدیریت چند ناهنجاری آخر Handling the Last Few Anomalies

• دانلود فایل‌های پروژه Download the project files

پروژه 50: Snake Xenzia Project-50: Snake Xenzia

• مقدمه Introduction

• راه‌اندازی پروژه و تعریف حالت اولیه Project Setup and Defining Initial State

• طراحی Menu و Game View Designing the Menu and Game View.

• اضافه کردن قابلیت‌ها به بازی Adding Functionalities to the Game

• تبدیل Static به Dyanamic Converting Static to Dyanamic

• لمس‌های نهایی Final Touches

• دانلود فایل‌های پروژه Download the project files

پروژه 51: ویرایشگر عکس React با فیلترهای CSS و React Project-51: React Photo Editor with CSS & React Filters

• مقدمه Introduction 1

• مقدمه 2 Introduction 2

• فیلترهای CSS CSS Filters

• استفاده از فیلترهای CSS Using CSS Filters

• اضافه کردن تمام فیلترهای CSS Adding All CSS Filters

• به روز رسانی استایل فیلتر تصویر Updating Filter style of image

• اضافه کردن اعلان _ نوار ناوبری Adding Announcement _ Navbar

• اضافه کردن رویداد onChange به ورودی Adding onChange event to input

• اضافه کردن CSS به نوار ناوبری _ بخش اعلان Adding CSS to navbar _ announcement section

• اضافه کردن CSS به تصویر Adding CSS to image

• اضافه کردن CSS به فیلترهای ما Adding CSS to our Filters

• دانلود فایل‌های پروژه Download the project files

پروژه-52: شبیه‌سازی ویرایشگر کد CodePen با استفاده از React.js Project-52: CodePen Code Editor Clone Using React.js

• مقدمه Introduction

• مقدمه Introduction

• ایجاد یک برنامه react Creating a react app

• ایجاد textarea و اضافه کردن هوک useState Creating textarea and adding useState hook

• اضافه کردن هوک useEffect Adding useEffect Hook

• IFrame چیست What is an IFrame

• اضافه کردن IFrame برای نمایش خروجی Adding IFrame to show output

• اضافه کردن CSS به هدر Adding CSS to Header

• اضافه کردن CSS به بخش هدر قسمت 2 Adding CSS to Header Part 2

• اضافه کردن CSS به textarea و بخش خروجی Adding CSS to textarea and output section

• اضافه کردن شیء LocalStorage Adding LocalStorage Object

• دانلود فایل‌های پروژه Download the project files

پروژه-53: برنامه بازی تاج و تخت با استفاده از React.js Project-53: Game Of Thrones App using React.js

• مقدمه Introduction

• مقدمه 2 Introduction 2

• صفحه هدر (اصلی) Header(Home) Page

• CSS برای صفحه هدر (اصلی) CSS to Header(Home) Page

• اضافه کردن تصویر پس زمینه به صفحه هدر ما Adding Background Image to our Header Page

• اضافه کردن نوار ناوبری به برنامه ما Adding Navbar to our App

• ایجاد درخواست Api با استفاده از متد fetch Making Api request using fetch method

• استفاده از تابع Map برای رندر کردن لیست داده Api ما Using Map function to render our Api data list

• دادن طرح بندی مناسب به موارد map Giving proper layout to map items

• اضافه کردن استایل به موارد map ما Adding styles to our map items

• اضافه کردن ردیف _ ستون بوت استرپ Adding bootstrap row _ column

• React-Router Dom قسمت-1 React-Router Dom Part-1

• React-Router Dom قسمت-2 React-Router Dom Part-2

• هوک useParams useParams Hook

• نمایش داده های شخصیت های جستجو شده Displaying the data of searched characters

• Api نقل قول ها Quotes Api

• استفاده از تابع Map برای نمایش نقل قول ها Using Map function to display the Quotes

• اضافه کردن طرح بندی _ CSS در یک فایل جستجو Adding Layout _ CSS in a Search File

• اضافه کردن آیکون های material-icons در کد ما Adding material-icons in our code

• دانلود فایل‌های پروژه Download the project files

پروژه-54: برنامه یادآوری تولد React با استفاده از React Js Project-54: React Birthday Reminder App Using React Js

• مقدمه Introduction

• مقدمه ای بر برنامه یادآوری تولد ما Introduction to our Birthday Reminder App

• ایجاد برنامه یادآوری تولد React Creating React Birthday Reminder App

• اضافه کردن آرایه داده و فایل اضافی به برنامه ما Adding data array and additional file to our app

• کد برای نمایش تولد امروز Code to display the today_s birthday

• کد برای نمایش تولد آینده یک شخص Code to display the upcoming birthday of a person

• اضافه کردن طرح بندی به کارت ما Adding a Layout to our Card

• اضافه کردن استایل به کارت ما Adding Styles to our Card

• اضافه کردن استایل به تصویر ما Adding Styles to our Image

• اضافه کردن استایل به div کلیک و ایجاد واکنشگرا برای برنامه ما Adding Styles to click div and making our app responsive

• اضافه کردن طرح بندی به فایل تولد آینده Adding layout to upcoming birthday file

• اضافه کردن استایل به فایل تولد آینده Adding styles to upcoming birthday file

• دانلود فایل‌های پروژه Download the project files

پروژه-55: جستجوی کتاب (برنامه چند صفحه ای کتابخانه برای جستجوی هر کتاب) با استفاده از react. Project-55: Search Book (Multipage Library app to search any book ) using react.

• مقدمه Introduction

• معرفی کتابفروشی Introduction to bookstore

• ایجاد برنامه react ما Creating our react app

• نوار ناوبری Navbar

• اضافه کردن CSS به نوار ناوبری ما Adding CSS to our Navbar

• بخش Hero Hero Section

• اضافه کردن CSS به بخش Hero ما Adding CSS to our Hero section

• React-Router-Dom قسمت 1 React-Router-Dom Part 1

• React-Router-Dom قسمت 2 React-Router-Dom Part 2

• چگونه کلید Google API خود را دریافت کنیم How to get your Google API Key

• Google Books API Google Books API

• چگونه از Google Books API در برنامه خود استفاده کنیم How to use Google Books API in our app

• هوک useNavigate چیست What is useNavigate Hook

• اضافه کردن هوک useNavigate به پروژه ما Adding useNavigate Hook to our project

• هوک useParams useParams Hook

• اضافه کردن هوک useParams به فایل اصلی ما Adding useParams Hook to our main file

• اضافه کردن استایل به فایل اصلی ما Adding styles to our main file

• صفحه ژانر Genre Page

• صفحه جستجوی ما چیست What is our Search Page

• نمایش ژانرهای مختلف Displaying different genres

• CSS به صفحه ژانر CSS to genre page

• دانلود فایل‌های پروژه Download the project files

پروژه-56: وب سایت چند صفحه ای تور و مسافرت با استفاده از react.js، CSS، react-router- Project-56: Tours & Travel Multi Page Website using react.js, CSS, react-router-

• مقدمه Introduction

• مقدمه ای بر برنامه Travel_Tour ما Introduction to our Travel_ Tour App

• ایجاد برنامه React ما Creating Our React App

• ایجاد نوار ناوبری برای برنامه ما Creating Navbar for our App

• ایجاد بخش Hero برای برنامه ما Creating Hero section for our App

• اضافه کردن CSS به بخش Hero ما Adding CSS to our Hero section

• اضافه کردن بخش اصلی به برنامه ما Adding Main section to our App

• اضافه کردن CSS به بخش اصلی Adding CSS to Main section

• ایجاد واکنشگرا برای بخش اصلی ما Making our Main section responsive

• اضافه کردن ویدیو در بخش ویدیویی ما Adding video in our Video section

• اضافه کردن CSS به بخش ویدیو Adding CSS to Video section

• اضافه کردن فوتر Adding Footer

• کد برای صفحه سفر ما Code for our Travel Page

• React-Router-Dom React-Router-Dom

• بخش قیمت گذاری در برنامه ما Pricing Section in our app

• کد برای بخش قیمت گذاری ما Code for our Pricing Section

• CSS به بخش قیمت گذاری ما CSS to our Pricing Section

• دانلود فایل‌های پروژه Download the project files

پروژه-57: داشبورد مدیریت React با استفاده از React.js، Material-Ui، هوک‌های react، Reac Project-57: React Admin Dashboard Using React.js, Material-Ui, react hooks, Reac

• مقدمه Introduction

• مقدمه ای بر داشبورد مدیریت Introduction to Admin Dashboard

• ایجاد برنامه react Creating a react App

• تم Theme

• نوار ناوبری Navbar

• اضافه کردن استایل به نوار ناوبری Adding style to navbar

• پشته Stack

• FlexBox FlexBox

• نوار کناری سمت راست Rightbar

• نوار کناری Sidebar

• حالت شب Nightmode

• ProfileCard1 ProfileCard1

• ProfileCard2 ProfileCard2

• ProfileCard3 ProfileCard3

• Card1 Card1

• rc-progress rc-progress

• Chartjs Chartjs

• اضافه کردن نمودارها در برنامه ما Adding Charts in our app

• پیشرفت دایره ای Circular Progress

• اضافه کردن استایل بیشتر به برنامه ما Adding more style to our App

• دانلود فایل‌های پروژه Download the project files

پروژه-58: برنامه مشاور مسافرتی نقشه گوگل با استفاده از React.js، موقعیت جغرافیایی، نقشه گوگل Project-58: Google Map Travel Advisor app using React.js, Geolocation, Google Ma

• مقدمه Introduction

• مقدمه ای بر برنامه مشاور مسافرتی ما Introduction to our Travel Advisor App

• ایجاد برنامه React Creating React App

• صفحه اصلی Home Page

• اضافه کردن CSS به صفحه اصلی ما Adding CSS to our Home Page

• React-Router-Dom قسمت 1 React-Router-Dom Part 1

• React-Router-Dom قسمت 2 React-Router-Dom Part 2

• Open Trip Map API Open Trip Map API

• اضافه کردن کد به فایل اصلی Adding Code to the Main file

• اضافه کردن کد به فایل جزئیات Adding Code to the Detail file

• اضافه کردن طرح بندی به صفحه اصلی ما با استفاده از MUI Adding Layout to our Main page using MUI

• رندر کردن لیست مکان های ما با استفاده از Map Rendering our Places List using Map

• اضافه کردن نقشه به برنامه ما Adding Map to our App

• دانلود فایل‌های پروژه Download the project files

پروژه-59: خط زمانی تعاملی با استفاده از React، React Hooks، CSS Project-59: Interactive Timeline using React, React Hooks, CSS

• مقدمه Introduction

• مقدمه ای بر برنامه Timeline ما Introduction to our Timeline App

• بسته React-Vertical-Timeline React-Vertical-Timeline package

• اضافه کردن رویدادها در خط زمانی ما Adding events in our timeline

• اضافه کردن CSS به برنامه ما Adding CSS to our App

• دانلود فایل‌های پروژه Download the project files

پروژه-60: استفاده از نمودارها در react و ایجاد لینک های قابل کلیک مختلف روی نمودار Project-60: Using Charts in react and creating Different Clickable Links on Char

• مقدمه Introduction

• مقدمه ای بر برنامه ما Introduction to our app

• استفاده از Chartjs Using Chartjs

• ایجاد انواع مختلف نمودار Creating different types of chart

• اضافه کردن طرح بندی به نمودار ما Adding layout to our Chart

• اضافه کردن CSS به نمودار ما Adding CSS to our Chart

• اضافه کردن لینک های قابل کلیک به نمودار Adding clickable links to the chart

• دانلود فایل‌های پروژه Download the project files

پروژه-61: برنامه ریز وعده های غذایی با استفاده از Spooncular API، React Hooks، CSS، Bootstrap Project-61: Meal Planner App using Spooncular API, React Hooks, CSS, Bootstrap

• مقدمه Introduction

• ایجاد برنامه React _ اضافه کردن صفحه اصلی Creating React App _ adding Homepage

• نحوه استفاده از Api در برنامه ما - How to use Api in our app -

• طرح بندی بوت استرپ و کارت Bootstrap Layout and Card

• اضافه کردن بخش اصلی به برنامه ما Adding Main section to our App

• دریافت داده های تغذیه ای و دستورالعمل های پخت و پز از api Getting Nutritional data and cooking instructions from api

• عملکرد بخش مدل Working of a model section

• بخش مدل قسمت-1 Model Section Part-1

• بخش مدل قسمت-2 Model Section Part-2

• اضافه کردن نوار ناوبری (ردیاب کالری) Adding Navbar(Calorie Tracker)

• اضافه کردن قابلیت به ردیاب ما Adding Functionality to our tracker

پروژه-62: برنامه پخش کننده رادیویی در React با استفاده از Radio-Browser API CSS، React Hooks Project-62: Radio Player App in React using Radio-Browser API CSS, React Hooks

• مقدمه Introduction

• معرفی پخش کننده رادیو Intro to Radio Player

• نصب تمام وابستگی ها و بسته ها Installing all dependencies and packages

• نحوه دریافت داده از api How to get data from the api

• اضافه کردن دکمه ژانر و تغییر وضعیت stationType Adding genre Button and changing the state of stationType

• اضافه کردن کارت های ایستگاه مختلف Adding Different station Cards

• اضافه کردن پخش کننده صوتی Adding Audio Player

• اضافه کردن استایل به پخش کننده رادیو ما Adding styles to our Radio Player

• دانلود فایل‌های پروژه Download the project files

پروژه-63: کیت درام با استفاده از React، React Hooks، CSS، JavaScript، Material-UI Project-63: Drum Kit using React, React Hooks, CSS, JavaScript, Material-UI

• مقدمه Introduction

• مقدمه ای بر برنامه Drum Kit Introduction to Drum Kit App

• ایجاد طرح بندی برای کیت درام ما Creating Layout for our Drum Kit

• 3 اضافه کردن دکمه Drum به کیت Drum 3 Adding Drum Button to out Drum Kit

• CSS Drum CSS Drum

• دانلود فایل‌های پروژه Download the project files

پروژه-64: ساخت بازی تاس با استفاده از React، React Hooks، CSS، Javascript Project-64: Build Dice Game using React, React Hooks, CSS, Javascript

• مقدمه Introduction

• مقدمه ای بر بازی تاس Introduction to Dice Game

• اضافه کردن طرح بندی به برنامه ما Adding Layout to our App

• تولید اعداد تصادفی روی تاس Generating random numbers on Dice

• نمایش نتیجه بازی ما Displaying our Game Result

• اضافه کردن دستورالعمل به بازی ما Adding Instructions to our game

• اضافه کردن CSS به برنامه ما Adding CSS to our App

• دانلود فایل‌های پروژه Download the project files

پروژه-65: برنامه Pokemon با استفاده از React، React Hooks، CSS، Api، Bootstrap Project-65: Pokemon App using React, React Hooks, CSS, Api, Bootstrap

• مقدمه Introduction

• 222 مقدمه ای بر برنامه Pokémon 222Introduction to Pokémon App

• اضافه کردن بخش Hero در برنامه Pokemon Adding Hero section in Pokemon App

• واکشی داده ها از Poke Api Fetching Data from Poke Api

• رندر کردن لیست Pokémon ما Rendering our Pokémon List

• اضافه کردن دکمه قبلی _ بعدی Adding Previous _ Next Button

• اضافه کردن CSS به کارت های Pokémon Adding CSS to Pokémon Cards

• ایجاد کامپوننت Pokémon Creating Pokémon Component

• ایجاد کامپوننت Pokémon قسمت 2 Creating Pokémon Component Part 2

• اضافه کردن CSS به برنامه ما Adding CSS to our App

• دانلود فایل‌های پروژه Download the project files

پروژه-66: بازی تطبیق اسلات با استفاده از React، React Hooks، CSS، Javascript، Materi Project-66: Slot Matching Game using React, React Hooks, CSS, Javascript, Materi

• مقدمه Introduction

• مقدمه ای بر دستگاه اسلات Introduction to Slot Machine

• اضافه کردن طرح بندی MUI به برنامه ما Adding MUI Layout to our app

• اضافه کردن طرح بندی قسمت 2 Adding Layout Part 2

• اضافه کردن Css به دستگاه اسلات ما Adding Css to our Slot Machine

• اضافه کردن قابلیت به دستگاه اسلات ما Adding Functionality to our Slot Machine

• اضافه کردن نوار ناوبری (هدر) Adding Navbar(Header)

• اضافه کردن قابلیت به نوار ناوبری ما Adding Functionality to our Navbar

• دانلود فایل‌های پروژه Download the project files

پروژه-67: برنامه شخصیت Marvel با استفاده از React، React Hooks، Marvel Api، CSS، Boots Project-67: Marvel Charcter App using React, React Hooks, Marvel Api, CSS, Boots

• مقدمه Introduction

• مقدمه ای بر برنامه Marvel ما Introduction to our Marvel App

• دریافت کلید Api Get Api Key

• ردیف، ستون و کارت بوت استرپ Bootstrap Row, Column _ Card

• واکشی داده ها از Marvel Api Fetch Data from Marvel Api

• رندر کردن لیست شخصیت های Marvel ما Rendering Our Marvel Characters List

• اضافه کردن استایل به کارت های Marvel ما Adding styles to our Marvel cards

• اضافه کردن توضیحات به هر شخصیت Adding description to every characters

• اضافه کردن استایل به توضیحات شخصیت ما Adding Style to our Character Description

• اضافه کردن نوار جستجو به برنامه Marvel ما Adding Searchbar to our Marvel App

• دانلود فایل‌های پروژه Download the project files

پروژه-68: برنامه ژنراتور Meme با استفاده از React، React Hooks، CSS، Bootstrap Project-68: Meme Generator App using React, React Hooks, CSS, Bootstrap

• مقدمه Introduction

• مقدمه ای بر برنامه Meme Generator ما Introduction to our Meme Generator App

• واکشی داده ها از meme api Fetch data from meme api

• اضافه کردن طرح بندی بوت استرپ به میم های ما Adding Bootstrap layout to our memes

• اضافه کردن قابلیت به دکمه View Adding Functionality to View button

• اضافه کردن هدر به برنامه ما Adding Header to our app

• دانلود فایل‌های پروژه Download the project files

پروژه-69: سازنده کلاژ عکس با استفاده از React، React Hooks، Bootstrap، CSS، Materi Project-69: Photo Collage Maker using React, React Hooks, Bootstrap, CSS, Materi

• مقدمه Introduction

• مقدمه ای بر برنامه Collage Maker Introduction to Collage Maker App

• ایجاد نوارهای ورودی در برنامه ما Creating Input bars in our App

• ایجاد نوار ورودی قسمت 2 Creating Input bar Part-2

• ایجاد لیست تصاویر (کلاژ) Creating Image list (Collage)

• اضافه کردن دکمه های کاربردی به برنامه ما Adding Functional Buttons to our App

• اضافه کردن CSS به Collage Maker ما Adding CSS to our Collage Maker

• دانلود فایل‌های پروژه Download the project files

پروژه-70: برنامه خبری با استفاده از React، React Hooks، CSS، Bootstrap، Api Project-70: News App using React, React Hooks, CSS, Bootstrap, Api

• مقدمه Introduction

• مقدمه ای بر برنامه News Introduction to News App

• اضافه کردن بخش Hero به برنامه ما Adding Hero section to our app

• واکشی داده ها از api Fetching data from the api

• ایجاد کارت های خبری Creating news cards

• ایجاد کارت های خبری Creating news cards

• اضافه کردن استایل به کارت ما Adding styles to our Card

• اضافه کردن دسته بندی ها به برنامه خبری ما Adding Categories to our News App

• اضافه کردن نوار جستجو به برنامه ما Adding Search bar to our App

• دانلود فایل‌های پروژه Download the project files

پروژه-71: پلتفرم تجارت الکترونیک (شبیه ساز آمازون) با React و Firebase Project-71: E-Commerce Platform (Amazon Clone) with React & Firebase

• مقدمه ای بر پروژه Intro To The Project

• شروع کار با React Getting Started With React

• سرصفحه eShop eShop Header

• صفحه اصلی eShop eShop Home Page

• React Props React Props

• React Routing React Routing

• صفحه پرداخت eShop eShop Checkout Page

• React Context API - React Context API

• اضافه کردن به سبد خرید Add To Basket

• حذف از سبد خرید Remove From Basket

• احراز هویت با استفاده از Firebase Authentication Using Firebase

• استقرار برنامه Deploying The App

• دانلود فایل‌های پروژه Download the project files

پروژه-72: برنامه چت در زمان واقعی با React ChatEngine & Socket.io Project-72: Real-time Chat Application with React ChatEngine & Socket.io

• مقدمه ای بر پروژه Intro To The Project

• شروع کار Getting Started

• React Chat Engine React Chat Engine

• اجزاء Components

• فید چت Chat Feed

• کامپوننت پیام من My Message Component

• کامپوننت پیام آنها Their Message Component

• رندر رسیدهای خوانده شده Render Read Receipts

• فرم پیام Message Form

• فرم ورود به سیستم Login Form

• به پایان رساندن پروژه Finishing Up The Project

• دانلود فایل‌های پروژه Download the project files

پروژه-73: برنامه استریم فیلم (OTT) با React، Omdb API و Bootstrap Project-73: Movies Streaming App (OTT) with React, Omdb API, and Bootstrap

• مقدمه ای بر پروژه Intro To The Project

• شروع کار Getting Started

• OMDb API OMDb API

• لیست فیلم Movie List

• سرصفحه لیست فیلم و جعبه جستجو MovieListHeading and Searchbox

• اجرای ویژگی جستجو Implementing Search Feature

• اضافه کردن به مورد علاقه Add To Favourite

• حذف از لیست علاقه مندی ها Remove From Favourites

• ذخیره سازی محلی Local Storage

• به پایان رساندن پروژه Finishing Up The Project

• دانلود فایل‌های پروژه Download the project files

پروژه-74: وب سایت اشتراک گذاری ویدیو با React، YouTube API و Material-UI Project-74: Video Sharing Website with React, YouTube API, and Material-UI

• مقدمه ای بر پروژه Into To The Project

• شروع کار Getting Started

• React Material-UI React Material-UI

• Youtube API Youtube API

• کامپوننت نوار جستجو SearchBar Component

• هوک های وضعیت React React State Hooks

• کامپوننت جزئیات ویدیو VideoDetail Component

• کامپوننت لیست ویدیو VideoList Component

• کامپوننت VideoItem VideoItem Component

• به پایان رساندن Finishing Up

• دانلود فایل‌های پروژه Download the project files

پروژه-75: برنامه وب لیست کارها با React، Material-UI و مدیریت وضعیت Project-75: To-Do List Web App with React, Material-UI, and State Management

• مقدمه ای بر پروژه Intro To The Project

• شروع کار با React Getting Started With React

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

• کامپوننت CreateArea CreateArea Component

• اضافه کردن یادداشت Add Note

• ادامه افزودن یادداشت. Add Note Continuation.

• CreateArea CSS CreateArea CSS

• کامپوننت یادداشت Note Component

• حذف یادداشت Deleting Note

• کامپوننت فوتر Footer Component

• تکمیل CSS Completing CSS

• به پایان رساندن Finishing Up

• دانلود فایل‌های پروژه Download the project files

پروژه-76: پلتفرم وبلاگ نویسی با React، Material-UI و GNews API Project-76: Blogging Platform with React, Material-UI, and GNews API

• مقدمه ای بر پروژه Intro To The Project

• شروع کار Getting Started

• userSlice.js userSlice.js

• store.js _ index.js store.js _ index.js

• کامپوننت صفحه اصلی Homepage Component

• کامپوننت نوار ناوبری Navbar Component

• پایان دادن به نوار ناوبری Finishing Navbar

• ویدیوی پروژه کامل Full Project Video

• Gnews API Gnews API

• کامپوننت وبلاگ ها Blogs Component

• به پایان رساندن پروژه Finishing Up The Project

• ویدیوی پروژه کامل Full Project Video

• دانلود فایل‌های پروژه Download the project files

پروژه-77: سایت شبکه های اجتماعی با Material-UI، React Hooks و Google OAu Project-77: Social Networking Site with Material-UI, React Hooks, and Google OAu

• مقدمه ای بر پروژه Intro To The Project

• ویدیوی پروژه کامل Full Project Video

• شروع کار Getting Started

• احراز هویت و امنیت Authentication and Security

• رمزگذاری پایگاه داده Database Encryption

• متغیرهای محیطی Environment Variables

• درهم سازی Hashing

• نمک زدن و درهم سازی Salting and Hashing

• کوکی ها Cookies

• جلسات Sessions

• Google OAuth Google OAuth

• دانلود فایل‌های پروژه Download the project files

پروژه-78: وب سایت نمونه کارها با React، Material-UI و مدیریت وضعیت Project-78: Portfolio Resume Website with React, Material-UI, and State Manageme

• ویدیوی پروژه کامل Full Project Video

• مقدمه ای بر پروژه Intro To The Project

• شروع کار. Getting Started.

• وابستگی ها و اجزاء Dependencies and Components

• ویدیوی پروژه کامل Full Project Video

• React-Router-DOM React-Router-DOM

• Props و Home Component Props and Home Component

• کامپوننت نوار ناوبری Navbar Component

• ویدیوی پروژه کامل Full Project Video

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

• تخریب تکلیف Destructuring Assignment

• کامپوننت نهایی Finishing Component

• ویدیوی پروژه کامل Full Project Video

• به پایان رساندن پروژه Finishing Up The Project

• دانلود فایل‌های پروژه Download the project files

پروژه-79: برنامه جستجوی Emoji با React، React DOM، HTML5 و CSS3 Project-79: Emoji Search App with React, React DOM, HTML5, and CSS3

• ویدیوی پروژه کامل Full Project Video

• ویدیوی پروژه کامل Full Project Video

• دانلود فایل‌های پروژه Download the project files

پروژه-80: جستجوگر شخصیت بد با React، React DOM و React Conte Project-80: Breaking Bad Character Finder with React, React DOM, and React Conte

• پروژه کامل full project

• دانلود فایل‌های پروژه Download the project files

پروژه-81: تولید کننده نقل قول تصادفی با React و Heroku Deployment Project-81: Random Quote Generator with React and Heroku Deployment

• ویدیوی پروژه کامل Full Project Video

• دانلود فایل‌های پروژه Download the project files

پروژه-82: برنامه تولید کننده رمز عبور با React، React DOM، HTML5 و CSS Project-82: Password Generator App with React, React DOM, HTML5, and CSS

• ویدیوی پروژه کامل Full Project Video

• دانلود فایل‌های پروژه Download the project files

پروژه-83: برنامه مسابقه با React، React DOM، HTML5 و SCSS Project-83: Quiz App with React, React DOM, HTML5, and SCSS

• ویدیوی پروژه کامل Full Project Video

• دانلود فایل‌های پروژه Download the project files

پروژه-84: گالری تصاویر UnSplash با React و ReactDOM Project-84: UnSplash Image Gallery with React and ReactDOM

• ویدیوی پروژه کامل Full Project Video

• دانلود فایل‌های پروژه Download the project files

پروژه-85: برنامه آزمایشی React Router با ReactJs، React Router Dom و Co Project-85: React Router Demo Application with ReactJs, React Router Dom, and Co

• ویدیوی پروژه کامل Full Project Video

• دانلود فایل‌های پروژه Download the project files

پروژه-86: برنامه قفسه کتاب با ReactJs، NPM، CSS و مدیریت وضعیت Project-86: Book Shelf App with ReactJs, NPM, CSS, and State Management

• ویدیوی پروژه کامل Full Project Video

• دانلود فایل‌های پروژه Download the project files

پروژه-87: برنامه یادداشت برداری با React و Redux برای مدیریت وضعیت Project-87: Note Taking App with React and Redux for State Management

• ویدیوی پروژه کامل Full Project Video

• دانلود فایل‌های پروژه Download the project files

پروژه-88: برنامه ثبت تماس با React، NPM و React Context Project-88: Contact Register App with React, NPM, and React Context

• ویدیوی پروژه کامل Full Project Video

• دانلود فایل‌های پروژه Download the project files

پروژه-89: برنامه مدیریت پول با React، NPM و React Context Project-89: Money Management App with React, NPM, and React Context

• ویدیوی پروژه کامل Full Project Video

• دانلود فایل‌های پروژه Download the project files

پروژه-90: برنامه رزرو تفریحی با React، NPM و Hooks Project-90: Resort Booking App with React, NPM, and Hooks

• ویدیوی پروژه کامل Full Project Video

• دانلود فایل‌های پروژه Download the project files

پروژه-91: ماشین حساب BMI با React، NPM و React Context Project-91: BMI Calculator with React, NPM, and React Context

• ویدئوی کامل پروژه Full Project Video

• دانلود فایل‌های پروژه Download the project files

پروژه ۹۲: فروشگاه مبلمان با React و Redux برای مدیریت وضعیت Project-92: Furniture Store with React and Redux for State Management

• ویدئوی کامل پروژه Full Project Video

• دانلود فایل‌های پروژه Download the project files

پروژه ۹۳: اپلیکیشن تابلوی امتیازات با ReactJs، NPM و React Context Project-93: Scoreboard App with ReactJs, NPM, and React Context

• ویدئوی کامل پروژه Full Project Video

• دانلود فایل‌های پروژه Download the project files

پروژه ۹۴: اپلیکیشن تولید کننده متا تگ ساخته شده با React-React Js Project-94: Meta Tag Generator Application made with React-React Js

• ویدئوی کامل پروژه Full Project Video

• دانلود فایل‌های پروژه Download the project files

پروژه ۹۵: اپلیکیشن وب سفارش غذا با React، Material-UI و React Router Project-95: Food Ordering Web App with React, Material-UI, and React Router

• ویدئوی کامل پروژه Full Project Video

• دانلود فایل‌های پروژه Download the project files

پروژه ۹۶: اپلیکیشن وب هواشناسی با React، Open Weather API و CSS Project-96: Weather Web App with React, Open Weather API, and CSS

• ویدئوی کامل پروژه Full Project Video

• دانلود فایل‌های پروژه Download the project files

پروژه ۹۷: اپلیکیشن دستور پخت غذا با React، Edamam API و Firebase Hosting Project-97: Food Recipe App with React, Edamam API, and Firebase Hosting

• ویدئوی کامل پروژه Full Project Video

• دانلود فایل‌های پروژه Download the project files

پروژه ۹۸: اپلیکیشن سبد خرید با React، React Hooks و API خارجی Project-98: Shopping Cart App with React, React Hooks, and External API

• ویدئوی کامل پروژه Full Project Video

• دانلود فایل‌های پروژه Download the project files

برنامه منوی کافه با React، React Hooks و Firebase Cafe Menu App with React, React Hooks, and Firebase

• ویدئوی کامل پروژه Full Project Video

• دانلود فایل‌های پروژه Download the project files

پروژه ۱۰۰: اپلیکیشن وب هاب کوکتل با React، React Hooks و Context API Project-100: Cocktail Hub Web App with React, React Hooks, and Context API

• ویدئوی کامل پروژه Full Project Video

• دانلود فایل‌های پروژه Download the project files

پروژه ۱۰۱: اپلیکیشن ارسال نقد و بررسی با React، Material-UI و CSS Project-101: Review Posting App with React, Material-UI, and CSS

• ویدئوی کامل پروژه Full Project Video

• دانلود فایل‌های پروژه Download the project files

پروژه ۱۰۲: اپلیکیشن تایمر پومودورو با React، Countdown Timer و CSS Project-102: Pomodoro Timer App with React, Countdown Timer, and CSS

• ویدئوی کامل پروژه Full Project Video

• دانلود فایل‌های پروژه Download the project files

پروژه ۱۰۳: اپلیکیشن جستجوی گوگل با React، Tailwind CSS، Google Search API Project-103: Google Search App with React, Tailwind CSS, Google Search API

• ویدئوی کامل پروژه Full Project Video

• دانلود فایل‌های پروژه Download the project files

پروژه ۱۰۴: بازی تیک تاک تو با React Project-104: Tic-Tac-Toe Game with React

• ویدئوی کامل پروژه Full Project Video

• دانلود فایل‌های پروژه Download the project files

پروژه ۱۰۵: شمارنده کلمات و حروف با React، useState و JavaScript Project-105: Word and Letter Counter with React, useState, and JavaScript

• ویدئوی کامل پروژه Full Project Video

• دانلود فایل‌های پروژه Download the project files

پروژه ۱۰۶: مبدل ارز با React Project-106: Currency Converter with React

• ویدئوی کامل پروژه Full Project Video

• دانلود فایل‌های پروژه Download the project files

پروژه ۱۰۷: برنامه تشخیص گفتار و دستیار صوتی با React Project-107: Speech Recognition and Voice Assistant App with React

• ویدئوی کامل پروژه Full Project Video

• دانلود فایل‌های پروژه Download the project files

پروژه ۱۰۸: برنامه ماشین حساب با React و Hooks Project-108: Calculator App with React and Hooks

• ویدئوی کامل پروژه Full Project Video

• دانلود فایل‌های پروژه Download the project files

پروژه ۱۰۹: برنامه پیگیری بودجه با React، Custom Hooks و Context Project-109: Budget Tracking App with React, Custom Hooks, and Context

• ویدئوی کامل پروژه Full Project Video

• دانلود فایل‌های پروژه Download the project files

پروژه ۱۱۰: پخش کننده موسیقی (کلون اسپاتیفای) با React و Spotify API Project-110: Music Player (Spotify Clone) with React and Spotify API

• ویدئوی کامل پروژه Full Project Video

• دانلود فایل‌های پروژه Download the project files

پروژه ۱۱۱: اپلیکیشن تقویم با قابلیت زمان‌بندی Project-111: Calendar App with Scheduling Functionality

• ویدئوی کامل پروژه Full Project Video

• دانلود فایل‌های پروژه Download the project files

پروژه ۱۱۲: اپلیکیشن دیکشنری با React Project-112: Dictionary App with React

• ویدئوی کامل پروژه Full Project Video

• دانلود فایل‌های پروژه Download the project files

پروژه ۱۱۳: کلون یوتیوب با React Project-113: YouTube Clone with React

• ویدئوی کامل پروژه Full Project Video

• دانلود فایل‌های پروژه Download the project files

پروژه ۱۱۴: بازی کندی کراش با React Project-114: Candy Crush Game with React

• ویدئوی کامل پروژه Full Project Video

• دانلود فایل‌های پروژه Download the project files

پروژه ۱۱۵: بینش‌های نجومی با React، CSS و NASA APOD API Project-115: Astronomy Insights with React, CSS, and NASA APOD API

• ویدئوی کامل پروژه Full Project Video

• دانلود فایل‌های پروژه Download the project files

بازی سنگ، کاغذ، قیچی با React، CSS و Hooks Rock, Paper, Scissors Game with React, CSS, and Hooks

• ویدئوی کامل پروژه Full Project Video

• دانلود فایل‌های پروژه Download the project files

پروژه ۱۱۷: اپلیکیشن اعلان لحظه‌ای با React، CSS، Hooks و Socket.io Project-117: Real-time Notification App with React, CSS, Hooks, and Socket.io

• ویدئوی کامل پروژه Full Project Video

• دانلود فایل‌های پروژه Download the project files

پروژه ۱۱۸: اپلیکیشن ردیاب COVID-19 با React، CSS و Hooks Project-118: COVID-19 Tracker App with React, CSS, and Hooks

• ویدئوی کامل پروژه Full Project Video

• دانلود فایل‌های پروژه Download the project files

پروژه ۱۱۹: اپلیکیشن تولید کننده GIF تصادفی با React، Hooks، CSS، API Project-119: Random GIF Generator App with React, Hooks, CSS, API

• ویدئوی کامل پروژه Full Project Video

• دانلود فایل‌های پروژه Download the project files

پروژه ۱۲۰: برنامه ردیاب آتش سوزی جنگل با React, CSS, JavaScript ناهمزمان, NASA Open API Project-120:Wildfire Tracker App with React, CSS, Asynchronous JS, NASA Open API

• ویدئوی کامل پروژه Full Project Video

• دانلود فایل‌های پروژه Download the project files