DEV Community: sameer8saini

I Built an E-Commerce Website in 1 Day Using Supabase, Stripe & Claude Code

sameer8saini — Sat, 28 Feb 2026 22:41:09 +0000

Last weekend I ran a small experiment:

Can I build and launch a real e-commerce website in a single day using AI-assisted development?

The answer was… surprisingly yes.

Using a mix of modern tools and AI coding assistance, I went from idea → live production store in under 24 hours.

Here’s exactly how it came together.

⚡ The Stack

I intentionally chose tools that remove as much backend and infrastructure friction as possible:

Backend & DB → Supabase
Payments → Stripe
AI coding assistant → Claude Code
Hosting → Vercel
CDN & DNS → Cloudflare

The goal wasn’t perfection.

The goal was speed to validation.

🧠 Step 1 — Let AI Do the Heavy Lifting

Instead of hand-coding everything from scratch, I used Claude Code to:

Scaffold product listing pages
Create Supabase schema
Generate checkout flows
Wire up Stripe payment intents
Build admin-friendly product structures

This reduced what would normally be days of boilerplate into hours.

Supabase handled:

Product storage
Order tracking
Customer data
Secure APIs

No custom backend required.

💳 Step 2 — Payments with Stripe

Stripe’s checkout + webhooks made payments straightforward.

Claude helped generate:

Secure checkout session creation
Success/failure routing
Order confirmation logic

Supabase stores the order once Stripe confirms payment — simple and reliable.

🚀 Step 3 — Deploy in Minutes

Deployment was probably the easiest part.

Frontend deployed to Vercel
Domain + CDN managed by Cloudflare

This gave:

Global CDN
SSL out of the box
Fast load times
Zero server maintenance

🛍 The Result

By the end of the day, the site was live and selling.

If you're curious, you can see the live store here:

👉 wooden letterboxes nz

🧩 Key Takeaways

Building e-commerce no longer needs to be a multi-week engineering project.

With:

Supabase replacing custom backends
Stripe handling payments
AI accelerating development
Vercel + Cloudflare simplifying deployment

You can now move from idea → live store in a day.

And more importantly…

You can validate before overbuilding.

Create a Notes APP using ASP.NET Web API and Javascript

sameer8saini — Tue, 20 Sep 2022 06:02:18 +0000

This is part 1 of the video series in which we will create a notes application using ASP.NET Web API as our backend and we will use Entity Framework to save our data to a SQL server database.

We will cover the CRUD operations in our app.

Here's the step by step operations as covered in the video:

Create a new ASP.NET Web API
Install Nuget packages for Entity Framework Core
Create Domain models for our Notes application
Create DbContext class
Create Connection String in Appsettings.Json
Inject the DbContext in the services collection
Run Entity framework migrations.
Create new controller
Create and test CRUD Operations

Dynamic Angular Blog Without Writing Any API

sameer8saini — Fri, 20 May 2022 08:50:55 +0000

I created this Angular project which is a blog application without writing a single line of API.

You might have seen applications talking to backend APIs trying to do CRUD operations and fetch their data.

This is great and gives you a lot of flexibility, but what if you want to create a simple application like a blog where you just need data for your Angular application and all you are worried about is the SEO and the presentation of this Angular project.

Well here is where a headless CMS like Contentful comes into picture.

Contentful is a headless cms and is a content management platform to create, manage and publish content on any digital channel.
So in simpler terms, we will not be creating any backend service to save content for our application in databases, instead we will use contentful which will do this job for us.

This will save us a lot of effort and we don't have to manage the backend api.

I have this video tutorial for you in which I create a Angular website from scratch using Contentful.

.NET Web API - CRUD Operations 🚀

sameer8saini — Mon, 02 May 2022 07:34:16 +0000

Do you want to learn how to create REST APIs with ASP.NET Core?

In the above video tutorial, we will create a .NET 6 Web API from scratch step by step.

We will use the latest version of ASP.NET i.e. .NET 6 and will use Visual Studio to create our Web API.

