Companies Home Search Profile

Next JS with React - Build Personal App (Blogs & Portfolios)

Focused View

Eincode by Filip Jerga,Filip Jerga

6:08:09

204 View
  • 1 - Introduction.mp4
    03:31
  • 2 - How To Resolve Issues.mp4
    05:51
  • 3 - Init Project.mp4
    04:52
  • 3 - code.zip
  • 3 - project.zip
  • 4 - Tailwind Css.mp4
    05:55
  • 4 - code.zip
  • 5 - Next 13 Changes Link.html
  • 6 - Page Layout.mp4
    09:18
  • 6 - code.zip
  • 6 - layout with updated link next 13.zip
  • 7 - Footer Component.mp4
    08:34
  • 7 - code.zip
  • 8 - Header and Navbar.mp4
    08:17
  • 8 - code.zip
  • 9 - Portfolios and Blogs Components.mp4
    12:10
  • 9 - code.zip
  • 10 - Base Layout.mp4
    05:52
  • 10 - code.zip
  • 11 - Content.mp4
    07:36
  • 11 - code.zip
  • 11 - content.zip
  • 12 - Get File Names.mp4
    11:42
  • 12 - code.zip
  • 13 - Get Blog Content.mp4
    05:37
  • 13 - code.zip
  • 14 - Function Refactor.mp4
    05:17
  • 14 - code.zip
  • 15 - Blog Interface.mp4
    06:02
  • 15 - code.zip
  • 16 - Parse MD.mp4
    06:27
  • 16 - code.zip
  • 17 - Get All Blogs.mp4
    07:19
  • 17 - code.zip
  • 18 - Blog Lib.mp4
    07:02
  • 18 - code.zip
  • 19 - Display Blogs.mp4
    08:36
  • 19 - code.zip
  • 20 - Blog Detail Page.mp4
    03:34
  • 20 - code.zip
  • 21 - New Layout.mp4
    06:45
  • 21 - code.zip
  • 22 - Alias Paths.mp4
    06:03
  • 22 - code.zip
  • 23 - Get Blog By Slug.mp4
    11:58
  • 23 - code.zip
  • 24 - Static Props and Paths Types.mp4
    03:28
  • 24 - code.zip
  • 25 - Display Props Data.mp4
    05:47
  • 25 - code.zip
  • 26 - Markdown To Html.mp4
    09:06
  • 26 - code.zip
  • 27 - Tailwind typography.mp4
    04:50
  • 27 - code.zip
  • 28 - Blog Header.mp4
    04:05
  • 28 - code.zip
  • 29 - Content Search.mp4
    05:58
  • 29 - code.zip
  • 30 - Create search docs.mp4
    09:37
  • 30 - code.zip
  • 31 - JS Search.mp4
    11:21
  • 31 - code.zip
  • 32 - Content Indexer.mp4
    12:04
  • 32 - code.zip
  • 33 - Perform Search.mp4
    04:25
  • 33 - code.zip
  • 34 - Search Content Type.mp4
    06:22
  • 34 - code.zip
  • 35 - Show Results.mp4
    03:40
  • 35 - code.zip
  • 36 - Handle Click.mp4
    04:19
  • 36 - code.zip
  • 37 - Handle click if results.mp4
    02:47
  • 37 - code.zip
  • 38 - Check if clicking on input.mp4
    08:24
  • 38 - code.zip
  • 39 - Clear Results.mp4
    02:54
  • 39 - code.zip
  • 40 - Handle Escape Key.mp4
    03:18
  • 40 - code.zip
  • 41 - Build Search Index.mp4
    09:53
  • 41 - code.zip
  • 42 - Save search data.mp4
    03:08
  • 42 - code.zip
  • 43 - Portfolio interface.mp4
    04:17
  • 43 - code.zip
  • 44 - Get portfolios.mp4
    04:52
  • 44 - code.zip
  • 45 - Pass Portfolios as Props.mp4
    02:42
  • 45 - code.zip
  • 46 - Get Portfolio By Slug.mp4
    08:08
  • 46 - code.zip
  • 47 - Page layout Css.mp4
    03:27
  • 47 - code.zip
  • 48 - Detail Page Finish.mp4
    04:06
  • 48 - code.zip
  • 49 - Generic Content Data.mp4
    13:04
  • 49 - code.zip
  • 50 - Navigate to searched content.mp4
    06:48
  • 50 - code.zip
  • 51 - All Blogs Page.mp4
    06:11
  • 51 - code.zip
  • 52 - All Portfolios Page.mp4
    02:26
  • 52 - code.zip
  • 53 - Data subset and shortify.mp4
    07:16
  • 53 - code.zip
  • 54 - Sort Content.mp4
    05:26
  • 54 - code.zip
  • 55 - Next 13 Update.html
  • 56 - Github repo.mp4
    05:49
  • 57 - Project Deployment.mp4
    05:45
  • 58 - Adds Content & Course Finish.mp4
    14:08
  • Description


    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

    Who is this for?


  • 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.
  • More details


    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 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.

    Who this course is for:

    • 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.

    User Reviews
    Rating
    0
    0
    0
    0
    0
    average 0
    Total votes0
    Focused display
    Category
    Eincode by Filip Jerga
    Eincode by Filip Jerga
    Instructor's Courses
    Eincode mission is to provide the best online learning experience for its audience.High-quality content and programming concepts explained in real-life projects are fields where Eincode shines!Eincode covers mainly courses focusing on programming guides for web and mobile development. If you are looking for complete and comprehensive guides, then Eincode is the right choice.Instructor Filip Jerga also publishes courses.Cheers & Keep Coding!
    My name is Filip Jerga, and I am an experienced software engineer and freelance developer. I have a Master's degree in Artificial Intelligence and several years of experience working on various technologies and projects, from C++ development for ultrasound devices to modern mobile and web applications in React and Angular.Throughout my career, I have acquired advanced technical knowledge and the ability to explain programming topics clearly and in detail to a broad audience. I invite you to take my course, where I have put a lot of effort into explaining web and software engineering concepts straightforwardly, hands-on, and understandable.
    Students take courses primarily to improve job-related skills.Some courses generate credit toward technical certification. Udemy has made a special effort to attract corporate trainers seeking to create coursework for employees of their company.
    • language english
    • Training sessions 56
    • duration 6:08:09
    • Release Date 2022/12/18