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
22:01 MIN
Live demo of a full-stack ClojureScript web application
Using backend languages for frontends: Why ClojureScript is an awesome idea!
27:24 MIN
Combining JAMstack with a headless CMS for e-commerce
Headless and JAMstack - The State of Commerce Today
1:04:01 MIN
Exploring modern tools for web interaction and analysis
WeAreDevelopers LIVE - the weekly developer show with Chris Heilmann and Daniel Cranney
02:16 MIN
Understanding JAMstack with a practical e-commerce example
Headless and JAMstack - The State of Commerce Today
15:22 MIN
An overview of the Vendure e-commerce framework
Modern Headless Commerce with Vendure
33:55 MIN
Audience Q&A on practical micro-frontend challenges
Micro-frontends anti-patterns
35:48 MIN
Demo of a server-rendered micro frontend application
Multiple Ships to the Island - Micro Frontends & Island Architectures
00:02 MIN
The web performance problem with modern frameworks
Interactive server side components
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
42:081, 2, 3... Fastify!
Matteo Collina
40:45GraphQL + Apollo + Next.js: A Lovely Trio
Josh Goldberg
46:13Interactive server side components
Miško Hevery
21:00From Dungeons & Dragons to Fortune 500 – Running a Large Commercial Open-Source project
Elise Bentley
From learning to earning
Jobs that call for the skills explored in this talk.
Founding Product Engineer
fonio GmbH
Vienna, Austria
Remote
€70-100K
Intermediate
Senior
React
Node.js
Next.js
+1
![Senior Software Engineer [TypeScript] (Prisma Postgres)](https://wearedevelopers.imgix.net/company/283ba9dbbab3649de02b9b49e6284fd9/cover/oKWz2s90Z218LE8pFthP.png?w=400&ar=3.55&fit=crop&crop=entropy&auto=compress,format)
Senior Software Engineer [TypeScript] (Prisma Postgres)
Prisma
Remote
Senior
Node.js
TypeScript
PostgreSQL
Angular Developer
Picnic Technologies B.V.
Amsterdam, Netherlands
Intermediate
Senior
RxJS
Angular
TypeScript
Frontend Developer (Angular)
Picnic Technologies B.V.
Amsterdam, Netherlands
Intermediate
Senior
CSS
RxJS
JavaScript
Tech Lead (m/f/d) - Berlin
Patronus Group
Berlin, Germany
Senior
Kotlin
Android
Angular
Spring Boot
Amazon Web Services (AWS)
Senior Backend Software Engineer (TypeScript) [Prisma ORM]
Prisma Data, Inc.
Remote
Senior
C++
Next.js
JavaScript
TypeScript