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
Douglas GmbH
Düsseldorf, Germany
Intermediate
Senior
TypeScript
React
Matching moments
02:33 MIN
Why you might not need JavaScript for everything
WeAreDevelopers LIVE – You Don’t Need JavaScript, Modern CSS and More
03:31 MIN
The value of progressive enhancement and semantic HTML
WeAreDevelopers LIVE – You Don’t Need JavaScript, Modern CSS and More
11:10 MIN
The only frontend stack that truly matters
WeAreDevelopers LIVE – Frontend Inspirations, Web Standards and more
09:00 MIN
Navigating the growing complexity of modern CSS
WeAreDevelopers LIVE – You Don’t Need JavaScript, Modern CSS and More
04:02 MIN
How a broken frontend culture impacts the web
WeAreDevelopers LIVE – Frontend Inspirations, Web Standards and more
05:28 MIN
The origin story of the Polypane developer browser
Developer Time Is Valuable - Use the Right Tools - Kilian Valkhof
08:07 MIN
Exploring modern JavaScript performance and new CSS features
WeAreDevelopers LIVE – AI, Freelancing, Keeping Up with Tech and More
11:32 MIN
The industry's focus on frameworks over web fundamentals
WeAreDevelopers LIVE – Frontend Inspirations, Web Standards and more
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
20:50Create a Programmatic SEO Project Using Next.js and Static Site Generation
Dino Lozina
42:081, 2, 3... Fastify!
Matteo Collina
46:13Interactive server side components
Miško Hevery
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.
Visonum GmbH
Remote
Junior
Intermediate
React
Redux
TypeScript
Der STANDARD
Vienna, Austria
Senior
Next.js
TypeScript
prinux GmbH
Vienna, Austria
Junior
Intermediate
Senior
PHP
React
Angular
JavaScript
TypeScript
Confideck GmbH
Vienna, Austria
Remote
Intermediate
Senior
Node.js
MongoDB
TypeScript
Hubert Burda Media
München, Germany
€80-95K
Intermediate
Senior
Node.js
JavaScript
TypeScript
Almedia
Berlin, Germany
€85-100K
Senior
NestJS
Node.js
Express
TypeScript
+1
Patronus Group
Berlin, Germany
Senior
Kotlin
Spring Boot
Amazon Web Services (AWS)
