وب سایت تخصصی شرکت فرین
دسته بندی دوره ها

Next.js & React – Build Full Stack News Portal Application

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

Build Full Stack News Portal Application Include Frontend and Backend with Next.js, React.js,Express.js and MongoDB


1 - Introduction
  • 1 -Introduction Project - What You Will Build
  • 2 -Welcome to the Course
  • 3 -Need Your Support
  • 4 -My Mission
  • 5 -Course Review - It will Inspire me a Lot

  • 2 - React Fundamentals React Structure, JSX component & Rendering
  • 1 -React Introduction
  • 2 -Create New React App Using Vite
  • 3 -Project Run And Build Command
  • 4 -Dive Inside React Project Structure
  • 5 -Organizing File Folders
  • 6 -Best VS Code Extensions And Settings For React Development
  • 7 -Primary Understanding On Component Part 1
  • 8 -Primary Understanding On Component Part 2

  • 3 - JSX And Conventions
  • 1 -JSX And Conventions
  • 2 -JSX Short Hand If else
  • 3 -JSX Immediately invoked function
  • 4 -JSX Loop Inside
  • 5 -JSX Conditional Rendering Using If Else
  • 6 -JSX Conditional Rendering Using Switch Statement
  • 7 -JSX Conditional Rendering Using Ternary Operator
  • 8 -JSX Conditional Rendering Using Logical And And
  • 9 -JSX Conditional Rendering Using Immidiatly Invoked Function

  • 4 - Manage React Component
  • 1 -Passing Properties to Child Component
  • 2 -Passing Simple String to Child Component
  • 3 -Passing Object to Child Component
  • 4 -Passing Function to Child Component
  • 5 -Managing Click Event
  • 6 -Managing Form Submit

  • 5 - React Routing
  • 1 -Applying React Router Dom
  • 2 -Link And NavLink For Router
  • 3 -Browser Router VS HashRouter
  • 4 -Passing Parameter Via Naviagation

  • 6 - React Hook & State Management
  • 1 -[Hook] Meet With Hook
  • 2 -[Hook] useRef InnerText InnerHTML
  • 3 -[Hook] useRef Working With Attribute
  • 4 -useRef Working With Input Element
  • 5 -useRef Working With CSS Class
  • 6 -useRef Caching Expensive Computation
  • 7 -useState Understading Inside
  • 8 -useState Working With Immutable Object
  • 9 -useState Working With Immutable Array Part 1
  • 10 -useState Working With Immutable Array Part 2
  • 11 -useState Managing Form Like Pro Part 1
  • 12 -useState Managing Form Like Pro Part 2
  • 13 -useEffect understanding arguments and uses
  • 14 -useEffect calling api using promises
  • 15 -useEffect calling api usig async await

  • 7 - Express JS Fundamental
  • 1 -Introduction What is Express Js
  • 2 -Your First Express Application
  • 3 -Express js Routing
  • 4 -Four Topic We Need To Focus
  • 5 -Understanding Response
  • 6 -Simple String Response
  • 7 -Response Status Code
  • 8 -JSON Response
  • 9 -Response Download
  • 10 -Response Redirect
  • 11 -Response Header
  • 12 -Response Set Cookies
  • 13 -Response Clear Cookies
  • 14 -Working With Request
  • 15 -Get Request With URL Query
  • 16 -Working With Get Request Header
  • 17 -Simple Post Request
  • 18 -Post Request With URL Query
  • 19 -Post Request With Header Properties
  • 20 -Post application-json
  • 21 -Working With Multipart Form Data
  • 22 -File Upload
  • 23 -Middleware
  • 24 -Application Middleware
  • 25 -Route Middleware

  • 8 - MongoDB Fundamental - A NoSQL Database
  • 1 -Introduction to MongoDB
  • 2 -Installing MongoDB and Compass
  • 3 -Connecting to MongoDB
  • 4 -Schema and Models
  • 5 -Create and Save a document
  • 6 -Find documents in multiple ways
  • 7 -Query API Select, Sort, Limit, Count Documents
  • 8 -Complex Query Comparison Operators
  • 9 -Complex Query And, Or Operations
  • 10 -Exercise Advanced Query
  • 11 -Update a document (Way 1)
  • 12 -Update a document (Way 2)
  • 13 -Delete documents in 2 ways

  • 9 - Next JS Foundation
  • 1 -Environment Tools Setup
  • 2 -What and Why Next JS
  • 3 -What is the Different between React and Next js
  • 4 -Create New App And Explore Build Optimization Process
  • 5 -Playing With Project Structure
  • 6 -Primary Page Concept And Functional Component
  • 7 -Working With Static Asset Inside Public
  • 8 -Working With Global And Module CSS
  • 9 -Exploring Client Side Rendering
  • 10 -Exploring Server Side Redering
  • 11 -Where use SSR Where CSR
  • 12 -Why we are writing use Client
  • 13 -Exploring Directory Routing Concept
  • 14 -Neasted Directory Routing Concept
  • 15 -Basic Link Component
  • 16 -Progress Bar In Routing
  • 17 -Managing Active Link
  • 18 -Link Component Query
  • 19 -Link Component Query With useSearchParams
  • 20 -Link Component Prefetch and Replace Properties
  • 21 -Programmatically Routing Details
  • 22 -Thinking In Next JS What About Server Component
  • 23 -Thinking In Next JS What About Client Component

  • 10 - Next.js Advance Config and Optimizations
  • 1 -[Config] Understanding Base Path And Environment Variable
  • 2 -Understanding Header Config
  • 3 -Header Security Config Part 1
  • 4 -Header Security Config Part 2
  • 5 -Header Security Config Part 3
  • 6 -Connection And Compression
  • 7 -Image Optimization
  • 8 -Font Optimization Part 1
  • 9 -Font Optimization Part 2
  • 10 -Script And Static Assets

  • 11 - Next.js Middleware And 404 page
  • 1 -Middleware Setup Part 1
  • 2 -Middleware Setup Part 2
  • 3 -Not Found Page

  • 12 - Next.js Basic Portfolio Website With Admin Panel
  • 1 -Next.js Basic Portfolio Website With Admin Panel
  • 2 -Create Nextjs Project and Packages
  • 2 -Website Excise Files.zip
  • 2 -website54.zip
  • 2 - Basic Portfolio Project Source Code - Downloadable Resource.html
  • 2 - Basic Portfolio Website Excise File - Downloadable Resources.html
  • 3 -Mongodb Database Setup
  • 4 -Create Admin Navigation Menu Components Part 1
  • 4 -create admin navigation menu components part 1.zip
  • 5 -Create Admin Navigation Menu Components Part 2
  • 5 -create admin navigation menu components part 2.zip
  • 6 -Create Admin Navigation Menu Components Part 3
  • 6 -create admin navigation menu components part 3.zip
  • 7 -Create Home Form for Store Data Part 1
  • 7 -create home form for store data part 1.zip
  • 8 -Create Home Form for Store Data Part 2
  • 8 -create home form for store data part 2.zip
  • 9 -Create About Page Form
  • 9 -create about page form.zip
  • 10 -Create Experience Page Form
  • 10 -create experience page form.zip
  • 11 -Create Education Page Form
  • 11 -create education page form.zip
  • 12 -Create Project Page Form
  • 12 -create project page form.zip
  • 13 -Work For Cerate Model
  • 13 -work for cerate model.zip
  • 14 -Create Api for All Components Part 1
  • 14 -create api for all components part 1.zip
  • 15 -Create Api for All Components Part 2
  • 15 -create api for all components part 2.zip
  • 16 -Create Common API Services
  • 16 -create common api services.zip
  • 17 -Add Data to Database Part 1
  • 17 -add data to database part 1.zip
  • 18 -Add Data to Database Part 2 (Experience Issue Solve)
  • 18 -add data to database part 2 (experience issue solve).zip
  • 19 -Add Reset From Data
  • 19 -add reset from data.zip
  • 20 -Get List of Data and Show
  • 20 -get list of data and show.zip
  • 21 -Update Home And About Data Part 1
  • 21 -update home and about data part 1.zip
  • 22 -Update Home And About Data Part 2
  • 22 -update home and about data part 2.zip
  • 23 -Render Experience Data in Page
  • 23 -render experience data in page.zip
  • 24 -Render Education and Project Data in Page
  • 24 -render education and project data in page.zip
  • 25 -Login Authentication Part 1
  • 25 -login authentication part 1.zip
  • 26 -Login Authentication Part 2
  • 26 -login authentication part 2.zip
  • 27 -Login Authentication Part 3
  • 27 -login authentication part 3.zip
  • 28 -Login Authentication Part 4
  • 28 -login authentication part 4.zip
  • 29 -User Logout-
  • 30 -Work for Frontend Fetch Data Part 1
  • 30 -work for frontend fetch data part 1.zip
  • 31 -Work for Frontend Fetch Data Part 2
  • 31 -work for frontend fetch data part 2.zip
  • 32 -Design Frontend NavBar Part 1
  • 32 -design frontend navbar part 1.zip
  • 33 -Design Frontend NavBar Part 2
  • 33 -design frontend navbar part 2.zip
  • 34 -Design Frontend NavBar Part 3
  • 34 -design frontend navbar part 3.zip
  • 35 -Design Frontend NavBar Part 4
  • 35 -design frontend navbar part 4.zip
  • 36 -Design Frontend Home Page Part 1
  • 36 -design frontend home page part 1.zip
  • 37 -Design Frontend Home Page Part 2
  • 37 -design frontend home page part 2.zip
  • 38 -Design Frontend Home Page Part 3
  • 38 -design frontend home page part 3.zip
  • 39 -Design Frontend Home Page Part 4
  • 39 -design frontend home page part 4.zip
  • 40 -Design Frontend About Page Part 1
  • 40 -design frontend about page part 1.zip
  • 41 -Design Frontend About Page Part 2
  • 41 -design frontend about page part 2.zip
  • 42 -Design Frontend About Page Part 3
  • 42 -design frontend about page part 3.zip
  • 43 -Design Frontend Experience and Education Page Part 1
  • 43 -design frontend experience and education page part 1.zip
  • 44 -Design Frontend Experience and Education Page Part 2
  • 44 -design frontend experience and education page part 2.zip
  • 45 -Design Frontend Experience and Education Page Part 3
  • 45 -design frontend experience and education page part 3.zip
  • 46 -Design Frontend Project Page Part 1
  • 46 -design frontend project page part 1.zip
  • 47 -Design Frontend Project Page Part 2
  • 47 -design frontend project page part 2.zip
  • 48 -Design Frontend Project Page Part 3
  • 48 -design frontend project page part 3.zip
  • 49 -Design Frontend Contact Us Page Part 1
  • 49 -design frontend contact us page part 1.zip
  • 50 -Design Frontend Contact Us Page Part 2
  • 50 -design frontend contact us page part 2.zip
  • 51 -Design Frontend Contact Us Page Part 3
  • 51 -design frontend contact us page part 3.zip
  • 52 -Contact Us Form Submit Part 1
  • 52 -contact us form submit part 1.zip
  • 53 -Contact Us Form Submit Part 2
  • 53 -contact us form submit part 2.zip
  • 54 -Delete Education Data Part 1
  • 54 -delete education data part 1.zip
  • 55 -Delete Education Data Part 2
  • 55 -delete education data part 2.zip
  • 56 -Deploy Next.js Basic Portfolio to Web Server

  • 13 - Start To Build Next JS Complete Advance News Portal Site
  • 1 -News Portal Introduction Video-
  • 2 -News Excise Files.zip
  • 2 -Project Structure
  • 2 - News Portal Project Excise File.html
  • 3 -Environment Setup

  • 14 - News Portal Project Setup
  • 1 -Project Setup Part 1-
  • 2 -Project Setup Part 2
  • 3 -Install Tailwind Css
  • 4 -Project Setup Part 3
  • 139,000 تومان
    بیش از یک محصول به صورت دانلودی میخواهید؟ محصول را به سبد خرید اضافه کنید.
    افزودن به سبد خرید
    خرید دانلودی فوری

    در این روش نیاز به افزودن محصول به سبد خرید و تکمیل اطلاعات نیست و شما پس از وارد کردن ایمیل خود و طی کردن مراحل پرداخت لینک های دریافت محصولات را در ایمیل خود دریافت خواهید کرد.

    ایمیل شما:
    تولید کننده:
    شناسه: 44449
    حجم: 12148 مگابایت
    مدت زمان: 1518 دقیقه
    تاریخ انتشار: ۲۰ اردیبهشت ۱۴۰۴
    دیگر آموزش های این مدرس
    طراحی سایت و خدمات سئو

    139,000 تومان
    افزودن به سبد خرید