Deploy your forked app and connect it to your custom domain.
Vercel is where your platform actually runs. It takes the code from your GitHub fork, builds it, and serves it to the world, redeploying automatically whenever the code changes.By the end of this page your app will be live at your own domain, with a padlock in the address bar. It won’t work yet, because none of the services it depends on are connected, but it will be real and reachable.
Connecting your domain is the most technical part of the entire setup. Take that section slowly, especially the DNS records, where one wrong character means your domain silently fails to connect.
Go to vercel.com and click Sign Up in the top right corner.
On the signup page, click Continue with GitHub. Signing up this way rather than with an email address is what lets Vercel see your repositories and deploy them.
Use Continue with GitHub, not email signup.
If you aren’t already logged into GitHub you’ll be asked to log in first. Make sure it’s the same GitHub account you forked the repository with.
2
Confirm your account and authorize Vercel
Vercel shows which GitHub account you’re signed in as. Click Continue.
GitHub then shows its own authorization page, listing what Vercel will be able to do with your account. Click Authorize.
These are two separate pages: Vercel's account picker, then GitHub's own permission screen.
3
Verify your phone number
Vercel asks for a phone number to verify your account. If your number isn’t from the United States, use the flag dropdown next to the field to select the right country first, then type your number and click Continue.
A code arrives by text message. Enter it to continue.
4
Skip the extra screens
Vercel may offer to secure your account with two-factor authentication. This is optional and you can set it up later, so click Skip securing my account.
You may also be asked to choose a plan and a team name. Choose the Hobby plan, the one described as for personal projects, enter any name you like, and let Vercel generate the team URL for you. These screens don’t always appear, so continue past whichever ones you see.
On the Vercel overview page, click Add New in the top right and select Project. The Import button on the Import Project card does the same thing.
Both paths lead to the same place.
2
Connect to GitHub
On the Let’s build something new page, under Import Git Repository, click Continue with GitHub.
3
Switch to your personal account
You’ll land on a picker showing No Git Repositories Found, with a message saying your GitHub account requires re-authentication. This looks like an error, but it isn’t.What actually happened is that the picker defaulted to the ImplAI-Code organization, and Vercel has no access there. Your fork lives in your personal account, exactly as you set it up in the GitHub chapter.Don’t click the Continue with GitHub button on that panel, it won’t fix anything. Instead, click the dropdown showing ImplAI-Code and select Add GitHub Account.
The fix is in the dropdown, not the button.
4
Install Vercel on your account
GitHub asks where you want to install Vercel. Click your personal account, the one named after your username.The ImplAI-Code organization is also listed but locked, since only its admin can install apps there. That’s expected and correct: the organization holds the original code, your personal account holds your copy.
5
Give access to your fork only
Choose Only select repositories rather than All repositories, then select your forked repository, Forked-ImplAI-ecosystem if you used our name.Granting access to just this one repository is good practice: Vercel never needs to see anything else in your account.Click Install.
Only select repositories keeps Vercel's access limited to the one repository it needs.
6
Import the repository
GitHub sends you back to Vercel, where your fork now appears. Click Import next to it.
Your app needs 22 pieces of configuration to run, most of them credentials from the services you’ll connect in this course. Rather than adding them one at a time, you’ll load them all now as placeholders and replace each one with a real value as you go.
1
Download the configuration file
This file contains every setting your app needs, with placeholder values.
Download .env.example
Save this file to your computer, you’ll upload it to Vercel in the next step.
2
Import it into Vercel
On the deployment page, click Environment Variables to expand the section, then click Import .env and select the file you just downloaded.
Expand the section first, then use Import .env.
Every setting appears with its placeholder value filled in.
3
Make the values visible
Each imported variable has a lock icon next to it, meaning the value is hidden and, once saved, can never be read back in Vercel.Click that lock icon on every variable to turn it off. Throughout this course you’ll return to these variables one at a time to replace placeholders with real credentials, and being able to see what’s currently there makes that far easier.
With the lock disabled, values stay readable when you come back to edit them.
4
Deploy
Scroll to the bottom of the page and click Deploy, then wait a minute or two for the build to finish.A success page appears with a preview of your app. Click Continue to Dashboard.
Your app is now live on a temporary Vercel address.
On the overview page, the Production Checklist confirms your Git repository is connected.
Your app currently lives at a temporary .vercel.app address. Now you’ll point the domain you bought at it.
1
Add your domain
Click Domains in the sidebar, then click Add Existing in the top right, since you already own a domain.
2
Configure the domain
Type the domain you bought from Hostinger. Two settings then matter:Leave the redirect to www checkbox checked. Without it, yourdomain.com and www.yourdomain.com would serve your site as two separate addresses, which confuses search engines and can break login sessions when a cookie is scoped to one version but not the other.Make sure Connect to an environment is set to Production, which is what points your domain at your live app rather than a preview build.Click Add Domain.
The redirect checkbox and the Production environment are the two settings that matter here.
3
Read the DNS records Vercel needs
Two rows appear showing Invalid Configuration in red. This is expected: your domain doesn’t know yet that it should point to Vercel.
Red is the normal state here, not a mistake.
Click View DNS configuration on each row to reveal the exact records Vercel wants.
Keep this tab open, you'll copy these values in a moment.
These values are specific to your project. Always copy what’s on your own screen, never an example from this page or anywhere else.
Now you’ll add those records in Hostinger, where your domain is registered. Keep the Vercel tab open, you’ll be switching between the two.
1
Open your DNS settings in Hostinger
In a new tab, go to hostinger.com and log in. From the home page, click Domains in the sidebar.
The sidebar expands with sub-options underneath Domains. Click DNS.
Since you only own one domain, you land directly on its DNS / Nameservers page. Scroll down to see your existing records.
2
Delete only the two default records
Most of the records here power the professional email you just set up: the three CNAME records ending in _domainkey, the autodiscover and autoconfig records, the _dmarc and @ TXT records, and the two MX records.
Leave all of those exactly as they are. Deleting any of them breaks your email.
Only two records conflict with Vercel, both created automatically by Hostinger when you registered the domain:
Type
Name
A
@
CNAME
www
Delete those two using the trash icon at the end of each row, and nothing else.
Only these two rows get deleted. Everything else stays.
3
Copy the records from Vercel
Switch back to your Vercel tab. On the yourdomain.com row, make sure you’re on the DNS Records tab and note the Name and Value of the A record. Then click the row again to close it, open the www.yourdomain.com row, and note the Name and Value of the CNAME record.
Use the copy icons rather than retyping. A single wrong character silently breaks the connection.
4
Add both records in Hostinger
Back in Hostinger, fill in the first row with the A record: TypeA, Name and Value exactly as Vercel showed them, and leave TTL at its default.Click Add more records to reveal a second row, and fill it in with the CNAME record the same way.Double check both rows against Vercel, then click Add 2 records to submit them together.
Adding both at once avoids submitting the form twice.
5
Wait for Vercel to verify
Go back to Vercel. The status updates on its own, though you can click Refresh next to each row to check sooner.You may briefly see Generating SSL Certificate, which is Vercel automatically setting up HTTPS for your domain.
Once both rows read Valid Configuration, your domain is connected.
Both rows green means the domain now points to your app over HTTPS.
If the rows are still red after an hour
The most common cause is a typo in the values copied into Hostinger. Check that the Name and Value match exactly what Vercel shows, including any trailing dots.If they look right, refresh the Vercel Domains page, since the verification status is sometimes cached.If you left Hostinger’s original A record with name @ or CNAME record with name www in place, they conflict with the new ones. Delete those two specifically, and don’t touch any of your other records.
6
See it live
Open your domain in a new tab. You should land on your platform’s login page.Nothing works yet, since none of the services are connected, but the app is live at your own address with a padlock in the address bar.
The configuration file you imported filled your project with 22 settings, all holding placeholder values. Two of them you can already fill in, because you have the information right now: the address your app runs at, which you just finished connecting, and your support email, which you created in Hostinger.
1
Open your environment variables
Switch back to Vercel and click Environment Variables in your project’s sidebar.
You’ll see the full list of settings you imported earlier, each still holding its placeholder value.
2
Set your app's address
Find NEXT_PUBLIC_APP_URL, click the three dots, click Edit, and set the value to your domain including www:
https://www.yourdomain.com
Use the www version, since that’s the address your domain redirects to.
Replace the placeholder in the Value field with your address, then click Save.
3
Set your support email
Find NEXT_PUBLIC_SUPPORT_EMAIL in the list, click the three dots at the end of its row and click Edit.
Replace the placeholder with the professional email you created in Hostinger, for example contact@yourdomain.com, then click Save.
This isn’t only a contact address. Your app also uses it to recognise you as the admin, which is what unlocks the Profit Dashboard and the Branding page.It must be the exact email address you’ll sign up with inside your own app later, or you’ll lock yourself out of your own admin tools.
Your app is deployed, your domain is connected, and HTTPS is working. Next you’ll set up Resend, the service that sends emails from your domain, so your platform can send confirmations and notifications to your customers.
