Viva Prep

Simple30 second: naam, degree, project kya hai, stack (Flask + Jinja + SQLAlchemy + SQLite).

Example

Main Priya, IITM BS. MAD1 mein parking/ticket app — Flask backend, Jinja templates, session login, SQLite.

SimpleDemo script pehle se practice: 5–7 min, Admin + User roles, saare mandatory features.

Suggested flow1) Register/login user
2) Admin login — CRUD
3) Approval/blacklist
4) Booking/apply + edge case
5) Search
6) Logout

Viva tipBolte-bolte dikhao. Code tab kholna jab poochhein.

SimpleVue = UI ka smart assistant. Data badlo, screen khud update. MAD1 Jinja har click pe naya HTML.

Progressive frontend framework. Components, reactivity, directives.

MAD2 SPA: ek index.html, Vue Router pages, Flask sirf JSON.

Fayde: easy, SFC, docs. Vs React: templates HTML-like, course sikhata hai. Vs plain JS: baar-baar DOM mat chhedo.

Example

<!-- HelloWorld.vue -->
<template>
  <h1>{{ msg }}</h1>
</template>
<script>
export default { data() { return { msg: 'Hello' } } }
</script>

Project example: Navbar.vue + views (Login, Dashboard). data() / setup() reactive. fetch APIs.

Viva tipFayde: easy, SFC, reactivity. Vs React: chhota learning curve. Vs plain JS: UI state auto-update.

SimpleCDN = Vue script tag se, jaise pen drive. CLI/Vite = poori factory (SFC, npm, bundle).

CDN: no build, chhote apps, exam PC pe Node nahi to bhi chal. Weak: no .vue compile, 3rd-party cache, scale/team.

CLI/Vite: Single File Components, env, code-split, production dist/. Scalable.

Examiner 'which + why' — jo use kiya wahi justify, doosra naam rato mat.

Example

<!-- CDN -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

# Vite
npm run dev
npm run build

Project example: CDN: index.html unpkg vue. CLI: package.json, npm run serve / vite.

Viva tipCDN scalable large teams ke liye weak (no SFC compile, caching 3rd party). Examiner 'which + why' poochta hai — jo use kiya wahi justify karo.

SimpleMustache {{ }}, v-bind attrs, v-model forms, v-html careful.

Data binding in Vue.

Pehle 1-line definition, phir related MAD2 layer (Vue SFC / Flask route / models.py / tasks.py / Redis).

4-line formula: input kahan se aaya, auth/validation kaunsa, DB ya cache ya Celery, kya return.

Related mix mat karo — cache ≠ Celery, authentication ≠ authorization, v-if ≠ v-show, Beat ≠ Worker. Follow-up ke liye ek difference ready rakho.

Project example: Form + text + image.

Project example: Form + text + image.

SimpleCode explain formula: input kya aaya → auth/validation → DB change → response/UI.

Viva tipFunction signature + 3-4 important lines + edge case.

SimpleCOUNT SUM AVG MIN MAX. Dashboard stats.

SQL aggregate functions.

Pehle 1-line definition, phir related MAD2 layer (Vue SFC / Flask route / models.py / tasks.py / Redis).

4-line formula: input kahan se aaya, auth/validation kaunsa, DB ya cache ya Celery, kya return.

Related mix mat karo — cache ≠ Celery, authentication ≠ authorization, v-if ≠ v-show, Beat ≠ Worker. Follow-up ke liye ek difference ready rakho.

Example

db.session.query(func.count(Booking.id)).scalar()

Project example: func.count(Booking.id).

SimpleUngli rakhe to 4-line formula — panic ki jagah structure.

1) File ka role: model / Flask route / Vue SFC / celery task / config
2) Input kahan: JSON, params, token, props, $route
3) Kya kaam: query, cache, validation, .delay()
4) Output: jsonify, this.items, email, redirect

Unknown keyword: import, decorator, if, commit — har ka reason. Bluff mat.

