Viva Prep

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.

SimplePoint-to-point messaging: ek producer → ek queue → ek consumer. Celery task usually yahi. Pub/Sub = broadcast many subscribers.

SimpleValidation = input rules: required, email format, length, unique. Frontend UX, backend security — dono.

Example

if not email or '@' not in email:
    flash('Invalid email')
    return redirect(request.url)
if User.query.filter_by(email=email).first():
    flash('Email taken')

SimpleCSRF: attacker tumhari logged-in browser se unwanted POST. CSRF token form mein proof hai request genuine hai.

Viva tipFlask-WTF CSRF protect karta hai. Token bina POST reject.

SimplePrivacy personal data minimize. Security attacks rokna CIA. Overlap not same.

GDPR vs firewall example.

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: Don't return other users' emails to normal user API.

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

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.

SimpleStack bolo: Python, Flask, Jinja2, SQLAlchemy, SQLite, HTML/CSS/Bootstrap, maybe Chart.js.

SimpleSMTP = email bhejne ka protocol, jaise HTTP web ka.

Ports: 587 STARTTLS, 465 SMTPS, 25 server-server. Dev: MailHog 1025.

Flask-Mail wrap. Sync send slow — Celery task se bhejo.

Fayda: universal. Nuksaan: spam, deliverability (SPF/DKIM), no guarantee like API.

Example

app.config['MAIL_SERVER'] = 'localhost'
app.config['MAIL_PORT'] = 1025
mail.send(Message('Hi', recipients=['a@b.com'], body='Hello'))

Project example: MAIL_SERVER=localhost MAIL_PORT=1025. Production later SendGrid/SES.

Viva tipFayda: universal. Nuksaan: deliverability, spam, sync send slow — isliye Celery + MailHog in dev.

Simpleexaminer UI tweak maangta hai — CSS class ya inline, instantly dikhao.

Button color: <button class='btn btn-success'> ya style='background:#22c55e;color:#fff'
Navbar: navbar-dark bg-success / style='background:yellow' / fixed-bottom se neeche.
Center: .wrap { display:flex; justify-content:center; align-items:center; min-height:100vh; }
text-align:center heading ke liye. Bootstrap: d-flex justify-content-center, mx-auto, text-center.
Hover: .btn:hover { opacity:0.8; transform:scale(1.02); }
Half width: class='col-6' ya width:50%. Row→column: flex-direction:column / col-12 stack.
Login card: card shadow p-4 mx-auto (max-width:400px).
Table header green: th { background:green; color:white; } Bold column: td:nth-child(2){font-weight:bold}
Box shadow: box-shadow: 4px 4px 12px rgba(0,0,0,.3);
Background image: body { background: url('/static/bg.jpg') center/cover; }
Reset button: <button type='reset'>Clear</button>
Move button: ms-auto / position / flex order.
Jinja dashboard heading: <h1>{{ user.name }}'s Dashboard</h1>

SimpleORM = Object Relational Mapping. Database tables ko Python classes/objects se map karta hai, raw SQL kam likhni padti hai.

Bina ORM: cursor.execute('SELECT * FROM user WHERE id=?', [5])
ORM se: User.query.get(5) ya db.session.get(User, 5)

Example model

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

FaydePython mein soch sakte ho, SQL injection se protection (parameterized), relationships easy, DB switch thoda aasan.

Nuksaancomplex queries slow/abstract, seekhne ki layer extra, kabhi raw SQL phir bhi chahiye.

MAD1: SQLAlchemy (Flask-SQLAlchemy). Tables db.create_all() ya migrations se banti hain.

SimplePoint-to-point messaging: ek producer → ek queue → ek consumer. Celery task usually yahi. Pub/Sub = broadcast many subscribers.

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.

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.

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.

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.

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.

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.

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.

SimpleServer-Sent Events: server → browser one-way stream (text/event-stream). WebSocket full duplex hai; SSE simpler notifications ke liye.

Example

# client
const es = new EventSource('/stream');
es.onmessage = (e) => console.log(e.data);

SimpleMessage queue generic. Task queue (Celery) specifically 'yeh function chalao'.

Redis list FIFO. Priority extra queues.

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: Celery is task queue on Redis broker.

SimpleDenial of Service flood/expensive queries se down. Rate limit, captcha, scale.

Course: validation, indexes, cache. Not full WAF.

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: Don't allow unbounded export without auth.

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.

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

Suggested flow1) Classes list karo
2) Har table ka kaam 1 line
3) Relationships (1-M / M-M)
4) Constraints (unique, nullable)

Example

