The Complete Strapi Course

Introduction
Introduction

Strapi Quickstart, build a quick blog
Installation
Quick Intro to the Strapi Admin
Build your first content type
Update your Article content type
Make Articles Public
Use the public folder to build a quick blog demo

Where to go next
What to learn next

[Quickstart 1]The Strapi with React Quickstart Project
The Quickstart Project Teaser
Install Strapi and React
Set up the Post Collection Type in Strapi
Introduction to React and Components
Using Hardcoded Data to Display an Image in the Post Component
Improve the Look and Feel of your Post
Using Properties to pass data between React Components
Rendering multiple components with Array.map

[Quickstart 2] Connect React with Strapi
Working with useState and useEffect Hooks
Use an Async function in useEffect to load data

[Quickstart 3] CRUD
Installing React Router Dom + Recap
Set up React Router Dom to create Pages
Create a new Page and set up Navigation
The Create Page
Adding image upload to the Create Form
Custom Controller to ensure likes are set to 0
Simple frontend validation
Backend Validation
Error Handling in the Frontend

[Quickstart 4] Single Post Page
The Single Post Page Component
Fetching the Single Post data and displaying it
Loading and Error Indicators in the Single Post Page
The Delete Post Request
The Update Post Request

[Quickstart5]Add Login to your app
Set up UserContext to store User Data
Custom Nav for logged logged out in users + Login Page
Build the. Login Form
Handle and Show Errors in the Login Page
Redirect on Successful Login
The Entire Signup Page with UserContext

[Quickstart6] Using Authentication to Secure the Application
Making the Create Request Require Authentication
Making Edit and Delete Require Authentication
Show edit and delete button only if you own the post
Custom Controllers to Ensure only You can Delete and Edit your own Posts

[Quickstart7] Likes
The Likes Collection Type
Setting up Postman to build and test the Like Functionality
Custom Create Controller for Like Creation
Custom Delete Controller to ensure only you can delete your own Post
Use Filters to Retrieve the Likes you gave and the Likes your Posts received
Policy to Secure Retrieving the Likes that I gave
Route and Policy to Secure retrieving the Likes you received

[Quickstart8] Likes in the frontend
Set up the Like Button
Set up the Remove Like Button
Create the LikesContext to keep track of Likes
Toggle between Like and Remove Like button based on LikesContext
Reloading Likes Data after Like Remove Like button click

[Quickstart9] Finishing up
Set up a Cron Job to send an Email with the Likes a user received
Where To go next

Bonus PDF Cheatsheets
Strapi Cheatsheet

Code for this coruse – Companion repo
GitHub Course Repo

[THEORY] Adding and Managing Admin Users
Creating and Managing Admin Users
Pros and Cons of the Admin Panel
Further Readings Admin

[THEORY] The Admin Panel admin
Admin Panel Overview
Roles and Permissions
Roles and Permissions – Further Readings

[THEORY] Developing with Strapi – using Postman
Developing with Strapi – using Postman
Postman Download Link

[PROJECT] Build a Leaderboard with Strapi and jQuery
NOTE for New Students
Building a Leaderboard with Strapi and jQuery
Finishing up the leaderboard – JQuery Side
Leaderboard code repo

[THEORY] Authentication – Login and Registration
Users, Login and Registration
Using Bearer Token to Figure Out Current User Data
Using Bearer Token for Authenticated Requests

[THEORY] The Strapi Filesystem (and API Folder)
The Strapi Filesystem
Controllers VS Services

[THEORY] The Config Folder
[3.0.0 Updated] Configuration Folder

[THEORY] Extending Strapi
The Extensions System
Using And Operator with Strapi Endpoint by using custom controller
Overriding the default controller
Building a Custom Email Sending Service
Default Controllers – Further Readings

[THEORY] Working With Policies
Introduction to Policies
Ensure user is logged in – isLoggedIn.js
Protect Private Routes – alwaysFail.js
Ensure only you can see your own Content Types – isTargetUserLoggedIn.js
Allow only you to access your own Profile Data – isMyProfile.js

[THEORY] Using Filters
Intro to filters
Filters – Practical Examples
Filters – Further Readings

[THEORY] File Upload
The Media Library
Installing a File Upload Provider
Simple File Upload
File Upload – Connected to a Content Type
Multiple File Upload
Remove a File From Gallery
File Upload – Further Readings

