Skip to content

Demo Script

Jump to bottom
Gage Bays edited this page Oct 17, 2025 · 4 revisions

Demo Script – Joblist

Overview

This walkthrough shows how our Joblist app connects from GitHub repo → running app → backend code → database → and back.
It demonstrates how the frontend, API, backend, and database all work together.

Start from the Repo

  • Go to our GitHub repository: show main files (/client, /server, /models, /routes).
  • Explain that the project is split into:
    • Frontend (React) inside /client
    • Backend/API (Node.js + Express) inside /server
    • Database models (Mongoose) inside /server/models

Move to the App (Frontend)

  • Open the deployed app or npm start locally.
  • Show the main dashboard with job listings.
  • Explain:
    • Users can log in or register.
    • Once logged in, they can add, edit, or delete job applications.
    • Each entry tracks company name, job title, application date, contact info, and status.
    • UI shows progress (like applied, interview, offer, etc.).

API (Connecting frontend to backend)

  • Open browser dev tools → Network tab → perform an action (like adding a job).
  • Point out the API call being made (POST /api/jobs).
  • Explain that the frontend communicates with our backend API using REST routes.

Backend (Node.js + Express)

  • Show backend code (open /server/routes/jobs.js or /controllers/jobsController.js).
  • Explain route flow:
    • Express receives the request (like POST /api/jobs).
    • It validates data.
    • It uses Mongoose to save or fetch data from MongoDB.
  • Show how errors are handled and responses are returned.

Database (MongoDB / Mongoose)

  • Show MongoDB Atlas dashboard or local database viewer.
  • Open the jobs collection.
  • Highlight that each document stores all job details and is linked to a user.

Back Again (Integration Check)

  • Go back to the app and refresh.
  • The new job should appear in the list immediately (showing successful data round trip).

Wrap-Up

End with a short summary:

“Joblist brings everything together — a React frontend, Express backend, and MongoDB database — all connected and deployed through GitHub for teamwork and version control.”

Notes for Standup

  • Make demo 10 minutes or more in length.
  • Make sure each team member covers one piece (repo, frontend, backend, database).
  • Test all actions before presenting.
  • Have your database running (MongoDB Atlas or local) before starting.

Clone this wiki locally