class Lot(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    name = db.Column(db.String(80), nullable=False)
    spots = db.relationship('Spot', backref='lot', lazy=True)

SimpleInt column mein string daalne pe SQLAlchemy/DB type error ya Integrity/StatementError. Empty table pe bhi same validation fail — row count matter nahi.

Example

# SQLite may coerce sometimes; Postgres: invalid input syntax for integer
Spot(status='free', lot_id='abc')  # lot_id int → error

SimpleInt column mein string daalne pe SQLAlchemy/DB type error ya Integrity/StatementError. Empty table pe bhi same validation fail — row count matter nahi.

Example

# SQLite may coerce sometimes; Postgres: invalid input syntax for integer
Spot(status='free', lot_id='abc')  # lot_id int → error

SimpleInt column mein string daalne pe SQLAlchemy/DB type error ya Integrity/StatementError. Empty table pe bhi same validation fail — row count matter nahi.

Example

# SQLite may coerce sometimes; Postgres: invalid input syntax for integer
Spot(status='free', lot_id='abc')  # lot_id int → error

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.

Simpleexaminer UI tweak maangta hai — CSS class ya inline, instantly dikhao.

Button color: <button class='btn btn-success'> ya style='background:#22c55e;color:#fff'
Navbar: navbar-dark bg-success / style='background:yellow' / fixed-bottom se neeche.
Center: .wrap { display:flex; justify-content:center; align-items:center; min-height:100vh; }
text-align:center heading ke liye. Bootstrap: d-flex justify-content-center, mx-auto, text-center.
Hover: .btn:hover { opacity:0.8; transform:scale(1.02); }
Half width: class='col-6' ya width:50%. Row→column: flex-direction:column / col-12 stack.
Login card: card shadow p-4 mx-auto (max-width:400px).
Table header green: th { background:green; color:white; } Bold column: td:nth-child(2){font-weight:bold}
Box shadow: box-shadow: 4px 4px 12px rgba(0,0,0,.3);
Background image: body { background: url('/static/bg.jpg') center/cover; }
Reset button: <button type='reset'>Clear</button>
Move button: ms-auto / position / flex order.
Jinja dashboard heading: <h1>{{ user.name }}'s Dashboard</h1>

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

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

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.

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

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

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

Suggested flow1) Classes list karo
2) Har table ka kaam 1 line
3) Relationships (1-M / M-M)
4) Constraints (unique, nullable)

Example

class Lot(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    name = db.Column(db.String(80), nullable=False)
    spots = db.relationship('Spot', backref='lot', lazy=True)

Simpleextends poora layout inherit karta hai, include chhota piece insert karta hai.

extends: child page base.html ka structure use karti hai, blocks override karti hai. Ek hi parent.
include: navbar.html / footer.html jahan chaho insert. Kai baar use ho sakta hai.

base.html:

{% block content %}{% endblock %}

home.html:
{% extends 'base.html' %}
{% block content %}<h1>Home</h1>{% endblock %}

{% include 'navbar.html' %}  → navbar har page pe

Fayda: header/footer ek jagah, change once — saari pages update. MAD1 mein almost har project use karta hai.

SimpleMAD1 mein usually session-based auth: login pe session['user_id'], har request pe verify.

Example

session['user_id'] = user.id
uid = session.get('user_id')
user = User.query.get(uid)

Viva tipSECRET_KEY set karo warna session insecure. logout pe session.clear().

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

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

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

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

SimpleSMTP = Simple Mail Transfer Protocol — email bhejne ka standard. Flask-Mail / smtplib se reminders/reports.

Example

from flask_mail import Message
msg = Message('Subject', recipients=[user.email])
msg.body = 'Hello'
mail.send(msg)

Viva tipViva mein MailHog/inbox dikhao. Port 587 TLS common; local pe MailHog 1025.

SimpleMutations sync diary entry. Actions async kaam phir diary.

Direct state mutate action se Vuex 4 discouraged. Devtools time-travel mutations.

Purpose of Actions: API, phir commit. Purpose of Mutations: state change one place.

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: action fetchVenues → commit setVenues. Mutation sirf array replace.

Simplestyle="color:red" ek element. Hard reuse high specificity. What is Inline CSS.

vs internal <style> vs external file.

Look: Bootstrap utility classes (margin m-3, flex, grid) ya khud CSS. Responsive = media query / Bootstrap breakpoints se mobile.

Vue scoped style leak nahi. :class binding. Examiner colour/button live change maange to DevTools nahi, source class dikhao.

CSS ≠ Bootstrap. Bootstrap CSS+JS framework. Inline style last resort.

Project example: Avoid inline except live tiny.

Project example: Avoid inline except live tiny.

SimpleOpaque request/token: andar ka structure client ko meaningful nahi — bas string id. Server pe map hota hai. JWT transparent claims dikhata hai.

Viva tipSession id opaque hota hai; JWT payload base64 se padh sakte ho (sign alag).

SimplePehle 1-line definition, phir apne MAD1 project mein file dikhao, phir chhota example.

Suggested flow1) Concept kya hai?
2) Mere code mein kahan?
3) Example / demo
4) Edge case

Example