[COOKBOOK] The File Upload Examples section
Quick intro to the concepts required for file upload
File Upload using FormData
File Upload With Fetch
Uploading multiple files
Uploading a File to a Content Type
File Upload Repository
Private Access to Uploaded Files – Create a File Hosting Company in Minutes

[THEORY] Cron Jobs
[3.0.0] Cron Jobs
Cron Job Demo Code

[THEORY] Email Sending
Sending Emails
Using Email Providers
Email Sending – Additional Resources

[COOKBOOK] Email Sending Examples
Sending Email with a custom API endpoint
Using the POST email endpoint to send emails
Secure way to send emails with POST email

[COOKBOOK] Deploying Strapi
Introduction to the Development to Heroku
Setting up the Heroku Side, Datase, Remote, Credentials
Database Config File
Setting up the Strapi side, deploying to Heroku
Things to do after deployment

[COOKBOOK] Extra Lessons
READ THIS
[NEW] Use Strapi with Docker
[NEW] Strapi with Docker Resources
Hide a field from the API response – Private Fields in API
The .find service (to find entries)
Advanced Services Usage
Logging in Strapi (instead of console.log)
Using the functions folder for reusable functions
Migrating data from one version of strapi to another
[NEW] Getting All of the Users info. Using me and users
[NEW] Delete Remaining Files from Relations

[EXTRA] – Additional Topics
Additional Topics Note
Strapi Webhooks Docs
[NEW] Working with the Database ORM Layer
Upgrading from Alpha to Beta
Strapi Queries Docs
Strapi Security Checklist
Upgrading from Alpha to Beta
Using Components and Dynamic Zones
HUGE Gotcha for Components and Dynamic Zones
Working with Components Programmatically
Single Type and UID field – New with Strapi beta.19
[PRE strapi.beta.20] Installing a File Upload Provider
[NEW] Using Webhooks

[PROJECT] Build a Portfolio Website with React and Strapi
Intro to the Portfolio Project and installation
Building the Strapi Portfolio Side
Introduction to React
Creating the PortfolioItem Component
Using Components and .Map
Making the portfolio look better
Setting up Axios for AJAX requests
Connecting the data we fetched to the Component State
Portfolio Code Repo

[PROJECT] File upload with React
File Upload Class Component
File Input and State
File upload with Axios
File Upload Progress Bar
Adding a loading message
Code Repo for Strapi and React File Upload

[PROJECT] Build a Inventory Stock Management App Prototype with React and Strapi
Stock Management App Intro
Separating StockEvents by Product
Calculating the Stock Total with Array.reduce
Creating the StockDetail component
Toggling between showing and hiding StockEvents
Setting up Strapi
Testing Strapi with Postman
Connecting the React Frontend to Strapi with Axios
Stock Management App Wrap Up
Inventory Stock Management Code Repo
Installing React and Strapi
Introduction to React Folder
React Functional And Class Component
React – JSX and Functional Components
Mocking out Data
Passing props to functional component
Moving the functional component to a separate file
Showing StockEvents by using the Array.map function

[PROJECT] Improve the Stock Inventory Management App
Creating the AddStockEvent Component
Form Handle Change and Submit
Displaying select options dynamically
Asynchronous request to add and remove stock
Making the add stock event togglable
Creating a New Product
Using React Router Dom to separate pages
Navigation with NavLink

[PROJECT] Build a Login and User Profile Page
Installing React and Strapi
Connecting initial User Data to State
Update User Request with Axios
[Adding Security] Policy to Prevent User Update Abuse
Creating the Class Component
Setting up a Controlled Input
Adding the Handle Submit
Performing the Sign Up Request
Saving the User object after signing up
Toggling between Sign Up and Log In
Setting up the Profile Page
Refactoring Handle Change for Reusability

[THEORY] Handling the JWT Token
UNSAFE – Using LocalStorage to store user data
[Credits] – Express app that serves React frontend
Theory on how to store the JWT Token

[PROJECT] Securing the Login Application
Serving the Frontend through a Server
Setting up React for Production
Moving the routes to the server
Setting up Session Cookies
Authentication Route in the server
Updating the user profile through the server
Fetching the current user from the server
Logout user and Wrapup – User Profile Projet Conclusions
Code Repo for Secure Login and Edit Profile App

[PROJEC] Use Components and Dynamic Zones to build an Improved Portfolio Builder
Introduction to the Updated Portfolio Builder
Render the Appropriate Component in the Dynamic Zone
Connecting the React App to Strapi
Project Wrapup
Installing Strapi and React
Creating the Components and Setting up the Page Content Type
Using mockPage code to speed up React Development
Creating the Quote Component
Vertically Centering the Quote Component
The Article Component
The Basic Entry Component
The Complex Entry Component