We will start by installing an In-Memory database package that is offered to us by Entity Framework.

We can use this database to perform CRUD operations on this REST API.

CRUD stands for Create, Read, Update and Delete.

We will create our domain models and then create a DBContext.

We will then inject this DbContext in the services of this web API application.

We will also create a new controller in our solution which acts as an API endpoint.

In this API endpoint, we will build controller methods like GET, POST, PUT and DELETE to perform CRUD operations on our In-Memory database.

Once this is all done and working, we will install EF Core packages from nuget to run migrations using Entity framework core and create a SQL Server database.

Then we will modify the service injection slightly to now use SQL Server instead of the In-Memory database.

I hope you like the video.

Please show your support by hitting that like button 👍 and subscribing to the channel.

Wordle Clone Using HTML CSS and Javascript

sameer8saini — Wed, 09 Mar 2022 19:56:01 +0000

In this video, I have created a live working Wordle clone.

For those who don't know what Wordle is, Wordle is a five letter word guessing game. You get six tries to guess the right word and every time you guess a word, you get feedback regarding the letters.

A Green feedback on a letter means the letter is correct and on the correct location in that word.

A Yellow feedback on a letter means that letter is present in the word but not at this location.

A Grey feedback means the letter is not present at all in that word.

I hope you enjoy this video tutorial.

Responsive Footer That Sticks To The Bottom

sameer8saini — Tue, 08 Mar 2022 22:49:18 +0000

In this video, I will create a Fully Responsive Website Footer using HTML and CSS.

I will take a mobile first approach and first create the footer entirely for a mobile screen.

This is the best approach when designing responsive websites.

Then I will add media queries for larger displays and you will see how easy it is to code for larger displays once you are all sorted for your mobile devices.

We will also make sure our website footer stays at the bottom no matter how small or large out content is.

Also check out my Coding Blog for other exciting blogs on HTML, CSS, JAVASCRIPT and C# ASP.NET.

HOW TO CREATE A MULTI PAGE WEBSITE IN HTML

sameer8saini — Fri, 04 Mar 2022 23:06:41 +0000

There are two types of websites.

One is a single-page website (not to be confused with a SPA) that has all its content in a single HTML web page or an HTML document.

The other type is a website that has multiple pages (multiple HTML documents). Each HTML web page has different content in it. They might or might not share the common stylings, including the header and the footer elements.

Benefits Of Multi-Page Website

A website that has limited content to display to the end users may use the benefits of a single-page website. But there are so many reasons why we see a lot of multi-page websites on the internet.

A multi-page website segregates content on the website better. Rather than adding all the content for the website on a single page using headings, a multi-page website is able to better manage and showcase content on different pages based on the context.
A multi-page website offers better user flow and user experience. Users use the top navigation to navigate between web pages of a website. The navigation menu makes it clear that such and such content is at such and such page.
A multi-page website is search engine friendly. When you have a lot of content that differs in context between them, it's a great idea to have a multi-page website. Not only users would be able to better understand the contents of the website, but also search engine bots that crawl your website are able to better segregate the contents based on the web pages.

Creating A Multi-Page Website In HTML

Now that we know the benefits of a multi-page website, let's make a simple one in HTML.

Step 1 - Creating our first HTML page

Open a code editor like Visual Studio Code, Sublime Text or Notepad++. If you don't have any of the text editors, open a notepad.

Then create a basic HTML structure like the one below (I will provide the source code at the end of the blog)

Save this notepad file in your preferred folder location and save it as index.html

Now, we will change the title and create a header for this web page

Step 2: Creating Two More Web Pages

Similar to how we created the home page, we will create two more web pages. The contact page and the about page. Our folder now looks like this.

Step 3 - Linking Multiple Website Pages Together In HTML

It's now time to link the multiple pages that we have created on our website.

We will create a navigation menu that will link all of the pages together.

We will first change the code in our index.html page to the below:

And we will copy this nav element to the other pages as well (about.html and contact.html)

Step 4 - Running Our Multi-Page Website

Now, go back to your folder where you have saved all your files.

