🎄Day 1: Course Introduction

WelcomeInstallationSetup

Welcome to the start of a great journey! We are going to learn so much! We will start off with some React basics, then learn about static site generation with Next, dabble with hosting and serverless functions on Netlify, and charging a customer for our products with Stripe!

In this video we are just going to focus on installing all the dependencies we will need to get started!

🎄Day 2: What is a Component?

ReactBasicsComponents

Components allow us to break up UIs into single responsibility, reusable chunks.

In this video we create a basic React application using create-react-app. This is a tool that helps us get up and running with a React project super quickly!

We then look at what a React Component is, and how we can use them to build our UIs.

🎄Day 3: What is State?

ReactBasicsuseState

State is one of the fundamental building blocks of React. It allows us to remember things, such as what the user has input or how many times that have performed a particular action - such as clicking a button.

In this video we introduce a built in React Hook called useState. This can be used to create a special React variable that when its value is changed, anything using that variable will be automatically re-rendered.

This allows us to encapsulate everything a component needs to know in order to render within the component itself, making it much more portable and reusable!

🎄Day 4: What are Props?

ReactBasicsProps

Props are how we can pass values from parent components, to their children. In React this is done by declaring attributes on JSX elements. These are automatically passed into the React component as Props.

In this video we look at managing the total number of clicks across multiple buttons, which requires us to pass variables down to child components, as well as an updater function.

This is what is referred to as "One Way Data Flow", which is fundamental to the design of React. Data cannot be passed from a child component back up to its parent, so we need to pass a function down to the child that it can use to notify the parent that something has changed.

🎄Day 5: What are Side Effects?

ReactBasicsuseEffect

Side effects are things that happen as a consequence of something else. The useEffect hook can be used to synchronize side effects to variables when they are updated.

In this video we look at spawning a random pokemon every time the user clicks a button. This is a great example of some kind of functionality being triggered as a side effect of something else.

useEffect gives us control over the lifecycle of our component, and allows us to trigger some functionality when the component mounts, when it unmounts, or when a value is updated!

🎄Day 6: Create pages with Next.js

Next.jsPagesReact

Next.js give us a super simple way to create new pages - create a new JavaScript file in the pages directory!

In this video we look at creating a Next.js application from scratch, and how easy it is to create new pages.

🎄Day 7: Routing in Next.js

Next.jsRoutingPages

Next.js makes it super simple to navigate between different pages in the pages directory. By using Next's Link component we can get some really nice optimizations for free!

In this video we look at routing in Next.js and discuss the benefits of client-side routing over the more traditional server-side routing.

🎄Day 8: Dynamic Routes in Next.js

Next.jsDynamicRouting

Dynamic routes allow us to pass values into a page component, via the url itself! This makes our pages much more flexible and enables us to build much more customized experiences for our users.

In this video we look at creating a custom welcome message for any user coming to our site. This is made super simple by Next's file system routing in the pages directory.

🎄Day 9: Hosting on Netlify

NetlifyHostingNext.js

Hosting can be an absolute nightmare! There are so many options that vary greatly in the amount of work required, as well as cost! Thankfully Netlify abstracts all of that complexity away, and have a super generous free tier, allowing us to host quite complex applications before ever needing to worry about $$$$!

In this video we look at how simple it is to host our application on Netlify, and get our own URL that we can share with the world! This is a fantastic way to keep costs low as you are scaling up a new project or business!

🎄Day 10: Preview Deploys in Netlify

NetlifyPreview DeploysGitHub

Preview deploys allow us to create a separate copy of our project - with its own unique URL - that we can use to share a preview of our work, in order to get feedback or collaborate!

In this video we look at how Netlify has already done the hard work for us! Simply create a new PR in GitHub and it will automatically be deployed to a custom preview URL!

🎄Day 11: Fetching data with Next.js

Next.jsFetching DataDynamic

Fetching data in Next.js can be done in exactly the same way as a regular React project. Next gives us some control over whether we want to do that on the client, server or at build time, but maybe we are getting ahead of ourselves!

In this video we look at making a HTTP request to the Pokemon API, and discuss the performance implications of cascading requests, - where we need to make several requests based on data from another request.

We end up building a solution that is making 152 requests every time the user refreshes. This is going to make for some very unhappy users! 🙁 In the next video we look at how this can be improved!

🎄Day 12: Static generation with getStaticProps

Next.jsSSGgetStaticProps

Next.js allows us to tell it which pages in our application we would like to generate at build time. This can massively improve the performance of our application, making our users much happier! 🙂

In this video we look at using Next's getStaticProps function to tell it how to fetch data from the Pokemon API. It will then run this function at build time and inject the required data into our page component as props.

This hugely reduces the number of requests made each time the user refreshes, in fact it goes from 152 down to 0!

🎄Day 13: Create static product list

Next.jsSSGgetStaticProps

Time to start actually building our application! Let look at building a landing page that renders each of our products!

