WeAreDevelopers Logo WeAreDevelopers
Sign in
For You LIVE
JavaScript Congress • Nov 25, 2021

Teini - an extremely small webshop leveraging awesome and free tech

Christian K

Stop paying Shopify for simple projects. Christian reveals Teini, an ultra-lightweight e-commerce stack using Next.js, Prisma, and Stripe to eliminate complex database hosting and subscription fees.

Pause
Mute Enter Fullscreen
#1 about 1 min

Core technologies for a tiny e-commerce stack

Combining Prisma, Next.js, and Stripe creates an easy-to-maintain headless webshop architecture.

#2 about 3 min

Initializing a Prisma development environment in Next.js

Adding Prisma as a dependency establishes the foundation for managing a local SQLite database directly within the project.

#3 about 5 min

Defining models and migrating the SQLite database schema

Creating a product schema file and running migrations automatically generates the underlying datastore and a typed client SDK.

#4 about 6 min

Populating and inspecting database records with Prisma seed

Executing a TypeScript seed script securely provides mock products to the database for immediate storefront testing and local inspection.

#5 about 13 min

Fetching storefront products via static generating functions

Utilizing getStaticProps invokes the Prisma client at build time to pass statically rendered database records securely to React components.

#6 about 8 min

Generating dynamic product detail pages in Next.js

Implementing getStaticPaths maps database configurations to URL parameters across dynamically nested routing files to resolve single product views.

#7 about 3 min

Integrating Stripe checkout using serverless API routes

Processing payments securely requires backend code wrapped in Next.js internal API folders to negotiate checkout session objects.

#8 about 2 min

Demonstrating the completed cart and checkout workflow

A functional walkthrough of the open-source webshop validates local cart states, volume-based shipping configurations, and dynamic payment redirects.

#9 about 4 min

Overcoming constraints of enterprise e-commerce platforms

Building a custom lightweight stack prevents vendor lock-in and high subscription fees typically associated with mainstream application builders.

Matching moments

1:28 min

Deconstructing an e-commerce platform with micro frontends

Trishul Goel · JS Congress

4:46 min

Updates on developer events and introducing the Shopify platform

Chris Heilmann Chris Heilmann +2 · LIVE

2:25 min

Architecting a multimodal storefront interface using Next.js

Daniel Madalitso Phiri · LIVE

3:53 min

Architecture and tech stack for the course platform

Dávid Lévai · LIVE

1:31 min

Introduction to the GraphQL, Apollo, and Next.js stack

Josh Goldberg · JS Congress

4:03 min

Live demonstration of a ClojureScript shopping application

Tobias Schröder · World Congress 2021

More from JavaScript Congress

The Eternal Sunshine of the Zero Build Pipeline thumbnail
50:10
almost 5 years ago

The Eternal Sunshine of the Zero Build Pipeline

Native Web Apps: Are We There Yet? thumbnail
44:40
almost 5 years ago

Native Web Apps: Are We There Yet?

Maxim Salnikov

Modern Web Development with Nuxt3 thumbnail
41:43
almost 5 years ago

Modern Web Development with Nuxt3

Alexander Lichter

Making neural networks portable with ONNX thumbnail
54:49
almost 5 years ago

Making neural networks portable with ONNX

Ron Dagdag

JavaScript the Grumpy Parts thumbnail
46:08
almost 5 years ago

JavaScript the Grumpy Parts

Rob Richardson

How Your Bundle Size Affects The Climate thumbnail
53:16
almost 5 years ago

How Your Bundle Size Affects The Climate

Roy Derks

Related videos

Modern Headless Commerce with Vendure thumbnail
29:19
World Congress 2022 • over 4 years ago

Modern Headless Commerce with Vendure

Michael Bromley

Build Your Own Subscription-based Course Platform thumbnail
1:24:47
LIVE • almost 5 years ago

Build Your Own Subscription-based Course Platform

Dávid Lévai

Build and Deploy a Fullstack App with Open Source Tooling thumbnail
25:53
World Congress 2023 • almost 3 years ago

Build and Deploy a Fullstack App with Open Source Tooling

Noam Honig

Meet Your New BFF: Backend to Frontend without the Duct Tape thumbnail
51:04
LIVE • about 3 years ago

Meet Your New BFF: Backend to Frontend without the Duct Tape

Noam Honig

Headless and JAMstack - The State of Commerce Today thumbnail
39:24
LIVE • almost 6 years ago

Headless and JAMstack - The State of Commerce Today

Anil Kumar Krishnashetty

The Lean Web thumbnail
46:46
JS Congress • almost 5 years ago

The Lean Web

Chris Ferdinandi

Related articles

From learning to earning

Jobs that call for the skills explored in this talk.