Suggested flow1) Kaunsi layer?
2) Input?
3) DB/cache/task?
4) Response/UI?

Project example: Booking POST: jwt, seats check, commit, 201, Vue list push.

Viva tipUnknown keyword: import, decorator, if, commit — har ka reason. Panic mat.

SimpleCode explain formula: input kya aaya → auth/validation → DB change → response/UI.

Viva tipFunction signature + 3-4 important lines + edge case.

SimpleLifecycle = component ki zindagi ke stages. API call tab jab DOM ready ho — mounted.

created: instance bani, this data, DOM nahi. mounted/onMounted: page pe aa gaya — fetch, Chart.js, setInterval.
updated: data change ke baad. unmounted: cleanup (clearInterval) warna memory leak.

Dashboards onMounted isliye: canvas/API tab valid. created mein $el nahi.

Composition: onMounted(() => {}) setup ke andar.

Example

export default {
  async mounted() {
    const r = await fetch('/api/venues')
    this.venues = await r.json()
  }
}

Project example: Venues.vue mounted fetch list. Clock component unmounted pe interval clear.

Viva tipcreated: data setup, DOM nahi. mounted/onMounted: $el mil gaya — fetch yahi. Dashboards isliye onMounted use karti hain.

SimpleViva wrap-up hai. Short thanks + confirm submission ZIP latest hai.

SimpleViva wrap-up hai. Short thanks + confirm submission ZIP latest hai.

SimpleLive UI change: relevant CSS/HTML template kholo — color, margin, flex, bootstrap class. Save + hard refresh.

Example

/* button red */
.btn-primary { background: red; }

/* center navbar item */
.navbar { justify-content: center; }

Viva tipDevTools se pehle try, phir file mein permanent change.

SimpleTheory = concepts: ORM, MVC, auth vs authz, Jinja inheritance, sessions. 1-line def + project example.

Simple30 second: naam, degree, project kya hai, stack (Flask + Jinja + SQLAlchemy + SQLite).

Example

Main Priya, IITM BS. MAD1 mein parking/ticket app — Flask backend, Jinja templates, session login, SQLite.

SimpleVirtual DOM memory tree. Diff, sirf farq real DOM pe. Fayda kam DOM ops. Nuksaan chhote page overhead.

Vue/React. jQuery direct DOM. Lose reactivity Vue2 new property bina set.

Pehle 1-line definition, phir related MAD2 layer (Vue SFC / Flask route / models.py / tasks.py / Redis).

4-line formula: input kahan se aaya, auth/validation kaunsa, DB ya cache ya Celery, kya return.

Related mix mat karo — cache ≠ Celery, authentication ≠ authorization, v-if ≠ v-show, Beat ≠ Worker. Follow-up ke liye ek difference ready rakho.

Project example: v-for list patch, poora innerHTML nahi.

SimpleVue = UI ka smart assistant. Data badlo, screen khud update. MAD1 Jinja har click pe naya HTML.

Progressive frontend framework. Components, reactivity, directives.

MAD2 SPA: ek index.html, Vue Router pages, Flask sirf JSON.

Fayde: easy, SFC, docs. Vs React: templates HTML-like, course sikhata hai. Vs plain JS: baar-baar DOM mat chhedo.

Example

<!-- HelloWorld.vue -->
<template>
  <h1>{{ msg }}</h1>
</template>
<script>
export default { data() { return { msg: 'Hello' } } }
</script>

Project example: Navbar.vue + views (Login, Dashboard). data() / setup() reactive. fetch APIs.

Viva tipFayde: easy, SFC, reactivity. Vs React: chhota learning curve. Vs plain JS: UI state auto-update.

SimpleVue React Angular UI frameworks. Vue course choice.

What are JavaScript frameworks.

JS browser ki language. const rebind nahi, let block. Arrow () => this lexical.

Promise: pending/fulfill/reject. async/await usko seedha padhne jaisa. try/catch await pe. Yeh Celery nahi — Celery Python worker.

