How I Built Scholar Quest: A Full-Stack Command Center for Scholarship Applicants

How to Build Your Own Scholarship Tracker Web App With Scholar Quest

Preparing for scholarships can become chaotic very quickly.

You may have university links in a spreadsheet, IELTS plans in Notes, documents in Google Drive, deadlines in Calendar, and professor email drafts sitting in Gmail.

Scholar Quest was built to bring those things into one dashboard.

It includes scholarship tracking, university shortlists, IELTS progress, document management, professor outreach, finances, daily missions, XP, streaks, and an AI mentor.

In this guide, I will show you how to run your own version of Scholar Quest using the source code.

Repository:

https://github.com/0xZahidp/Scholar_Quest

Live demo:

https://sq.zahidp.com

You do not need to understand every line of code before starting. The goal is simple: get it running first, then change it step by step.

What you need before starting

You need a few basic things:

A laptop or desktop computer

Node.js installed

Git installed

A GitHub account

A Supabase account

A code editor such as VS Code

Optional: Gemini or OpenAI API access for the AI Mentor

If you are completely new, install Node.js and Git first, then restart your terminal.

Step 1: Clone the project

Open your terminal and run:

git clone https://github.com/0xZahidp/Scholar_Quest.git

Then enter the project folder:

cd Scholar_Quest

You now have a full copy of the project on your computer.

Step 2: Install the project packages

Run:

npm install

This downloads all libraries the project needs.

Scholar Quest uses React, TypeScript, TanStack Start, Tailwind CSS, Supabase, and several UI libraries. You do not need to install them one by one because npm install handles that automatically.

Wait until the installation finishes without errors.

Step 3: Open the project in VS Code

If you use VS Code, run:

code .

You will see folders such as:

src/

supabase/

public/

docs/

The most important folders for beginners are:

src/routes/

This contains the pages of the app.

src/components/

This contains reusable interface components.

src/lib/

This contains app logic, utilities, server functions, and AI mentor logic.

supabase/

This contains database setup, email templates, and migrations.

Step 4: Create your Supabase project

Go to Supabase and create a new project.

Choose a project name, set a strong database password, and wait for Supabase to finish creating the project.

After it is ready, open:

Project Settings → API

You will need these values:

Project URL

Publishable key

Service role key

Project reference ID

Keep the service role key private. Never place it in frontend code or share it publicly.

Step 5: Create your environment file

Inside the project folder, copy the example environment file:

cp .env.example .env

Now open the new .env file.

Replace the placeholder values with your own Supabase details.

Your basic setup should look similar to this:

SUPABASE_PROJECT_ID="your-project-ref"

SUPABASE_PUBLISHABLE_KEY="your-supabase-publishable-key"

SUPABASE_URL="https://your-project-ref.supabase.co"

SUPABASE_SERVICE_ROLE_KEY="your-service-role-key"

APP_URL="http://localhost:5173"

VITE_SUPABASE_PROJECT_ID="your-project-ref"

VITE_SUPABASE_PUBLISHABLE_KEY="your-supabase-publishable-key"

VITE_SUPABASE_URL="https://your-project-ref.supabase.co"

VITE_APP_URL="http://localhost:5173"

A simple rule:

Variables starting with VITE_ can be used in the browser.

Service role keys, AI keys, and other secrets must stay server-side.

Never upload your .env file to GitHub.

Step 6: Set up the database

Inside your Supabase dashboard, open:

SQL Editor

Then open this file from the project:

supabase/master_reset_and_setup.sql

Copy its contents into the Supabase SQL Editor and run it.

This creates the Scholar Quest tables, security policies, functions, and database setup.

Important: this setup script is destructive. It can drop and recreate Scholar Quest tables. Use it only in a new Supabase project or when you understand that existing app data may be removed.

After running it, check your Supabase dashboard to confirm that the database tables and Storage area are available.

Step 7: Configure authentication

Scholar Quest supports:

Email and password login

Google OAuth

Password reset

Custom authentication email templates

For a first local test, email and password login is enough.

Later, when you deploy your version, add your production domain in Supabase Auth settings.

For example:

Site URL:

https://your-domain.com

You should also add the app routes used for login, reset password, dashboard, and settings as redirect URLs.

For Google login, you will need to configure the Google provider inside Supabase Auth and add the Supabase callback URL in Google Cloud.

Step 8: Run the app locally

Now start the development server:

npm run dev

Your terminal will show a local address, usually:

http://localhost:5173

Open that URL in your browser.

You should now see your own Scholar Quest application running locally.

Create an account, sign in, and test the basic sections.

Step 9: Understand the main product areas

Scholar Quest is divided into practical parts of the scholarship journey.

Dashboard

The dashboard shows the current mission, level progress, daily tasks, IELTS readiness, shortlist status, and important alerts.