[PROJECT] Build a Blog with Gatsby and Strapi
Introduction to Gatsby
Adding links to the single article page
Building Gatsby and Deploying to Surge
[Credits] – Strapi + Gatsby official tutorial
Installing Gatsby
Gatsby complete overview
Create a new Page in Gatsby
Create pages with MockData in Gatsby
Using Gatsby with Strapi
Using GraphiQL to fetch articles from Strapi
Executing the PageQuery in Gatsby
Fetch all articles and display them

[PROJECT] Build an Ecommerce with Gatsby, Stripe and Strapi
[THEORY]Build an Ecommerce with Gatsby, Strapi and Stripe – Overview
Linking from Product card to Single Product Page
Using the Unique Field to generate the Product URL Slug
The Single Product Page Template
Create the Single Product Page with the createPages API
Single Product Page design improvements
How to build the Cart
Build a Cart with LocalStorage
Build an Interface to interact with the Cart addToCart
Track quantities in the cart
Build the Cart Page
Project Introduction
Improve the design of the Cart Page
Allow the customer to change quantities
Use a Hook to select Product Quantities in Single Product Template
Use a Hook to Re-render the Cart once quantities have changed
Next steps, discussion on why you may need context or redux for state management
Build a Cart Math Library
Adding Shipping Fees to the Math Library
[THEORY] How to use Stripe for Checkout
Alternative way for checkout demo
Create the Order Content Type
Installing Gatsby and Strapi
Set up Stripe in the Strapi backend with a Custom Controller
Test the Stripe Integration with Postman
Building a Sanitized Cart in our Custom Controller
Importing our math library to the backend
Install and set up the Stripe Checkout Components
Use Stripe Elements to display the Credit Card input field
Retrieve a paymentIntent from the frontend so that Stripe can collect the card
Generate the paymentIntent with the real Cart object
Fix a bug where the products weren’t loading properly in the Strapi backend
Process the Card with Stripe
Set up the Strapi-Source Gatsby Plugin
Add a Loading Indicator
Use Context and Hooks for the Cart
Refactor the Checkout Component to use Cart from Context
Refactor all Pages to use Context
Add the Cart Counter to the Header Component
Show a Cart Icon with a Link to the Cart Page
Show the total quantity of Product next to the Cart Icon
[THEORY] How to create Orders in Strapi
Add Shipping Info Form in Frontend and Update the Order Content Type
Style the Form and How to Edit the dynamically built Inputs
Setting up the Product Content Type
Simple Form Validation
Create the Order with a fetch POST request
Use a Custom Controller for the Order Creation
Calculate totals in the Order Creation Controller
Fix a bug related to strapiId vs id
Validate the paymentIntent
Ensuring the paymentIntent is used only once
Ensure paymentIntent total is same as Cart total
Show Success Message on Order Creation
Polish up the Cart Page Checkout
The All Products Page
Gatsby Ecommerce With Strapi and Stripe Wrap Up
E-commerce Source Code
Display the Products in a grid
Formatting the Product Price
Quick Design Improvements

[PROJECT] Deploy your E-commerce with Gatsby Cloud, Netlify and Heroku
Intro The tools we will use to deploy your e-commerce site
Quick Typo Fix for URL
Set up Strapi Webhooks to trigger a new Gatsby Build
Fix Issues with Global Variables in Gatsby
Verify that the Gatsby Build works properly
Fix an issue with the math on Order Creation
Verify that the order now works
Add Gatsby Deployment to Netlify
Issues with Uploads and Gatsby Build
Setting up AWS S3 File Upload Locally
Deploy the Updated File Upload Provider and Run a new Build
Push your Gatsby Frontend to Github
Deploy Strapi to Heroku
Migrate Roles and Permissions to the Live Database
Check that Strapi is Working
Deploy Gatsby with Strapi on Heroku as it’s Data Source
Fixing Issues with Gatsby Build
Refactor the CartContext Provider to work with Gatsby Build
Succesfully Deploy with Gatsby Cloud then fix API URL variables

[COOKBOOK] Gatsby – Extra Lessons
Exploring the Gatsby Plugin Documentation
Clearing the Gatsby Cache

The Complete Strapi Course Wrapup
Conclusion