Right click on the index.html file and open this file with the preferred browser.

Result

This will open your multi-page website in the browser.

Use the navigation on the top to navigate between pages. This is how you can make multi-page websites easily.

Change the content of the web pages to the content that you want to add to your website.

Multi-Page Website In HTML - Source Code

Full Source Code For HOW TO CREATE A MULTI PAGE WEBSITE IN HTML

COUNTDOWN TIMER USING HTML, CSS AND JAVASCRIPT

sameer8saini — Mon, 21 Feb 2022 06:13:34 +0000

Full Blog Post With Source Code Here ->
COUNTDOWN TIMER USING HTML, CSS AND JAVASCRIPT

If you are just starting our learning HTML, CSS and Javascript, mini projects can be a great way to learn the language and put it to use.

There are so many mini-projects that you can make using these languages one of which is a countdown timer.

Why Create A Countdown Timer?

A countdown timer as we have seen in many places including one in our mobile phones is a timer that ticks backward from a given time to zero.

A countdown timer has several benefits in real life too. This can be used as an alarm to see if food is properly cooked or not, to track activity, and numerous other things.

Although we have a countdown timer in our mobile phone, creating a countdown timer from scratch using HTML, CSS and Javascript can be so much fun.

This can be a mini project that you can add to your portfolio.

So let's jump on to the blog post and create a fancy countdown timer using HTML, CSS, and Javascript step by step, and at the end, I will also provide the source code for it.

Coding A Countdown Timer - Explained [Step By Step]

To begin with, we will create an HTML barebone structure and will link our CSS and Script file to it.

Our barebone HTML looks like this:

See how we have linked our CSS in the head section and the script right at the end of the body tag.

Any elements that we add to this HTML will go above the script file reference.

Now, we will add the HTML structure for the countdown timer.

Now we will style this countdown timer and add some CSS code for these HTML elements.

The result of this HTML and CSS is this:

Now, we will write some javascript to make this countdown timer functional.

We will first use a date in the future to which our countdown timer counts from today's date and time.

Let's break down the Javascript code for this countdown timer.

On the top, we have a const value of the date and time we are counting down from.

In our example, we are counting down the date and time from next year.

Then we have a few query selectors for the various values of days, hours, minutes, and seconds.

Then comes the main bit, we are using the "setInterval" function that Javascript provides and we will run a function every 1000 milliseconds or 1 second.

In this function, we will calculate the difference of time between now and the date provided in the constant we are counting down from.

Then, we will assign these values to the selectors.

This will result in the following output and our countdown timer is ready.

Full-Screen Overlay Navigation Bar Using HTML and CSS

sameer8saini — Mon, 21 Feb 2022 06:11:37 +0000

Full blog post here: Navigation Bar HTML

In this blog post, we are going to create a fancy navigation bar using HTML, CSS, and Javascript.

This navigation menu would be not just a regular navbar, but, a full-screen overlay navigation menu.

This will be a responsive navigation bar menu that will be responsive for both mobile and desktop displays.

It will be really fun to code this and navigation bars like these create an amazing impression of your website in the user's head.

Benefits of Full Screen Navigation Bar Menu

Well, you can have a navigation bar that is right at the top of the website. So what does this full-screen overlay navigation achieve?

As a pro, you get a consistent view between your mobile and your desktop.

Users are able to interact with your responsive mobile website and desktop site in the same way.

Also, you get a lot of free space on the top of the websites which makes your website a little different from other websites out there.

Create A Full-Screen Navigation Bar Menu

To begin with, we will create three files in our code editor:

index.html file
style.css file
script.js file

After these, we will create a basic HTML structure using the Emmet extension for visual studio and will link our CSS and Script file.

Adding HTML Elements For Navigation Bar

Now, to the HTML structure, we will add a few HTML elements and create our header and our Navigation bar.

This is what the HTML code looks like:

Adding Styles To Our Navigation Menu HTML Elements

Now, it's time to style our header and nav elements and create a fancy full-screen overlay navigation menu.

