Christian K.

Teini - an extremely small webshop leveraging awesome and free tech

What if your entire e-commerce database was just a single file in your repo? Learn how to build a tiny, performant webshop with Next.js and Prisma.

Teini - an extremely small webshop leveraging awesome and free tech
#1about 2 minutes

Building a tiny open source webshop from scratch

The project goal is to build a minimal e-commerce solution using Next.js for the storefront, Prisma for the database, and Stripe for payments.

#2about 7 minutes

Setting up the database with Prisma and SQLite

Initialize a new Next.js project and add Prisma to manage an SQLite database, defining the data models directly in a schema file.

#3about 5 minutes

Seeding the database with initial product data

Use Prisma's seeding feature with a TypeScript file to populate the SQLite database with sample product data for development and testing.

#4about 13 minutes

Building the main storefront page with Next.js

Fetch all product data from the Prisma database at build time using getStaticProps and render a list of products on the main page.

#5about 7 minutes

Creating dynamic product pages with Next.js

Use Next.js dynamic routes, getStaticPaths, and getStaticProps to pre-render a unique detail page for every product in the database.

#6about 4 minutes

Integrating Stripe for the payment workflow

Create a serverless function using Next.js API routes to generate a Stripe checkout session and handle the payment processing flow.

#7about 3 minutes

Project motivation and call for contributors

The project was created to provide a free, developer-friendly alternative to paid e-commerce platforms like Shopify for small-scale shops.

Related jobs
Jobs that call for the skills explored in this talk.

Matching moments

Building the shop UI with server-side templates
05:54 MIN

Building the shop UI with server-side templates

Why HTMX is crushing React, Vue & Svelte.

Live demo of a full-stack ClojureScript web application
02:45 MIN

Live demo of a full-stack ClojureScript web application

Using backend languages for frontends: Why ClojureScript is an awesome idea!

Introducing the modern stack for a course platform
02:13 MIN

Introducing the modern stack for a course platform

Build Your Own Subscription-based Course Platform

Combining JAMstack with a headless CMS for e-commerce
03:20 MIN

Combining JAMstack with a headless CMS for e-commerce

Headless and JAMstack - The State of Commerce Today

Understanding JAMstack with a practical e-commerce example
03:24 MIN

Understanding JAMstack with a practical e-commerce example

Headless and JAMstack - The State of Commerce Today

An overview of the Vendure e-commerce framework
01:04 MIN

An overview of the Vendure e-commerce framework

Modern Headless Commerce with Vendure

Exploring modern tools for web interaction and analysis
08:03 MIN

Exploring modern tools for web interaction and analysis

WeAreDevelopers LIVE - the weekly developer show with Chris Heilmann and Daniel Cranney

Audience Q&A on practical micro-frontend challenges
13:10 MIN

Audience Q&A on practical micro-frontend challenges

Micro-frontends anti-patterns

Featured Partners

Related Videos

See all videos
GraphQL + Apollo + Next.js: A Lovely Trio
40:45

GraphQL + Apollo + Next.js: A Lovely Trio

Josh Goldberg

Build Your Own Subscription-based Course Platform
1:24:47

Build Your Own Subscription-based Course Platform

Dávid Lévai

Microfrontends at Scale
43:20

Microfrontends at Scale

Josh Goldberg

Why HTMX is crushing React, Vue & Svelte.
29:04

Why HTMX is crushing React, Vue & Svelte.

Felix Eckhardt & Benedikt Stemmildt

To New Frontiers: The Future of Frontend Development
26:00

To New Frontiers: The Future of Frontend Development

Rainer Hahnekamp

Modern Headless Commerce with Vendure
29:19

Modern Headless Commerce with Vendure

Michael Bromley

From Zero to Hero: NextJS 13 and Tailwind CSS for Beginners
29:01

From Zero to Hero: NextJS 13 and Tailwind CSS for Beginners

Marius Obert

Interactive server side components
46:13

Interactive server side components

Miško Hevery

Related Articles

View all articles
Chris Heilmann
All the videos of Halfstack London 2024!
Last month was Halfstack London, a conference about the web, JavaScript and half a dozen other things. We were there to deliver a talk, but also to record all the sessions and we're happy to share them with you. It took a bit as we had to wait for th...
All the videos of Halfstack London 2024!
Luis Minvielle
Developers share the most interesting tech they ever built
Most people's first thoughts about Hacker News revolve around venture capital, stock prices, company valuations, and $1499 dongles. But what if we told you that Hacker News could also be a place for pure, consummate, wholesome content that tackles ho...
Developers share the most interesting tech they ever built

From learning to earning

Jobs that call for the skills explored in this talk.