MAD2-Viva2

 What are Vue life cycles ? Which all you used?

In Vue.js, lifecycle hooks are functions that allow developers to run code at specific stages of a Vue component's lifecycle. These hooks provide control over how the component is initialized, updated, or destroyed.

Lifecycle Phases

1. Creation Phase:
   • Before the component is added to the DOM.
2. Mounting Phase:
   • When the component is inserted into the DOM.
3. Updating Phase:
   • When the component's reactive data changes, triggering re-rendering.
4. Destruction Phase:
• When the component is removed from the DOM.

Common Lifecycle Hooks

Below is a categorized list of hooks with their purpose:

1. Creation Phase

• beforeCreate():

  • Called after the component instance is initialized but before data observation and events setup.
  • Rarely used.

• created():

• Called after the component is initialized, reactive data and events are set up, but the DOM is not yet available.
• Useful for fetching data or initializing logic.

2. Mounting Phase

• beforeMount():

  • Called before the component is added to the DOM.

• mounted():

• Called after the component is mounted in the DOM.
• Ideal for interacting with the DOM or initializing third-party libraries.

3. Updating Phase

• beforeUpdate():

  • Called before the DOM is updated when reactive data changes.

• updated():

• Called after the DOM is updated.
• Avoid heavy computations here as they might cause re-rendering.

4. Destruction Phase

• beforeUnmount() (formerly beforeDestroy in Vue 2):

  • Called right before the component is removed from the DOM.

• unmounted() (formerly destroyed in Vue 2):

• Called after the component is completely removed.
• Ideal for cleanup tasks (e.g., removing event listeners or stopping intervals).

created() for fetching data.

mounted() for DOM-related tasks.

beforeUnmount() for cleanup operations.

Explain how watch works in vue ?Where You used?

watch observes changes in reactive properties or props and triggers a handler.The watch option in Vue is used to monitor changes in a specific reactive property or data variable and execute code when that property changes.

watch: {

  propertyName(newValue, oldValue) { 

  // Code to run when propertyName changes 

 }

 }

propertyName: The reactive property or data variable being watched.

newValue: The updated value of the watched property.

oldValue: The previous value of the watched property.

When to Use watch

1. When you want to respond to changes in reactive properties or props.
2. When side effects (like API calls, debouncing, etc.) need to be triggered upon data updates.
3. When monitoring deeply nested objects or arrays for changes.
   
   

Explain the models.py file ?

The  file models.py defines the data models and schema for your database

Centralized location for defining data models.

Defines the structure of database tables, their fields, relationships, and behaviors.

With SQLAlchemy (commonly used with Flask), models are Python classes that correspond to database tables.

Each class attribute represents a column in the table.
models.py separates the database logic from other application logic, making the code modular and reusable.

The models.py file is the backbone of your Flask application's data layer. It defines how data is structured, stored, and related in your database. By using SQLAlchemy, you can work with databases in an intuitive, Pythonic way while taking advantage of powerful ORM features like relationships, constraints, and migrations.
Explain the Database Schema?
from flask_sqlalchemy import SQLAlchemy
from flask_login import UserMixin

SQLAlchemy: ORM to define and interact with database tables.

UserMixin: Provides methods for user authentication when using Flask-Login.

Creating the Database Instance

db = SQLAlchemy()

• This db instance is used to define and manage database models.
  Models are Python classes that inherit from db.Model. Each model corresponds to a table in the database.
• db is the database object 
• The schema defines tables and their relationships in your database. Each table has fields, and foreign keys define relationships between tables.

Key Components in the Example

1. __tablename__:

   • Specifies the name of the database table explicitly. If omitted, the table name defaults to the class name in lowercase.

2. db.Column:

   • Defines a column in the table.
     • db.Integer: Integer type.
     • db.String: String type with a maximum length.
     • db.Text: Long text type.
     • nullable=False: Field is required.
     • unique=True: Ensures unique values.

