Christian K.
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
16:57 MIN
Building the shop UI with server-side templates
Why HTMX is crushing React, Vue & Svelte.
22:01 MIN
Live demo of a full-stack ClojureScript web application
Using backend languages for frontends: Why ClojureScript is an awesome idea!
02:14 MIN
Introducing the modern stack for a course platform
Build Your Own Subscription-based Course Platform
1:04:01 MIN
Exploring modern tools for web interaction and analysis
WeAreDevelopers LIVE - the weekly developer show with Chris Heilmann and Daniel Cranney
27:24 MIN
Combining JAMstack with a headless CMS for e-commerce
Headless and JAMstack - The State of Commerce Today
02:16 MIN
Understanding JAMstack with a practical e-commerce example
Headless and JAMstack - The State of Commerce Today
33:55 MIN
Audience Q&A on practical micro-frontend challenges
Micro-frontends anti-patterns
15:22 MIN
An overview of the Vendure e-commerce framework
Modern Headless Commerce with Vendure
Featured Partners
Related Videos
29:04Why HTMX is crushing React, Vue & Svelte.
Felix Eckhardt & Benedikt Stemmildt
46:46The Lean Web
Chris Ferdinandi
29:19Modern Headless Commerce with Vendure
Michael Bromley
26:44Next.js Unleashed: Optimizing Web Vitals for superior User Experience
Eileen Fürstenau
21:00From Dungeons & Dragons to Fortune 500 – Running a Large Commercial Open-Source project
Elise Bentley
40:45GraphQL + Apollo + Next.js: A Lovely Trio
Josh Goldberg
42:081, 2, 3... Fastify!
Matteo Collina
46:13Interactive server side components
Miško Hevery
Related Articles
View all articles
From learning to earning
Jobs that call for the skills explored in this talk.
Senior Frontend Developer - Typescript / Svelte - (f/m/x)
doinstruct Software GmbH
Berlin, Germany
Senior
GIT
JavaScript
TypeScript
Frontend Web Developer (JavaScript, React)
Die Socialisten
Vienna, Austria
Senior
Jest
React
Redux
JavaScript
Tech Lead Frontend Entwicklung (m/w/d)
norisk Group
Munich, Germany
Intermediate
Senior
Nuxt.js
JavaScript
Senior eCommerce Developer (NestJS/CommerceTools) (m/w/d)
denkwerk GmbH
Cologne, Germany
Intermediate
Senior
NestJS
Kubernetes
Web Entwickler:in Next.js / React
NUUK GMBH
Hamburg, Germany
GIT
Next.js
Terraform
TypeScript
Continuous Integration