English | MP4 | AVC 1280×720 | AAC 44KHz 2ch | 58 lectures (6h 9m) | 3.12 GB
Build a personal app with Next/React JS and Typescript. Blogs, portfolios, and search features. No 3rd party dependency.
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 basis
What 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.
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
Table of Contents
Introduction
1 Introduction
2 How To Resolve Issues
Layout Preparation
3 Init Project
4 Tailwind Css
5 Next 13 Changes Link
6 Page Layout
7 Footer Component
8 Header and Navbar
9 Portfolios and Blogs Components
10 Base Layout
Markdown Content and Library
11 Content
12 Get File Names
13 Get Blog Content
14 Function Refactor
15 Blog Interface
16 Parse MD
17 Get All Blogs
18 Blog Lib
Blogs Feature
19 Display Blogs
20 Blog Detail Page
21 New Layout
22 Alias Paths
23 Get Blog By Slug
24 Static Props and Paths Types
25 Display Props Data
26 Markdown To Html
27 Tailwind typography
28 Blog Header
Content Search
29 Content Search
30 Create search docs
31 JS Search
32 Content Indexer
33 Perform Search
34 Search Content Type
35 Show Results
UX Search Improvements
36 Handle Click
37 Handle click if results
38 Check if clicking on input
39 Clear Results
40 Handle Escape Key
Store Search Data
41 Build Search Index
42 Save search data
Portfolio Feature
43 Portfolio interface
44 Get portfolios
45 Pass Portfolios as Props
46 Get Portfolio By Slug
47 Page layout Css
48 Detail Page Finish
Generic Search More Pages
49 Generic Content Data
50 Navigate to searched content
51 All Blogs Page
52 All Portfolios Page
53 Data subset and shortify
54 Sort Content
Deployment
55 Next 13 Update
56 Github repo
57 Project Deployment
58 Adds Content & Course Finish
Resolve the captcha to access the links!