Building a website and app using AI

Part 1 — creating a website

14 min readJan 29, 2025

I’ll take you through all the steps required to build a complete app and an associated website from scratch, all by using the power of AI.

Tools I will be using:

Namecheap — to secure a domain name
Zoho — to setup an email address for the domain
Google Account — For Oauth (to massively speed things up!)
Netlify — To host the website and app
Github — to store the files
Bolt.new (AI tool to create the website and app)
Supabase — Database backend
Bolt-to-Github — Chrome extension to update Github
Mailjet — email services
ChatGPT

First things first

The first thing to do is to go and secure a domain name. Head over to namecheap.com and find something you like.

Once you’ve secured your new domain, you’ll have the option to manage the domain, and this is where we move onto the next step, which is to setup a business email address for the domain.

Head over to Zoho.com and register for an account. When you first register, you’ll of course need to provide your personal details (personal email address, mobile, etc.) but that’s fine. This won’t be the email address we’ll be setting up.

When you first login, you’ll be prompted to add your new domain details. Add them in and you’ll then be asked to prove you own the domain. Zoho will give you a DNS TXT record that you need to add to Namecheap, which effectively proves that you own the domain. It will look something like this:

You can then go into the “manage” section of your domain in Namecheap and add this TXT record.

In Namecheap, click on the Advanced DNS tab, and then click on “Add New Record”

Set to the following:

Type — change from “A Record” to “TXT”
Host — set to “@”
Value — Your Zoho DNS TXT value (e.g. zoho-verification=zb21577935.zmverify.zoho.eu)
TTL — leave as automatic

click on the little green tick to save the DNS record.

Now that we’ve confirmed we own the domain, head back to Zoho and click Verify TXT record.

Note: this step can take anywhere between 2 and 60 minutes depending on how quickly the DNS records propogate, so you might need to be patient.

Now you can setup your business email address. Most people use info@ or support@ or admin@ but it’s totally up to you.

You can skip past the “setup groups” section for now by clicking on the forward button near the button, and proceed until you get to setting up DNS mapping. This is the part where you’ll actually setup the email account. The first TXT record was just to prove you own the domain name, wheras the DNS mapping actually makes it work!

You’ll need to add all these records to Namecheap as well. The MX records go into the “Custom MX” section.

You then click on “Verify MX records” in Zoho. Once again, you might need to be patient, as this can take anywhere from 2–30 minutes to verify all records.

If you want to setup emails in your mail app on your mobile phone (i.e. not use the Zoho app for email) then you’ll need to make a note of your IMAP and SMTP settings, which you’ll need to add in to your mail account to get it working.

Hopefully you are then good to go with emails!

Head to your inbox, and send an email to your personal email address to make sure you receive it ok….

Similarly, send an email from your personal email, back to this new email address to make sure you are also receiving incoming emails to your new domain email address.

Setup GitHub

The next step will be to setup a GitHub account. Head over to github.com and sign up using your new email address:

Assuming all goes well, you’ll end up on this GitHub dashboard page:

This is where we create “repositories” which are basically just projects that store all the files for your website and app.

We’ll come back to this later….

Setup a google account

Whilst this next step is technically not required, I highly recommend doing it, because it will allow you to quickly sign up for services with Google OAuth credentials. Basically this just means that when you go on a website services “sign up” page, you won’t have to keep typing out all your details each and every time to sign up for the service. Instead you can you the “Sign up with Google” button tha many services use nowadays, and the sign up process goes from taking 2 minutes, to 10 seconds! Makes life much easier!

Tip: before you proceed any further, sign out of your current google account in Chrome if you’re already signed in on your personal account. Use the “Open guest profile” option. I found that it wouldn't let me complete the next steps unless I did this!

head to this link: https://www.google.com/intl/en-GB/account/about/

and click “create account”

When you get to the “how you’ll sign in” section, switch to “Use your existing email”

You can now use your new domain email address to setup the account. Eventually you should arrive here:

You’ll see from the coloured circle in the top right corner of chrome that you’re now signed in as your new domain account for Chrome, and this speeds up the signing up process for everything else!

Setup Netlify

The next step will be to setup a Netlify account. This is where the actual website is hosted. Head over to Netlify.com and sign up.

Choose the option to sign up with Github, which will link your Githup account to your Netlify account:

when it asks if you’re ready to deploy your project, you can select “skip for now”

You should then hopefully arrive at the Netlify dashboard, where you’re ready to host a website:

Create a website using AI!

ok so we’re now at the fun part. This is where we create a website using AI!

The first thing we need to do is head over to https://bolt.new

Now we type in a prompt of what we want to see. Here’s an example prompt to get you started, which you can alter to whatever you like.

I want a website landing page for my new app. The app will allow me to write reports when I visit customers which I can share with my colleagues.
The landing page must be modern, responsive to all screen sizes, and use industry best practices. The front-end should use React and Vite. I will require a sitemaps.xml file, a netlify.toml file, a .env file, a .gitignore file (add .env and node modules to this file) as well as a nice logo (SVG).
I want the page to have a separate header and footer component for better code manageability. I also want separate components for each section of the page, including a “Hero” section, a “Features” section, and a “Sign up” section.
Ensure the page is SEO optimized and has a GDPR cookies section along the bottom. I also want a “favicon” folder where I will upload a favicon pack. Also create me a custom, styled 404 page (including the header and footer) and include all react routes, as this will be deployed later on Netlify. Use Lucide React icons to style the icons on the page.

