CSUF CS Course Advisor Chatbot

An LLM-powered chatbot that gives CSUF Computer Science students personalized, prerequisite-aware course recommendations based on the official CSUF CS catalog.

How It Works

1. Student fills out an onboarding form: academic year, completed courses, track/focus, and interests.
2. The CSUF CS course catalog (all courses, descriptions, prerequisites) is injected into the Gemini system prompt on every turn.
3. The student chats with the advisor — it recommends what to take next, enforces prerequisites, and explains every recommendation.

Tech Stack

Layer	Tech
Backend	Python 3.11, Flask, Google Gemini API (gemini-2.0-flash)
Frontend	React 18, Vite, react-markdown
Inference	Google Gemini API (server-side only — API key never exposed to browser)

Prerequisites

• Python 3.11+
• Node.js 18+
• A Google Gemini API key

Setup

1. Backend

cd backend
python -m venv venv

# Windows
venv\Scripts\activate
# macOS/Linux
source venv/bin/activate

pip install -r requirements.txt

Copy the example env file and fill in your keys:

copy .env.example .env   # Windows
# cp .env.example .env   # macOS/Linux

Edit backend/.env:

GEMINI_API_KEY=your_actual_gemini_api_key
SECRET_KEY=any_long_random_string_here

2. Frontend

cd frontend
npm install

Running (Development)

You need two terminals open:

Terminal 1 — Flask backend (port 5000):

cd backend
venv\Scripts\activate   # (or source venv/bin/activate on Mac/Linux)
python app.py

Terminal 2 — Vite frontend (port 5173):

cd frontend
npm run dev

Open http://localhost:5173 in your browser.

The Vite dev server proxies all /api/* requests to Flask on port 5000, so the browser never sees a cross-origin request.

Architecture Notes

• Client-side history: Conversation history lives in React state and is sent to /api/chat on every turn. Flask sessions have a 4 KB cookie limit — storing a growing conversation there would overflow quickly.
• System instruction: The full course catalog and student profile are injected via Gemini's system_instruction parameter, keeping the catalog out of the conversation history and avoiding token duplication per turn.
• Session profile: Student profile is stored in a Flask server-side signed cookie session, persistent across page refreshes.

Project Structure

.
├── backend/
│   ├── app.py              # Flask routes
│   ├── course_catalog.py   # All CSUF CS courses with prereqs (from official diagram)
│   ├── prompt_builder.py   # System prompt construction
│   ├── requirements.txt
│   └── .env.example
├── frontend/
│   ├── src/
│   │   ├── App.jsx             # Root: onboarding vs chat routing
│   │   ├── api.js              # Fetch wrapper for all backend calls
│   │   ├── components/
│   │   │   ├── Onboarding.jsx  # Profile form
│   │   │   └── Chat.jsx        # Chat interface with markdown rendering
│   │   └── styles/             # CSS modules
│   ├── index.html
│   ├── package.json
│   └── vite.config.js
└── README.md