Shopify + Next.js + Tailwind CSS: Modern Ecommerce

5h 7m 23s
English
Paid

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.

Check out the GitHub Repo

Watch Online

Join premium to watch
Go to premium
# Title Duration
1 1. Introduction 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

Comments

0 comments

Want to join the conversation?

Sign in to comment

Similar courses

Magic UI Pro

Magic UI Pro

Sources: Dillion Verma
Magic UI Pro is a platform for creating modern, visually appealing landing pages with minimal effort. It offers over 50 pre-designed...
The No-BS Solution for Enterprise-Ready Next.js Applications

The No-BS Solution for Enterprise-Ready Next.js Applications

Sources: Jack Herrington
Next.js is one of the most popular frameworks for building web applications. It is fast, flexible, and underpins some of the largest sites on the internet.
8 hours 20 minutes 31 seconds
CodeFast | Learn to code in weeks, not months.

CodeFast | Learn to code in weeks, not months.

Sources: Marc Lou
CodeFast is a course designed specifically for those who want to turn their idea into a real online business quickly and effectively. Unlike traditional...
11 hours 38 minutes 42 seconds