In this video we look at using the getStaticProps function to read each markdown file in our content directory, and render a list of products.

Remember this happens once at build time and the values get injected into our Index component. This makes our application much more performant, and reduces the amount of time our user is waiting for an API request to resolve!

🎄Day 14: Create product detail pages

Next.jsSSGgetStaticPaths

Let's create a details page for each one of our products!

In this video we look at combining our new understanding of static generation of content, with dynamic routes! This allows us to specify a list of "dynamic" pages we want to create - each of our products - and Next.js will pass in their required data as props!

We use a combination of the getStaticProps and getStaticPaths functions to accomplish this!

🎄Day 15: Configure Styled Components

ConfigureSetupStyled Components

Styled Components is a CSS-in-JS library that allows us to write much more flexible, colocated styles. Additionally, all styles are scoped to their components, which solves issues around global style conflicts in CSS!

In this video we look at configuring Styled Components with Next.js. All configuration files are available in the project github, and are linked below! Additionally, we look at loading a font from Google Fonts, and setting up some basic styling for our app.

.babelrc file

_document.js file

🎄Day 16: Styling components with Styled Components

StylingCSSStyled Components

In this video we look at styling our application using Styled Components. We start at the outer most page layout, and work our way through the landing page, and product detail pages.

This is a long one, but filled with handy tips and tricks for styling applications!

🎄Day 17: Create a shopping cart

ReactHookslocalStorage

Shopping carts were invented to allow customers to keep shopping and buy more products than they can carry in their arms. This is exactly what we want in our e-commerce store! We want users to be able to add something to their cart and keep shopping for other things they may want!

In this video we look at building a custom React Hook for managing the state of the user's cart. Additionally, we write the state of the cart to localStorage anytime it is updated. This allows us to remember the items the user had in their cart, even if they have refreshed the page or closed the browser!

🎄Day 18: Create a global cart

ReactContextGlobal

Our cart is awesome! But what if we want multiple components in our application to know what is in the cart?!? We could declare the cart in our root most component, and pass it down as props to any component that needs to know about it, but this can get very messy. Especially if we have a component a few levels deep that needs to know about the cart. We would need to pass the cart through every component in that tree, even though those components don't care about the cart. This is bad!

Thankfully, React gives us Context, which is a way to create some global state, that any of our components can subscribe to!

In this video we use React Context to make our shopping cart globally accessible. This means that any component - no matter how deep in the hierarchy - can know what's in the cart, and will be automatically re-rendered when the cart is updated!

🎄Day 19: Styling the cart

StylingCSSStyled Components

This is another styling heavy lesson!

In this video we look at using Styled Components to render a cart overlay, that can be opened and closed from every page! Additionally, we look at some simple CSS animations to add some life when opening and closing our cart!

🎄Day 20: Create a Checkout page

Next.jsSSGpages

We need a checkout page to show the user what is in their cart before they commit to purchasing! Additionally, Stripe requires us to have a page to redirect users to when a payment is successful, and when they choose to cancel out of the payment flow.

In this video we build three pages:

  1. Checkout page showing summary of cart
  2. Successful payment page for when payment flow is completed
  3. Cancelled payment page for when user exits payment flow

🎄Day 21: Netlify Functions

NetlifyFunctionsServerless

We can't trust the client! Especially when charging money! We need a server to make sure things have not been tinked with!

Netlify Functions allow us to run some server-side code, without needing to maintain an entire server!

In this video we look at how easy Netlify make it to create a serverless function, that we can use to validate product information and charge a user for their purchase!

🎄Day 22: Configure Stripe

StripeConfigurationSetup

Stripe is a library that allows us to very easily and securely charge a customer for their purchase! Additionally, our application does not need to ever see or store credit card information, hugely reducing the risk that we might compromise our users' data!

In this video we look at configuring a Stripe account, and the necessary data we need to provide in order to make our API keys live!

🎄Day 23: Netlify Secrets

NetlifySecretsKeys

Now that we have the keys to all things Stripe, we need a way to keep them secret! Thankfully, Netlify makes this super simple with Netlify Secrets! Shhhhh!

In this video we look at configuring our application to use test API keys when running locally and our live API keys when in production!

🎄Day 24: Charge a card with Stripe

StripeNetlifyFunctions

Time to actually charge our customers for those products!

In this video we wire up our full end-to-end e-commerce experience by using our Netlify Function to tell Stripe to charge the customer for their purchase!

We also fix a few bugs! 🐛

🎄Day 25: Wrapping up

CongratsCompleteGoodbye

That's it! We did it! We built an e-commerce platform in 25 days!

We learnt some awesome things:

  • React
  • Next.js
  • Static Site Generation
  • Styled Components
  • Serverless Functions
  • Hosting on Netlify
  • All the awesomeness of Stripe!

Congratulations for making it through! Go make something awesome and charge people for your hard work!