End of Section 10

This is the final section of the course! With our application and all of its functionality completed all that's left is deploying the project to a live website for anyone to use. First, we deploy our Strapi backend to an AWS EC2 instance and configure an S3 bucket to host our images. This involves pushing our project into a GitHub repository and learning about the git-based CI/CD workflow using webhooks. We then configure NGINX to attach a custom domain to our backend and enhance the security and performance with SSL, TLSv1.3, and HTTP2. Once the backend is finished we need to deploy our Gatsby frontend using Netlify. We learn about rehydration errors and how to fix them and set up Netlify form handling. We finish the course by learning about technical Search Engine Optimization (SEO) to make our project more easily digestible by search engines like Google. This includes topics like title tags, meta-descriptions, canonical links, OpenGraph tags, robots.txt, sitemap.xml, performance optimization. We implement all of these features plus powerful image optimization using gatsby-plugin-image.

End of Section 9

We finally finished building out the rest of the functionality for our project in Section 9. This section is all about learning to extend the system we've already built and add features. We had some of the UI built for product reviews, user favorites, and user product subscriptions, but we actually implemented those features in this section. This section polishes an already extensive application to produce a truly comprehensive production system.

End of Section 8

In Section 8 we wrapped up our checkout process by integrating the Stripe API to process credit card payments. We also learned how to then save multiple payment methods to an account and re-use them for future purchases. After finalizing the checkout process we then learned how to display data in a table by building our user's Order History.

End of Section 7

Section 7 tied together everything we've been working on and introduced one of the most important pieces of functionality in an e-commerce application - adding items to the cart and going through the checkout process. The CheckoutPortal we created was another interesting piece of functionality and really demonstrated the dynamic interfaces that are possible with React and Material-UI. We were able to reuse a lot of code from the SettingsPortal which already had the fields we needed, and through that process, we saw how to customize our components to make them even more dynamic for different use cases.

End of Section 6

Throughout Section 6 we learned everything about authentication and adding users to our application. We built the login, sign up, forgot password, and reset password screens. Plus we saw how to enable logging in with Facebook. Then we tackled building a settings dashboard and allowing the user to change their settings like their password and save multiple sets of contact info.

End of Section 5

Section 5 was all about products. We built our Product List or Category page to display the list of products, which included functionality like sorting and filtering products. Then we build the Product Detail page which is the page for the product itself. We also added a section to keep track of recently viewed products and saw many different considerations for managing products with multiple variations of size and color.

End of Section 4

We just finished Section 4 where we got our first look at Material-UI and how it provides us with an incredible, cohesive system for everything we need to build a cutting-edge frontend from scratch.

End of Section 3

v0.0.1

Project Initialized. End of Section 3