[VIP] Build the Future: Modern eCommerce with Shopify + Next.js + Tailwind

If you are a developer looking to upskill and join the fastest growing industry, this is the course for you. Majority of students finish the course in less than a week!

Apr 2, 2022 - 08:10

Feb 7, 2023 - 22:59

0 374

[VIP] Build the Future: Modern eCommerce with Shopify + Next.js + Tailwind

FUTURE-PROOF

Start building like the Pros.

Get a quick start with the latest tech stack that is in demand with the top brands and largest technology companies today.

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

Topics Covered

March 2022 Update: Intro to Shopify Hydrogen

Bonus lectures covering Shopify’s new Hydrogen Framework.

Feb 2022 Update: SWR for Next.js

Using SWR for automatically updating content on SSG (Static Site Generation) websites.

Next.js for Ecommerce

Setting up a Next.js project, overview of the file structure. getStaticPaths and getStaticProps functions that will allow us to build insanely fast pages.

Shopify Storefront API (GraphQL)

How to create queries and mutations of the Shopify Storefront API using the GraphiQL explorer. Implementing static pages with GraphQL to improve load times.

GraphQL Queries

A quick overview of the GraphQL querying language, just enough to be dangerous and start building out production level code.

React Context

Utilizing the React Context API to create a responsive and dynamic Mini-Cart and handle all of the data flowing through the application.

Custom Product Pages

How to use the Shopify product options and variants query to create a unique user experience.

Tailwind CSS

How to learn Tailwind CSS the quickest way possible and be able to make changes on the fly.

React Hooks

How to utilize the latest React tools to quickly prototype and create scalable components.

Vercel

How to instantly deploy your website to Vercel including test branches.