Shopify + Next.js + Tailwind CSS: Modern Ecommerce
Course description
Learn how to build blazing fast online storefronts used by the top brands today. Get a quick start with the latest tech stack that is in demand with the top brands and largest technology companies today.
Read more about the course
Shopify
We take advantage of the Shopify Storefront API (GraphQL) to get a robust, lightning fast checkout system out of the box. No extra set up needed.
Next.js
Next.js is the React framework of choice for some of the largest companies in the world. It allows of effortless hybrid and server side rendering on the fly. The result is insanely fast page load times.
Tailwind CSS
Tailwind CSS allows us to build modern websites without ever needing to touch our CSS file. It is a utility-first CSS framework used by some of the top designers and developers in the industry.
GraphQL
By leveraging the GraphQL query language, we are able to fully leverage the Shopify Storefront API and build with read speed. By using the GraphQL explorer, we can see exactly what data we will be working with.
Vercel
Shipping production level projects to Vercel is as easy as a push of a button. You will learn how to efficiently configure Vercel for quick deployments
What we will be building
Having a snappy website is becoming increasing important for eCommerce stores. In this course we use all the latest technologies to bring a modern shopping experience to the customer. This is done through the use of Next.js, Tailwind CSS, and the Shopify Storefront API. When compared, it is easy to see the difference between what we will be building when compared to an older eCommerce store.
Watch Online
All Course Lessons (29)
| # | Lesson Title | Duration | Access |
|---|---|---|---|
| 1 | 1. Introduction Demo | 03:32 | |
| 2 | 2. What we will be building | 04:16 | |
| 3 | 3. Next.js + Tailwind CSS Setup | 07:56 | |
| 4 | 4. Shopify Setup | 10:14 | |
| 5 | 5. Fetching Products with GraphQL | 19:54 | |
| 6 | 6. Displaying Products on Home Page | 18:09 | |
| 7 | 7. Dynamic Product Pages | 15:15 | |
| 8 | 8. Layout (Header and Footer) | 06:04 | |
| 9 | 9. Deploying to Vercel | 06:55 | |
| 10 | 10. Product Page (Image) | 05:19 | |
| 11 | 11. Product Page (Option Selector) | 20:15 | |
| 12 | 12. Add To Cart Functionality | 32:16 | |
| 13 | 13. Persisting Cart using localStorage | 04:59 | |
| 14 | 14. MiniCart with Tailwind CSS | 17:17 | |
| 15 | 15. Remove Item Functionality | 07:32 | |
| 16 | 16. Clean up and small fixes | 07:36 | |
| 17 | 17. Product Page Image Swiper | 08:22 | |
| 18 | 18. Footer | 06:06 | |
| 19 | 19. Recommended Products Section | 07:37 | |
| 20 | 20. Home Page Sections | 08:33 | |
| 21 | 21. SEO for Next.js and eCommerce | 11:53 | |
| 22 | 22. SWR for Dynamic Content Fetching | 17:29 | |
| 23 | 1. Hydrogen Introb | 05:14 | |
| 24 | 2. Hydrogen Setups | 07:07 | |
| 25 | 3. Shopify Hydrogen Component Naming | 07:23 | |
| 26 | 4. Shopify Hydrogen Walkthrough | 08:58 | |
| 27 | 5. Shopify Hydrogen Product & Layout | 10:30 | |
| 28 | 6. Shopify Hydrogen Color Swatches | 07:02 | |
| 29 | 7. Understanding SSR | 13:40 |
Unlock unlimited learning
Get instant access to all 28 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.
Learn more about subscriptionComments
0 commentsWant to join the conversation?
Sign in to commentSimilar courses
Duolingo Clone
Advanced NextJS WooCommerce REST API, TailwindCSS - Part-2
Building an AI Icon Generator using the T3 Stack (Next.js, Prisma, TailwindCSS, Typescript, Dall-E API)
Next.js Projects: Build an Issue Tracker
