M
0
Next Js With React - Build Personal App (Blogs & Portfolios)
Published 11/2022
MP4 | Video: h264, 1920x1080 | Audio: AAC, 44.1 KHz
Language: English | Size: 3.13 GB | Duration: 6h 9m
Build a personal app with Next/React JS and Typescript. Blogs, portfolios, and search features. No 3rd party dependency.
Published 11/2022
MP4 | Video: h264, 1920x1080 | Audio: AAC, 44.1 KHz
Language: English | Size: 3.13 GB | Duration: 6h 9m
Build a personal app with Next/React JS and Typescript. Blogs, portfolios, and search features. No 3rd party dependency.
What you'll learn
Get an understanding of how to create personal app in practical way
Create a complete portfolio/blog app
Present yourself with your content platform
Establish yourself in the field of the exciting Next and React web development environment
Requirements
Basic Next JS knowledge is required.
Description
What is Next.js?Next.js is a React-based framework that provides infrastructure and simple development experience for server-side rendered(SSR) & static page applications.An intuitive page-based routing system (with support for dynamic routes)Pre-rendering, both static generation (SSG) and server-side rendering (SSR), are supported on a per-page basisWhat is Typescript?TypeScript is an open-source language that builds on JavaScript, one of the world's most used tools, by adding static type definitions.Is this course right for you?This course covers creating a personal application (blogs, portfolios) without needing third-party dependencies - databases or cms. Create a personal app with search functionality deployed to Vercel.The course doesn't explain Next Js/React Js specific functions.This course will give you the confidence and skills required to start your project.What are you going to work on?You will build a personal application from scratch. You will learn how to write code in Typescript language - a superset of Javascript providing additional features and a static type checker.The focus of this course is coding and not writing HTML content. The course starts with the preparation of the base layout of the application. All design - images, and content are provided by the instructor.After the layout is prepared, the students will work on the functionality to access and fetch the local data stored in markdown files.Students will learn to work with a file system - fs package in this part. The content of the files is retrieved as a string of data. To get the formatted data, students will learn how to parse "frontmatter" metadata and the markdown content from the file.The fetched content is then provided to the pages and displayed in the application. After the content part is finished, students will start working on the search functionality. All content presented on the website can be searched via the input component provided in the navigation bar.The course covers using all the content to build a local search index stored as a JSON file. This JSON file is then fed as a data source to the search component.Students will work on the portfolios feature when the search functionality is finished. The portfolios feature will be very similar to the blogs. Portfolios are also kept as markdown data, which means lots of implementation is shared with the blogs.The last part of the course covers deployment to the Vercel platform.
Overview
Section 1: Introduction
Lecture 1 Introduction
Lecture 2 How To Resolve Issues
Section 2: Layout Preparation
Lecture 3 Init Project
Lecture 4 Tailwind Css
Lecture 5 Next 13 Changes -
Lecture 6 Page Layout
Lecture 7 Footer Component
Lecture 8 Header and Navbar
Lecture 9 Portfolios and Blogs Components
Lecture 10 Base Layout
Section 3: Markdown Content and Library
Lecture 11 Content
Lecture 12 Get File Names
Lecture 13 Get Blog Content
Lecture 14 Function Refactor
Lecture 15 Blog Interface
Lecture 16 Parse MD
Lecture 17 Get All Blogs
Lecture 18 Blog Lib
Section 4: Blogs Feature
Lecture 19 Display Blogs
Lecture 20 Blog Detail Page
Lecture 21 New Layout
Lecture 22 Alias Paths
Lecture 23 Get Blog By Slug
Lecture 24 Static Props and Paths Types
Lecture 25 Display Props Data
Lecture 26 Markdown To Html
Lecture 27 Tailwind typography
Lecture 28 Blog Header
Section 5: Content Search
Lecture 29 Content Search
Lecture 30 Create search docs
Lecture 31 JS Search
Lecture 32 Content Indexer
Lecture 33 Perform Search
Lecture 34 Search Content Type
Lecture 35 Show Results
Section 6: UX Search Improvements
Lecture 36 Handle Click
Lecture 37 Handle click if results
Lecture 38 Check if clicking on input
Lecture 39 Clear Results
Lecture 40 Handle Escape Key
Section 7: Store Search Data
Lecture 41 Build Search Index
Lecture 42 Save search data
Section 8: Portfolio Feature
Lecture 43 Portfolio interface
Lecture 44 Get portfolios
Lecture 45 Pass Portfolios as Props
Lecture 46 Get Portfolio By Slug
Lecture 47 Page layout Css
Lecture 48 Detail Page Finish
Section 9: Generic Search + More Pages
Lecture 49 Generic Content Data
Lecture 50 Navigate to searched content
Lecture 51 All Blogs Page
Lecture 52 All Portfolios Page
Lecture 53 Data subset and shortify
Lecture 54 Sort Content
Section 10: Deployment
Lecture 55 Next 13 Update
Lecture 56 Github repo
Lecture 57 Project Deployment
Lecture 58 Adds Content & Course Finish
Anybody interested how to create locally stored content platform with search feature.,People looking for a practical web development guide.,This course is for everyone eager to understand how to build the app from scratch.
Download link
rapidgator.net:
You must reply in thread to view hidden text.
uploadgig.com:
You must reply in thread to view hidden text.
nitroflare.com:
You must reply in thread to view hidden text.
1dl.net:
You must reply in thread to view hidden text.
