In this beginner-friendly tutorial, Tube Guruji will show you how to build a full-stack print-on-demand web app using popular tools like Strapi, Next.js, Tailwind CSS, ImageKit, and ShadCN UI.
You don't need any experience with web development. Every step is explained clearly, so even if you’re just starting out, you’ll be able to follow along and learn how to build a complete app from scratch.
🔧 What You’ll Build
By the end of the tutorial, you’ll have a working app with:
- A clean, mobile-friendly landing page made with Tailwind CSS
- A product catalog and categories managed in Strapi CMS
- A page where users can customize products by uploading images
- AI tools like background removal, cropping, and image upscaling using ImageKit
- A shopping cart with Google login and simple checkout
- Reusable UI components from Shadcn UI
🧰 Tools We’ll Use
- Frontend: React, Next.js 15, Tailwind CSS, Shad CN, Axios, Fabric.js
- Strapi 5: A headless CMS that makes it easy to manage content
- ImageKit: Lets you upload and edit images with AI tools
Next.js
A powerful React framework that makes it easy to build fast, SEO-friendly web apps. It includes features like server-side rendering, routing, and API routes out of the box.
Strapi
An open-source headless CMS that lets you manage your content through an admin panel and auto-generates REST or GraphQL APIs. Perfect for backend data management.
ImageKit
A media management and optimization platform. It supports image uploads, transformations (like background removal and cropping), and delivers images via a global CDN.
What's awesome, is that there is native ImgaeKit integration on the Strapi's Marketplace.
And Strapi + ImageKit Integration Guide.
Tailwind CSS
A utility-first CSS framework for building custom user interfaces quickly with pre-built classes that you apply directly in your HTML.
ShadCN UI
A beautiful and customizable component library built on top of Tailwind CSS and Radix UI. It helps you build consistent and accessible UIs faster.
Fabric.js
A powerful JavaScript library for working with HTML5 canvas. It allows users to interactively create, edit, and manipulate graphics—perfect for product customization features.
🎓 What You’ll Learn
- How to start a Next.js project step by step
- How to style pages using Tailwind CSS
- How to use ShadCN UI to build clean components
- How to manage products and categories using Strapi
- How to connect the frontend and backend
- How to use ImageKit to upload and edit images
- How to deploy your backend using Strapi Cloud
This tutorial is great if you want to build a real-world project, learn how the full stack works, or even start your own e-commerce idea.
👉 Watch the full video on Tube Guruji’s YouTube channel and follow along!