fetch native AJAX. array.filter/map computed lists. Vue data reactive; plain JS DOM querySelector se manual.

Project example: Vue.

Project example: Vue.

SimplePrimary key row ka unique identity — usually id Integer autoincrement.

Example

id = db.Column(db.Integer, primary_key=True)

Simplemodels.py har table ki class hai — columns, PK/FK, relationships. Yeh Model layer hai.

Viva mein file khol ke bolo:
1) Kaunsi classes/tables hain (User, Role-specific, Booking...)
2) Har table ka kaam 1 line
3) Relationships: 1-1 / 1-M / M-M, backref, cascade, lazy
4) Constraints: unique email, nullable, default status

Example skeleton

class User(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    email = db.Column(db.String(120), unique=True, nullable=False)
    role = db.Column(db.String(20), default='user')
    bookings = db.relationship('Booking', backref='user', cascade='all, delete-orphan')

ER diagram: rectangles entities, lines relationships, PK/FK mark. Schema = yahi structure.
Tables create: db.create_all() ya migrations. SQLite file SQL viewer se dikha sakte ho.

SimpleCache = pehli baar hisaab karke copy rakh lo, doosri baar copy dikha do.

Baar-baar same expensive kaam (DB query, counting bookings) mat karo. Result Redis jaise store mein timeout ke saath rakh do.

Cache hit: key mil gayi, DB skip. Cache miss: DB se lao, SET karo, return karo.

Tradeoff: speed vs stale data. Admin naya venue add kare aur cache 50s ka ho to user purani list dekh sakta hai — isliye write pe invalidation zaroori hai.

Browser cache, Flask-Caching, Redis alag layers hain. MAD2 examiner Redis + @cache.cached code dekhta hai.

Example

@cache.cached(timeout=50, query_string=True)
@app.route('/api/shows')
def shows():
    return jsonify([s.serialize() for s in Show.query.all()])

Project example: Admin dashboard counts / venues list cache. Create/update/delete ke baad cache.delete('venues').

Viva tipprint('DB queried') function ke andar laga ke miss/hit demo karo — hit pe print nahi chalega.

SimpleLive UI change: relevant CSS/HTML template kholo — color, margin, flex, bootstrap class. Save + hard refresh.

Example

/* button red */
.btn-primary { background: red; }

/* center navbar item */
.navbar { justify-content: center; }

Viva tipDevTools se pehle try, phir file mein permanent change.

SimpleLevel = viva difficulty band. Level 1 usually demo + basics; higher pe live coding + deeper theory.

Viva tipJo level assign hai uske hisaab se demo + theory ready rakho.

SimpleCamera pe clearly college/IITM ID dikhao — naam aur photo match hone chahiye.

Viva tipPehle se ID haath mein rakho, glare mat aane do. Iske baad GitHub + project run.

SimpleGitHub repo open karo: commits, collaborators, README. Examiner check karta hai tumne khud kaam kiya.

Example

Settings → Collaborators
Commits: regular messages, last-day dump nahi.

Viva tipPrivate repo access pehle de do. Main branch submitted ZIP se match honi chahiye.

SimpleORM = Object Relational Mapping. Tables → Python classes. Raw SQL kam likhte ho.

Example

class User(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    email = db.Column(db.String(120), unique=True)

User.query.get(5)  # SELECT ... WHERE id=5

SimpleDemo 5–7 min ki kahani: saari roles, koi milestone skip nahi, bolte-bolte dikhao.

Examiner list tick karta hai. Crash ho to panic nahi — terminal error padho.

Code tab kholna jab poochhein. Extra uncommitted features mat dikhana agar portal ZIP mein nahi.

Suggested flow1) Register/login user
2) Admin login — CRUD
3) Approval/blacklist
4) Booking/apply + edge case
5) Search + charts
6) CSV export / email job
7) Logout

Project example: Jo statement/parking/jobs/tickets hai uske user+admin journeys.

