workshop-nextjs-pizza

Simple t-shirt shop project strongly spiced with basement.studio flavor for the Next.js & Pizza Workshop.

Starting URL: https://workshop-nextjs-pizza-git-starting-point-basement.vercel.app/

Our Commerce Toolkit

This project is powered by the BSMNT Commerce Toolkit that we built to build fast and reliable storefronts that could handle crazy amounts of traffic.

• shopmrbeast.com
• karljacobs.co
• shopmrballen.com
• ranboo.fashion

The Stack

• TypeScript
• Next.js
• Tailwind CSS
• Shopify
• Vercel

Resources

• Storefront Design - Figma File

Development

1. Install yarn:

   npm install -g yarn
   

2. Install the dependencies with:

   yarn
   

3. Start developing and watch for code changes:

   yarn dev
   

Phase 1: Repo Overview

10 minutes

• File structure
• Libraries we're using

Phase 2: Add cart functionality using @bsmnt/storefront-hooks

45 minutes

• Why a library? Standard, uses react-query, can connect to any backend
• Read the guide
• Also you can check the example with Shopify here

Phase 3: Deploy to Vercel

5 minutes

• Make sure you add the required environment variables

BONUS: Bring the initial cart state from the server

5 minutes

• Prevent "flash of unfetched cart"
• Feel the power of React Server Components

---

Thank you for coming 🏴