The CSS will look like this

The result of the above HTML and CSS is that we have a top website header and a navigation menu. But the nav is not an overlay as we want at the moment.

Now we will add some more CSS to make it an overlay.

These three CSS properties make our nav a perfect overlay.

Now we have to make use of some Javascript to make the navigation menu hide and show.

The Javascript is very simple, we are just toggling a class that hides or shows the menu.

The Result - Our Navigation Bar

Simple Top Navigation Menu Using HTML and CSS - [With Source Code]

sameer8saini — Fri, 04 Feb 2022 03:04:46 +0000

Every website needs some sort of navigation so that users coming onto this web page can easily navigate between the pages of the website.

There are so many different navigation menus one can create like side navigation on a website, top navigation that stays on the top, maybe, one on the right side?

Well wherever you place it, these navigation menus or navbar menus are really an essential part of a website.

Creating them from scratch can not be so straightforward when you are just starting with HTML and CSS coding.

So in this blog post, we will create a top navigation menu or navbar from scratch using HTML and CSS and I will also attach the source code for it.

Creating The Folder Structure For Website

I have created a folder for myself called Nav1 and inside this folder with Visual Studio code which will be my editor in which I will write my HTML and CSS code.

Once the folder is open in visual studio code, I will create two files, an index.html and a style.css file.

Creating The HTML Structure

We will start by creating the basic HTML structure for our website.

We are using the Emmet extension for visual studio code so we will start writing html and Emmet will give us the boilerplate HTML structure for the website.

Then we will link our style.css to the HTML page.

Then we will go ahead and add some elements to our body of the website.

From the above image we can see that we have added a header element inside our body.

Inside the header tag, we have created two elements, 1 is an anchor element which will be used as a placeholder for the logo for our website.

The other element inside the header is the nav element. Nav elements are usually kept for adding menu to the navigations.

Inside the nav we have an unordered list and a few elements inside it defining the pages that we want the user to navigate to using anchor elements.

This is how our HTML looks like in a browser till now.

The next step is to add some CSS styles to these elements that we have created so that our website looks the way we want it to look.

The first thing we will do, and this is totally optional is to add a font to your website. In this example, I am using Google Quicksand Font. The usage of the font is explained in the image above.

By adding the above css code, we give our header a display property of flex and make the alignment for the header. After these above css changes the header looks like this.

Then we add some more styles to the nav and the header as below

This gives the color and styles to the nav and header.

The Final Look

Source Code Available Here

Top Navigation Bar In HTML CSS Source Code

Embed a Youtube Video Into Your HTML Website - 2 Easy Steps

sameer8saini — Tue, 01 Feb 2022 02:14:15 +0000

Complete blog post here Embed a youtube video into a HTML Website

Why Embed A Youtube Video Into Your Website?

In a successful blog post or a high converting website page, the most important thing is content.

Content is what keeps the reader engaged with your website page or blog.

Sometimes you may have the best content and clear instructions on your web page but there still may be some parts that could miss in writing text and screenshots.

This is where videos come in handy. Not only do they provide clear and concise information, but also a good engagement with the viewer.

Something as simple as adding a youtube video to your website can be the striking difference between the user staying on your website or just moving away from it.

Embedding a youtube video by a link that nobody will click is useless but if the viewer can see a clear youtube video right there in your HTML Website could be amazing.

This is not the easiest thing that is taught to everybody in our daily lives but in this post, we will show you how you can embed a youtube video in your website in 5 easy steps.

1. How To Get The Embed Code For Your Website

Getting the embedding code for the youtube video is very easy and youtube helps us with that.

Before you get the code, you have to research what video you are going to embed. It could be a video that you own or a video on youtube that clearly shows what you are trying to say. It could also be a video that you have on your PC, you can use that video and upload it on youtube and then use that video.

Once you have found the video you want to embed in your HTML Website, just open that video in your favorite browser.

The next thing is to click on the "Share" button that you see below the video

Click on the "Share" button and that should open a window that will have all the options you can use to share this video.