When you add this into the prompt and click the blue button, Bolt will get to work!

I’ve been using AI for a while now, but it still honestly blows my mind! You’ll see Bolt literally writing the code for your website in front of your eyes!

Once it finishes writing the code, which usually takes around 30 seconds or so, you’ll see the preview website in the preview window. This is what it created from my prompt:

Obviously we’ll want to make changes and tailor things to our liking, so the next thing we’ll want to do is connect Bolt to Github, and store our project.

Using Github to store your project

Here you have two options. You can either export (download) the project and then upload to Github, or you can use the far quicker option which is to “fork” a copy of the project from another Github repository.

Option 1 — Export (download) and then upload to Github

Click on the “Export” button in the top-right corner of Bolt, to download your project.

Once you’ve downloaded the zip file, extract all the files in the zip to a new folder. It should look like this:

You’ll then have a zip file which contains all of your project files. Now in order to “upload” these to your Github account, you need to create a new repository, and then drag all your files into the box to upload them.

First, create the new repository:

give it a repository (project) name and description and create it.

Next, click on the option that says “upload an existing file”.

This is where we’ll drag all of our files we extracted from the zip file….

Once the files have uploaded, click on the “Commit changes button at the bottom of the page:

If all went well, you’ll end up with something that looks like this:

Your Github repository is now ready for connection to Netlify.

Option 2 — Fork a copy as a template

If you don’t want to bother with downloading/uploading, you can use my template, which is the files that bolt created based on the prompt example I gave earlier.

Simply open this link:

GitHub - jpowell79/bolt-template: A template that you can use as "starter files" for your new…

A template that you can use as "starter files" for your new project. Built with React/Vite. - jpowell79/bolt-template

github.com

Then click on the “fork” button, and it will make a copy of the project in your Github account.

you should now see this project in your own GitHub account.

Connecting GitHub to Netlify to host the website

The next step will be to actually get the website appearing on the internet! Head back to Netlify, and click on the “Import from Git” button.

because we’ve already connected Netlify to Git in a previous step, we should now be able to add our repository.

click on the project you wish to deploy, depening on whatever you called it:

During this step, we’re actually just deploying to netlify with a netlify domain name. We’ll point our own domain name to our project later, but for now, just give it a unique name (which will end with netlify.app) and then click the deploy button at the bottom:

If everything went well, you now have a live website on the web, and a netlify URL to click on!

If you click on the URL you’ll see your website live!

I’m sure you’ll agree, it looks pretty good for a starter template, and all from 30 seconds of AI code writing!

Connecting Bolt to Github

The next part is focused on how we make changes to our website, which then get pushed to Github….. which then automatically update on Netlify.

The first thing is to install a fantastic tool called “bolt-to-github” from the Chrome extension store.

https://chromewebstore.google.com/detail/bolt-to-github/pikdepbilbnnpgdkdaaoeekgflljmame

click on “add to Chrome” and it will add the required extension to your browser.

I’d recommend pinning the extension so it’s easier to access:

The next thing will be to connect the extension to your github account. Click on the extension and you’ll see two fields you need to complete. The Github token field and the Github username.

click where it says “Classic token” and it will take you to the correct page on Github to get your token details:

click the “Generate Token” button at the bottom of the page:

Click to copy your token. I highly recommend you store the token in a secure file on your PC in case you lose it! Don’t share your token!

now paste that back into the bolt-to-github extension as well as your github username.

Tip: it won’t work until you’ve added BOTH fields! When you first add the token, it looks like there’s an error, but that’s just because you haven’t added in your github username yet!

click Get Started.

It will then present you with the repositories found on github. Click on the “Import from Github to Bolt” button and it will launch a new tab in Chrome where Bolt is connected to your account.

Tip: To avoid confusion, you can now close down the ORIGINAL bolt tab in the browser if it’s still open, as that was what we originally used to create a template, but we don’t need that window any more.

Ok so when bolt-to-github launches the NEW window, it will load up your files and generate a preview of the project, and it will pretty much look the same as before, but the key difference is that now we have direct connectivity between bolt and your GitHub repository, which speeds things up tremendously!

Tip: double-check that when you open up bolt-to-github it’s actually pointing to your repo and not just trying to create a new repo for you! If you look in this image you’ll see that it’s pointing to a new repo, and not the one I want, so if you see this then you’ll need to change it.

To change it, click on Settings, and scroll down to where it says “Repository Name” and search for the one you want to actually connect to and then click “save settings”.

It should then be connected to the correct repository

You’ll also see a new Github button in Bolt which wasn’t there before…. this is the button we use to “sync” the changes we make in bolt, to our GitHub repo.

Ok so let’s make some changes in bolt to see how this works. I’ll type the following into the chat window and let Bolt do its thing!

I don’t really like the blue buttons and the blue styling. Please change it to green. Also change the name of the site from ReportFlow to “ReportSync”. Also add in a nice big image of someone writing a report

…and as if by magic….

This is just a local preview though…. let’s now make this revision live on the web.

Click on the new “github” button in bolt, and it will transfer the file changes across to Github…

If you then switch to netlify and open your project and select “deploys” you’ll see Netlify automatically re-building the new version. It normally takes around 30–60 seconds to update.