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

Live demo of a full-stack ClojureScript web application
22:01 MIN

Live demo of a full-stack ClojureScript web application

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

Combining JAMstack with a headless CMS for e-commerce
27:24 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
02:16 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
15:22 MIN

An overview of the Vendure e-commerce framework

Modern Headless Commerce with Vendure

Demo of a server-rendered micro frontend application
35:48 MIN

Demo of a server-rendered micro frontend application

Multiple Ships to the Island - Micro Frontends & Island Architectures

The web performance problem with modern frameworks
00:02 MIN

The web performance problem with modern frameworks

Interactive server side components

The rapid evolution of JavaScript and modern web APIs
02:21 MIN

The rapid evolution of JavaScript and modern web APIs

The year 3000, a brief history of Web Development

A detailed breakdown of modern web frameworks
27:03 MIN

A detailed breakdown of modern web frameworks

Web development best practices in 2021

Featured Partners

Related Videos

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

Why HTMX is crushing React, Vue & Svelte.

Felix Eckhardt & Benedikt Stemmildt

The Lean Web46:46

The Lean Web

Chris Ferdinandi

Modern Headless Commerce with Vendure29:19

Modern Headless Commerce with Vendure

Michael Bromley

Next.js Unleashed: Optimizing Web Vitals for superior User Experience26:44

Next.js Unleashed: Optimizing Web Vitals for superior User Experience

Eileen Fürstenau

1, 2, 3... Fastify!42:08

1, 2, 3... Fastify!

Matteo Collina

Interactive server side components46:13

Interactive server side components

Miško Hevery

From Dungeons & Dragons to Fortune 500 – Running a Large Commercial Open-Source project21:00

From Dungeons & Dragons to Fortune 500 – Running a Large Commercial Open-Source project

Elise Bentley

GraphQL + Apollo + Next.js: A Lovely Trio40:45

GraphQL + Apollo + Next.js: A Lovely Trio

Josh Goldberg

Related Articles

View all articles
DC
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
BR
Benjamin Ruschin
The HTML Elements That You’re Probably Over-Engineering
As frameworks have become more and more commonplace in the world of web development, so too has the over-engineering of features made possible by our humble old friend, HTML. The mental models that come with using state management in React, Vue and o...
The HTML Elements That You’re Probably Over-Engineering
S
SciChart
The Fastest JavaScript Charts - Built for React and Beyond
For most developers, browser charting works fine — until it doesn’t. Once you push beyond tens of thousands of points, add live streaming, or need advanced interactions, the story changes: frame drops, frozen dashboards, memory issues. That’s where S...
The Fastest JavaScript Charts - Built for React and Beyond

From learning to earning

Jobs that call for the skills explored in this talk.