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

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

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

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

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

Why HTMX is crushing React, Vue & Svelte.

Felix Eckhardt & Benedikt Stemmildt

Microfrontends at Scale
43:20

Microfrontends at Scale

Josh Goldberg

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

Interactive server side components
46:13

Interactive server side components

Miško Hevery

Create a Programmatic SEO Project Using Next.js and Static Site Generation
20:50

Create a Programmatic SEO Project Using Next.js and Static Site Generation

Dino Lozina

Related Articles

View all articles
Daniel Cranney
Exploring TypeScript: Benefits for Large-Scale JavaScript Projects
JavaScript is the backbone of web development, powering everything from small websites to large-scale enterprise applications. However, as projects grow in complexity, maintaining JavaScript code can become increasingly difficult. This is where TypeS...
Exploring TypeScript: Benefits for Large-Scale JavaScript Projects

From learning to earning

Jobs that call for the skills explored in this talk.

Frontend Developer

Frontend Developer

Turboneer LLC
Mount Morris, United States of America

Remote
€25-40K
Intermediate
React
Vue.js
Angular
+2