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!
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.
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!
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.
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!
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.
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.
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.
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!
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!
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!
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!
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!
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!
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.
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!
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!
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!
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!
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:
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!
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!
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!
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! 🐛
That's it! We did it! We built an e-commerce platform in 25 days!
We learnt some awesome things:
Congratulations for making it through! Go make something awesome and charge people for your hard work!