This is the place where users should quickly understand what to do next.

Scholarships

This area helps users track scholarship opportunities, deadlines, difficulty, degree level, funding, and application status.

You can customize it for your own target programs, such as Erasmus Mundus, DAAD, MEXT, Chevening, Fulbright, or Türkiye Scholarships.

Universities

This area works like a university funnel.

A university can move through stages such as:

Researching

Shortlisted

Applied

Admitted

Rejected

You can edit these stages based on your own workflow.

IELTS Center

The IELTS section tracks listening, reading, writing, speaking, overall band, readiness, weak skills, and mock-test history.

You can use it for your own target score or change it into a tracker for another exam, such as TOEFL, GRE, GMAT, SAT, or Duolingo English Test.

Documents

The document vault helps organize important files such as:

CV or résumé

Statement of purpose

Academic transcript

Passport

Recommendation letters

IELTS certificate

Degree certificate

Research proposal

This is useful because missing documents often become a problem close to deadlines.

Professors

The Professors section works like a lightweight academic CRM.

You can track potential supervisors, research interests, outreach status, email notes, replies, and follow-up actions.

Finances

The finance area can track savings, IELTS fees, translation costs, passport costs, visa expenses, scholarship budgets, and other preparation costs.

Step 10: Add the AI Mentor

The AI Mentor is optional.

Scholar Quest can use either Gemini or OpenAI for the mentor feature.

Add one provider key to your .env file.

For Gemini:

MENTOR_AI_PROVIDER="gemini"

GEMINI_API_KEY="your-gemini-api-key"

For OpenAI:

MENTOR_AI_PROVIDER="openai"

OPENAI_API_KEY="your-openai-api-key"

You can also use automatic provider selection:

MENTOR_AI_PROVIDER="auto"

The mentor can use a user’s saved application context, including profile details, scholarships, universities, IELTS scores, documents, finances, tasks, deadlines, and achievements.

This is what makes the mentor more useful than a normal chatbot. It can respond based on the student’s actual progress inside the app.

Step 11: Customize it into your own product

Do not try to redesign everything on the first day.

Start with small changes.

Change the brand

Search for:

Scholar Quest

Operation Global Scholar

Commander Mira

Replace them with your own product name, headline, and mentor identity.

Change the colors

Most styling is handled through Tailwind CSS and shared UI components.

You can start by changing:

Primary accent color

Sidebar styling

Button colors

Background gradients

Typography

Card borders and shadows

Change the data structure

Maybe you do not need a visa section. Maybe you want a section for scholarships by country. Maybe you want an SOP writing tracker.

Build around your own workflow.

The best version of this project is not a copied dashboard. It is a tool that solves your own problem.

Step 12: Test before deployment

Before deploying, run:

npm run lint

Then build the production version:

npm run build

If the build succeeds, preview it locally:

npm run preview

Test these things:

Password reset

Add scholarship

Add university

Log an IELTS mock

Upload a document

Add a professor

Add a finance entry

Check mobile responsiveness

Test the mentor if you configured it

Step 13: Deploy with Vercel

Push your customized project to your own GitHub repository.

Then go to Vercel and import the repository.

Use these settings:

Framework Preset: TanStack Start

Build Command: npm run build

Install Command: npm install

Add the same environment variables from your local .env file into Vercel Project Settings.

Do not add your .env file to GitHub.

After deployment, update the Supabase Auth Site URL and Redirect URLs with your new Vercel domain or custom domain.

Common beginner mistakes

The app opens but data does not work

Usually this means the Supabase environment values are missing or incorrect.

Check your .env file carefully and restart the development server.

Make sure you ran:

supabase/master_reset_and_setup.sql

inside the Supabase SQL Editor.

File uploads fail

Check Supabase Storage and make sure the required document storage setup exists.

AI Mentor does not respond

Check whether you added a Gemini or OpenAI API key to the server-side environment variables.

Do not use VITE_ before AI keys.

You accidentally deleted data

The main Supabase setup script is destructive. Always use a backup or a separate test project while learning.

What I would build next

Once your own version works, these are useful next improvements:

Scholarship recommendation scoring

Deadline reminders through email or Telegram

SOP version history

CV feedback workflow

Document OCR and text extraction

Collaborative access for mentors or counselors

University comparison charts

Application export as PDF

Calendar sync

Better mobile-first planning

Final thought

You do not need to build a perfect product before launching.

Start by solving one real problem.

For me, that problem was keeping scholarships, IELTS, documents, professor outreach, finances, and deadlines from becoming scattered across too many apps.

Scholar Quest became my attempt to turn that messy process into one clear system.

Use the repository as a starting point, customize it around your own journey, and build the version you wish existed when you started.

Source code:

https://github.com/0xZahidp/Scholar_Quest

Live project:

https://sq.zahidp.com