Viva tipBol: 'Yahan overbooking rokta hoon'. Mandatory features pehle, polish baad.

SimpleMVC = Model-View-Controller. Code ko 3 hisson mein baant ta hai taaki mix na ho.

Model: data + DB. models.py — User, Trek, Booking classes.
View: jo user dekhta hai. templates/*.html + Jinja.
Controller: beech ka logic. routes / app.py — request lo, model se data, view ko do.

Example flow (register):
Browser form POST → Controller register() → User model save → redirect → View dashboard.html

Draw: Browser → Controller → Model → DB, phir Controller → View → Browser.
ORM na ho to bhi MVC ho sakta hai — Model raw SQL functions ho sakte hain. Structure matter karta hai, library nahi.
MVP/MVVM doosri architectures hain; MAD1 mein MVC expected hai.

SimpleJOIN related tables ek result mein. Inner = match only; left = left side sab + match.

Example

db.session.query(Booking, User).join(User).filter(User.id == uid).all()

SimpleApp keywords ready rakho: Flask, Jinja, SQLAlchemy, session auth, RBAC, CRUD, validation, SQLite, MVC.

SimpleViva wrap-up hai. Short thanks + confirm submission ZIP latest hai.

SimpleNode JS runtime bahar browser. Vite/CLI ko chahiye. CDN-only app browser se chal sakti.

node_modules venv mein nahi.

Pehle 1-line definition, phir related MAD2 layer (Vue SFC / Flask route / models.py / tasks.py / Redis).

4-line formula: input kahan se aaya, auth/validation kaunsa, DB ya cache ya Celery, kya return.

Related mix mat karo — cache ≠ Celery, authentication ≠ authorization, v-if ≠ v-show, Beat ≠ Worker. Follow-up ke liye ek difference ready rakho.

Project example: node -v. npm run serve.

SimpleRDBMS tables SQL. SQLite/Postgres/MySQL. Database data, DBMS software.

SQLite engine + file. DBMS vs DB difference favourite.

ORM objects ko tables se map karta hai — raw SQL kam. SQLAlchemy MAD2 default.

class User(db.Model) + Column + relationship. query.filter_by / db.session.get. Fayda: portable SQLite→Postgres, injection se safer. Nuksaan: N+1, complex SQL.

SQLite file, zero server — course friendly. Postgres scale. Relationships: FK, backref, lazy/joinedload, cascade on delete. Constraints unique/not null integrity.

Bookings source of truth DB, Redis cache copy.

Project example: SQLite DBMS, app.db database file.

SimpleLive UI change: relevant CSS/HTML template kholo — color, margin, flex, bootstrap class. Save + hard refresh.

Example

/* button red */
.btn-primary { background: red; }

/* center navbar item */
.navbar { justify-content: center; }

Viva tipDevTools se pehle try, phir file mein permanent change.

SimpleHTTP postcard (koi padh le). HTTPS envelope (TLS lock).

Same headers, encrypted channel. MITM se password/token bachao. Local viva HTTP OK.

HTTP/1.1 version keep-alive. TCP neeche, TLS security layer, SMTP mail alag.

Browser + API ke beech extra darwaze: CORS origin allow, HTTPS encrypt transit, CSRF cookie-auto-send attack, XSS HTML inject, SQL injection raw query.

MAD2 SPA: Vue :8080 Flask :5000 → Flask-CORS. JWT localStorage XSS se chori ho sakta — v-html user input pe avoid. Password Network tab localhost pe dikhega; prod HTTPS, response mein password echo nahi.

401 unauthenticated, 403 unauthorized, 400 validation. Hash one-way — SHA decrypt nahi hota. Secret key .env, GitHub pe nahi.

Project example: Dev localhost http. Production https:// + cert.

Viva tipProtocols: HTTP/HTTPS app, TCP transport, TLS security, SMTP mail. HTTP/1.1 version — persistent connections.

