Follow along with JSM & Joe in this Tutorial Video
Expectations and prerequisites for this tutorial
- HTML, CSS, Javascript
- Nodejs
- React
- Nextjs
- Tailwind CSS
- Basic understanding of CMS
First Impressions
Okay so after being exposed to Javascript Mastery's tutorial, I realized quickly this was the path forward for me. Between the admin dashboard & its easy setup process its a no brainer. However then I realized the setup process had an art to it. My ADHD brain quickly realized I need to blog the process of going through this tutorial so that I can build mastery. Having this strong feeling I would be using this CMS over and over again, I went to my current tech blog www.cyber-gorillas.com and realized, this is an outdated format and Its time to jump into something a little more modern.
My first mistake
I picked a blog template on vercel, something very simple, what you see infront of you now. I deployed, cloned from github, did basic edits so it would make sense, then decided now its time to implement the cms. Big mistake. Not saying its not possible but that the headache was real. The magic is in the setup process on payloads website, so as I write this post, this will probably be one of the only posts I actually do in VScode as opposed to the admin dash in the future.
Back to basics
I still don't have even close to a full understanding of this CMS so I will go back to the original tutorial via JSM, since I only went through the first 26 minuets of it so far, and I'm going to rewatch the first 26 minuetse, and blog the process as I go from the very beginning. I'm excited to build this out. The tutorial is building an Apple inspired online ecommerce store. I will try to focus it eventually on getting fit as a gamer. I will sell products like a standing desk, and under desk treadmills, as well as computer parts and accessories.
0:00 Nextjs Stripe Typescript Payload
To give credit where credit is due, the tutorial I'm following is this: Tutorial I would recommend checking out the video as you read along with my breakdown of the content, Adrian(JSM) does a much better job of explaining things. I will be mainly writing key points for me to remember the process.
How to start
Navigate to Payload CMS and create a free account. Payload cloud has their own hosing options however you can deploy and host through Vercel with their free tier which is what I'll be doing by the end of this tutorial. Select new ecommerce project, select your github account and click clone template. Payload then creates the starter template for you. Go through the configure your project.
At this point you should be able to see your skeleton e-commerce site when you click on the YOUR-SITE.payloadcms.app link on the dashboard. This is the power of payload. The cart, login and authentication have been handled through Payload and hand delivered to you with scalability that reaches to enterprise levels.
Navigate to your github repository and clone the repository to your projects folder.
git clone https://github.com/YOUR-ACCOUNT/YOUR-REPOSITORY.git
CD into your project then return
npm install --legacy-peer-deps
This is needed to install some legacy dependencies.
Refer back to the README.md
Below is pasted directly from the Readme, It's important to understand the skeleton of this framework, the readme does a good job of highlighting what payload cms does for us, so we can work on designing the best app we can for our clients.
This is the official Payload E-Commerce Template. Use it to power e-commerce businesses and online stores of all sizes. This repo includes a fully-working backend, enterprise-grade admin panel, and a beautifully designed, production-ready website.
This template is right for you if you are selling:
- Physical products like clothing or merchandise
- Digital assets like ebooks or videos
- Access to content like courses or premium articles
How it works
It's important to understand the different elements of the source code and how the template gives you the framework you need to setup and run your business.
- Collections
- Users(Authentication)
- Products
- Orders
- Pages
- Media
- Categories
- Globals
- Header
- Footer
- Access Control
- Admin
- Customer
- Users
- Products
- Shopping cart
- Stripe
- Webhooks
- Payload Hooks
- Connection
- Checkout
- Custom API Endpoint
- Paywall
- Product Restriction
- Layout Builder
- Hero
- Content
- Media
- Call To Action
- Archive
- Draft Preview
- SEO
- Payload SEO Plugin
- Redirects
- Migrating Existing Sites
- Website
- Front End Template
- Nextjs App Router
- Custom Server Support
- Third party hosting
- Cache
- Eject
- Much more..
- Development
- Docker
- Seed
- Conflicting Routes
- Production
- Deployment
At this point in the video you should be atleast to 12:35. To Continue this tutorial, visit our Next Post