> Markdown version of [/videos/286-teini-an-extremely-small-webshop-leveraging-awesome-and-free-tech?t=2026](https://www.wearedevelopers.com/videos/286-teini-an-extremely-small-webshop-leveraging-awesome-and-free-tech?t=2026). Every page supports `.md` or `Accept: text/markdown`. Links point to the HTML versions so they work for humans too. Agent guide: [/agents.md](https://www.wearedevelopers.com/agents.md). --- # Teini - an extremely small webshop leveraging awesome and free tech 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. - **Speakers:** Christian K - **Event:** JavaScript Congress - **Published:** November 25, 2021 - **Duration:** 40:45 - **URL:** https://www.wearedevelopers.com/videos/286-teini-an-extremely-small-webshop-leveraging-awesome-and-free-tech ## Summary Christian introduces Teini, an open-source, ultra-lightweight e-commerce solution designed for developers who need a simple webshop without the overhead or subscription fees of heavy platforms like Shopify. The walkthrough demonstrates building a shop from scratch using a next.js storefront, Prisma as the ORM, and Stripe for payments. By embedding an sqlite database directly into the repository, developers eliminate the need for complex external database hosting. Prisma streamlines schema definition, database migrations, and initial data seeding, while next.js handles static site generation and dynamic routing to quickly serve product pages. By combining next.js API routes with the Stripe SDK, developers can easily spin up secure, serverless checkout flows. The resulting architecture empowers developers to clone, deploy, and manage small-scale product inventories entirely in-house. Teini proves that for straightforward, low-volume e-commerce needs, a bespoke stack offers unparalleled cost-efficiency, deep typescript integration, and a highly intuitive developer experience. **Keywords:** tiny e-commerce solution, next.js storefront, prisma ORM framework, stripe payment integration, sqlite database management, static site generation, database migration scripts, typescript autocompletion, serverless API routes, bespoke webshop architecture, checkout session workflow, database data seeding, dynamic route rendering, vercel web deployment ## Chapters 1. **Core technologies for a tiny e-commerce stack** (01:26) — Combining Prisma, Next.js, and Stripe creates an easy-to-maintain headless webshop architecture. 1. **Initializing a Prisma development environment in Next.js** (01:58) — Adding Prisma as a dependency establishes the foundation for managing a local SQLite database directly within the project. 1. **Defining models and migrating the SQLite database schema** (04:32) — Creating a product schema file and running migrations automatically generates the underlying datastore and a typed client SDK. 1. **Populating and inspecting database records with Prisma seed** (08:35) — Executing a TypeScript seed script securely provides mock products to the database for immediate storefront testing and local inspection. 1. **Fetching storefront products via static generating functions** (13:54) — Utilizing getStaticProps invokes the Prisma client at build time to pass statically rendered database records securely to React components. 1. **Generating dynamic product detail pages in Next.js** (26:34) — Implementing getStaticPaths maps database configurations to URL parameters across dynamically nested routing files to resolve single product views. 1. **Integrating Stripe checkout using serverless API routes** (33:46) — Processing payments securely requires backend code wrapped in Next.js internal API folders to negotiate checkout session objects. 1. **Demonstrating the completed cart and checkout workflow** (35:56) — A functional walkthrough of the open-source webshop validates local cart states, volume-based shipping configurations, and dynamic payment redirects. 1. **Overcoming constraints of enterprise e-commerce platforms** (37:26) — Building a custom lightweight stack prevents vendor lock-in and high subscription fees typically associated with mainstream application builders. ## Related Moments - [Deconstructing an e-commerce platform with micro frontends](https://www.wearedevelopers.com/videos/318-destructuring-frontend-monoliths-with-microfrontends) (from "Destructuring Frontend monoliths with MicroFrontends") - [Updates on developer events and introducing the Shopify platform](https://www.wearedevelopers.com/videos/1814-wearedevelopers-live-markdown-liquid-and-checkouts) (from "WeAreDevelopers LIVE - Markdown, Liquid and Checkouts") - [Architecting a multimodal storefront interface using Next.js](https://www.wearedevelopers.com/videos/1213-vision-for-websites-training-your-frontend-to-see) (from "Vision for Websites: Training Your Frontend to See") - [Architecture and tech stack for the course platform](https://www.wearedevelopers.com/videos/321-build-your-own-subscription-based-course-platform) (from "Build Your Own Subscription-based Course Platform") - [Introduction to the GraphQL, Apollo, and Next.js stack](https://www.wearedevelopers.com/videos/311-graphql-apollo-next-js-a-lovely-trio) (from "GraphQL + Apollo + Next.js: A Lovely Trio") - [Live demonstration of a ClojureScript shopping application](https://www.wearedevelopers.com/videos/229-using-backend-languages-for-frontends-why-clojurescript-is-an-awesome-idea) (from "Using backend languages for frontends: Why ClojureScript is an awesome idea!") ## Related Articles - [c't <webdev> 2023](https://www.wearedevelopers.com/magazine/307-c-t-webdev-2023) - [Web Development Best Practices: What The Data Tells us](https://www.wearedevelopers.com/magazine/84-web-development-best-practices-what-the-data-tells-us) - [All the videos of Halfstack London 2024!](https://www.wearedevelopers.com/magazine/521-all-the-videos-of-halfstack-london-2024) - [Dev Digest 139 - Soft and hard queries](https://www.wearedevelopers.com/magazine/487-dev-digest-139-soft-and-hard-queries) ## Related Jobs - [React Engineer for Next.js UI - Hybrid, Impactful FinTech](https://www.wearedevelopers.com/jobs/ext/1444505-react-engineer-for-next-js-ui-hybrid-impactful-fintech) at **Bitpanda** - [Junior Frontend Engineer](https://www.wearedevelopers.com/jobs/ext/1532351-junior-frontend-engineer) at **Almedia** - [Mid/Senior Full-Stack Engineer (Web-first)](https://www.wearedevelopers.com/jobs/ext/1210833-mid-senior-full-stack-engineer-web-first) at **SMG Swiss Marketplace Group** - [React Engineer For Next.Js Ui - Hybrid, Impactful Fintech](https://www.wearedevelopers.com/jobs/ext/1934580-react-engineer-for-next-js-ui-hybrid-impactful-fintech) at **Bitpanda** - [Senior Software Engineer, React (Websites & Martech)](https://www.wearedevelopers.com/jobs/ext/1605272-senior-software-engineer-react-websites-martech) at **Bitpanda** - [Senior Full Stack Engineer](https://www.wearedevelopers.com/jobs/48289-senior-full-stack-engineer) at **Sensory-Minds GmbH**