Frontend

React + Vite with real-time state handling

Backend

Next.js API routes powering trivia logic

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

Vercel login page

Deploy Backend

Deploy with Vercel

Connect to Github

Connect GitHub repository to Vercel

Wait for backend to deploy

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

Backend deployment success screen

Copy final Backend URL

You will find this URL in your dashboard :

In this example it is :

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

Copy backend URL from Vercel

Deploy frontend

Deploy with Vercel

Create new frontend project

Create a new Vercel frontend project

Update VITE_BASE_URL

Use the backend URL from step 5

Make sure to use URL under Domains

Set frontend environment variable in Vercel

You can now deploy!

Frontend Deployed!

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

Frontend deployment success screen

Congratulations! Now you have self hosted your own TriviaUP!

You can access your instance at :

Final frontend URL in Vercel

This tutorial is deployed at :

trivia-up-front.vercel.app