3. Primary Key:

   • primary_key=True: Uniquely identifies each record in the table.

4. Relationships:

   • db.ForeignKey: Links a column to another table.
   • db.relationship: Establishes a connection between models.

5. Default Values:

   • default: Sets a default value for a column.

6. Methods:

   • __repr__: Defines how an instance of the class is represented, useful for debugging.

(Q)Explain your application’s API?

The API exposes endpoints for CRUD operations (Create, Read, Update, Delete) on resources

API=Application Programming Interface

1. General API Design

• Framework: Flask with flask-restful for building RESTful APIs.
• Database: SQLite for data storage, with SQLAlchemy for ORM.
• Authentication: APIs are secured using authentication (tokens) and role-based access control.
• Response Format: APIs return responses in JSON format.

User Management

• Registration

• POST /api/register
  Allows new users to register 

• Login

• POST /api/login
  Authenticates the user and returns a token.

• Get User Details

• GET /api/users/<id>
  Fetches details of a specific user.

Technologies Supporting the API

• Flask-RESTful: Simplifies API creation.
• JWT Authentication: Secures endpoints.
• SQLAlchemy: Manages data storage and retrieval.
• Flask-Caching with Redis: Improves performance for repetitive API calls (e.g., fetching services).

API Features

• Authentication and Authorization

• Role-based access using decorators like @auth_required, @roles_required.
• Pagination and Filtering, validation

(Q)Explain your app's frontend and backend structure?

The  Application (V2) has a structured frontend and backend designed to ensure scalability, modularity, and maintainability.

Frontend Structure

The frontend is built with Vue.js, a modern JavaScript framework for creating dynamic and interactive user interfaces.
Single-Page Application (SPA):

The app dynamically updates the content without full page reloads using Vue Router.

Components and views render  based on the route.

UI Frameworks:

• Bootstrap: Used for responsive design and styling.
  

  Components:

  • Reusable Vue.js components simplify UI management and reduce redundancy.

State Management:

• Vue's reactive data and props are used for passing and managing state locally.
• No global state management (e.g., Vuex) is used unless explicitly needed.

Routing:

• Vue Router manages navigation between views.
• Navigation guards restrict access based on user roles

Backend Structure

The backend is built using Flask, a lightweight and modular web framework, and is responsible for handling business logic, database management, and API communication.

RESTful APIs are created using Flask-RESTful.

SQLite is used for data storage.

SQLAlchemy ORM handles database interactions.

Authentication:

• (Token) is used for secure user authentication.
• Role-based access control is enforced with decorators like @roles_required and @auth_required.
• Celery + Redis handles tasks like sending email notifications and generating monthly reports.
• Redis is used to cache frequently accessed data (e.g., service listings).
  
  

Explain the Js frame works?

JavaScript frameworks are pre-written JavaScript libraries that provide developers with tools and features to build modern, scalable, and efficient web applications.

some popular JavaScript frameworks:

 1.React

Use Cases: Dynamic web apps, single-page applications (SPAs), and large-scale projects.

Is developed by face book, state Management, Virtual Dom, Component based architecture , Flexibility

2.Angular

Is a frame work developed by Google

Use Cases: Enterprise-level applications, progressive web apps (PWAs), and dynamic SPAs.

Two-way data binding, Built in solutions for routing 

3.Vue.js

Is a JS frame work developed by Evan you

Use Cases: Lightweight projects, dynamic interfaces, and large SPAs.

Template Syntax, Vue CLI, Reactive Data Binding, Can be used for small widgets or full-fledged SPAs.

4.Svelte

Use Cases: High-performance applications, PWAs, and projects where bundle size matters.

Compiler Based, No Virtual DOM

5.Next.js

Use Cases: SEO-friendly SPAs, blogs, e-commerce sites, and enterprise apps.

Server-Side Rendering (SSR), Static Site Generation (SSG),API Routes

Full Stack Support: Combines frontend and backend in a single framework.