E-commerce on the Jamstack with NextJS and Netlify

To set up your local environment, follow the instructions in the repository's README. Click the deploying button on the getting started section in the README. If you encounter any issues, refer to the troubleshooting channel on Discord.

If you haven't set up your environment yet, follow the provided link in the Discord to get started. You can also follow along with the workshop and set up as you go. The main branch contains the completed project if you need a reference.

The workshop is designed to be four hours long, but the goal is to keep it as close to two hours as possible. The workshop involves high-level discussions and copying and pasting code.

If you have questions during the workshop, feel free to unmute your mic and ask, or drop your questions in the Zoom chat or Discord chat, and they will be answered as soon as possible.

The useShoppingCart library is a Stripe-powered shopping cart state and logic library for React developers. It helps manage shopping cart functionality, including adding items to the cart and processing payments with Stripe.

To integrate the useShoppingCart library, first install it in your project. Then, initialize Stripe with your API key, wrap your app with the CartProvider, and use functions like addItem and removeItem to manage the shopping cart state.

Theme UI is a library for building consistent, themeable React apps. In the workshop, it is used for styling components, managing color modes (dark/light), and ensuring responsiveness without writing media queries.

To handle dark and light modes in Theme UI, use the useColorMode hook. Toggle between default and dark modes by setting up a button with logic to switch modes using the useColorMode hook.

To add more products, update the products array in the JSON file with new product objects, including properties like name, price, and ID. Ensure that the new products are correctly formatted and integrated into the site.

To handle serverless functions with Netlify, create a functions folder at the root level of your project and add function files, such as create-session.js. Use these functions to manage tasks like validating cart items and processing payments securely.