SimpleCode explain formula: input kya aaya → auth/validation → DB change → response/UI.

Viva tipFunction signature + 3-4 important lines + edge case.

SimpleVue = UI ka smart assistant. Data badlo, screen khud update. MAD1 Jinja har click pe naya HTML.

Progressive frontend framework. Components, reactivity, directives.

MAD2 SPA: ek index.html, Vue Router pages, Flask sirf JSON.

Fayde: easy, SFC, docs. Vs React: templates HTML-like, course sikhata hai. Vs plain JS: baar-baar DOM mat chhedo.

Example

<!-- HelloWorld.vue -->
<template>
  <h1>{{ msg }}</h1>
</template>
<script>
export default { data() { return { msg: 'Hello' } } }
</script>

Project example: Navbar.vue + views (Login, Dashboard). data() / setup() reactive. fetch APIs.

Viva tipFayde: easy, SFC, reactivity. Vs React: chhota learning curve. Vs plain JS: UI state auto-update.

SimpleCache = pehli baar hisaab karke copy rakh lo, doosri baar copy dikha do.

Baar-baar same expensive kaam (DB query, counting bookings) mat karo. Result Redis jaise store mein timeout ke saath rakh do.

Cache hit: key mil gayi, DB skip. Cache miss: DB se lao, SET karo, return karo.

Tradeoff: speed vs stale data. Admin naya venue add kare aur cache 50s ka ho to user purani list dekh sakta hai — isliye write pe invalidation zaroori hai.

Browser cache, Flask-Caching, Redis alag layers hain. MAD2 examiner Redis + @cache.cached code dekhta hai.

Example

@cache.cached(timeout=50, query_string=True)
@app.route('/api/shows')
def shows():
    return jsonify([s.serialize() for s in Show.query.all()])

Project example: Admin dashboard counts / venues list cache. Create/update/delete ke baad cache.delete('venues').

Viva tipprint('DB queried') function ke andar laga ke miss/hit demo karo — hit pe print nahi chalega.

SimpleJOIN related tables ek result mein. Inner = match only; left = left side sab + match.

Example

db.session.query(Booking, User).join(User).filter(User.id == uid).all()

SimpleDemo script pehle se practice: 5–7 min, Admin + User roles, saare mandatory features.

Suggested flow1) Register/login user
2) Admin login — CRUD
3) Approval/blacklist
4) Booking/apply + edge case
5) Search
6) Logout

Viva tipBolte-bolte dikhao. Code tab kholna jab poochhein.

SimpleProps parent→child values. Emit child→parent signal. Basic communication.

Difference props and emit.

Component = reusable UI block (Navbar, Card). Props parent→child data, emit child→parent event. Slots parent HTML inner content.

computed cache + reactive derive (filtered list). watch side-effect (query change pe API). methods events. ref() primitive, reactive() object. Vuex/Pinia global store; localStorage persist, store nahi.

SFC: template + script + style ek .vue file. Parent-child exam favourite: list parent, row child :item + @delete.

Project example: Card props venue emit select.

SimpleViva wrap-up hai. Short thanks + confirm submission ZIP latest hai.

SimpleVue = UI ka smart assistant. Data badlo, screen khud update. MAD1 Jinja har click pe naya HTML.

Progressive frontend framework. Components, reactivity, directives.

MAD2 SPA: ek index.html, Vue Router pages, Flask sirf JSON.

Fayde: easy, SFC, docs. Vs React: templates HTML-like, course sikhata hai. Vs plain JS: baar-baar DOM mat chhedo.

Example

<!-- HelloWorld.vue -->
<template>
  <h1>{{ msg }}</h1>
</template>
<script>
export default { data() { return { msg: 'Hello' } } }
</script>

Project example: Navbar.vue + views (Login, Dashboard). data() / setup() reactive. fetch APIs.

Viva tipFayde: easy, SFC, reactivity. Vs React: chhota learning curve. Vs plain JS: UI state auto-update.