Newline Commerce demo app

Project Source Code

Get the project source code below, and follow along with the lesson material.

Download Project Source Code

To set up the project on your local machine, please follow the directions provided in the README.md file. If you run into any issues with running the project source code, then feel free to reach out to the author in the course's Discord channel.

Table of Contents

Lesson Transcript

  • [00:00 - 00:06] Hey, let's get started by discovering the application we want to build in this course. So we want to create an e-commerce application.

  • [00:07 - 00:25] We are going to put ourselves in the shows of an e-commerce owner who wants to display product on the website and choose the most to buy those. So on the home page I can see a flagship product that is the most important right now for my e-commerce and then a list of products.

  • [00:26 - 00:40] I can also see the products on the specific page that just displays the same list. If I go back to your home I can pre-order the flagship product so the user can enter their email and pre-order the product.

  • [00:41 - 00:51] We can see that the call to action here automatically increases any time a user pre-orders. It increases for the current user but also if all the customers are pre- ordering the product.

  • [00:52 - 01:15] Our e-commerce application also includes an administration area for the e- commerce owner that contains the form that lets us create a new product. So let's create an awesome course, a new line at the price of $1,000 because it 's really a very good course.

  • [01:16 - 01:28] Save change and now we should be able to see the results on the product list and the home page. So if I go to the product list, yeah indeed I see and know some course on your line for $1,000 so it's up to date.

  • [01:29 - 01:43] What I want to point out here is that we want the e-commerce to be very fast, to have a good user experience but also to display dynamic data. And the whole point of this course is that it's not that obvious.

  • [01:44 - 01:50] It needs to blend two techniques, static rendering and revalidation using next.js server actions.

  • [00:00 - 00:06] Hey, let's get started by discovering the application we want to build in this course. So we want to create an e-commerce application.

    [00:07 - 00:25] We are going to put ourselves in the shows of an e-commerce owner who wants to display product on the website and choose the most to buy those. So on the home page I can see a flagship product that is the most important right now for my e-commerce and then a list of products.

    [00:26 - 00:40] I can also see the products on the specific page that just displays the same list. If I go back to your home I can pre-order the flagship product so the user can enter their email and pre-order the product.

    [00:41 - 00:51] We can see that the call to action here automatically increases any time a user pre-orders. It increases for the current user but also if all the customers are pre- ordering the product.

    [00:52 - 01:15] Our e-commerce application also includes an administration area for the e- commerce owner that contains the form that lets us create a new product. So let's create an awesome course, a new line at the price of $1,000 because it 's really a very good course.

    [01:16 - 01:28] Save change and now we should be able to see the results on the product list and the home page. So if I go to the product list, yeah indeed I see and know some course on your line for $1,000 so it's up to date.

    [01:29 - 01:43] What I want to point out here is that we want the e-commerce to be very fast, to have a good user experience but also to display dynamic data. And the whole point of this course is that it's not that obvious.

    [01:44 - 01:50] It needs to blend two techniques, static rendering and revalidation using next.js server actions.