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.
ROSEN Technology and Research Center GmbH
Osnabrück, Germany
Senior
TypeScript
React
+3
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
08:03 MIN
Exploring modern tools for web interaction and analysis
WeAreDevelopers LIVE - the weekly developer show with Chris Heilmann and Daniel Cranney
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
06:10 MIN
The ongoing debate for JavaScript-free web solutions
WeAreDevelopers LIVE – Keeping Up with Styles, Data & More
Featured Partners
Related Videos
40:45GraphQL + Apollo + Next.js: A Lovely Trio
Josh Goldberg
1:24:47Build Your Own Subscription-based Course Platform
Dávid Lévai
29:04Why HTMX is crushing React, Vue & Svelte.
Felix Eckhardt & Benedikt Stemmildt
43:20Microfrontends at Scale
Josh Goldberg
26:00To New Frontiers: The Future of Frontend Development
Rainer Hahnekamp
29:19Modern Headless Commerce with Vendure
Michael Bromley
46:13Interactive server side components
Miško Hevery
20:50Create a Programmatic SEO Project Using Next.js and Static Site Generation
Dino Lozina
Related Articles
View all articles
From learning to earning
Jobs that call for the skills explored in this talk.
&why GmbH
Berlin, Germany
€50-70K
Junior
Intermediate
Senior
React
Next.js
TypeScript
PiNCAMP GmbH
Berlin, Germany
Senior
React
GraphQL
Next.js
Confideck GmbH
Vienna, Austria
Remote
Intermediate
Senior
Node.js
MongoDB
TypeScript
Titanom Solutions GmbH
Germering, Germany
€50-60K
API
React
Node.js
Next.js
+3
Anexia Cloud Solutions GmbH
Klagenfurt am Wörthersee, Austria
€54K
Nginx
React
DevOps
Docker
+5
Anexia Cloud Solutions GmbH
Graz, Austria
€54K
Nginx
React
DevOps
Docker
+5