# related file: models.py / routes / template
# formula: request → check/auth → DB → render/redirect

Viva tipExact line yaad nahi to honestly related part dikhao. Bluff mat karo.

SimpleInt column mein string daalne pe SQLAlchemy/DB type error ya Integrity/StatementError. Empty table pe bhi same validation fail — row count matter nahi.

Example

# SQLite may coerce sometimes; Postgres: invalid input syntax for integer
Spot(status='free', lot_id='abc')  # lot_id int → error

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

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.

Simplejson.dumps Python object ko JSON string banata hai, jsonify Flask Response banata hai (header ke saath).

json.dumps({'ok': True}) → '{"ok": true}' (sirf string)

jsonify(ok=True) → HTTP response, Content-Type: application/json

API route mein jsonify use karo:
@app.route('/api/users')
def users():
    return jsonify([{'id': u.id, 'name': u.name} for u in User.query.all()])

json.dumps se return karoge to browser ise text samajh sakta hai, JSON nahi.

SimpleCelery = background naukri. HTTP request ko 10 second email bhejne ke liye mat rokna.

Distributed task queue: aap function ko abhi nahi, worker process mein later/retry/schedule pe chalaate ho.

MAD2 typical jobs: daily reminder mail, monthly HTML report, user-triggered CSV export.

Web request 200ms hona chahiye. 10,000 emails request thread mein = timeout. Worker alag CPU pe kaam kare.

Redis broker chahiye. Beat alag process schedule ke liye.

Example

@celery.task
def daily_reminder():
    for u in User.query.filter_by(active=True):
        send_mail(u.email, 'Book something today!')

Project example: User Export click → 202 Accepted. Worker CSV + email. Daily 6pm Beat reminder.

Viva tipWorker + Redis bina Beat ke user-triggered chalega. Scheduled jobs ke liye Beat bhi chahiye.

SimpleCascade parent delete pe children pe kya ho: delete-orphan related rows hata deta hai.

Example

db.relationship('Spot', cascade='all, delete-orphan')

Viva tipParking lot delete → uske spots/bookings policy clear bolo.

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

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

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

Suggested flow1) Classes list karo
2) Har table ka kaam 1 line
3) Relationships (1-M / M-M)
4) Constraints (unique, nullable)

Example

class Lot(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    name = db.Column(db.String(80), nullable=False)
    spots = db.relationship('Spot', backref='lot', lazy=True)

SimplePehle 1-line definition, phir apne MAD1 project mein file dikhao, phir chhota example.

Suggested flow1) Concept kya hai?
2) Mere code mein kahan?
3) Example / demo
4) Edge case

Example

# related file: models.py / routes / template
# formula: request → check/auth → DB → render/redirect

Viva tipExact line yaad nahi to honestly related part dikhao. Bluff mat karo.

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

Example

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

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

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

SimpleMVC: Model=data (SQLAlchemy), View=Jinja HTML, Controller=Flask routes/business logic.

Flask loosely MVC follow karta hai — routes controllers, templates views, models.py models.

SimpleBootstrap CSS framework — grid, navbar, buttons jaldi. CDN ya downloaded files.

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.

SimpleMAD1 mein usually session-based auth: login pe session['user_id'], har request pe verify.

Example

session['user_id'] = user.id
uid = session.get('user_id')
user = User.query.get(uid)

Viva tipSECRET_KEY set karo warna session insecure. logout pe session.clear().

SimpleAPI = Application Programming Interface — do systems predefined rules se baat karti hain. REST API HTTP + JSON use karti hai.

Controller/route HTML bhi return kar sakta hai. REST API generally JSON return karti hai, frontend alag ho (Vue/Postman).

Example

@app.route('/api/users/<int:id>')
def get_user(id):
    u = User.query.get_or_404(id)
    return jsonify(id=u.id, name=u.name)

MAD1 HTML apps mein 'API' kabhi-kabhi routes ko hi keh dete hain. Agar Vue nahi to bolo: server-rendered Flask, JSON APIs optional.
Boolean return: technically jsonify(True) ho sakta hai, lekin meaningful JSON object better. Flask view None return kare to error.
Test: Postman se GET/POST.
Parsing: request.get_json() body se, request.args query se.

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

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

SimpleAuthentication: tu kaun hai? (login). Authorization: tujhe permission hai? (role check).

Example

# auth
if check_password_hash(user.password, pwd):
    session['user_id'] = user.id

# authz
if user.role != 'admin':
    abort(403)

SimplePehle 1-line definition, phir apne MAD1 project mein file dikhao, phir chhota example.

Suggested flow1) Concept kya hai?
2) Mere code mein kahan?
3) Example / demo
4) Edge case

Example

# related file: models.py / routes / template
# formula: request → check/auth → DB → render/redirect

Viva tipExact line yaad nahi to honestly related part dikhao. Bluff mat karo.

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.