Click on the "Embed" button and that should give you some HTML code like in the image below

Select and copy the embed code

2. Adding The Youtube Embed Code To Your HTML Website

Now that we have the youtube embed code ready, it's now time to copy this to the HTML file of your website.

Open the HTML or website page you want to add the video to and then paste the copied code into the HTML.

Although it's fairly simple, If you have limited knowledge about website development, you may need a web developer who can do this for you. Understanding where is your HTML file is located could be a tough one to find but somebody who knows a bit of web stuff could be your best buddy.

Paste the code in your HTML and publish the changes.

The Result Looks Something Like This - An Embedded Youtube Video In Your Website

Host a static website for free with Google Firebase

sameer8saini — Sun, 30 Jan 2022 21:35:49 +0000

Also located on my New Blog: Host A Website For Free On Google Firebase

In this post, we will learn how to host a static website for absolutely free and one of the best website hosting platforms i.e. Google Firebase.

A Static website is a website that does not have any dynamic rendering and does not have service side rendering. It can still talk to APIs.

We will use Google Firebase Hosting as our hosting provider. Google Firebase provides free web hosting for 1GB of data and 10GB of data transfer limit for a month.

Let's navigate to https://firebase.google.com and log in via your Google account.

The "Spark Plan" of Google Firebase offers 1GB of website hosting and 10GB per month of data transfer and is the free plan that Google Firebase offers.

We will click on the "Start Now" button

When in console.firebase.google.com click on the "Create A Project" button

Give a name for the project, for example, "FreeWebsiteHostingDemo"

Click on "Continue"
Accept the "Terms" from the next screen and click on "Continue"

Then Click on "Create Project" to create a project on Google Firebase.

Now that Google Firebase has created us a project and we are in that project, we will start by creating an application for that project. So we will select a "Web project"
Google Firebase then asks us to Add Firebase to your web app.
Give a name to the web application you want to register with your project.
Example "OurFirstWebsite"

Then, it asks us to add Firebase SDK , which you can ignore for this demo.
From the side navigation, select "Hosting"
Click on "Get Started"

Install Firebase CLI

To host your website with Google Firebase Hosting, you need the Firebase CLI. Run the following npm command to install the CLI or update to the latest version of the CLI.
But before using the command, we have to make sure we have node installed in our machine.

Use the below command to install Google Firebase CLI

npm install -g firebase-tools

Login To Firebase Using The CLI

The next step is to login to the Firebase CLI using the below command. So use the command prompt window or a terminal and paste the below in it.

firebase login

It will ask you the following question: "Allow Firebase to collect CLI usage and error reporting information?" - type "Y" and press enter.
It opens a browser window and asks you to login to Google via your Google account.
After logging in, the command prompt or terminal tells you that you have successfully logged in to the account.

Hosting Your Website

Using command prompt or terminal, browse to the location where you have your website hosted.

For example, my website is physically located under this folder structure

I will use a command prompt or terminal and I will browse to the below location

Then I will use the command "firebase init" (without quotes) and will press enter as below

When it asks "Are you ready to proceed?" type "Y" and press Enter

Then it asks which service do you want to use? Use the arrow keys to come down to hosting and press space to select. Then press "Enter" to continue.

It then asks us if we want to "Use an existing project?"

Type "Y" (without quotes) and press Enter and choose the project that you created for this website.

Then it will ask us where are the files that you want to use for hosting. By default Google will look at a public folder inside your website and go inside the folder and copy all the files to Google.

Create a "Public" folder in your directory and copy all the files needed by the website into this "Public" folder.

Select "N" if it is not a single page application.

Then it asks that it has found a index.html file, do you want to override it?

We will press "N"

Deploy Website To Google Firebase

After all the setup is done, the final step is to deploy the files.

In your command prompt or terminal window, type the below command and press enter.

firebase deploy

After this we have successfully deployed our website to Google Firebase. In the command prompt, it tells us the URL that Google Firebase has given us so copy that and paste that in your browser.

Your website is now hosted successfully on Google Firebase.