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
05:54 MIN
Building the shop UI with server-side templates
Why HTMX is crushing React, Vue & Svelte.
02:45 MIN
Live demo of a full-stack ClojureScript web application
Using backend languages for frontends: Why ClojureScript is an awesome idea!
02:13 MIN
Introducing the modern stack for a course platform
Build Your Own Subscription-based Course Platform
03:20 MIN
Combining JAMstack with a headless CMS for e-commerce
Headless and JAMstack - The State of Commerce Today
03:24 MIN
Understanding JAMstack with a practical e-commerce example
Headless and JAMstack - The State of Commerce Today
01:04 MIN
An overview of the Vendure e-commerce framework
Modern Headless Commerce with Vendure
08:03 MIN
Exploring modern tools for web interaction and analysis
WeAreDevelopers LIVE - the weekly developer show with Chris Heilmann and Daniel Cranney
13:10 MIN
Audience Q&A on practical micro-frontend challenges
Micro-frontends anti-patterns
Featured Partners
Related Videos
46:46The Lean Web
Chris Ferdinandi
29:19Modern Headless Commerce with Vendure
Michael Bromley
29:01From Zero to Hero: NextJS 13 and Tailwind CSS for Beginners
Marius Obert
42:081, 2, 3... Fastify!
Matteo Collina
46:13Interactive server side components
Miško Hevery
21:00From Dungeons & Dragons to Fortune 500 – Running a Large Commercial Open-Source project
Elise Bentley
20:50Create a Programmatic SEO Project Using Next.js and Static Site Generation
Dino Lozina
43:20Microfrontends at Scale
Josh Goldberg
Related Articles
View all articles
From learning to earning
Jobs that call for the skills explored in this talk.
Schulz.codes GmbH
Darmstadt, Germany
Intermediate
Senior
React
JavaScript
TypeScript
doinstruct Software GmbH
Berlin, Germany
Senior
GIT
JavaScript
TypeScript
Speech Processing Solutions
Vienna, Austria
Intermediate
CSS
HTML
JavaScript
TypeScript
autoiXpert GmbH & Co. KG
Stuttgart, Germany
Senior
Node.js
Angular
MongoDB
TypeScript
infomax websolutions GmbH
Grassau, Germany
Intermediate
Senior
CSS
HTML
JavaScript
TypeScript
norisk Group
München, Germany
Intermediate
Senior
Nuxt.js
JavaScript
