# Hosting on Vercel

Want to host Trivia UP for yourself so you have full control and your own domain? Don't worry! Here are the exact steps!

Canonical URL: https://kb.byaditya.com/entry/docs/TriviaUP/Hosting
Source: https://docs.adityabaindur.com/docs/TriviaUP/Hosting
Source updated: 2026-07-18T01:34:51Z
Indexed: 2026-11-05T03:58:26.143Z

---

### [Frontend](https://triviaup.adityabaindur.com)

React + Vite with real-time state handling

### [Backend](https://backend.triviaup.adityabaindur.com)

Next.js API routes powering trivia logic

### [Github](https://triviaup.adityabaindur.com/github)

Repository with all of the Source Code

## Tech Stack

- Next.js
- Vite
- React
- Tailwind CSS
- shadcn/ui
- Vercel

---

# Deploying on Vercel

-
## Login or Signup to Vercel (it's free)

[Login to Vercel](https://vercel.com/login)

[Vercel login page](/triviaup/vercel-login.png)

-
## Deploy Backend

[Deploy with Vercel](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2FAditya-Baindur%2FTriviaUP%2Ftree%2Fmain%2Fbackend&env=NEXT_PUBLIC_BASE_URL&envDescription=Your%20Frontend%20URL%20(optional)%20if%20not%20provided%2C%20it%20will%20default%20to%20my%20frontend.&envLink=https%3A%2F%2Fdocs.adityabaindur.dev%2Fdocs%2FTriviaUP%2FHosting)

-
## Connect to Github
[Connect GitHub repository to Vercel](/triviaup/backend/connect-github.png)

-
## Wait for backend to deploy

Upon completion of the deployment, you will see this message :

[Backend deployment success screen](/triviaup/backend/congrats-backend.png)

-

## Copy final Backend URL

You will find this URL in your dashboard :

In this example it is :

```text
https://trivia-up-backend.vercel.app/
```

[Copy backend URL from Vercel](/triviaup/backend/copy-backend-url.png)

-
## Deploy frontend

[Deploy with Vercel](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2FAditya-Baindur%2FTriviaUP%2Ftree%2Fmain%2Ffrontend&env=VITE_BASE_URL&envDefaults=%7B%22VITE_BASE_URL%22%3A%22%5BYOUR%20BACKEND%20URL%20HERE%5D%22%7D&envDescription=Optional%2C%20if%20not%20provided%2C%20it%20will%20default%20to%20my%20backend)

-
## Create new frontend project
[Create a new Vercel frontend project](/triviaup/frontend/new-frontend.png)

-
## Update VITE_BASE_URL

Use the backend URL from [step 5](#copy-final-backend-url)

Make sure to use URL under `Domains`

[Set frontend environment variable in Vercel](/triviaup/frontend/set-env-var-frontend.png)

You can now deploy!

-
## Frontend Deployed!

Once your frontend is deployed, you'll see this message:

[Frontend deployment success screen](/triviaup/frontend/congratulations-frontend.png)

Congratulations! Now you have self hosted your own TriviaUP!

You can access your instance at :

[Final frontend URL in Vercel](/triviaup/frontend/final-url-frontend.png)

This tutorial is deployed at :

[trivia-up-front.vercel.app](https://trivia-up-front.vercel.app/)